Question

我正在使用VS2013，Windows 8.1并开发Windows应用商店。

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

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

Ellipse.Fill属性，可将图像绘制为大小，但图像看起来很拉伸。
我尝试过设置＆＃34; Stretch＆＃34; ellipse中图像标记内的属性，但不起作用。
我试过Image.clip，但我没有＆＃34; EllipseGeometry＆＃34;选项，而只是RectangleGeometry。
最后，我创建了一个具有透明中心的图像，并将此框架放在接触图像上，就像一个遮罩一样。这适用于某些决议。但是当其他一些分辨率，从后端绑定的联系人图像超出了框架，虽然我设置了＃Max; MaxHeight＆＃34;或者＆＃34;身高＆＃34;属性。

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

我为listview尝试了这个，n工作正常，但右窗格的相同代码看起来很拉伸（我尝试删除拉伸attirbute，或尝试其他选项，如Stretch =＆＃34;无＆＃34; /＆＃34;制服＆＃34;等）

我附上了截图。

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

属性＆＃34; AlignmentX AlignmentY＆＃34;在ImageBrush中解决了我的问题。

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

3 个答案: