椭圆 XAML 中的图像答案

【问题标题】：Image within an ellipse XAML椭圆 XAML 中的图像
【发布时间】：2016-02-15 05:51:16
【问题描述】：

我正在使用 VS2013、Windows 8.1 并正在开发一个 Windows 商店应用程序。

我正在创建一个简单的联系人 - 列表视图，它在椭圆内显示联系人详细信息以及联系人图像。当我单击列表视图项目时，我想在页面右侧显示联系方式。现在我面临的问题是，我无法将联系人图像调整到右侧窗格椭圆上的正确尺寸。我可以在我的列表视图中实现它，因为它是一个较小的椭圆。重要提示：我不希望图像看起来被拉伸/放大/缩小。它应该与它在列表视图中的显示完全相同。（对于列表视图，我使用了 Ellipse.Fill 和 Imagebrush，但椭圆的尺寸相对较小）

到目前为止我尝试了什么：

Ellipse.Fill 属性将图像绘制成一定大小，但图像看起来被拉伸了。
我尝试在椭圆内的图像标签中设置“拉伸”属性，但没有成功。
我尝试了 Image.clip，但没有“EllipseGeometry”选项，而只有 RectangleGeometry。
最后，我创建了一个具有透明中心的图像，并将此框架像蒙版一样放在联系人图像上。这在某些分辨率上效果很好。但是当一些其他分辨率时，从后端绑定的联系人图像超出了框架，尽管我设置了“MaxHeight”或“Height”属性。

我想以正确的方式做到这一点，因为我觉得添加图像蒙版可能不是实现这一目标的好方法。请帮忙！

我为 listview 尝试了这个，n 工作正常，但是右窗格的相同代码看起来被拉伸了（我尝试删除拉伸属性，或尝试其他选项，如 Stretch="None" /"Uniform" 等）

我已附上截图。

【问题讨论】：

` `
我为 listview 尝试了上面的代码，并且工作正常，但是右窗格的相同代码看起来被拉伸了（我尝试删除拉伸属性，或者尝试了其他选项，如 Stretch="None" /"Uniform "等)
现在我使用它作为掩码：
Create Circular Image Xaml的可能重复

标签： image xaml visual-studio-2013 windows-store-apps windows-8.1

【解决方案1】：

由于没有明确提及代码，您可以同时使用Ellipse 和Border。这是代码sn-p

<!--With Ellipse-->
<Ellipse Height="200"
         Width="200">
         <Ellipse.Fill>
             <ImageBrush Stretch="Uniform"
                         ImageSource="Assets/profile.png" />
         </Ellipse.Fill>
</Ellipse>


<!--With Border-->
<Border Height="200"
        Width="200"
        CornerRadius="150">
        <Border.Background>
            <ImageBrush Stretch="Uniform"
                        ImageSource="Assets/profile.png" />
        </Border.Background>
</Border>

这是结果

【讨论】：

【解决方案2】：

ImageBrush 中的“AlignmentX AlignmentY”属性解决了我的问题。

【讨论】：

【解决方案3】：

如果您的图像是纵向的，那么您可以像这样使用 ImageBrush 的 Stretch、AlignmentX、AlignmentY 属性来获得最佳预览效果

<Border CornerRadius="20" BorderThickness="1" BorderBrush="DarkGoldenrod">
        <Ellipse Width="40" Height="40">
            <Ellipse.Fill>
                <ImageBrush ImageSource="{Binding PractitionerPhoto}"  Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Top" />
            </Ellipse.Fill>
        </Ellipse>
    </Border>

【讨论】：