让网格中的一行确定网格宽度，其他行绘制外部限幅

Question

我有一个在画布上有固定位置的网格。网格的边框包含可能大小不同的图像。

现在我在图像下方添加一个TextBlock，其中包含可能长度不同的文本。要求是无论文本的长度如何，图标都不应在画布上移动。

<Canvas>
  <Grid Canvas.Left="50" Canvas.Top="100">  
     <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
     </Grid.RowDefinitions>

     <Border BorderBrush="Black" BorderThickness="1" Background="Gray" 
             Width="{Binding RelativeSource={RelativeSource Self}, Path=Height}"
             HorizontalAlignment="Center">
         <Image Source="{Binding TheIcon}" 
                Width="{Binding IconSize}" Height="{Binding IconSize}" 
                Margin="5" />
     </Border>

     <TextBlock Grid.Row="1"
                Text="A text that is wider than the icon" 
                TextAlignment="Center"/>
   </Grid>
</Canvas>

问题是，当文本比图标宽时，网格的宽度会增加，图标会开始向右滑动。这可以通过在边框上设置Horizo​​ntalAlignment =“Left”来解决，但我们希望文本位于图标下方，因为它看起来好多了。

我已经搞乱了ClipToBounds =“False”以及构建对象的不同方法，但我还没有发现任何可行的方法。有人分享了一些xaml-magic？

澄清

图例
无文字 - 原始状态
不受欢迎的状态 - 当我向网格添加一行时，就会出现这种情况。图像水平移动远离指定的坐标
渴望状态 - 我希望将图标保持在适当位置，同时将文本置于其中心

Answer 1

您可以使用转换器强制此行为在TextBlock上设置-ve左边距并在图像上设置左对齐。

喜欢的东西：

<Window.Resources>
  <local:MarginConverter x:Key="MarginConverter" />
</Window.Resources>
<Canvas>
  <Grid Canvas.Left="50"
        Canvas.Top="100">
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Border x:Name="image"
            Width="{Binding RelativeSource={RelativeSource Self},
                            Path=Height}"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Background="Gray"
            BorderBrush="Black"
            BorderThickness="1">
      <Image Width="{Binding IconSize}"
              Height="{Binding IconSize}"
              Margin="5"
              Source="{Binding TheIcon}" />
    </Border>
    <TextBlock Grid.Row="1"
                Text="Wider than icon Text">
      <TextBlock.Margin>
        <MultiBinding Converter="{StaticResource MarginConverter}"
                      Mode="OneWay">
          <Binding Path="ActualWidth"
                    RelativeSource="{RelativeSource Self}" />
          <Binding ElementName="image"
                    Path="ActualWidth" />
        </MultiBinding>
      </TextBlock.Margin>
    </TextBlock>
  </Grid>
</Canvas>

和MarginConverter.cs

public class MarginConverter : IMultiValueConverter {
  public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) {
    double textWidth;
    Double.TryParse(values[0].ToString(), out textWidth);
    double imageWidth;
    Double.TryParse(values[1].ToString(), out imageWidth);
    if (Equals(textWidth, 0.0) || Equals(imageWidth, 0.0))
      return new Thickness();
    return new Thickness {Left = imageWidth / 2 - textWidth / 2};
  }

  public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) {
    throw new NotImplementedException();
  }
}

可以生成这个（我只是将图像元素设置为不同的大小，因为我没有任何方便的图像。图像将从50,50开始。用snoop检查）：

和