Loading

WPF样式

WPF样式定义

样式则是组织和重用以上的重要工具。不是使用重复的标记填充XAML, 通过Styles创建一系列封装所有这些细节的样式。然后通过Style属性应用封装好的样式。这点类似于CSS样式。

WPF样式使用示例

1.假设现在需要做一个简单的标签

代码如下(示例):

<StackPanel>
            <Label Content="标签1" Background="#54B458" Width="200" Height="26" Margin="5" FontSize="14"/>
            <Label Content="标签1" Background="#00BED6" Width="200" Height="26" Margin="5" FontSize="14"/>
            <Label Content="标签1" Background="#5479F5" Width="200" Height="26" Margin="5" FontSize="14"/>
            <Label Content="标签1" Background="#FF9400" Width="200" Height="26" Margin="5" FontSize="14"/>
            <Label Content="标签1" Background="#FF4DA0" Width="200" Height="26" Margin="5" FontSize="14"/>
        </StackPanel>

是不是发现有很多冗余的代码,除了Background属性不一样,其它完全一样

2.现在改造一下

首先定义一个样式,把重复的属性抽取出来:

<Window.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="Background" Value="#54B458" />
            <Setter Property="Width" Value="200" />
            <Setter Property="Height" Value="26" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Content" Value="标签" />
        </Style>
    </Window.Resources>

Tips:编写样式一般需要指定目标类型,也就是TargetType属性,它的值也有两种写法TargetType="{x:Type Label}"或直接使用TargetType="Label",两种效果一样的,不必纠结,区别可能就在于使用的命名空间不一样。

改造完后的XAML代码:

 <StackPanel>
            <Label Background="#54B458" />
            <Label Background="#00BED6" />
            <Label Background="#5479F5" />
            <Label Background="#FF9400" />
            <Label Background="#FF4DA0" />
        </StackPanel>

效果:

image-20210627150355196

我们并没有指定引用刚才写的Label标签样式,为何还能应用到呢?原因是如果没有Style指定Key,那么它就会默认为当前文件下的所有TargetType指定的类型的控件引用到该样式。但往往都会显示指定样式引用

显示引用自定义样式:

<Window.Resources>
        <Style x:Key="LableStyle" TargetType="{x:Type Label}">
            <Setter Property="Background" Value="#54B458" />
            <Setter Property="Width" Value="200" />
            <Setter Property="Height" Value="26" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Content" Value="标签" />
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Label Background="#54B458" Style="{StaticResource LableStyle}"/>
            <Label Background="#00BED6" />
            <Label Background="#5479F5" />
            <Label Background="#FF9400" />
            <Label Background="#FF4DA0" />
        </StackPanel>
    </Grid>

再来看看效果图:

image-20210627151034728

现在只有第一个Lable标签显示引用了命名为x:Key="LableStyle"的样式,而其他则也全部成了Lable控件的默认样式了。

如果需求变更,现在我需要某一些控件的高度更高一些,且标签内的字体要变大且为白色,这个时候就可以使用样式继承。

样式继承,我们再来改造一下代码:

 <Window.Resources>
        <Style x:Key="LableDefauleStyle" TargetType="{x:Type Label}">
            <Setter Property="Background" Value="#54B458" />
            <Setter Property="Width" Value="200" />
            <Setter Property="Height" Value="26" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Content" Value="标签" />
        </Style>

        <Style
            x:Key="LableMaxStyle"
            BasedOn="{StaticResource LableDefauleStyle}"
            TargetType="{x:Type Label}">
            <Setter Property="Height" Value="35" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Label Background="#54B458" Style="{StaticResource LableDefauleStyle}" />
            <Label Background="#00BED6" Style="{StaticResource LableMaxStyle}" />
            <Label Background="#5479F5" />
            <Label Background="#FF9400" Style="{StaticResource LableMaxStyle}" />
            <Label Background="#FF4DA0" />
        </StackPanel>
    </Grid>

效果图:

image-20210627151739118

样式继承我们只需要再新建一个Style,然后使用BaseOn去引用刚才那个样式,就可以拥有先前写好的那些样式,在此基础上,再设置我们独有的样式。

总结

  • 编写样式:在Window标签下新建<Window.Resources>,然后在里面编写样式

  • 使用样式:在控件上使用Style属性,Style="{StaticResource LableDefauleStyle}"

  • 样式名称(Key):如果不指定Key名称,则默认会全局引用,学过HTML的都知道,这有点类似于HTML中CSS的标签选择器,而你指定Key后,就类似于CSS的id选择器

  • BaseOn样式继承:在Style上使用BaseOn属性则可以直接继承被引用的所有样式,类似于面向对象语言中的继承关系,子类拥有父类的所有属性和方法等...

示例源代码

源代码:https://github.com/luchong0813/WPFSeriesJobs/tree/master/2-WPFStyle

posted @ 2021-06-28 00:08  傲慢与偏见luc  阅读(524)  评论(0编辑  收藏  举报