Question

使用XAML和UWP如何在Image中垂直和水平居中Viewbox？给定可变尺寸的图像，我需要将其缩放到容器的宽度，同时将其裁剪为特定的宽高比。

我尝试将图像的宽度和高度设置为所需的宽高比，并将其包含在Viewbox中（如下所示），除了图像对齐到顶部/左侧（不居中）之外，所有这一半都保持一半但没有其他人裁剪。

<Viewbox>
    <Image Source="{Binding ImageUrl}"
           Width="16"
           Height="9"
           Stretch="UniformToFill"
           HorizontalAlignment="Center"
           VerticalAlignment="Center"/>
</Viewbox>

有什么建议吗？

Answer 1

将图像置于居中位置并使用Stretch="UniformToFill"放入定义宽高比的容器中。

<Viewbox>
    <Grid Width="16" Height="9">
        <Image Source="{Binding Path=ImageUrl}" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</Viewbox>

Answer 2

我终于找到了解决方案。感谢那些试图帮助解决这个问题的人。

关键是在图像上设置UseLayoutRounding="False"并将其放在容器中，如下所示。

<Viewbox>
    <Grid Width="{Binding AspectWidth}"
          Height="{Binding AspectHeight}">
        <Image Source="{Binding ImageSource}" 
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               UseLayoutRounding="False"
               Stretch="UniformToFill"/>
    </Grid>
</Viewbox>

您也可以选择使用Border而不是Grid作为容器。

在视图框中居中图像

2 个答案: