在Grid或Stackpanel中独立调整儿童大小

我想要在触摸应用程序中的控件中显示图像。除了图像之外，还有一个文本框显示在其下方，作为选项卡，停靠在图像的左下角。该选项卡的宽度比图像的宽度低。用户可以调整大小，移动和旋转图像，但我希望文本框选项卡的大小保持不变，并且与图像的相对位置相同。在Grid或Stackpanel中独立调整儿童大小

我同时使用一个StackPanel和电网尝试过，但两次文本框/标签规模的扩大，以及图像。

要么是一个Grid或StackPanel的路要走，如果是这样，我怎么能强制文本框/选项卡（即第二个孩子）的大小随着第一个孩子的大小改变？

谢谢！

在阶跃响应拉尔斯：

<Grid Name="mygrid" Background="Red" Width="320" Height="300"> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="255"/> 
     <RowDefinition MaxHeight="40" /> 
    </Grid.RowDefinitions> 

    <!--Ist child--> 
    <Canvas Name="maincanvas" Background="DarkKhaki" Width="300" Height="180" Grid.Row="0"> 
     <!--<Image goes in here>--> 
    </Canvas> 

    <!--2nd child--> 
    <DockPanel Name="dockpanel" Grid.Row="1" Background="DarkKhaki" MaxWidth="200" HorizontalAlignment="Left"> 
     <TextBlock Name="textblock" TextWrapping="Wrap" > 
      some text here 
     </TextBlock> 
    </DockPanel> 
</Grid>

我想要做的就是让用户拖动和调整图片的大小（第一个孩子），同时保持TextBlock的大小和相对位置（第二个孩子）。所以效果是固定在图像左下角的选项卡，因为图像可以动态调整大小。

我试图添加图像来使这个更清晰，但作为一个新用户，我不能，对不起！

来源

2011-06-05 Will

这将帮助，如果你会显示一些简单的XAML来证明你的观点 – 2011-06-05 13:51:29

这还没有真正足够的工作，你打算如何申请转换？或者你想使用一些混合行为？ – 2011-06-05 14:25:27

在我使用矩阵变换的瞬间产生根据触摸事件： 'matrix.ScaleAt（e.DeltaManipulation.Scale.X，e.DeltaManipulation.Scale.Y，centre.X，centre.Y）; i。RenderTransform = new MatrixTransform（matrix）;' – Will 2011-06-05 14:29:14

讽刺的是，你使用的DockPanel中在你的XAML替换为您的文章的图像。 :)我认为这真的是你想在这里 - 一个DockPanel的顶端部分可以缩放它的内容，而较低的部分不会。

的关键是将图像容器添加到DockPanel中最后的，因此它会自动给定的屏幕房地产的其余部分。并将其Dock属性设置为“Top”。

例如（我没有测试过这一点，顺便说一句，我只是在想，这会比我早贴好一点）

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

    <Page.Resources> 
    <!-- put LeftMarginConverter here --> 
    </Page.Resources> 

    <DockPanel> 
    <TabControl DockPanel.Dock="Bottom" Margin="{Binding ImageX, Converter={StaticResource LeftMarginConverter}}"> 
     <TabItem Header="Some text here" /> 
    </TabControl> 
    <Canvas DockPanel.Dock="Top"> 
     <Image Canvas.Left="{Binding ImageX}"> 
     <!-- image goes here --> 
     </Image> 
    </Canvas> 
    </DockPanel> 
</Page>

所以这里的想法是，在画布上的图像位置是数据绑定到一个代码隐藏的属性。同样，TabControl的Margin属性是数据绑定到这个相同的属性。但是，为了使用它，你需要写代码的IValueConverter后面，该转换器将采取的ImageX的值，并返回一个使用ImageX作为其左缘新Thickness对象。

例如

public class LeftMarginConverter : IValueConverter 
{ 
    #region IValueConverter Members 

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     int left_margin = object as int; 
     return new Thickness(left_margin,0,0,0); 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     // we aren't ever going to need to convert back for this formatter! 
     return null; 
    } 

    #endregion 
}

来源

2011-06-05 14:26:11 Dave

请注意指定文本的相对位置应该保持，我认为这太静态了，不符合提问者的想法。 – 2011-06-05 14:29:28

@ H.B。谢谢，所以我想他是说，如果用户在Canvas中将图像从左向右移动，那么标签的位置需要遵循它？ – Dave 2011-06-05 14:43:48

是的，我认为它应该是一个跟随形象的标签。 – 2011-06-05 14:45:58

这里又一次：LayoutTransform是一个简单得多的解决方案。我把主图像和标签放入一个堆栈面板。然后，我将比例转换作为LayoutTransform而不是RenderTransform应用于图像，并将Translate和Rotate转换应用于堆栈面板。问题解决了:-)

来源

2011-06-24 16:40:37 user814425

在Grid或Stackpanel中独立调整儿童大小

回答

相关问题