c# - 如何在 WPF 按钮中获取按钮边框和椭圆样式的一半？

Question

我试图在 wpf 中制作按钮样式。但我面临着问题。

1) Button Inside Style 要为椭圆形的一半。

2) 带有金色和#872234 颜色的按钮边框

我的 XAML 代码-

<Window x:Class="Kiosk_Testing.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">  

                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <!-- the background for the button -->
                            <Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="#872234" Offset="0"/>
                                            <GradientStop Color="#872234" Offset="0.9"/>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <!-- the "gel" hilight at the top of the button -->
                            <Rectangle RadiusX="20" RadiusY="30" Margin="5">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="#C53550" Offset="0.1"/>
                                            <GradientStop Color="#C43551" Offset="0.5"/>
                                            <GradientStop Color="#C43551" Offset="0.9"/>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <!-- place for the content inside the button to be displayed -->
                            <ContentPresenter Grid.RowSpan="2"   
                                  x:Name="PrimaryContent"
                                  HorizontalAlignment="Center" VerticalAlignment="Center"
                                  Margin="{TemplateBinding Padding}" 
                                  Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                                  />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="gold" />            
        </Style>
    </Window.Resources>
    <Grid>
        <Button BorderThickness="50" HorizontalAlignment="Center" Content="Button" FontSize="26" FontFamily="Times New Roman" VerticalAlignment="Center" Width="163" Height="58" Margin="146,168,194,85">
            <Button.BorderBrush>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Color="Gold" Offset="0.1"/>
                        <GradientStop Color="#C43551" Offset="0.5"/>
                        <GradientStop Color="Gold" Offset="0.9"/>
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Button.BorderBrush>
        </Button>
    </Grid>
</Window>

Answer 1

如果使用Border而不是Rectangle您的选项，则可以使用以下BorderXAML 替换您的RectangleXAML：

<Border Margin="5" CornerRadius="14,14,4,4">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="#C53550" Offset="0.1"/>
                <GradientStop Color="#C43551" Offset="0.5"/>
                <GradientStop Color="#C43551" Offset="0.9"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Border.Background>
</Border>

您可以调整CornerRadius属性以获得所需的圆角。

完整风格：

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">  

                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <!-- the background for the button -->
                    <Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="#872234" Offset="0"/>
                                    <GradientStop Color="#872234" Offset="0.9"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <!-- the "gel" hilight at the top of the button -->
                    <Border Margin="5" CornerRadius="14,14,4,4">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="#C53550" Offset="0.1"/>
                                    <GradientStop Color="#C43551" Offset="0.5"/>
                                    <GradientStop Color="#C43551" Offset="0.9"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <!-- place for the content inside the button to be displayed -->
                    <ContentPresenter Grid.RowSpan="2"   
                          x:Name="PrimaryContent"
                          HorizontalAlignment="Center" VerticalAlignment="Center"
                          Margin="{TemplateBinding Padding}" 
                          Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                          />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="gold" />            
</Style>

结果图形：

更新

我猜，你希望你的按钮也有金色边框。带有金色边框的更新样式：

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">  
                <Border BorderThickness="2" CornerRadius="28" BorderBrush="GoldenRod">
                    <Border BorderThickness="2" CornerRadius="27">

                         <Border.BorderBrush>
                              <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Color="Gold" Offset="0"/>
                                                    <GradientStop Color="Wheat" Offset="0.6"/>
                                                    <GradientStop Color="Gold" Offset="0.9"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>     
                        </Border.BorderBrush>
                    <Border BorderThickness="2" CornerRadius="26" BorderBrush="Gold">

                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <!-- the background for the button -->
                        <Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#872234" Offset="0"/>
                                        <GradientStop Color="#872234" Offset="0.9"/>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <!-- the "gel" hilight at the top of the button -->
                        <Border Margin="5" CornerRadius="14,14,4,4">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#C53550" Offset="0.1"/>
                                        <GradientStop Color="#C43551" Offset="0.5"/>
                                        <GradientStop Color="#C43551" Offset="0.9"/>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>

                        <!-- place for the content inside the button to be displayed -->
                        <ContentPresenter Grid.RowSpan="2"   
                              x:Name="PrimaryContent"
                              HorizontalAlignment="Center" VerticalAlignment="Center"
                              Margin="{TemplateBinding Padding}" 
                              Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                              />
                    </Grid>
                </Border>
            </Border>
        </Border>
        </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="gold" />            
</Style>