WPF中样式

  • 开发
  • 37

WPF中样式：类似于winform中控件的属性

<Grid>
        <!-- Button属性 字体大小 字体颜色 内容 控件宽 高 -->
        <Button FontSize="20" Foreground="Blue" Content="Hello" Width="100" Height="40"/>
    </Grid>

 效果如下： 

 如果要创建多个相似效果的按钮，就需要将该属性写多次，虽然也能达到相同的效果；但是费力。

<Grid>
        <StackPanel>
            <!-- Button属性 字体大小 字体颜色 内容 控件宽 高 -->
            <Button FontSize="20" Foreground="Blue" Content="Hello" Width="100" Height="40"/>
            <Button FontSize="20" Foreground="Blue" Content="Hello" Width="100" Height="40"/>
            <Button FontSize="20" Foreground="Blue" Content="Hello" Width="100" Height="40"/>
        </StackPanel>
    </Grid>

 效果如下： 

因此，首先想到的是早轮子重复使用。需要通过Style。

创建样式的步骤：

  • 在Window.Resources中创建样式
  • 给每个样式声明一个键Key，一个样式的名称而已
  • 给每个样式声明一个目标类型TargetType，例如Button
  • 设置属性：（Button为例）
  • 字体大小FontSize
  • 背景颜色Background
  • 字体颜色Foreground，边距Margin
  • 水平位置HorizontalAlignment，垂直位置VerticalAlignment

样式是组织和重用以上的重要工具。不是使用重复的标记填充XAML，通过Styles创建一系列封装所有这些细节的样式。它也是模板（Template）、触发器（Trigger）的基础。

    <Window.Resources>
        <Style x:Key="defaultStyle" TargetType="Button">
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="Foreground" Value="Blue"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="40"/>
        </Style>
    </Window.Resources>
    
    <Grid>
        <StackPanel>
            <Button Style="{StaticResource defaultStyle}" Content="Hello"/>
            <Button Style="{StaticResource defaultStyle}" Content="Hello"/>
            <Button Style="{StaticResource defaultStyle}" Content="Hello"/>
        </StackPanel>
    </Grid>

 效果如下：

查询Style源代码：

namespace System.Windows
{
    //
    // 摘要:
    //     启用的属性、 资源和事件处理程序的一种类型的实例之间共享。
    [ContentProperty("Setters")]
    [DictionaryKeyProperty("TargetType")]
    [Localizability(LocalizationCategory.Ignore)]
    public class Style : DispatcherObject, INameScope, IAddChild, ISealable, IHaveResources, IQueryAmbient
    {
        //
        // 摘要:
        //     初始化 System.Windows.Style 类的新实例。
        public Style();
        //
        // 摘要:
        //     新实例初始化 System.Windows.Style 类，用于对指定 System.Type。
        //
        // 参数:
        //   targetType:
        //     该样式将应用于哪个类型。
        public Style(Type targetType);
        //
        // 摘要:
        //     新实例初始化 System.Windows.Style 类，用于对指定 System.Type 并根据指定 System.Windows.Style。
        //
        // 参数:
        //   targetType:
        //     该样式将应用于哪个类型。
        //
        //   basedOn:
        //     要基于此样式的样式。
        public Style(Type targetType, Style basedOn);

        //
        // 摘要:
        //     获取一个值，该值指示是否样式是只读的并且不能更改。
        //
        // 返回结果:
        //     true 如果样式密封的;，否则为 false。
        public bool IsSealed { get; }
        //
        // 摘要:
        //     获取或设置此样式所针对的类型。
        //
        // 返回结果:
        //     此样式目标类型。
        [Ambient]
        [Localizability(LocalizationCategory.NeverLocalize)]
        public Type TargetType { get; set; }
        //
        // 摘要:
        //     获取或设置是当前样式的基础已定义的样式。
        //
        // 返回结果:
        //     已定义的样式，其当前样式的基础。 默认值为 null。
        [Ambient]
        [DefaultValue(null)]
        public Style BasedOn { get; set; }
        //
        // 摘要:
        //     获取一套 System.Windows.TriggerBase 应用属性值的对象根据指定的条件。
        //
        // 返回结果:
        //     System.Windows.TriggerBase 对象的集合。 默认值为空集合。
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        public TriggerCollection Triggers { get; }
        //
        // 摘要:
        //     获取一套 System.Windows.Setter 和 System.Windows.EventSetter 对象。
        //
        // 返回结果:
        //     一套 System.Windows.Setter 和 System.Windows.EventSetter 对象。 默认值为空集合。
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        public SetterBaseCollection Setters { get; }
        //
        // 摘要:
        //     获取或设置此样式的作用域内的可用资源的集合。
        //
        // 返回结果:
        //     可以使用此样式的作用域内的资源。
        [Ambient]
        public ResourceDictionary Resources { get; set; }

        //
        // 摘要:
        //     返回此 System.Windows.Style 的哈希代码。
        //
        // 返回结果:
        //     此 System.Windows.Style 的哈希代码。
        public override int GetHashCode();
        //
        // 摘要:
        //     在当前的名称范围中注册新的名称对象对。
        //
        // 参数:
        //   name:
        //     要注册的名称。
        //
        //   scopedElement:
        //     要映射到指定的对象 name。
        public void RegisterName(string name, object scopedElement);
        //
        // 摘要:
        //     锁定此样式和所有工厂和触发器，使它们不能进行更改。
        public void Seal();
        //
        // 摘要:
        //     从名称范围中移除名称对象映射。
        //
        // 参数:
        //   name:
        //     要删除的映射的名称。
        public void UnregisterName(string name);
    }
}
  • TargetType：Style的作用类型，例如Button。
  • BaseOn：继承已有的样式。
  • TriggerCollection：触发器集合。
  • SetterBaseCollection：属性集合。
  • ResourceDictionary：资源字典，比如笔刷，样式。

样式的作用：样式可以包含多个属性（样式管理属性集合），并批量作用于对象（不用写过多重复代码），也可以用于继承。

    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="25"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Content" Value="Button"/>
        </Style>
    </Window.Resources>
    
    <Grid>
        <UniformGrid Columns="3" Rows="3">
            <Button />
            <Button />
            <Button />

            <Button />
            <Button />
            <Button />

            <Button />
            <Button />
            <Button />
        </UniformGrid>
    </Grid>

 效果如下：

给样式起名字，并在作用对象中使用该样式：

    <Window.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="25"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Content" Value="Button"/>
        </Style>
    </Window.Resources>
    
    <Grid>
        <UniformGrid Columns="3" Rows="3">
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>

            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>

            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>
        </UniformGrid>
    </Grid>

 效果如下： 

样式继承

    <Window.Resources>
        <Style x:Key="baseButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="Foreground" Value="Blue"/>
        </Style>

        <Style x:Key="defaultButtonStyle1" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="40"/>
        </Style>

        <Style x:Key="defaultButtonStyle2" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
        </Style>
    </Window.Resources>
    
    <Grid>
        <StackPanel>
            <!-- Button属性 字体大小 字体颜色 内容 控件宽 高 -->
            <Button Style="{StaticResource defaultButtonStyle1}" Content="Hello"/>
            <Button Style="{StaticResource defaultButtonStyle2}" Content="Hello"/>
            <Button Style="{StaticResource defaultButtonStyle2}" Content="Hello"/>
        </StackPanel>
    </Grid>

效果如下： 

控件模板ControlTemplate

视图->其他->文档大纲

右键按钮->编辑模板->编辑副本

产生按钮模板：

<Window.Resources>
        <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

Content Presenter使得按钮可以承载很多内容。

阅读全部

相关推荐

  2. WPF 中 样式触发器机制 Style.Triggers

    2024-02-20 07:14:02       43 阅读

  4. WPF 基础入门（样式）

    2024-02-20 07:14:02       63 阅读

  7. wpf 按钮禁用样式

    2024-02-20 07:14:02       34 阅读

  8. WPF设置全局样式

    2024-02-20 07:14:02       30 阅读

最近更新

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

    2024-02-20 07:14:02       98 阅读

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

    2024-02-20 07:14:02       106 阅读

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

    2024-02-20 07:14:02       87 阅读

  19. Python语言-面向对象

    2024-02-20 07:14:02       96 阅读

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

    2024-02-20 07:14:02       91 阅读

热门阅读

  1. WPF大杂烩

    2024-02-20 07:14:02       47 阅读

  3. OFD文件WEB前端展示-easyofd(1.0.6)

    2024-02-20 07:14:02       49 阅读

  6. 历年CSP-J（NOIP普及组）考点分析与分类汇总

    2024-02-20 07:14:02       46 阅读

  7. ADO.NET事务处理

    2024-02-20 07:14:02       48 阅读

  10. oracle和mysql语句有哪些异同点？

    2024-02-20 07:14:02       62 阅读

  13. 如何在Win11系统中使用ubuntu(WSL)终端编译 Rust 程序

    2024-02-20 07:14:02       52 阅读

  18. 简化部署流程，提升开发效率：介绍 Electron Egg 打包优化

    2024-02-20 07:14:02       40 阅读

  20. MR混合现实情景实训教学系统在军事专业课堂上的应用

    2024-02-20 07:14:02       54 阅读

  24. vivado 简单的双端口块RAM示例、真正的双端口块RAM示例

    2024-02-20 07:14:02       42 阅读

  26. Xilinx（AMD） 7系列FPGA配置引脚说明

    2024-02-20 07:14:02       49 阅读

  27. 关于Future的使用

    2024-02-20 07:14:02       42 阅读

  28. 处理目标检测中的类别不均衡问题

    2024-02-20 07:14:02       50 阅读