Làm thế nào để tạo ra một vòng tròn với một lỗ trong một vòng tròn trong WPF?

Question

Tôi đã tạo ra một UserControl mà là một vòng bằng cách chồng 2 vòng tròn vòng tròn nhỏ đang trống và thứ hai phía sau nhỏ nhất được tô màu.

Trong ứng dụng WPF của tôi, tôi muốn đặt nhiều vòng nhưng vòng tròn nhỏ sẽ ẩn các vòng khác. Tôi muốn xem qua nó và cũng nắm bắt sự kiện chuột cho chiếc nhẫn đằng sau những chiếc nhẫn khác nếu không nó không phải là nhẫn thật. Có thể không?

tôi đã cố gắng OpacityMask cho hình elip nhỏ như chỉ bởi câu trả lời cho http://social.msdn.microsoft.com/forums/en-US/wpf/thread/551201d1-c5b3-4e17-ae63-625cfbb8bcc4 nhưng vẫn không thể nhìn thấy chiếc nhẫn đằng sau lỗ:

<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"> 
    <Grid Height="150" Name="Grid" Width="150" MouseMove="ellipse1_MouseMove"> 
     <Ellipse Fill="Red" Height="150" Width="150" HorizontalAlignment="Left" Margin="0,0,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top" > 
      <Ellipse.OpacityMask> 
       <RadialGradientBrush> 
        <GradientStop Color="#FFB94444" Offset="0.496"/> 
        <GradientStop Color="#00FFFFFF" Offset="0.491"/> 
       </RadialGradientBrush> 
      </Ellipse.OpacityMask> 
     </Ellipse> 
     <Ellipse Fill="White" Height="100" Width="100" Margin="25,25,25,0" Name="ellipse2" Stroke="Black" VerticalAlignment="Top" />  
    </Grid> 
</UserControl> 

Answer 1

Dường như bạn đã tìm thấy câu trả lời của bạn (một vài năm trước đây), nhưng đối với bất cứ ai khác tìm cách để làm điều này, bạn có thể muốn kiểm tra CompositeGeometry :

http://msdn.microsoft.com/en-us/library/ms751808.aspx#combindgeometriessection

Chẳng hạn như:

<Path Fill="Red" Stroke="Black"> 
    <Path.Data> 
     <CombinedGeometry GeometryCombineMode="Xor"> 
      <CombinedGeometry.Geometry1> 
       <EllipseGeometry RadiusX="75" RadiusY="75" Center="75,75" /> 
      </CombinedGeometry.Geometry1> 
      <CombinedGeometry.Geometry2> 
       <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" /> 
      </CombinedGeometry.Geometry2> 
     </CombinedGeometry> 
    </Path.Data> 
</Path> 

Sau đó, IsHitTestVisible="False" nên tránh nhiễu chuột khi cần.

Answer 2

Bạn chỉ có thể tạo ra một vòng tròn với nền trong suốt và một StrokeThickness trong UserControl.

<UserControl x:Class="WpfApplication1.UserControl1" 
      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="300" d:DesignWidth="300"> 
    <Grid> 
     <Ellipse Width="50" Height="50" Stroke="Blue" StrokeThickness="10" Fill="Transparent"></Ellipse> 
    </Grid> 
</UserControl> 

EDIT: Bạn có thể đặt một bàn chải gradient cho đột quỵ như dưới đây. Bạn có thể thay thế LinearGradientBrush bằng bất kỳ loại bàn chải nào khác theo ý muốn.

<Ellipse Width="50" Height="50" StrokeThickness="10" Fill="Transparent"> 
    <Ellipse.Stroke> 
     <LinearGradientBrush> 
      <GradientStop Offset="0" Color="Red"/> 
      <GradientStop Offset="1" Color="Green"/> 
     </LinearGradientBrush> 
    </Ellipse.Stroke> 
</Ellipse> 

Answer 3

Kiểm tra How to create a doughnut with a transparent center? này.

Mã với đường dẫn và nút dưới nó:

<Grid x:Name="LayoutRoot" Width="109" Height="109"> 

    <Button Content="Below" Width="100" Height="100" /> 

    <Path Fill="#FF1F96D8" Stroke="#FF000000" 
     Width="109" HorizontalAlignment="Left" Stretch="None" 
     Data="M54.5,32.5 C41.245167,32.5 30.5,43.021309 30.5,56   
      30.5,68.978691 41.245167,79.5 54.5,79.5 C67.754837,79.5   
      78.5,68.978691 78.5,56 C78.5,43.021309 67.754837,32.5   
      54.5,32.5 z M54.5,0.5 C84.32338,0.5 108.5,24.676624   
      108.5,54.5 C108.5,84.32338 84.32338,108.5 54.5,108.5   
      24.676624,108.5 0.5,84.32338 0.5,54.5 0.5,24.676624   
      24.676624,0.5 54.5,0.5 z" Height="109" /> 


</Grid>