如何从 Styles 在 wpf 中创建圆角按钮？

Question

很可能它可能重复，但我的问题不同，我想在 wpf UserControl 中从样式创建一个圆形的关闭角按钮。我不知道如何实现，

我试过如下。

<Style x:Key="dbokPopupCloseStyle"  TargetType="Button">
            <Setter Property="Padding" Value="5"></Setter>
            <Setter Property="BorderThickness" Value="0"></Setter>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="FontFamily" Value="seoge UI"/>
            <Setter Property="FontSize" Value="17"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="#363636"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid  Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" Margin="10,5"
                    VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

试试这个

    <Window.Resources>
    <DataTemplate x:Key="Cancel">
        <Viewbox Height="20">
            <Canvas Width="31.7872706291756" Height="31.7794719079896">
                <Path Fill="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Data="F1M7.1874998,3.7803054C7.0081378,3.7608244,6.8412588,3.8140474,6.7187498,3.9365554L3.9374998,6.7178054C3.6924818,6.9628234,3.7577738,7.4130804,4.0624998,7.7178054L12.34375,15.999055 4.0624998,24.280305C3.7577728,24.585032,3.6924818,25.035288,3.9374998,25.280305L6.7187498,28.061555C6.9637678,28.306573,7.4140228,28.272532,7.7187498,27.967805L16,19.686555 24.28125,27.967805C24.585977,28.272532,25.036232,28.306573,25.28125,28.061555L28.0625,25.280305C28.307518,25.035287,28.242227,24.585033,27.9375,24.280305L19.65625,15.999055 27.9375,7.7178054C28.242227,7.4130784,28.307518,6.9628194,28.0625,6.7178054L25.28125,3.9365554C25.036232,3.6915374,24.585977,3.7568254,24.28125,4.0615554L16,12.342805 7.7187498,4.0615554C7.5663868,3.9091924,7.3668618,3.7997864,7.1874998,3.7803054z" Stroke="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}"  StrokeThickness="1"/>
            </Canvas>
        </Viewbox>
    </DataTemplate>

    <Style x:Key="Blue_Icon_Tooltipstyle" TargetType="ToolTip">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToolTip">
                    <Grid>
                        <Border CornerRadius="3" Background="Black">
                            <TextBlock  Margin="5" Foreground="White"  FontFamily="Segoe Ui Dark" FontSize="12" >
                         <ContentPresenter></ContentPresenter>
                            </TextBlock>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="CircularButton" TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                        <Ellipse x:Name="ellipse" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="3"></Ellipse>
                        <ContentPresenter></ContentPresenter>
                        <Grid.ToolTip>
                            <ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
                        </Grid.ToolTip>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsPressed" Value="True" >
                            <Setter Property="Opacity" Value="0.7" ></Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.2"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<Grid Background="Red" >
    <Button Height="40" Width="40" ToolTip="Cancel" Style="{StaticResource CircularButton}" Background="Black" BorderThickness="1" BorderBrush="White" Foreground="White" ContentTemplate="{StaticResource Cancel}"></Button>
</Grid>

更新

<UserControl.Resources>

    <Style x:Key="CircularButton" TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                        <Ellipse x:Name="ellipse"
                                 Height="{TemplateBinding Height}" 
                                 Width="{TemplateBinding Width}" 
                                 Fill="{TemplateBinding Background}"
                                 Stroke="{TemplateBinding BorderBrush}"
                                 StrokeThickness="{TemplateBinding BorderThickness}">                                
                        </Ellipse>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontSize="20" Content="{TemplateBinding Content}"></ContentPresenter>
                        <Grid.ToolTip>
                            <ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
                        </Grid.ToolTip>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsPressed" Value="True" >
                            <Setter Property="Opacity" Value="0.7" ></Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.2"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid Background="Red" >
    <Button Height="40" Width="40" ToolTip="Cancel"
            Style="{StaticResource CircularButton}" 
            Background="Black" BorderThickness="1" 
            BorderBrush="White" Foreground="White" Content="x"></Button>
</Grid>

如何从 Styles 在 wpf 中创建圆角按钮？

How to create a rounded corner button in wpf from Styles?

xaml

styles

rounded-corners

wpf-controls

app.xaml