WPF2 样式布局

样式布局

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

字体(FontFamily)

字体大小(FontSize)

背景颜色(Background)

字体颜色(Foreground)

边距(Margin)

水平位置(HorizontalAlignment)

垂直位置(VerticalAlignment) 等等。

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

示例

csharp 复制代码
<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都重复定义。

下面将介绍通过样式如何优化上面的代码。

提取元素

csharp 复制代码
<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>

此时按钮的样式还在

单独定义

每个控件的外观

csharp 复制代码
<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 继承样式

基类往往定义公共元素

csharp 复制代码
<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和 控件内同时有相同元素时候,元素内优先级永远是最高的。会覆盖样式中的同类属性

csharp 复制代码
<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 的设置为类型必须和控件保持一致,否者不可用

csharp 复制代码
<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>
相关推荐
就是有点傻40 分钟前
C#中面试的常见问题006
开发语言·面试·c#·wpf
绿荫阿广11 小时前
WinUI(WASDK)使用BotSharp框架开发多智能体桌面机器人管理助手(生图开关灯不在话下)
c#·.net·winui
就是有点傻13 小时前
WPF中如何让Textbox显示为一条直线
c#·wpf
梦深时有鹿15 小时前
C#基础上机练习题
数据结构·算法·c#
时代的狂16 小时前
简单工厂模式
开发语言·c#·简单工厂模式
秋雨雁南飞16 小时前
C# 命令行运行包
c#·cli
雯0609~17 小时前
C#winform:连接mysql,并将数据展示到页面
开发语言·c#
@Crazy Snail17 小时前
C# 多线程异步--Token
开发语言·c#·token·task
好玩的Matlab(NCEPU)17 小时前
C#+数据库 实现动态权限设置
开发语言·数据库·c#
xcLeigh18 小时前
C# Winform 俄罗斯方块小游戏源码
开发语言·c#