是否可以在WPF中创建一个带圆角的按钮到按钮的外部和内部？

Question

我想创建一个带有圆角的按钮样式到外部和带有XAML的按钮控件的内部，如图所示。那可能吗？如果是的话 - 这是怎么做的？

Answer 1

您必须为Style：

创建新的Button

这是一个快速而肮脏的例子。但它可以给你一个良好的开端。

风格

<Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
    <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border>
                        <Grid>
                            <Path 
                                x:Name="border"
                                Data="M0,30.5 L91.663731,30 C101.9253,20.877072 102.22503,10.896702 91.878734,6.2283512E-14 58.545401,6.5836225E-14 32.833333,8.1640424E-15 -0.5,1.2246064E-14 12.586721,10.392641 12.156556,20.548869 0,30.5 z" 
                                Fill="{TemplateBinding Background}" 
                                Height="Auto" 
                                Margin="-1.5,-1,-1.501,-2.5" 
                                Stroke="{TemplateBinding BorderBrush}" 
                                StrokeThickness="{TemplateBinding BorderThickness}"
                                VerticalAlignment="Stretch"
                                SnapsToDevicePixels="True"/>
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter Property="Stroke" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                            <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                            <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                            <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

将Style应用于Button

<Button Content="Button" Style="{DynamicResource ButtonStyle1}"/>

预览