如何在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中创建一个透明背景和a的圆圈.

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