wpf 图像剪辑椭圆 4:3答案

【问题标题】：wpf image clip ellipse 4:3wpf 图像剪辑椭圆 4:3
【发布时间】：2016-08-29 15:43:35
【问题描述】：

我需要一些指导。我正在尝试创建一个椭圆形的图像。使用CachedImage查看图像

我当前的代码：

 <Grid Width="100" Height="100">
        <cachedImage:Image Width="100" Height="100" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"  
                           ImageUrl="https://i.scdn.co/image/efe952d45a24a33360e98b4b42d313576e29cece" >
            <Image.Clip>
                <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
            </Image.Clip>
        </cachedImage:Image>
    </Grid>

如果图像是 4:3 格式会出现问题

这是我的

我需要这个

非常感谢。

【问题讨论】：

来自 CachedImage 主页：“如果我们使用原生 WPF Image 控件通过 HTTP 协议显示图像（通过将 Source 设置为 http url），则每隔加载控件的时间。”这不是真的。当从 URI 加载图像时，WPF 会缓存图像。根本不需要使用这个控件。请改用标准的 WPF Image 控件。
您可能想阅读对original StackOverflow question 的最受好评的答案，该答案导致 GitHub 上的控件。今天它已经过时了。

标签： c# wpf image xaml

【解决方案1】：

设置图像控件的Width 和Height 并同时设置Stretch=UniformToFill 将不可避免地裁剪部分图像，除非其纵横比与Width 和Height 的比例完全匹配。

但是，您可以设置Stretch=Uniform 并将图像控件放在另一个更大的网格中，该网格在外部网格中水平居中。您必须将Clip 应用于外部网格。

<Grid Width="100" Height="100">
    <Grid Width="200" HorizontalAlignment="Center">
        <Image Stretch="Uniform"
               Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"/>
    </Grid>
    <Grid.Clip>
        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
    </Grid.Clip>
</Grid>

【讨论】：

非常感谢。它有帮助