WPF 关于使用style后Button中的content不能显示问题

本章讲述：在WPF中，关于使用style后Button中的content不能显示问题

在项目过程中改了别人的Button的style，当在Button绑定资源后，发现设置Button的 Content后，并不显示。

首先来看样式代码段“BtnStyleFalse”，如下示例，样式中用TextBlock的Text绑定了Content，这种方法，当绑定属性，就不显示内容；

<Style x:Key="BtnStyleFalse" TargetType="{x:Type Button}">
            <Setter Property="Height" Value="45"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#dddddd"/>
            <Setter Property="Background" Value="#555a64"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="bd" Background="{TemplateBinding Background}" CornerRadius="5">
                            <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                             Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#696f79"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="#007dc8"/>
                </Trigger>
            </Style.Triggers>
        </Style>

可是为什么不能显示呢？

原因：上述样式没有告诉它要显示，所以没有显示。

        Style中使用ContentPresenter，使Button的Content内容显示出来，而ContentPresenter通常出现在ControlTemplate内；

        首先我们来看一下Content的继承关系图，Style中的setter类的property属性用来为目标控件的某个属性赋值；当使用样式时，一定要给Control类设置Content属性，如果没有，则继承至Control的控件，Control控件没有Content属性；

根据关系图要在<ContentPresenter  "/>中定义Content属性；

改写样式代码：

<Window x:Class="ButtonStyleBindTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="BtnStyleRight" TargetType="{x:Type Button}">
            <Setter Property="Height" Value="45"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#dddddd"/>
            <Setter Property="Background" Value="#555a64"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="bd" Background="{TemplateBinding Background}" CornerRadius="5">
                            <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#696f79"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="#007dc8"/>
                </Trigger>
            </Style.Triggers>
        </Style>        
    </Window.Resources>
    <WrapPanel VerticalAlignment="Center">
        <Button Margin="5" Style="{StaticResource  BtnStyleRight}" Content="{Binding BackupHour}" />
        <Button Margin="5" Style="{StaticResource   BtnStyleFalse}" Content="{Binding BackupHour}" />
        <Button Margin="5" Width="100" Height="45" Background="#555a64" Foreground="White" Content="{Binding BackupHour}" />
    </WrapPanel>
</Window>

后台逻辑代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ButtonStyleBindTest
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;

            BackupHour = 100000;
        }
        private int m_BackupHour = 20;
        public int BackupHour
        {
            get { return m_BackupHour; }
            set { m_BackupHour = value; OnPropertyChanged("BackupHour"); }
        }

        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

效果图：

喜欢的，觉得有用的，请点赞！！！谢谢观看！