无法在 WPF 圆形按钮 (XAML) 中获取边框

Question

在我的项目中，我创建了一个圆形按钮。因为我遇到了两个问题

1) 边框想要红色和金色，但我只有金色边框。

2) 我使用箭头作为内容。但它看起来不太好。

下图解释了我的模型和我在项目中得到的东西。

我的 XAML

<Window.Resources>
        <Style TargetType="{x:Type Button}" x:Key="roundButton">
            <Style.Resources>
                <RadialGradientBrush x:Key="roundButtonStroke">
                    <GradientStop Color="red" Offset="0.5" />
                    <GradientStop Color="Gold" Offset="1" />
                </RadialGradientBrush>

                <LinearGradientBrush x:Key="roundButtonBackground" StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Gold" Offset="0.0" />
                    <GradientStop Color="#FEFFD2" Offset="0.5" />
                    <GradientStop Color="Gold" Offset="1.1" />
                </LinearGradientBrush>                
            </Style.Resources>

            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="7*" />
                                <RowDefinition Height="7*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="5*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Ellipse x:Name="bgEllipse" Grid.ColumnSpan="3" Grid.RowSpan="3" Fill="{StaticResource roundButtonBackground}" StrokeThickness="5" Stroke="{StaticResource roundButtonStroke}" />
                            <ContentPresenter Grid.RowSpan="3" Grid.ColumnSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" />                            
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>        
        <Button Width="100" Height="100" Foreground="#CD3234" FontSize="44" Content="->" Style="{StaticResource roundButton}" ></Button>
    </Grid>

Answer 1

首先，您应该绘制两个椭圆来实现这一点，一个具有纯红色描边和纯金色背景，另一个具有相同描边和线性渐变背景的略小的椭圆。

示例：

<Grid Width="100" Height="100">
    <Ellipse Stroke="Red" StrokeThickness="1" Fill="Gold"></Ellipse>
    <Ellipse Stroke="Red" StrokeThickness="1" Margin="5">
        <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Gold" Offset="0.0" />
                <GradientStop Color="#FEFFD2" Offset="0.5" />
                <GradientStop Color="Gold" Offset="1.1" />
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

至于箭头，您可以输入wingdings arrow、bitmap image 或某种xaml geometry。

Wingdings 样本：

<Button Style="{DynamicResource RoundGoldenButton}">
 <TextBlock VerticalAlignment="Center" 
                       HorizontalAlignment="Center"
                       Foreground="Red"
                       FontFamily="WingDings">à</TextBlock>
</Button>

这将为您提供以下信息：