Xaml, wpf image position and crop issue

crop, resize-crop, windows-runtime, wpf, xaml

Solution

One option would be to use a clipping mask:

<Image Source="MyImage.jpg">
    <Image.Clip>
        <RectangleGeometry Rect="10,10,80,80"></RectangleGeometry>
    </Image.Clip>
</Image>

The rect structure takes X,Y, Width and Height values that you have to set depending on your image.

Problem

I have images of 600px width and 600px height. we have three sizes of circles. all have the center in the middle. Some have reflection as shadow beneath it. I would like to crop the image for display purposes. So the largest circle as shown above has a diameter of about 500 pixels, but the medium and small ones have less. I know in the code which size I have of object type `Product`. Because of the size differences I have to place them differently and used three placeholder images for it, like this: ``` <Image x:Name="imgCoinHolderSmall" HorizontalAlignment="Center" Margin="0,495,0,0" VerticalAlignment="Top" Stretch="Fill" Width="200" Height="200"/> <Image x:Name="imgCoinHolderMedium" HorizontalAlignment="Center" Margin="0,510,0,0" VerticalAlignment="Top" Stretch="Fill" Width="200" Height="200"/> <Image x:Name="imgCoinHolderLarge" HorizontalAlignment="Center" Margin="0,520,0,0" VerticalAlignment="Top" Stretch="Fill" Width="200" Height="200"/> ``` So can I change the properties of the image such that it does not display the red part of this screenshot: By the way, I do not display the images on their original size (as you can see at the xaml code) I set the width to 200. It is just a display thing, I do not have to store the new image. I would like to do it on the fly, preferably by setting image properties in the xaml. (for all three sizes of circles) Is using the `CroppedBitmap` the best approach? http://msdn.microsoft.com/en-us/library/ms752345.aspx it is for windows rt by the way.

Original source