How to implement a circle button in XAML

前端 未结 2 2072
無奈伤痛
無奈伤痛 2020-12-25 11:53

How to implement a circle button like below one in XAML, no external image required. The black line in the middle is not needed.

相关标签:
2条回答
  • 2020-12-25 12:22
     <Button  Width="100" Height="100" Content="Abcd">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                    <Ellipse Fill="Red"/>
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>
    

    you must set the height and width of button same for it to be Circle.

    0 讨论(0)
  • 2020-12-25 12:28

    This is a very quick way to do it. It can be changed into a style and it could be made more flexible by creating a TemplatedControl allowing the designer to easily change the colors and other properties.

    <Button Width="100"
            Height="100">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Stroke="Black"
                             StrokeThickness="2">
                        <Ellipse.Fill>
                            <RadialGradientBrush>
                                <GradientStop Offset="0"
                                              Color="Lime" />
                                <GradientStop Offset="1"
                                              Color="Lime" />
                                <GradientStop Offset="1"
                                              Color="Gold" />
                                <RadialGradientBrush.Transform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="0.65" />
                                    </TransformGroup>
                                </RadialGradientBrush.Transform>
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>
    
    0 讨论(0)
提交回复
热议问题