Bruno
Bruno

Reputation: 4655

How to center and crop an image with an Image control

I have an image file that is rectangular, say 300px by 200px

I would like to display it in an Image control that is 100px by 100px.

How can I say to the Image control to display the image like this

enter image description here

instead of like this?

enter image description here

(In red is my Image control and in black is my image file)

Upvotes: 1

Views: 580

Answers (2)

Clemens
Clemens

Reputation: 128013

In order to create a centered image, you may set UniformToFill on an ImageBrush:

<Rectangle Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Rectangle.Fill>
        <ImageBrush ImageSource="..." Stretch="UniformToFill"/>
    </Rectangle.Fill>
</Rectangle>

Upvotes: 3

Catarina Ferreira
Catarina Ferreira

Reputation: 1854

In your image code, in xaml, add this property:

Stretch="UniformToFill"

It will adjust image to fill all of the square without changing his proportion.

Upvotes: 1

Related Questions