如何在 xaml 中剪辑图像并限制图像宽度？（温特）答案

【问题标题】：How do I clip an image in xaml and limit the image width? (Winrt)如何在 xaml 中剪辑图像并限制图像宽度？（温特）
【发布时间】：2013-02-16 15:24:15
【问题描述】：

我有一个可以通过 api 设置的图像，我希望图像在其宽度超过 250 像素时被剪裁。那行得通。但是，图像与一些文本块一起位于堆栈面板中。即使我们看到的图像被裁剪，实际图像宽度仍然超过 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 像素的图像可见。

有什么建议吗？

【问题讨论】：

你解决过这个问题吗？我也有同样的问题。
是的，我放弃了剪辑并使用了滚动查看器。如果您禁用滚动，那么它会剪切图像并保留您为滚动查看器设置的任何尺寸。我实际上让滚动不可见，以防有人试图滚动他们可以滚动的图像。我粘贴了下面的代码。

标签： c# .net xaml windows-runtime

【解决方案1】：

看来我采取了错误的方法。我能够使用禁用滚动的滚动查看器来实现我想要的。

<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>

【讨论】：

【解决方案2】：

您可以只设置边框的宽度和高度，并将 Image Stretch 设置为 None，避免使用沉重的 ScrollViewer。

【讨论】：

这对我不起作用，因为图像的高度不能保证为 50 像素。这是我需要的高度。所以必须根据高度均匀地拉伸图像。将stretch设置为none只会剪裁图像的高度和宽度。
好吧，但是你仍然可以将边框剪裁到它的边界，让里面的图像比边框大。

【解决方案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 属性控制图像定位。

【讨论】：