Question

我正在尝试将图片的Width绑定到其ActualHeight（高度由布局确定，我希望它是正方形 - 如果有更好的方法，我会喜欢听到）。

这是我的XAML：

<Grid Grid.Row="1" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="auto"/>
    <ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image x:Name="favImage1" Source="{Binding Controller.FailStorage.FailRoamingStorage.Favorites[0].ImageUri}" Grid.Column="0" Grid.Row="0" Style="{StaticResource FavoriteImageStyle}" Width="{Binding ActualHeight, ElementName=favImage1, Mode=OneWay}"/>
</Grid>

样式定义如下：

    <Style x:Key="FavoriteImageStyle" TargetType="Image">
        <Setter Property="Stretch" Value="UniformToFill"/>
        <Setter Property="Margin" Value="0,0,12,12"/>
        <Setter Property="VerticalAlignment" Value="Stretch"></Setter>
    </Style>

现在，这部分工作 - 在向集合添加项目后导航回页面似乎有效。

但是，任何加载或后续导航到页面都会导致图像无法显示。

有趣的是，加载后，图像的ActualWidth不是ActualHeight。它少了。而网格的宽度更小......这简直就是奇怪......

favImage1.ActualWidth

185.13514709472656

favImage1.ActualHeight

274.0

（（FrameworkElement的）favImage1.Parent）.ActualWidth

138.0

这样做的正确方法是什么？

Answer 1

如果我理解正确，您需要确保您的图像保持正方形。

我认为这不是在xaml中操纵图像的正确方法。我宁愿将图片包装在Border中，并将Border的尺寸设置为修复内容，然后将图片Stretch属性更改为UniformToFill：

<Border Width="110" Height="110">
    <Image Source="my.jpg" Stretch="UniformToFill" />
</Border>

另一种选择是使用ViewBox来包装图像。在这里，您可以看到Stretch属性的不同值的效果：

ViewBox.Stretch Property

将宽度绑定到ActualHeight - 仅部分工作

1 个答案: