CODEWITHSUNDEEP
c#wpfimagexaml
user6473719
user6473719

Reputation:

wpf image clip ellipse 4:3

I need a little guidance. I'm trying to create an image in the shape of an ellipse. To view an image using CachedImage

My current code:

 <Grid Width="100" Height="100">
        <cachedImage:Image Width="100" Height="100" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"  
                           ImageUrl="https://i.scdn.co/image/efe952d45a24a33360e98b4b42d313576e29cece" >
            <Image.Clip>
                <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
            </Image.Clip>
        </cachedImage:Image>
    </Grid>

Poroblem occurs if the image is in 4:3 format

This is my

enter image description here

I need this

enter image description here

Thanks a lot.

Upvotes: 0

Views: 1094

Answers (1)

Clemens
Clemens

Reputation: 128061

Setting the Width and the Height of an Image control and at the same time Stretch=UniformToFill will inevitably crop part of the image unless its aspect ratio exactly matches the ratio of Width and Height.

You may however set Stretch=Uniform and put the Image control in another, larger Grid which is horizontally centered in the outer Grid. You would have to apply the Clip to the outer Grid.

<Grid Width="100" Height="100">
    <Grid Width="200" HorizontalAlignment="Center">
        <Image Stretch="Uniform"
               Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"/>
    </Grid>
    <Grid.Clip>
        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
    </Grid.Clip>
</Grid>

Upvotes: 1

Related Questions