如何在WPF中創建一個帶圓圈的圓圈？

Question

我已經創建了一個UserControl，它是通過疊加2個圓圈的小圓圈是空白的，第二個是最小的被着色的。

在我的WPF應用程序中，我想放幾個戒指，但小圓圈確實會隱藏其他戒指。我希望通過它看到並捕獲鼠標事件，以便在其他環之後響鈴，否則它不是真正的響鈴。可能嗎 ？

我試着OpacityMask的小橢圓爲指向的答案http://social.msdn.microsoft.com/forums/en-US/wpf/thread/551201d1-c5b3-4e17-ae63-625cfbb8bcc4但仍無法看到背後孔環：

<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

看起來你已經找到你的答案（幾年前），但對於其他人要做到這一點，你可能想看看CompositeGeometry ：

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

如：

<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> 

然後IsHitTestVisible="False"應在需要時防止鼠標干擾。

Answer 2

你可以只創建一個圓形透明背景和用戶控件中的StrokeThickness。

<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> 

編輯： 您可以設置一個漸變筆刷，如下所示。你可以用任何其他類型的筆刷替換LinearGradientBrush。

<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

看看這個How to create a doughnut with a transparent center?。

代碼路徑和按鈕下它：

<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>