无法在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箭头，位图图像或某种xaml geometry。

机翼样本：

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

这将为您提供以下内容：