带有模板的样式正在阻止WPF中的文本

Question

我正在尝试为我的按钮创建一个模板，该模板具有：

• 边界拐角半径
• 背景为渐变
• 悬停时更改边框颜色

到目前为止，我到达了这里：

<Window.Resources>
    <Style TargetType="Button" x:Key="aimDark">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Margin" Value="5,5,5,0" />
        <Setter Property="Height" Value="20" />
        <Setter Property="Foreground" Value="#0e0e0e" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border
                        CornerRadius="4"
                        BorderBrush="#000000"
                        BorderThickness="1">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="#006d23" Offset="0" />
                                <GradientStop Color="#006d23" Offset="0.05" />
                                <GradientStop Color="#00c741" Offset="0.45" />
                                <GradientStop Color="#00c741" Offset="1" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Button Content="Test" Name="btn01" Style="{StaticResource aimDark}" />
</Grid>

问题：

首先，按钮中的Content没有出现，事实上，我的按钮中没有呈现文本。

我不知道如何在悬停事件中只更改边框颜色。

Answer 1

在ControlTemplate中，应指定ContentPresenter以显示Button的Content。

<Window.Resources>
    <Style TargetType="Button" x:Key="aimDark">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Margin" Value="5,5,5,0" />
        <Setter Property="Height" Value="20" />
        <Setter Property="Foreground" Value="#0e0e0e" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border
                    CornerRadius="4"
                    BorderBrush="#000000"
                    BorderThickness="1">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="#006d23" Offset="0" />
                                <GradientStop Color="#006d23" Offset="0.05" />
                                <GradientStop Color="#00c741" Offset="0.45" />
                                <GradientStop Color="#00c741" Offset="1" />
                            </LinearGradientBrush>                                
                        </Border.Background>
                        <RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode>
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Answer 2

您创建的模板没有ContentPresenter，这是显示内容（文本或其他）所必需的。我建议您从默认的按钮模板开始，并根据需要进行更改。

Answer 3

您需要一个ContentPresenter来显示按钮的内容。

此外，如果您在ControlTemplate>Border中定义了一个名称，则可以在触发操作时对其进行修改，如下所示：

<Style x:Key="mylayout" TargetType="Button">
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Margin" Value="5,5,5,0" />
    <Setter Property="Height" Value="20" />
    <Setter Property="Foreground" Value="#949494" />
    <Setter Property="Background" Value="the_gradient" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="4" BorderBrush="#000000" BorderThickness="1" Background="{TemplateBinding Background}" Name="border">
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="#e9eceb" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>