如何在xaml中裁剪图像并限制图像宽度？ （Winrt）

Question

我有一张图片可以通过api设置，当它的宽度大于250像素时，我希望对其进行裁剪。这个功能已经实现了。然而，该图片与一些文本块一起放在stackpanel中。即使我们看到的图像被裁剪了，实际的图像宽度仍然超过250像素。

以下是xaml代码:

<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <Button Foreground="Black" Content="Button" x:Name="BackButton" Style="{StaticResource BackButtonStyle}" Visibility="Collapsed" VerticalAlignment="Center" Margin="25,0,0,0"  Click="BackButtonClick" />
                        <Border>
                            <Image x:Name="LogoImage" Source="Images/Logo.png" Height="50"  Margin="15 0 0 0" Stretch="Uniform" VerticalAlignment="Center">
                                <Image.Clip>
                                    <RectangleGeometry Rect="0 0 50 250"></RectangleGeometry>
                                </Image.Clip>
                            </Image>

                        </Border>
                        <TextBlock Foreground="Black" x:Name="NameTextbox" Margin="15, 0, 0, 0" VerticalAlignment="Center" FontSize="26"></TextBlock>

                        <TextBlock VerticalAlignment="Bottom" x:Name="ErrorMessage" Text="Unable to reach server" Foreground="Red" Margin="15 0 0 0"  FontSize="26" FontWeight="Bold" Visibility="Collapsed"></TextBlock>
                    </StackPanel>

假设图片的宽度为2000像素，那么图片后面的文本块将会被推出屏幕外，但只有250像素的图片会被显示。

有什么建议吗？

- Smeegs

---

你修复过这个问题吗？我也遇到了同样的问题。 - Carlo

是的，我放弃了剪辑并使用了一个滚动视图器。如果禁用滚动，则会剪辑图像并保持滚动视图器设置的任何尺寸。实际上，我将滚动设置为不可见，以防有人尝试滚动图像。我在下面粘贴了代码。 - Smeegs

Answer 1

看起来我采取的方法不对。我通过使用禁用滚动的scrollviewer实现了我想要的效果。

<ScrollViewer MaxWidth="350" HorizontalScrollBarVisibility="Hidden" HorizontalScrollMode="Disabled">
     <Image x:Name="LogoImage" HorizontalAlignment="Left" Source="Images/Logo.png" Height="50" Margin="15 0 0 0" Stretch="Uniform" VerticalAlignment="Center">
     </Image>
</ScrollViewer>

- Smeegs

Answer 2

您可以设置边框的宽度和高度，并将图像拉伸设置为无，避免使用笨重的ScrollViewer。

- Filip Skakun

---

这对我不起作用，因为图像的高度不是保证的50像素。这是我需要的高度。因此，图像必须根据高度均匀地拉伸。将拉伸设置为无会剪裁图像的高度和宽度。 - Smeegs

好的，但是您仍然可以将边框剪裁到其边界并让其中的图像比边框更大。 - Filip Skakun

Answer 3

我尝试了@FilipSkakun的解答，它非常有效，只需做出一个调整：我把Image.Stretch改成了UniformToFill。

我在这里发布我的代码，希望能帮到有需要的人：

<Border Width="30" Height="30">
    <Border.Clip>
        <EllipseGeometry RadiusX="15" RadiusY="15" Center="15,15" />
    </Border.Clip>
    <Image Source="..." VerticalAlignment="Center" MaxWidth="30" Stretch="UniformToFill" />
</Border>

此外，我可以通过 VerticalAlignment 属性来控制图像的定位。

- Dinei