WPF2 样式布局

  • 开发
  • 26

样式布局

WPF中的各类控件元素, 都可以自由的设置其样式。 诸如:

字体(FontFamily)
字体大小(FontSize)
背景颜色(Background)
字体颜色(Foreground)
边距(Margin)
水平位置(HorizontalAlignment)
垂直位置(VerticalAlignment) 等等。

而样式则是组织和重用以上的重要工具。不是使用重复的标记填充XAML, 通过Styles创建一系列封装所有这些细节的样式。然后通过Style属性应用封装好的样式。这点类似于CSS样式。然而, WPF样式的功能更加强大, 如控件的行为。WPF的样式还支持触发器(后面章节会讲到)。

示例

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <Button Content="button1" FontSize="18" Foreground="White" Background="Red"/>
            <Button Content="button1" FontSize="18" Foreground="White" Background="Red"/>
            <Button Content="button1" FontSize="18" Foreground="White" Background="Red"/>
            <Button Content="button1" FontSize="18" Foreground="White" Background="Red"/>
        </StackPanel>
    </Grid>
</Window>

在这里插入图片描述

优化

样式是组织和重用的工具。 而上面的代码, 由于每个元素都是相同的, 但是每个元素XAML都重复定义。
下面将介绍通过样式如何优化上面的代码。

提取元素

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Content" Value="button1"/>
            
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button />
            <Button />
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

此时按钮的样式还在
在这里插入图片描述
单独定义
每个控件的外观

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Content" Value="button1"/>
            
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

在这里插入图片描述
BaseOn 继承样式
基类往往定义公共元素

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
        </Style>

        <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Content" Value="button1"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

样式完全相同
在这里插入图片描述
Style和 控件内同时有相同元素时候，元素内优先级永远是最高的。会覆盖样式中的同类属性

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
        </Style>

        <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Content" Value="button1"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Content="hello1" Style="{StaticResource ButtonStyle}"/>
            <Button Content="hello2" Style="{StaticResource ButtonStyle}"/>
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

这里改变了控件内Content内容

在这里插入图片描述

TargetType 的设置为类型必须和控件保持一致，否者不可用

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
    <!--这里改变为checkbook-->
        <Style x:Key="BaseButtonStyle" TargetType="CheckBox">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
        </Style>

        <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Content" Value="button1"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Content="hello1" Style="{StaticResource ButtonStyle}"/>
            <Button Content="hello2" Style="{StaticResource ButtonStyle}"/>
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

在这里插入图片描述

阅读全部

相关推荐

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-23 07:14:05       94 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-23 07:14:05       100 阅读

  9. 在Django里面运行非项目文件

    2024-04-23 07:14:05       82 阅读

  19. Python语言-面向对象

    2024-04-23 07:14:05       91 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-04-23 07:14:05       85 阅读

热门阅读

  1. PaddleSeg数据集的准备

    2024-04-23 07:14:05       36 阅读

  2. python与PySpark

    2024-04-23 07:14:05       32 阅读

  7. 编写一个函数:定义一个结构体变量(包括年、月、日)，输入年月日后计算该日在本年中是第几天，输出在控制台，注意闰年的问题

    2024-04-23 07:14:05       34 阅读

  10. C++笔记打卡第15天（函数模版）

    2024-04-23 07:14:05       39 阅读

  11. 道路路标交通标志检测数据集VOC+YOLO格式877张4类别

    2024-04-23 07:14:05       26 阅读

  14. Python网络爬虫项目开发实战：怎么解决数据抓取

    2024-04-23 07:14:05       34 阅读

  16. 蓝桥杯 BASIC-22 基础练习 FJ的字符串

    2024-04-23 07:14:05       32 阅读

  20. go语言学习

    2024-04-23 07:14:05       31 阅读

  21. Golang net/http 标准库源码学习

    2024-04-23 07:14:05       30 阅读

  22. 【嵌入式学习】ARM day04.16

    2024-04-23 07:14:05       39 阅读

  23. c++计算DNA探针的熔解温度

    2024-04-23 07:14:05       36 阅读

  24. MapReduce——数据切片与MapTask并行度决定机制

    2024-04-23 07:14:05       36 阅读

  25. 代码随想录：链表

    2024-04-23 07:14:05       39 阅读

  27. 分发糖果——使用贪心算法

    2024-04-23 07:14:05       35 阅读

  29. CentOS 7 上安装 MySQL 8.0详细步骤

    2024-04-23 07:14:05       42 阅读

  30. 前端需要知道的知识点，附有链接

    2024-04-23 07:14:05       38 阅读