Xaml, wpf image position and crop issue

Question

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.

Answer 1

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.