如何在 XAML 中将图像剪切为椭圆 [英] How to clip image to ellipse in XAML

问题描述

在本文中:https://msdn.microsoft.com/en-us/library/windows/apps/jj206957%28v=vs.105%29.aspx 显示了一种将图像裁剪为椭圆的方法，但是当我将其复制到我的项目中，我收到一个错误，提示我不能使用椭圆几何，因为预期类型是RectangleGeometry".我正在构建一个 Windows Phone 8 应用.

In this article: https://msdn.microsoft.com/en-us/library/windows/apps/jj206957%28v=vs.105%29.aspx there is shown a method to clip an image to ellipse, but when I copy that to my project I get an error sugesting that I cannot use ellipse geometry because expected type is "RectangleGeometry". I am building a Windows Phone 8 app.

文章有问题还是我遗漏了什么?

Is there something wrong with the article or am I missing something?

我的 xaml 代码示例:

My xaml code sample:

<Border BorderThickness="1" BorderBrush="AliceBlue">
        <Grid Margin="{StaticResource GridMargin}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="2*"></ColumnDefinition>
                <ColumnDefinition Width="1.5*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Stretch="Uniform" Source="{Binding Photo}">
                <Image.Clip>
                    <EllipseGeometry RadiusX="100" RadiusY="100" Center="225,175"/>
                </Image.Clip>
            </Image>
            <Grid Grid.Column="1" Margin="{StaticResource SmallGridMargin}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1.5*"></RowDefinition>
                    <RowDefinition Height="2*"></RowDefinition>
                    <RowDefinition Height="1*"></RowDefinition>
                </Grid.RowDefinitions>
                <Viewbox Stretch="Uniform" Grid.Row="0">
                    <TextBlock Text="{Binding BookAuthor}"></TextBlock>
                </Viewbox>
                <Viewbox Stretch="Uniform" Grid.Row="1">
                    <TextBlock Text="{Binding BookTitle}"></TextBlock>
                </Viewbox>
                <Viewbox Stretch="Uniform" Grid.Row="2">
                    <TextBlock Text="{Binding Id}"></TextBlock>
                </Viewbox>
            </Grid>

推荐答案

MSDN 说:

Windows 运行时 API 中 UIElement.Clip 的裁剪几何图形必须是 RectangleGeometry.您不能指定非矩形几何图形，这在 Microsoft Silverlight 等某些 XAML 框架中是允许的.

The clipping geometry for UIElement.Clip in the Windows Runtime API must be a RectangleGeometry. You can't specify a non-rectangular geometry, as is permitted in some XAML frameworks like Microsoft Silverlight.

但是您可以使用 Ellipse 和 ImageBrush 元素作为填充画笔获得相同的结果:

But you can achieve the same result using an Ellipse and ImageBrush element as Fill brush:

<Ellipse Width="100" Height="100">
    <Ellipse.Fill>
       <ImageBrush ImageSource="{Binding Photo}"/>
    </Ellipse.Fill>
</Ellipse>

这篇关于如何在 XAML 中将图像剪切为椭圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！