记录 | WPF基础学习Style局部和全局调用

news2025/4/21 13:49:09

前言
一、Style
- 1.1 例子
- 1.2 为样式起名字
- 1.3 BasedOn 继承上一个样式
二、外部Style
- Step1 创建资源字典BaseButtonStyle.xaml
- Step2 在资源字典中写入Style
- Step3 App.xaml中写引用路径【全局】
- Step4 调用
- 三、代码提供
- 四、x:Key和x:Name区别
更新时间

前言

参考文章：
参考视频：【WPF入门教程 Visual Studio 2022】WPF界面开发入门

自己的感想

一、Style

如下图所示，在Windows.Resources中设置的Style属性，只在当前界面产生效果。

1.1 例子

在这里插入图片描述

<Window x:Class="WPF_Study.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:WPF_Study"
        mc:Ignorable="d"
        Title="WPF入门.txt" Height="600" Width="800">

    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Width" Value="70"/>
        </Style>
    </Window.Resources>

    <StackPanel>
        <Button Content="登录" />
        <Button Content="帮助" />
        <Button Content="退出" />
    </StackPanel>

</Window>

1.2 为样式起名字

为啥要起别名？1.1中的案例导致所有的Button组件都是这个红色样式，但是如果我们只想让退出按钮为红色，其他三个按钮为绿色，该怎么操作？
在这里插入图片描述

<Window x:Class="WPF_Study.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:WPF_Study"
        mc:Ignorable="d"
        Title="WPF入门.txt" Height="600" Width="800">

    <Window.Resources>
        <Style x:Key="QuitStyle" TargetType="Button">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Width" Value="70"/>
        </Style>
        <Style x:Key="loginStyle" TargetType="Button">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Width" Value="70"/>
        </Style>
    </Window.Resources>

    <StackPanel>
        <Button Style="{StaticResource loginStyle}" Content="登录" />
        <Button Style="{StaticResource loginStyle}" Content="帮助" />
        <Button Style="{StaticResource QuitStyle}" Content="退出" />
    </StackPanel>

</Window>

1.3 BasedOn 继承上一个样式

在这里插入图片描述

<Window x:Class="WPF_Study.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:WPF_Study"
        mc:Ignorable="d"
        Title="WPF入门.txt" Height="600" Width="800">

    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="WhiteSmoke"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Margin" Value="20,10"/>
        </Style>
        <Style x:Key="QuitStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
            <Setter Property="Background" Value="Red"/>
        </Style>
        <Style x:Key="loginStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
            <Setter Property="Background" Value="Green"/>
        </Style>
    </Window.Resources>

    <StackPanel>
        <Button Style="{StaticResource loginStyle}" Content="登录" />
        <Button Content="帮助" />
        <Button Style="{StaticResource QuitStyle}" Content="退出" />
    </StackPanel>

</Window>