如何在WPF中创建一个带圆圈的圆圈?
我已经创建了一个UserControl,它是通过叠加2个圆圈的小圆圈是空白的,第二个是最小的被着色的。如何在WPF中创建一个带圆圈的圆圈?
在我的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>
看起来你已经找到你的答案(几年前),但对于其他人要做到这一点,你可能想看看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"
应在需要时防止鼠标干扰。
你可以只创建一个圆形透明背景和用户控件中的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>
看看这个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>
我试过了,但似乎没有工作。 – user310291 2011-01-24 19:31:12
我试过这个问题是因为我可以看到背后的大圆圈,所以它不再是一个圆环:)我想要第二个圆来对它应用一些渐变,所以大边框无法做到这一点,就我所能预见的那样。 – user310291 2011-01-24 19:34:11
很高兴谢谢:) – user310291 2011-01-24 20:47:33