How to clip image to ellipse in XAML

Question

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?

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>

That's weird, also [here](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.clip.aspx) explains that "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." — Mehrzad Chehraz, Apr 24 '15 at 06:57
It's a pity then, clipping to circles has gotten kind of popular lately. :( — Emilia Tyl, Apr 24 '15 at 07:08
You can use the `Image.OpacityMask` (as described in the article) to give the same desired effect. Just make the GradientStop very close to each other (0.01 away). — Barnstokkr, Apr 24 '15 at 08:04

Mehrzad Chehraz · Accepted Answer · 2015-04-24T10:32:12.840

11

MSDN says:

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.

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>

edited Apr 24 '15 at 10:32

answered Apr 24 '15 at 07:30

Mehrzad Chehraz

5,092
2
17
28

I tried this: ` ` But it is not working (not clipping the image). – Emilia Tyl Apr 24 '15 at 08:12
What is resutlt then? Image is not displayed or it is displayed without being clipped? Did you remove previous element?! – Mehrzad Chehraz Apr 24 '15 at 08:15
Yes, I replaces Image with Ellipse, Image is shown but not clipped. – Emilia Tyl Apr 24 '15 at 08:17
I get the image clipped by the same code, try changing width, height stretch properties and let me known if it works...or test it in a clean page... – Mehrzad Chehraz Apr 24 '15 at 08:22
1

Ok it works xD It was my image that looked the same as cropped. Please fix you answer (double source). And thanks! :) – Emilia Tyl Apr 24 '15 at 10:27
Simple. Efficient. – Syaiful Nizam Yahya Apr 02 '17 at 01:25

How to clip image to ellipse in XAML

1 Answers1

Linked