Creating a custom-shaped button with one rounded corner

后端 未结 1 1248
栀梦
栀梦 2020-12-03 17:58

I need to create a button in WPF that has a custom shape. Specifically, I want it to have rounded corners, like an ellipse. Here is a picture:

相关标签:
1条回答
  • 2020-12-03 18:18

    You could use a ControlTemplate to achieve that:

    <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Path Fill="{TemplateBinding Background}"
                                Data="M 0,0 A 100,100 90 0 0 100,100 L 100,100 100,0" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    

    Than you apply it to the button:

    <Button Style="{StaticResource ButtonStyle}"/>
    

    If you need some references to draw the "Path" check this MSDN link.

    Update

    To show the content you should use a ContentPresenter, something like this:

    <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Black"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Path Fill="{TemplateBinding Background}"
                                Data="M 0,0 A 100,100 90 0 0 100,100 L 100,100 100,0" />
                            <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    

    In the button:

    <Button Style="{StaticResource ButtonStyle}" Foreground="White">
            test
        </Button>
    

    enter image description here

    0 讨论(0)
提交回复
热议问题