WPF 按钮样式和模板

WPF button style and template

提问by Junior222

So i have the button and its style:

所以我有按钮及其样式：

<Style TargetType="Button" x:Key="BaseButtonStyle">
    <Setter Property="FontWeight" Value="Bold"  />
    <Setter Property="Width" Value="120" />
    <Setter Property="Height" Value="30" />
    <Setter Property="BorderBrush" Value="#1FA3FF"  />
</Style>

<Style TargetType="{x:Type Button}" x:Key="MyButtonStyle"  BasedOn="{StaticResource BaseButtonStyle}">          
    <Setter Property="Background" Value="#1FA3EB"  />
    <Setter Property="Foreground" Value="#FFFFFF"  />
</Style>

<Button Style="{StaticResource MyButtonStyle}" Content="My text" />

It works fine and i have the following results (aquamarine background isn't part of Button, it belongs to Window):

它工作正常，我有以下结果（海蓝宝石背景不是 Button 的一部分，它属于 Window）：

But then i want to replace button's content and change my style so:

但后来我想替换按钮的内容并改变我的风格：

<Style TargetType="{x:Type Button}" x:Key="MyButtonStyle"  BasedOn="{StaticResource BaseButtonStyle}">          
    <Setter Property="Background" Value="#1FA3EB"  />
    <Setter Property="Foreground" Value="#FFFFFF"  />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="√" />
                    <TextBlock Text="{TemplateBinding Button.Content}" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and now my button becomes awful:

现在我的按钮变得很糟糕：

As you can see my button lost its borders and background and it doesn't change its view when mouse is over it. Where am i wrong and what should i do to prevent it?

正如您所看到的，我的按钮失去了边框和背景，并且当鼠标悬停在它上面时它不会改变它的视图。我哪里错了，我应该怎么做才能防止它？

UPD

UPD

when i do something like this:

当我做这样的事情时：

<Style TargetType="{x:Type Button}" x:Key="MyButtonStyle"  BasedOn="{StaticResource BaseButtonStyle}">          
    <Setter Property="Background" Value="#1FA3EB"  />
    <Setter Property="Foreground" Value="#FFFFFF"  />
    <Setter Property="Content" >
        <Setter.Value>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="√" />
                <TextBlock Text="{TemplateBinding Button.Content}" />
            </StackPanel>
        </Setter.Value>
    </Setter>
</Style>

then i get this result:

然后我得到这个结果：

As you can see this is similar to the firstresult, where the check mark is missing

正如您所看到的，这与第一个结果相似，其中缺少复选标记

回答by Sheridan

The look and functionality of the default Buttonis defined in the default ControlTemplatefor the Button(you can find that in the Button Styles and Templatespage on MSDN). As you changed the ControlTemplate, the default look and behaviour is now gone and replaced with your plain StackPaneland TextBlockelements.

默认的外观和功能Button在默认定义ControlTemplate的Button（你可以发现，在按钮样式和模板页面上MSDN）。当您更改 时ControlTemplate，默认外观和行为现在消失了，取而代之的是您的普通StackPanel和TextBlock元素。

When providing a new ControlTemplatefor controls, it is a good idea to start with the default ControlTemplateand make small changes until you have your desired look. Here is a slight extension to your Stylethat provides some basic mouse over functionality:

在提供新ControlTemplate的控件时，最好从默认值开始ControlTemplate并进行小的更改，直到获得所需的外观。这是您的一个小扩展Style，提供了一些基本的鼠标悬停功能：

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate>
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="3">
                <Border.Style>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="Background" Value="LightBlue" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="LightGreen" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="√" />
                <TextBlock Text="{TemplateBinding Button.Content}" />
                </StackPanel>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

You can find out more about ControlTemplates from the ControlTemplateClasspage on MSDN.

您可以ControlTemplate从MSDN 上的ControlTemplateClass页面找到有关s 的更多信息。

回答by sondergard

If you only need to change the content of the button, you can do it this way:

如果你只需要改变按钮的内容，你可以这样做：

<Button Style="{StaticResource BaseButtonStyle}">
    <!-- This is the content -->
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="√" />
        <TextBlock Text="{Binding ButtonTextBinding}" />
    </StackPanel>
</Button>

This way you don't loose the basic styling. The button content property is an object, so it takes anything. The moment you alter the control template of a button, everything about background, border, mouse over, pressed states etc. is lost. The best way to restyle any WPF control is to take the basic template from MSDN and modify it, rather than starting from scratch. You can find the button template here:

这样你就不会失去基本的样式。按钮内容属性是一个对象，所以它接受任何东西。当您更改按钮的控件模板时，有关背景、边框、鼠标悬停、按下状态等的所有内容都将丢失。重新设计任何 WPF 控件样式的最佳方法是从 MSDN 获取基本模板并对其进行修改，而不是从头开始。您可以在此处找到按钮模板：

.NET 4.5 Button template

.NET 4.5 按钮模板