WPF RING Button

Question

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?

Answer 1

Hi,@GuoLearn . 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][5] to enable e-mail notifications if you want to receive the related email notification for this thread. 

[5]: https://learn.microsoft.com/en-us/answers/articles/67444/email-notifications.html