WPF真入门教程22--样式应用

hqwest

已于 2022-12-25 09:55:39 修改

阅读量1.4k

点赞数

分类专栏： WPF真入门教程文章标签： wpf

于 2022-12-14 15:27:54 首次发布

本文链接：https://blog.csdn.net/hqwest/article/details/128315487

版权

WPF真入门教程专栏收录该内容

34 篇文章 160 订阅

订阅专栏

1、什么是样式

WPF相较于以前学的WinForm，WPF在UI设计与动画方面的炫丽是最吸引我来学习的。在WPF中XMAL代码的引入使得代码的编写能够前后端分离，为获得更好的界面，也使得我们不得不分出一半的时间花在前端代码的编写上，而样式（Style）又是前端代码中非常重要的元素，样式可以自定义控件的属性，比如修改button的字体、前景色、背景色、边框厚度颜色等。

如果您来自使用HTML和CSS开发Web的世界，您将很快意识到XAML与HTML非常相似：使用标签，您可以定义应用程序的结构布局。您甚至可以使用Foreground，FontSize等内联属性使您的元素以某种方式显示，就像您可以在本地设置HTML标记样式一样。

2、资源与样式的关系

WPF资源系统可以用来保存一些公有对象和样式，从而实现重用这些对象和样式的作用。而WPF样式是重用元素的格式的重要手段，可以理解样式就如CSS一样，尽管我们可以在每个控件中定义格式，但是如果多个控件都应用了多个格式的时候，我们就可以把这些格式封装成格式，然后在资源中定义这个格式，之前如果用到这个格式就可以直接使用这个样式，从而达到重用格式的手段。从中可以发现，WPF资源和WPF样式是相关的，我们经常把样式定义在资源中。也就是说样式是通过资源文件来定义和引用的。

3、样式定义与使用

3.1 基本样式示例

展示一个关于如何使用样式的非常基本的示例，在control文件夹添加窗口StyleWindow.xaml，设置启动文件为刚才添加的窗口文件StyleWindow.xaml，文件中编写以下内容：

<Window x:Class="WpfApp6.control.StyleWindow"
        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:WpfApp6.control"
        mc:Ignorable="d"
        Title="WPF样式" Height="450" Width="800">
    <!--定义窗口资源，资源里定义样式-->
    <Window.Resources>
        <!--定义样式，key指定键名-->
        <Style x:Key="btnStyle">
            <!--Property指定属性名称，Value指定属性值，跟css的概念一样-->
            <Setter Property="Control.FontFamily" Value="宋体"></Setter>
            <Setter Property="Control.Foreground" Value="Blue"></Setter>
            <Setter Property="Control.FontSize" Value="25"></Setter>
            <!--样式嵌套元素-->
            <Setter Property="Control.Background" >
                <Setter.Value>
                    <!--渐变画刷-->
                    <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                        <!--渐变点定义设置-->
                        <GradientStop Offset="0.3" Color="AliceBlue"/>
                        <GradientStop Offset="0.5" Color="OrangeRed"/>
                        <GradientStop Offset="0.7" Color="Pink"/>
                        <GradientStop Offset="1.0" Color="Yellow"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid  >
        <!--Style属性应用静态资源的btnStyle-->
        <Button Content="基本样式应用1" Style="{StaticResource btnStyle }" HorizontalAlignment="Left" Margin="168,76,0,0" VerticalAlignment="Top" Width="206" Height="69"/> 
    </Grid>
</Window>

可以看到每个Style对象封装了一个Setter对象的集合，每个Setter对象设置元素的单个属性，运行效果：

样式的嵌套元素，在某些情况下，不能使用简单的特性字符设置属性值，可使用嵌套元素代替，如代码：

3.2 针对特定元素类型的样式示例

style中可以指定TargetType属性来表示针对某个特定元素类型，如：

<Window x:Class="WpfApp6.control.StyleWindow"
        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:WpfApp6.control"
        mc:Ignorable="d"
        Title="WPF样式" Height="450" Width="800">
    <!--定义窗口资源，资源里定义样式-->
    <Window.Resources>
        <!--定义样式，key指定键名-->
        <Style x:Key="btnStyle">
            <!--Property指定属性名称，Value指定属性值，跟css的概念一样-->
            <Setter Property="Control.FontFamily" Value="宋体"></Setter>
            <Setter Property="Control.Foreground" Value="Blue"></Setter>
            <Setter Property="Control.FontSize" Value="25"></Setter>
            <!--样式嵌套元素-->
            <Setter Property="Control.Background" >
                <Setter.Value>
                    <!--渐变画刷-->
                    <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                        <!--渐变点定义设置-->
                        <GradientStop Offset="0.3" Color="AliceBlue"/>
                        <GradientStop Offset="0.5" Color="OrangeRed"/>
                        <GradientStop Offset="0.7" Color="Pink"/>
                        <GradientStop Offset="1.0" Color="Yellow"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style> 
        <!--定义样式，TargetType指定目标元素类型为TextBlock，这是自动应用-->
        <Style   TargetType="TextBlock"> 
            <Setter Property="Control.FontFamily" Value="楷体"></Setter>
            <Setter Property="Control.Foreground" Value="Red"></Setter>
            <Setter Property="Control.FontSize" Value="38"></Setter>
            <Setter Property="Control.BorderBrush" Value="YellowGreen"></Setter>
        </Style>
    </Window.Resources>
    <Grid  >
        <!--Style属性应用静态资源的btnStyle-->
        <Button Content="基本样式应用1" Style="{StaticResource btnStyle }" HorizontalAlignment="Left" Margin="168,76,0,0" VerticalAlignment="Top" Width="206" Height="69"/>
        <!--该TextBlock会自动应用前面定义的样式-->
        <TextBlock HorizontalAlignment="Left" Margin="429,41,0,0" TextWrapping="Wrap" Text="特定元素样式应用" VerticalAlignment="Top" Height="69" Width="312"/>
        <!--该TextBlock的样式设为Null，将不会自动应用前面定义的样式-->
        <TextBlock HorizontalAlignment="Left" Margin="444,134,0,0"  Style="{x:Null}" TextWrapping="Wrap" Text="没有应用特定元素" VerticalAlignment="Top"/>

    </Grid>
</Window>

运行效果是：

3.3多层样式应用示例

尽管可在许多不同层次定义任意数量的样式，但每个WPF元素一次只能使用一个样式对象。乍一看，这像是一种限制，但由于属性值继承和样式继承特性，这种限制实际上并不存在。

　　例如，假设希望为一组控件使用相同的字体，又不想为每个控件应用相同的样式，对于这种情况，可将它们放置到面板（或其他类型的容器）中，并设置容器的样式。只要设置的属性具有属性值继承特性，这些值就会被传递到子元素。使用这种模型的属性包括IsEnabled、IsVisible、Foreground以及所有字体属性。

　　有时候我们希望在另一个样式的基础上创建样式，这时可通过为样式设置BasedOn特性来使用此类样式继承，使用起来非常简单。

<Window x:Class="WpfApp6.control.StyleWindow"
        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:WpfApp6.control"
        mc:Ignorable="d"
        Title="WPF样式" Height="450" Width="800">
    <!--定义窗口资源，资源里定义样式-->
    <Window.Resources>
        <!--定义样式，key指定键名-->
        <Style x:Key="btnStyle">
            <!--Property指定属性名称，Value指定属性值，跟css的概念一样-->
            <Setter Property="Control.FontFamily" Value="宋体"></Setter>
            <Setter Property="Control.Foreground" Value="Blue"></Setter>
            <Setter Property="Control.FontSize" Value="25"></Setter>
            <!--样式嵌套元素-->
            <Setter Property="Control.Background" >
                <Setter.Value>
                    <!--渐变画刷-->
                    <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                        <!--渐变点定义设置-->
                        <GradientStop Offset="0.3" Color="AliceBlue"/>
                        <GradientStop Offset="0.5" Color="OrangeRed"/>
                        <GradientStop Offset="0.7" Color="Pink"/>
                        <GradientStop Offset="1.0" Color="Yellow"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style> 
        <!--定义样式，TargetType指定目标元素类型为TextBlock，这是自动应用-->
        <Style   TargetType="TextBlock"> 
            <Setter Property="Control.FontFamily" Value="楷体"></Setter>
            <Setter Property="Control.Foreground" Value="Red"></Setter>
            <Setter Property="Control.FontSize" Value="38"></Setter>
            <Setter Property="Control.BorderBrush" Value="YellowGreen"></Setter>
        </Style>
        <!--多层样式，基类样式-->
        <Style   TargetType="Label" x:Key="baseLab">
            <Setter Property="Control.FontFamily" Value="楷体"></Setter>
            <Setter Property="Width" Value="50"></Setter>
            <Setter Property="Height" Value="35"></Setter>
            <Setter Property="FontSize" Value="30"></Setter>
            <Setter Property="FontWeight" Value="Bold"></Setter>
        </Style>
        <!--继承样式BasedOn，增加的新样式-->
        <Style   TargetType="Label" BasedOn="{StaticResource baseLab}" x:Key="confLab">
            <Setter Property="Background" Value="Orange"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
        </Style>

    </Window.Resources>
    <Grid  >
        <!--Style属性应用静态资源的btnStyle-->
        <Button Content="基本样式应用1" Style="{StaticResource btnStyle }" HorizontalAlignment="Left" Margin="168,76,0,0" VerticalAlignment="Top" Width="206" Height="69"/>
        <!--该TextBlock会自动应用前面定义的样式-->
        <TextBlock HorizontalAlignment="Left" Margin="429,41,0,0" TextWrapping="Wrap" Text="特定元素样式应用" VerticalAlignment="Top" Height="69" Width="312"/>
        <!--该TextBlock的样式设为Null，将不会自动应用前面定义的样式-->
        <TextBlock HorizontalAlignment="Left" Margin="444,134,0,0"  Style="{x:Null}" TextWrapping="Wrap" Text="没有应用特定元素" VerticalAlignment="Top"/>
        <!--经度应用基类样式-->
        <Label Content="经度"  Style="{StaticResource baseLab }"  HorizontalAlignment="Left" Margin="168,200,0,0" VerticalAlignment="Top" Width="130" Height="52"/>
        <!--纬度应用继承样式-->
        <Label Content="纬度" Style="{StaticResource confLab}" HorizontalAlignment="Left" Margin="168,257,0,0" VerticalAlignment="Top" Width="130" Height="43"/>

    </Grid>
</Window>

运行起来的效果就是：

通过这几个例子，我自己已经能够对样式有一定里理解了，但还只是入门了

战鼓阵阵高，看我更上一层楼

hqwest

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
WPF真入门教程22--样式应用

战鼓阵阵高，看我更上一层楼1、什么是样式WPF相较于以前学的WinForm，WPF在UI设计与动画方面的炫丽是最吸引我来学习的。在WPF中XMAL代码的引入使得代码的编写能够前后端分离，为获得更好的界面，也使得我们不得不分出一半的时间花在前端代码的编写上，而样式（Style）又是前端代码中非常重要的元素，样式可以自定义控件的属性，比如修改button的字体、前景色、背景色、边框厚度颜色等。如果您来自使用和。
复制链接

扫一扫