当前位置：网站首页>WPF 学习笔记《WPF样式基础》

WPF 学习笔记《WPF样式基础》

2022-08-03 07:59:00 【太阳风暴】

WPF样式基础

一、样式简介

参考资料：https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.style?view=windowsdesktop-6.0
为了方便的设计WPF界面的样式，可以直接在界面xaml中指定对应的样式代码，用作设计样式即可。当然xaml文件只是描述如何去生成c#后台代码而已，同样的，style本质上也是一个类，也不仅仅是为了生成后台代码。style的样式我们也可以在后台去设置。我学的基础只限于前端样式xaml文件的书写

1、样式位置

样式属于代码片段，可以放置于每一个窗口也是(window***.xaml)文件的 Resources 内部，当然也可把该样式代码放置于app.xaml内部的资源中，那么放置在app.xaml的样式文件会在全局生效，有点儿类似 CSS代码样式表的层叠效果。

<!--全局设置：作用于全局-->
<Application x:Class="EventLearn.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:EventLearn" StartupUri="UseStyle.xaml">
    <Application.Resources>
    	<Style TargetType="{x:Type Button}"> <!--样式代码--> </Style>  
    </Application.Resources>
</Application>

<!--局部样式：只作用于当前窗口-->
<Window x:Class="EventLearn.UseStyle" 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:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button"> <!--样式代码--> </Style>
    </Window.Resources>
    <Grid>
        
    </Grid>
</Window>

2、样式写法

资源以 <style> 标签标注起来的样式，在 <style> 可以指定使用 TargetType 描述样式设置于 什么样的控件，还可以跟上 x:Key 来指定样式的标志，在控件指定使用哪一种样式即可
在内部可以使用<setter>标签包裹来表示如下，<setter>内部使用的是 Property - Value 来表示一种特性
设置一个按钮的样式，内部可以使用xaml的展开式来描述值

<Window x:Class="EventLearn.UseStyle" 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:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background" Value="Black"/> </Style>

        <Style x:Key="NewBtnStyle" TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="BlueViolet"/> </Setter.Value> </Setter> </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Button Content="按钮一" Margin="20" Grid.Column="0" Grid.Row="0"/>
        <Button Content="按钮二" Margin="20" Grid.Column="0" Grid.Row="1"/>
        <Button Content="按钮三" Margin="20" Grid.Column="0" Grid.Row="2"/>
        <Button Content="按钮四" Margin="20" Grid.Column="0" Grid.Row="3"/>

        <Button Content="按钮一" Style="{
        StaticResource NewBtnStyle}" Margin="20" Grid.Column="1" Grid.Row="0" />
        <Button Content="按钮二" Margin="20" Style="{
        StaticResource NewBtnStyle}" Grid.Column="1" Grid.Row="1"/>
        <Button Content="按钮三" Margin="20" Grid.Column="1" Grid.Row="2"/>
        <Button Content="按钮四" Margin="20" Grid.Column="1" Grid.Row="3"/>
    </Grid>
</Window>
  • 效果图：
    在这里插入图片描述

二、静态样式

静态样式，一般会设置在具有动态效果的控件(如Button)以便打基础，动态交互就需要使用到动态样式的设置、以及不具有动态交互的控件(如 Border、Label、TextBlock等)
如下代码

<Window x:Class="EventLearn.UseStyle" 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:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background" Value="Black"/> </Style>

        <Style x:Key="NewBtnStyle" TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="BlueViolet"/> </Setter.Value> </Setter> </Style>

        <Style TargetType="Border" x:Key="Logo"> <Setter Property="CornerRadius" Value="10 2 10 2"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush" Value="CadetBlue"/> <Setter Property="Margin" Value="20"/> <Setter Property="Background" Value="Chocolate"/> </Style>

        <Style TargetType="TextBlock"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="FontSize" Value="16"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Button Content="按钮一" Margin="20" Grid.Column="0" Grid.Row="0"/>
        <Button Content="按钮二" Margin="20" Grid.Column="1" Grid.Row="0"/>
        <Border Style="{
        StaticResource Logo}" Grid.Column="2" Grid.Row="0">
            <TextBlock Text="WPF"/>
        </Border>

    </Grid>
</Window>

在这里插入图片描述

三、动态样式

大部分控件是具有交互功能的，如果需要创建动态效果，如鼠标移动到控件上、鼠标按下、释放等

<Window x:Class="EventLearn.UseStyle" 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:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background" Value="Black"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="Transparent"/> <Setter Property="Foreground" Value="Black"/> <Setter Property="BorderBrush" Value="Aquamarine"/> <Setter Property="BorderThickness" Value="4"/> </Trigger> </Style.Triggers> </Style>        

        <Style x:Key="NewBtnStyle" TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="BlueViolet"/> </Setter.Value> </Setter> </Style>

        <Style TargetType="Border" x:Key="Logo"> <Setter Property="CornerRadius" Value="10 2 10 2"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush" Value="CadetBlue"/> <Setter Property="Margin" Value="20"/> <Setter Property="Background" Value="Chocolate"/> </Style>

        <Style TargetType="TextBlock"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="FontSize" Value="16"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Button Content="按钮一" Margin="20" Grid.Column="0" Grid.Row="0"/>
        <Button Content="按钮二" Margin="20" Grid.Column="1" Grid.Row="0"/>
        <Border Style="{
        StaticResource Logo}" Grid.Column="2" Grid.Row="0">
            <TextBlock Text="WPF"/>
        </Border>

    </Grid>
</Window>
  • 示例：
    在这里插入图片描述

四、样式继承

可以使用 BaseOn 基础默认基础样式，当然已有的样式那个继承得样式是按照优先级，越具体的优先级越高。没设置的就默认继承之前最近一次父对象。没有BaseOn的话就按照的是控件的控件模板渲染

<Window x:Class="EventLearn.UseStyle" 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:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="Defate" TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background" Value="Black"/> </Style>        

        <Style BasedOn="{StaticResource Defate}" x:Key="NewBtnStyle" TargetType="Button"> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="BlueViolet"/> </Setter.Value> </Setter> </Style>

    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Button Content="按钮一" Style="{
        StaticResource Defate}" Margin="20" Grid.Column="0" Grid.Row="0"/>
        <Button Content="按钮二" Style="{
        StaticResource NewBtnStyle}" Margin="20" Grid.Column="1" Grid.Row="0"/>
        

    </Grid>
</Window>

在这里插入图片描述

五、补充

待定

原网站

版权声明
本文为[太阳风暴]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43680827/article/details/124018851

边栏推荐

猜你喜欢

随机推荐