WPF学习笔记-样式

样式类似于BS的CSS 来设置控件的属性。

1，利用资源来设置

<Window x:Class="WPFdemo11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFdemo11"
        mc:Ignorable="d"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <SolidColorBrush x:Key="BackGroudColor" Color="Yellow"></SolidColorBrush>
        <sys:Double x:Key="FontSize" >18</sys:Double> <!--设置数字类型需要引用-->
    </Window.Resources>
    <Grid>
     
        <StackPanel>
            <Button Height="30" Margin="3" Content="button1" FontSize="{StaticResource FontSize}"  Background="{StaticResource BackGroudColor}"></Button>
            <Button Height="30" Margin="3" Content="button1" FontSize="{StaticResource FontSize}"  Background="{StaticResource BackGroudColor}"></Button>
            
            <Button Height="30" Margin="3" Content="button1"></Button>
        </StackPanel>
    </Grid>
</Window>

代码重复太多，复杂，有时候，还不如直接属性设置，绑定还多此一举。

2，用Style样式处理

<Window x:Class="WPFdemo11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFdemo11"
        mc:Ignorable="d"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <SolidColorBrush x:Key="BackGroudColor" Color="Yellow"></SolidColorBrush>
        <sys:Double x:Key="FontSize" >18</sys:Double> <!--设置数字类型需要引用-->

        <Style x:Key="StyleButton">
            <Setter Property="Control.FontSize" Value="18"></Setter>
            <Setter Property="Control.Background" Value="Yellow"></Setter>
        </Style>

        <Style x:Key="StyleButton1">
            <Setter Property="Control.FontSize" Value="18"></Setter>
            <Setter Property="Control.Background" >
                <Setter.Value>
                    <SolidColorBrush Color="Yellow"></SolidColorBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
     
        <StackPanel>
            <Button Height="30" Margin="3" Content="button1" FontSize="{StaticResource FontSize}"  Background="{StaticResource BackGroudColor}"></Button>
            <Button Height="30" Margin="3" Content="button2" FontSize="{StaticResource FontSize}"  Background="{StaticResource BackGroudColor}"></Button>
            
            <Button Height="30" Margin="3" Content="button3" Style="{StaticResource StyleButton}"></Button>
            <Button Height="30" Margin="3" Content="button4" Style="{StaticResource StyleButton1}"></Button>
        </StackPanel>
    </Grid>
</Window>

<Style x:Key="StyleButton">
<Setter Property="Control.FontSize" Value="18"></Setter>
<Setter Property="Control.Background" Value="Yellow"></Setter>
</Style>
Setter 设置器，设置属性

Property="Control.FontSize"   Control这里也可以替换成Button，但是，当设置多个时候，最后一个响应。

 <Style x:Key="StyleButton">
            <Setter Property="Control.FontSize" Value="18"></Setter>
            <Setter Property="Button.FontSize" Value="2"></Setter>
            <Setter Property="TextBlock.FontSize" Value="30"></Setter> 
</Style>

即使  是Button绑定，显示的样式也是最后一个属性设置，字体大小 30。

3，关联事件处理程序

比如移入，移出特效

<Window x:Class="WPFdemo9.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFdemo9"
        mc:Ignorable="d"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="MouseOverHighlightStyle">
            <EventSetter Event="FrameworkElement.MouseEnter" Handler="element_MouseEnter" />
            <EventSetter Event="FrameworkElement.MouseLeave" Handler="element_MouseLeave" />
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <TextBlock Style="{StaticResource MouseOverHighlightStyle}">66666</TextBlock>
            <TextBlock Padding="5">99999</TextBlock>
            <TextBlock Style="{StaticResource MouseOverHighlightStyle}">88888</TextBlock>
        </StackPanel>
    </Grid>
</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.Shapes;

namespace WPFdemo9
{
    /// <summary>
    /// Window1.xaml 的交互逻辑
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void element_MouseEnter(object sender, MouseEventArgs e)
        {
            ((TextBlock)sender).Background = new SolidColorBrush(Colors.LightGoldenrodYellow);
        }
        private void element_MouseLeave(object sender, MouseEventArgs e)
        {
            ((TextBlock)sender).Background = null;
        }
    }
}

四、多层样式

<Window.Resources>
        <Style x:Key="BigFontButtonStyle">
            <Setter Property="Control.FontFamily" Value="Times New Roman" />
            <Setter Property="Control.FontSize" Value="18" />
            <Setter Property="Control.FontWeight" Value="Bold" />
        </Style>

        <Style x:Key="EmphasizedBigFontButtonStyle" BasedOn="{StaticResource BigFontButtonStyle}">
            <Setter Property="Control.Foreground" Value="White" />
            <Setter Property="Control.Background" Value="DarkBlue" />
        </Style>
    </Window.Resources>

EmphasizedBigFontButtonStyle 用 BasedOn 会继承 BigFontButtonStyle 的样式。没必要重复的样式重复写。

五、通过类型自动应用样式

<Window x:Class="WPFdemo9.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFdemo9"
        mc:Ignorable="d"
        Title="Window2" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </Window.Resources>
    <Grid>
       
        <StackPanel Margin="5">
            <Button Padding="5" Margin="5">111111</Button>
            <TextBlock Margin="5">2222222</TextBlock>
            <Button Padding="5" Margin="5" Style="{x:Null}" >33333333</Button>
            <TextBlock Margin="5">4444444</TextBlock>
            <Button Padding="5" Margin="5">5555555555</Button>
        </StackPanel>
    </Grid>
</Window>

   <Style TargetType="Button"> 设定所有Button 属性值。
   哪个Button不想设置，可以 Style="{x:Null}

效果图