椭圆内的图像 XAML

Question

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

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

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

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

我想以正确的方式进行，因为我觉得添加图像蒙版可能不是实现此目的的好方法。请帮忙！

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

我已附上截图。

Answer 1

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

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

这是结果

Answer 2

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

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

椭圆内的图像 XAML

Image within an ellipse XAML

xaml

image

windows-store-apps

visual-studio-2013

windows-8.1