title: WPF : Rounded-Corners Images
body: <pre><code>&lt;Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Black"&gt;
      &lt;!-- Rounded yellow border --&gt;
      &lt;Border BorderThickness="3" BorderBrush="Yellow" CornerRadius="10" Padding="2"
          HorizontalAlignment="Center" VerticalAlignment="Center"&gt;
        &lt;Grid&gt;
           &lt;!-- Rounded mask (stretches to fill Grid) --&gt;
           &lt;Border Name="mask" Background="White" CornerRadius="7"/&gt;
           &lt;!-- Main content container --&gt;
           &lt;StackPanel&gt;
               &lt;!-- Use a VisualBrush of 'mask' as the opacity mask --&gt;
               &lt;StackPanel.OpacityMask&gt;
                   &lt;VisualBrush Visual="{Binding ElementName=mask}"/&gt;
               &lt;/StackPanel.OpacityMask&gt;
               &lt;!-- Any content --&gt;
               &lt;Image Source="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg"/&gt;
               &lt;Rectangle Height="50" Fill="Red"/&gt;
               &lt;Rectangle Height="50" Fill="White"/&gt;
               &lt;Rectangle Height="50" Fill="Blue"/&gt;
           &lt;/StackPanel&gt;
        &lt;/Grid&gt;
      &lt;/Border&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>This XAML is from <a href="http://chriscavanagh.wordpress.com/2008/10/03/wpf-easy-rounded-corners-for-anything/" rel="noreferrer">WPF – Easy rounded corners for anything</a> but it doesn't work form me =(</p>
  
  <pre><code>&lt;Border Canvas.Left="55"
          Canvas.Top="30"
          Width="100"
          Height="Auto"
          Margin="12,12,8,0"
          VerticalAlignment="Top"
          BorderBrush="#FF3B5998"
          BorderThickness=".5"
          CornerRadius="18"&gt;
      &lt;Border.Effect&gt;
          &lt;DropShadowEffect BlurRadius="5"
                            Opacity=".5"
                            ShadowDepth="3" /&gt;
      &lt;/Border.Effect&gt;
      &lt;Border Name="ReceiverColor"
              BorderBrush="#FF96B2E4"
              BorderThickness="6"
              CornerRadius="15"&gt;
          &lt;Border Name="Mask"
                  BorderBrush="#FF3B5998"
                  BorderThickness=".5"
                  CornerRadius="13"&gt;
                  &lt;StackPanel&gt;
                      &lt;StackPanel.OpacityMask&gt;
                          &lt;VisualBrush Visual="{Binding ElementName=Mask}" /&gt;
                      &lt;/StackPanel.OpacityMask&gt;
                      &lt;Image Name="Receiver" /&gt;
                  &lt;/StackPanel&gt;
          &lt;/Border&gt;
      &lt;/Border&gt;
  &lt;/Border&gt;
  </code></pre>
  
  <p><strong>--- EDIT ---</strong><br>
  I make borders sizes to auto and change source of image to an image from a link<br>
  when window loaded border size becomes as image size but image not shown !!!</p>