question

GuoLearn-6547 avatar image
0 Votes"
GuoLearn-6547 asked GuoLearn-6547 commented

WPF RING Button

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?

212282-cc.png




windows-wpfdotnet-wpf-xaml
cc.png (3.3 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered GuoLearn-6547 commented

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:

212279-image.png


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. 




image.png (12.0 KiB)
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

   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.







0 Votes 0 ·

Hi,@GuoLearn-6547. You could try to see if RadialMenu is what you want.


0 Votes 0 ·
HuiLiu-MSFT avatar image HuiLiu-MSFT GuoLearn-6547 ·

Hi,@GuoLearn-6547. Is there an update to this question? Is your problem solved? Please let me know if you still have questions.

0 Votes 0 ·

Thanks a lot

0 Votes 0 ·