WPF中如何将图片适应网格单元大小

Question

我有一个包含两行两列的网格。

在 0,0 的位置我放置了一个 TextBlock，其中的文本因本地化而异。在 1,0 的位置我放置了一张图片。

以下是 XAML 示例：

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
        <TextBlock x:Name="Tb" Grid.Row="0" Grid.Column="0">Foobar</TextBlock>
        <Image Source="Foobar.jpg" Grid.Row="1" Grid.Column="0" />
    </Grid>
</Window>

元素源图像的大小未知。

我需要网格列#0的宽度与TextBlock文本一样宽。 图像应与列的宽度相同，并且其高度应正确设置以保持纵横比例。

我尝试将图像包装在NoSizeDecorator中，但这样做图像根本不会出现，除非我在XAML中指定图像的绝对高度和宽度，但我无法这样做，因为我需要图像与文本的宽度相同。

我该怎么办？

- ale

Answer 1

您的代码应该已经做到了您想要的，只需要添加Image.Width属性：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="Tb" Grid.Row="0" Grid.Column="0">Foobar</TextBlock>
    <Image Source="Foobar.jpg" Grid.Row="1" Grid.Column="0" 
        Width="{Binding ActualWidth, ElementName=Tb}" />
</Grid>

我们在这里基本上是将Image.Width属性设置为TextBlock.ActualWidth，以确保Image不会变得太大。没有必要使用昂贵的ViewBox控件来实现此目的。

- Sheridan

---

+1，但请注意Stretch="Uniform"是默认值，因此无需显式设置。 - Clemens

感谢@Clemens（再次）……我已经相应地更新了我的答案。 - Sheridan

谢谢，实际上我已经尝试过使用Width <- Tb.ActualWidth绑定，但可能搞错了其他属性，无法让其正常工作...现在它可以正常工作了，谢谢！ - ale

Answer 2

这是如何在不使用网格的情况下实现此目标的方法。由于我的按钮有一个Padding，我创建了一个Border并绑定到Border的ActualWidth。

<Button Width="40" Height="40" Padding="3">
   <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
      <Image Source="{StaticResource DoubleArrows}" 
             Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Border}}"/>
   </Border>
</Button>

- CBFT