CroppedImageExample.xaml

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ImageElementExample.CroppedImageExample"
    Title="CroppedImage Example"
    Loaded="PageLoaded">
  <!-- <SnippetCroppedXAML1>-->
<Page.Resources>
   <!-- Define some   image resources, for use as the image element source. -->
   <BitmapImage x:Key="masterImage" UriSource="pack://application:,,/sampleImages/gecko.jpg" />
   <CroppedBitmap x:Key="croppedImage" 
      Source="{StaticResource masterImage}" SourceRect="30 20 105 50"/>
</Page.Resources>
  <!-- </SnippetCroppedXAML1>-->

  <DockPanel>
      <Border DockPanel.Dock="Top" Background="Black">
         <TextBlock Foreground="White" HorizontalAlignment="Stretch" FontSize="20">
            Cropping an Image Element
         </TextBlock>
      </Border>
      <TextBlock DockPanel.Dock="Top" Style="{StaticResource Header1}">Original Image</TextBlock>
      <Border DockPanel.Dock="Top" Margin="0,0,0,10">
         <Image Width="200" Source="{StaticResource masterImage}" />
      </Border>
      <Grid Name="croppedGrid" Background="{StaticResource CheckeredBrushResource}" 
         DockPanel.Dock="Top" 
         ShowGridLines="False" 
         VerticalAlignment="Top"
         HorizontalAlignment="Center">
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <TextBlock Margin="5" 
            Style="{StaticResource Header1}" 
            Grid.Column="0" Grid.Row="0">
            Cropped with XAML
         </TextBlock>
         <!-- <SnippetCroppedXAML2> -->
         <!-- Use the cropped image resource as the images source -->
         <Image Width="200" Source="{StaticResource croppedImage}" 
            Margin="5" Grid.Column="0" Grid.Row="1" />
         <!-- </SnippetCroppedXAML2> -->
         <TextBlock 
            Margin="5" Style="{StaticResource Header1}" 
            Grid.Column="1" Grid.Row="0">
            Cropped with C#
         </TextBlock>
         <TextBlock Style="{StaticResource Header2}" 
            Margin="5" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2">
            Chaining Cropped Images
         </TextBlock>
         <!-- <SnippetCroppedXAML3> -->
         <!-- Chain a cropped bitmap off a previosly defined cropped image -->
         <Image Width="200" Grid.Column="0" Grid.Row="3" Margin="5">
            <Image.Source>
               <CroppedBitmap Source="{StaticResource croppedImage}" 
                  SourceRect="30 0 75 50"/>
            </Image.Source>
         </Image>
         <!-- </SnippetCroppedXAML3> -->
        <TextBlock Style="{StaticResource Header2}" 
           Margin="5" Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2">
          Clipped Image
        </TextBlock>
        <!-- <SnippetCroppedXAMLUsingClip1> -->
        <!-- Cropping an Image using Clip -->
        <Image Width="200" Grid.Column="0" Grid.Row="5" Margin="5"
           Source="/sampleImages/gecko.jpg">
          <Image.Clip>
            <EllipseGeometry Center="75,50" RadiusX="50" RadiusY="25" />
          </Image.Clip>
        </Image>
        <!-- </SnippetCroppedXAMLUsingClip1> -->
      </Grid>
   </DockPanel>
</Page>