Question

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

我尝试过同时使用StackPanel和Grid，但两次文本框/选项卡都会按比例放大。

要么是Grid还是StackPanel，如果是这样的话，如何在第一个孩子的大小发生变化时强制执行文本框/标签（即第二个孩子）的大小？

谢谢！

回应Lars：

 <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>

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

我尝试添加图片以使其更清晰但作为新用户我不能，抱歉！

Answer 1

具有讽刺意味的是，您在XAML替换中使用DockPanel替换帖子中的图像。 :)我想想这就是你想要的东西 - 一个顶部可以扩展其内容的DockPanel，而下部则没有。

关键是最后将图像容器添加到DockPanel，以便自动给它剩下的屏幕空间。并将其Dock属性设置为“Top”。

e.g。（我没有测试过这个，BTW。我只是觉得这比我之前发布的更好一些）

<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的值并返回使用{{Thickness的新ImageX对象1}}作为左边距。

e.g。

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
}

Answer 2

再次在这里：LayoutTransform是一个非常简单的解决方案。我将主图像和标签放入堆叠面板。然后我将缩放变换作为LayoutTransform而不是RenderTransform应用于图像，并将Translate和Rotate变换应用于stackpanel。问题解决了： - ）

独立调整Grid或Stackpanel中的子项大小

2 个答案: