【WPF】桌面程序开发之xaml页面主题和样式详解

news2024/9/20 6:05:53

使用Visual Studio开发工具，我们可以编写在Windows系统上运行的桌面应用程序。其中，WPF（Windows Presentation Foundation）项目是一种常见的选择。然而，对于初学者来说，WPF项目中xaml页面的布局设计可能是一个难点。下面将简要介绍WPF项目中xaml页面的主题和控件样式知识。

文章目录

页面布局
主题或样式
- 主题样式
- 样式
- - 内联样式
  - 外联样式
运行效果
查看工具

如果还不知道怎么创建WPF项目，可先看以下文章，回顾一下再来

Windows系统桌面应用程序编程开发新手入门-打造自己的小工具
桌面程序开发之xaml页面基础布局方式详解

学过web前端页面设计的同学应该很熟悉，在（网页）页面设计中有使用的样式

页面布局

带后缀名xaml的是页面的布局文件，打开内容大致如下

<Window x:Class="WpfApp4.MainWindow"
        ...
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
    	<!-- 这里设置统一控件的样式 -->
    </Window.Resources>    
    <Grid>
        <!-- 这里开始添加控件布局 -->
    </Grid>
</Window>

注意看这个Window.Resources标签对，这里面是设置主题或添加样式资源的地方

主题或样式

在页面中设置加载主题或样式需要区分，区别如下

注意看根标签Window，这是窗口里的，应在Window.Resources标签中设置主题样式资源;
如果根标签是Page，这是页面里的, 应在Page.Resources标签中设置主题样式资源;
如果根标签是UserControl，这是用户控件里的，应在UserControl.Resources标签中设置主题样式资源

例如，在用户控件中加载主题或样式资源就在UserControl.Resources这里设置

<UserControl
	...
	Title="MainWindow" Height="450" Width="800">
	<UserControl.Resources>
        <ResourceDictionary>
            <!-- 这里设置统一控件的样式 -->
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <!-- 这里开始布局添加页面控件 -->
    </Grid>
</UserControl>

主题样式

要加载一个主题，需要创建一个基本的样式（主题）文件，

项目根目录下/Styles/Base.xaml，

创建一个样式文件Base.xaml，如下图
在这里插入图片描述

这是一个是资源词典文件，文件内容中它的根标签是ResourceDictionary

打开此文件继续写，添加一个主题中的默认按钮样式，内容如下

<ResourceDictionary xmlns="...">
    <Style x:Key="Button.Default" TargetType="Button">
	    <Setter Property="Padding" Value="5" />
	    <Setter Property="Margin" Value="5" />
	    <Setter Property="Width" Value="55" />
	    <Setter Property="Background" Value="#01A2E8" />
	    <Setter Property="Foreground" Value="White" />
	    <Setter Property="BorderBrush" Value="#01A2E8" />
	</Style>
</ResourceDictionary>

一个样式需要确定好控件类型，通过其属性TargetType指定控件名

如果要在此按钮默认样式上做一些改变，添加一个新按钮样式，内容如下

<ResourceDictionary xmlns="...">
    <Style x:Key="Button.Default" TargetType="Button">
	    <Setter ... />
	</Style>
	<Style x:Key="Button.Warn" TargetType="Button" BasedOn="{StaticResource Button.Default}">
	    <Setter Property="Background" Value="#f42424" />
	    <Setter Property="Foreground" Value="White" />
	    <Setter Property="BorderBrush" Value="#f42424" />
	</Style>
</ResourceDictionary>

使用x:Key给一个样式起名为Button.Default，
然后通过另一个样式中属性BasedOn来继承它，使用基础的样式，
以此类推，你还可以添加一些其它不同控件的样式

接下来，我们将在页面布局中的所有控件使用此样式文件的基础样式（主题）

样式

学过web前端页面设计的同学应该很熟悉，页面设计中的样式有内联和外联样式

内联样式

如果每个控件的样式是不相同的，就在各自的控件中去修改它自己支持的样式属性值，

是和内联样式一样的，修改按钮控件属性后，内容如下

<Window 
	...
	Title="MainWindow" Height="450" Width="800">
	<Window.Resources>
    	<!-- 这里设置统一控件的样式 -->
    </Window.Resources>   
    <Grid>
        <!-- 这里开始布局添加页面控件 -->
        <Button Padding="5" Margin="5" Width="55" Click="Button_Click" Tag="save">保存</Button>
    </Grid>
</Window>

由此看出，页面中的按钮控件通过属性（内联样式）直接改变了按钮的基础样式

外联样式

如果有两个以上的控件需要使用相同的样式，就需要单独写一个外联样式来使用，

这样处理是高效的，修改后内容如下

<Window 
	...
	Title="MainWindow" Height="450" Width="800">
	<Window.Resources>
        <ResourceDictionary>
            <!-- 外联样式 -->
            <Style TargetType="Button" x:Key="Button.Default">
                <Setter Property="Padding" Value="5" />
                <Setter Property="Margin" Value="5" />
                <Setter Property="Width" Value="55" />
            </Style>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <!-- 这里开始布局添加页面控件 -->
        <Button Style="{StaticResource Button.Default}" Click="Button_Click" Tag="save">保存</Button>
    </Grid>
</Window>

这里可以看到，按钮控件通过属性Style使用了上面的外联样式；

外联样式还可以这样使用，加载外部的样式资源文件，

这样方便后面的维护，样式文件可复用，十分高效，

修改后内容如下

<Window 
	...
	Title="MainWindow" Height="450" Width="800">
	<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
            	<!-- 样式资源加载 -->
            	<ResourceDictionary Source="Styles/Button.xaml" />
            </ResourceDictionary.MergedDictionaries>
           	<!-- 这里设置其它的样式 -->
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <!-- 这里开始布局添加页面控件 -->
        <Button Style="{StaticResource Button.Default}" Click="Button_Click" Tag="save">保存</Button>
    </Grid>
</Window>