WPF-06 样式(Style)

Posted 2022-09-24 dotNET跨平台

在我们前面介绍资源的时候，我们提到了样式表，如果你之前是做Web开发的，你会发现Style有点类似于Web中的CSS。

控件级别样式

我们可以在控件级别定义自己的样式，控件级别的样式是优先级最高的

<Window x:Class="Example_06.SelfControlStyle"
        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:Example_06"
        mc:Ignorable="d" Title="SelfControlStyle" Height="450" Width="800">
    <Grid>
        <TextBlock Text="TextBlock">
            <TextBlock.Style>
                <Style>
                    <Setter Property="TextBlock.Foreground" Value="Red"></Setter>
                    <Setter Property="TextBlock.FontSize" Value="100"></Setter>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

我们为控件定义了自己的样式

父级控件级别样式

<Window x:Class="Example_06.ParentControlStyle"
        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"
        mc:Ignorable="d" Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <StackPanel.Resources>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Green"></Setter>
                <Setter Property="Foreground" Value="White"></Setter>
                <Setter Property="FontSize"  Value="40"></Setter>
            </Style>
        </StackPanel.Resources>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button Background="red">Button 3</Button>
    </StackPanel>
</Window>

上面例子中我们在StackPanel中定义了样式，会应用容器里面所有Button，当然你也可以在Button级别覆盖父控件的样式

Window窗体级别样式

<Window x:Class="Example_06.WindowControlStyle"
        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:Example_06"
        mc:Ignorable="d" Title="WindowControlStyle" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="FontSize"  Value="30"></Setter>
         </Style>
    </Window.Resources>
    <StackPanel>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button Background="red">Button 3</Button>
    </StackPanel>
</Window>

我们将样式移到Window窗体级别，会将样式应用到该窗体的所有Button

应用程序级别样式

<Application x:Class="Example_06.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Example_06"
             StartupUri="ParentControlStyle.xaml">
    <Application.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="FontSize"  Value="20"></Setter>
        </Style>
    </Application.Resources>
</Application>

我们可以将样式定义为应用程序级别样式，样式表的优先级子节点样式可以覆盖父节点的样式，从下往上查找