为什么我的 WPF 按钮在应用模板时不显示文本？

Question

我正在尝试从一本旧书（Beginning Visual C# 2010）中学习 WPF。我尝试复制他们提供的示例（它看起来确实很可怕），但由于某种原因，文本没有显示在按钮上。

示例代码为：

<Window x:Class="BadButtonTraining.MainWindow"
        ...
        xmlns:local="clr-namespace:BadButtonTraining"
        mc:Ignorable="d"
        Title="Nastsy Button" Height="150" Width="550">
    <Grid Background="Black">
        <Button Margin="20" Click="Button_Click" FontFamily="arial" FontSize="18" FontWeight="Bold">
            Would anyone use a button like this?
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Offset="0.0" Color="Purple" />
                                    <GradientStop Offset="0.5" Color="Azure" />
                                    <GradientStop Offset="1.0" Color="Purple" />
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="50" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition MinHeight="50" />
                                    </Grid.RowDefinitions>
                                    <Rectangle RadiusX="10" RadiusY="10" Grid.Column="1">
                                        <Rectangle.Fill>
                                            <RadialGradientBrush>
                                                <RadialGradientBrush.GradientStops>
                                                    <GradientStop Offset="0.0" Color="Yellow" />
                                                    <GradientStop Offset="1.0" Color="Red" />
                                                </RadialGradientBrush.GradientStops>
                                            </RadialGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Ellipse Grid.Column="0" Height="50">
                                        <Ellipse.Fill>
                                            <RadialGradientBrush>
                                                <RadialGradientBrush.GradientStops>
                                                    <GradientStop Offset="0.0" Color="Yellow" />
                                                    <GradientStop Offset="1.0" Color="Red" />
                                                </RadialGradientBrush.GradientStops>
                                            </RadialGradientBrush>
                                        </Ellipse.Fill>
                                    </Ellipse>
                                    <Ellipse Grid.Column="2" Height="50">
                                        <Ellipse.Fill>
                                            <RadialGradientBrush>
                                                <RadialGradientBrush.GradientStops>
                                                    <GradientStop Offset="0.0" Color="Yellow" />
                                                    <GradientStop Offset="1.0" Color="Red" />
                                                </RadialGradientBrush.GradientStops>
                                            </RadialGradientBrush>
                                        </Ellipse.Fill>
                                    </Ellipse>
                                    <ContentPresenter Margin="20,0,20,0" HorizontalAlignment="Center"
                                                      VerticalAlignment="Center" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
    </Grid>
</Window>

这（对我来说）会产生一个可怕的按钮，从黄色到红色，每侧都有圆圈，但我看不到按钮的文本。 `带有径向阴影的可怕按钮，但文本不显示

如果我删除

<Setter Property="Template">

块（给出以下代码），我会得到一个带有“有人会使用这样的按钮吗？”的按钮。文本可见（诚然，从白色到紫色的可怕线性渐变）：

<Window x:Class="BadButtonTraining.MainWindow"
        ...
        xmlns:local="clr-namespace:BadButtonTraining"
        mc:Ignorable="d"
        Title="Nastsy Button" Height="150" Width="550">
    <Grid Background="Black">
        <Button Margin="20" Click="Button_Click" FontFamily="arial" FontSize="18" FontWeight="Bold">
            Would anyone use a button like this?
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Offset="0.0" Color="Purple" />
                                    <GradientStop Offset="0.5" Color="Azure" />
                                    <GradientStop Offset="1.0" Color="Purple" />
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
    </Grid>
</Window>

`带有可怕渐变文字的矩形按钮

我正在使用 .NET Framework 4.8.1。

• Setter 中有一个 ContentPresenter，我尝试将其放在几个不同的位置，但没有任何好处。
• 我尝试将文本放在模板后面，但没有效果。
• 我尝试将文本放入 Content 属性中，但同样没有效果。

我注意到有时文本出现在第一个圆圈的顶部，但位于所有其他形状的后面。有时，它不会显示在其中任何一个上方。

请注意，我已从 Window 标记中删除了所有 URL，以免被误认为是垃圾邮件。

Answer 1

使用

ContentPresenter

 将按钮的内容绑定到 

TemplateBinding

<ContentPresenter 
    Margin="20,0"
    Content="{TemplateBinding Content}" />