Could you tell me how to Make a Ring Button that can been split in any angle And The selection unit have a Image and textblock on the center,please?
Could you tell me how to Make a Ring Button that can been split in any angle And The selection unit have a Image and textblock on the center,please?
Hi,@GuoLearn-6547. Welcome Microsoft Q&A.
You could refer to the following code to set the Button.
Xaml:
<StackPanel>
<Button x:Name="btn" >
<Button.Template>
<ControlTemplate>
<Canvas Margin="100">
<Path Stroke="LightBlue" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,-50">
<ArcSegment Point="42.5,-26.2" Size="50,50" IsLargeArc="False" SweepDirection="Clockwise"/>
</PathFigure>
<PathGeometry.Transform>
<RotateTransform Angle="10"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="LightPink" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,-50">
<ArcSegment Point="42.5,-26.2" Size="50,50" IsLargeArc="False" SweepDirection="Clockwise"/>
</PathFigure>
<PathGeometry.Transform>
<RotateTransform Angle="70"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="LightGreen" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,-50">
<ArcSegment Point="42.5,-26.2" Size="50,50" IsLargeArc="False" SweepDirection="Clockwise"/>
</PathFigure>
<PathGeometry.Transform>
<RotateTransform Angle="130"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="LightCoral" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,-50">
<ArcSegment Point="42.5,-26.2" Size="50,50" IsLargeArc="False" SweepDirection="Clockwise"/>
</PathFigure>
<PathGeometry.Transform>
<RotateTransform Angle="190"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="LightGray" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,-50">
<ArcSegment Point="42.5,-26.2" Size="50,50" IsLargeArc="False" SweepDirection="Clockwise"/>
</PathFigure>
<PathGeometry.Transform>
<RotateTransform Angle="250"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="LightSalmon" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,-50">
<ArcSegment Point="42.5,-26.2" Size="50,50" IsLargeArc="False" SweepDirection="Clockwise"/>
</PathFigure>
<PathGeometry.Transform>
<RotateTransform Angle="310"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
</Path>
<StackPanel Margin="-20,-20">
<TextBlock Text="hello" Width="30" Height="20" FontSize="10" Background="AliceBlue"/>
<Image Source="images.jpg" Width="45" />
</StackPanel>
</Canvas>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
The result:
If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
This look great,Thanks.
Could you Made it like ( Path Stroke="LightGray" StrokeThickness="500" or anyway it's like Arc ) and The Image And textblock On the center of Arc.
And one Arc with (Image and textblock on the center) is satisfied.
Hi,@GuoLearn-6547. You could try to see if RadialMenu is what you want.
Hi,@GuoLearn-6547. Is there an update to this question? Is your problem solved? Please let me know if you still have questions.
8 people are following this question.