title: How to create a circle with a hole in a circle in WPF?
body: <p>I have created a UserControl which is a ring by superposing 2 circles the small circle being blank and the second behind the smallest being colored.</p>
  
  <p>In my WPF app, I want to put several rings but the small circle does hide other rings. I'd like to see through it and also capture mouse event for ring behind other rings otherwise it's not real rings. Is it possible ?</p>
  
  <p>I tried OpacityMask for small ellipse as pointed by answer to <a href="http://social.msdn.microsoft.com/forums/en-US/wpf/thread/551201d1-c5b3-4e17-ae63-625cfbb8bcc4" rel="noreferrer">http://social.msdn.microsoft.com/forums/en-US/wpf/thread/551201d1-c5b3-4e17-ae63-625cfbb8bcc4</a> but still can't see ring behind hole:</p>
  
  <pre><code>&lt;UserControl x:Class="MyUserControls.MyRing"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
               mc:Ignorable="d" 
               d:DesignHeight="150" d:DesignWidth="150" SizeChanged="UserControl_SizeChanged"&gt;
      &lt;Grid Height="150" Name="Grid" Width="150" MouseMove="ellipse1_MouseMove"&gt;
          &lt;Ellipse Fill="Red" Height="150" Width="150" HorizontalAlignment="Left" Margin="0,0,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top"  &gt;
              &lt;Ellipse.OpacityMask&gt;
                  &lt;RadialGradientBrush&gt;
                      &lt;GradientStop Color="#FFB94444" Offset="0.496"/&gt;
                      &lt;GradientStop Color="#00FFFFFF" Offset="0.491"/&gt;
                  &lt;/RadialGradientBrush&gt;
              &lt;/Ellipse.OpacityMask&gt;
          &lt;/Ellipse&gt;
          &lt;Ellipse Fill="White" Height="100" Width="100" Margin="25,25,25,0" Name="ellipse2" Stroke="Black" VerticalAlignment="Top" /&gt;       
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/D2jYY.png" alt="enter image description here"></p>