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

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>

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

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

Answer 1

讽刺的是，您在 XAML 中使用了 DockPanel 来替换帖子中的图像。 :) 我认为这正是您想要的 - 一个 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 的值并返回一个新的 Thickness使用 ImageX 作为左边距的 对象。

例如

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 应用于图像，并将平移和旋转变换应用于堆栈面板。问题解决了:-)