美文网首页
WPF-外观样式

WPF-外观样式

作者: 写前端的大叔 | 来源:发表于2020-03-17 12:25 被阅读0次

wpf中,官方为我们提供了大量的控件,但为了让界面更美观,保持控件的一致性,我们都需要对原生的控件进行修改,修改控件的外观样式包括三种,分别为:更改控件的属性值为控件创建Style为控件创建新 ControlTemplate。下面来一一介绍每种类型是怎么修改控件的外观的。

1.更改控件的属性值

大多数控件都提供了修改外观的属性,如修改背景色可以设置Background,修改字体大小可以设置FontSize,如果要修改控件的外观,直接在xaml文件中修改对应的属性值就可以了。如下所示为修改按钮的背景和色字体大小,及文字的颜色:

<Button Width="100" Height="30" Background="Red" FontSize="23" Foreground="White">按钮</Button>

2.创建Style

通过第一种方式,修改控件的属性,需要设置每个控件的相关属性,设置起来相当麻烦,可以通过为控件创建Style来实现样式的复用,创建Style有两种方式,一种是用于修改所有控件,一种是通过指定key来修改,一般我们将创建的样式保存在资源字典中。

创建资源字典

首先需要创建资源字典,右键项目,然后选择添加项,弹出界面如下所示:


资源字典.png

选择资源字典并输入字典名称后,点击【添加】按钮进行添加。

引入资源字典文件

创建好资源字典文件后,在app.xaml文件中引入文件,AppStyle.xaml为新创建的资源字典文件,如下所示:

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="AppStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

创建样式

创建好文件后,再根据设计稿来创建相应的样式,如下所示为创建一个按钮的通用样式和一个指定的样式:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfAppDemo">
    <SolidColorBrush x:Key="defaultBackground" Color="Red" />

    <Style TargetType="Button">
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0.5" 
                              EndPoint="1,0.5">
                    <GradientStop Color="Green" Offset="0.0" />
                    <GradientStop Color="White" Offset="0.9" />
                </LinearGradientBrush>

            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

引用样式

如果创建的是通用样式,所有控件将生效,如果是设置Key,可以指定设置控件的样式,如下所示:

样式设置.png
<Window x:Class="WpfAppDemo.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:WpfAppDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical">
        <Button Width="100" Height="30" Margin="20">按钮</Button>
        <Button Width="100" Height="30"  Background="{StaticResource defaultBackground}">按钮</Button>
    </StackPanel>
</Window>

3.创建 ControlTemplate

通过Style,您可以一次对多个控件设置属性,但有时您可能希望自定义Control的外观,而不是通过创建 Style来实现的。 从 Control类继承的类具有一个 ControlTemplate,用于定义 Control的结构和外观。 ControlTemplate 属性是公共的,因此可以为 Control 指定与默认值不同的 ControlTemplate。 通常可以为 Control指定新的ControlTemplate,而不是从控件继承以自定义 Control的外观。
下面的示例为 Button创建 ControlTemplateControlTemplate创建一个带圆角和渐变背景的 ButtonControlTemplate 包含一个Border,其 Background 是具有两个 GradientStop 对象的 LinearGradientBrush。 第一个 GradientStop 使用数据绑定将 GradientStopColor 属性绑定到按钮背景的颜色。 设置 ButtonBackground 属性时,该值的颜色将用作第一个 GradientStop

<Style TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border 
          x:Name="Border"  
          CornerRadius="20" 
          BorderThickness="1"
          BorderBrush="Black">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0.5" 
                                 EndPoint="1,0.5">
                                <GradientStop Color="{Binding Background.Color, 
                    RelativeSource={RelativeSource TemplatedParent}}" 
                            Offset="0.0" />
                                <GradientStop Color="White" Offset="0.9" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter 
            Margin="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RecognizesAccessKey="True"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Background">
                                <Setter.Value>
                                    <LinearGradientBrush StartPoint="0,0.5" 
                                     EndPoint="1,0.5">
                                        <GradientStop Color="{Binding Background.Color, 
                    RelativeSource={RelativeSource TemplatedParent}}" 
                                Offset="0.0" />
                                        <GradientStop Color="DarkSlateGray" Offset="0.9" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

个人博客

相关文章

  • WPF-外观样式

    在wpf中,官方为我们提供了大量的控件,但为了让界面更美观,保持控件的一致性,我们都需要对原生的控件进行修改,修改...

  • Android 手机开发笔记

    ①展示包括外观样式和内容。 外观样式有位置,大小,颜色。 实现的功能是人机交互。 ②常用控件(大驼峰命名法则): ...

  • 玩转Eclipse

    外观样式设置:windows -> perfermances -> General ->Apperances -...

  • CSS 初识

    CSS 用来设置HTML外观显示样式。 样式表 内部样式表 行内样式表(内联样式) 外部样式表(外链式) 基础选择...

  • Windows 系统相关设置

    更改 terminal 外观样式 https://github.com/microsoft/terminal/re...

  • 2018-07-19 css总结

    一、css是什么?作用是什么 层叠样式表(级联样式表) 实现网页外观样式二、css引入方式三种? 内联...

  • Android样式(style)和主题(theme)

    样式和主题 样式是指为 View 或窗口指定外观和格式的属性集合。样式可以指定高度、填充、字体颜色、字号、背景色等...

  • CSS3

    一、什么是CSS 概念:级联样式表(层叠样式表) 作用:决定网页的样式、外观。 优势:内容与表现分离;网页的表现统...

  • Android Styles and Themes

    样式 样式是指为 View 或窗口指定外观和格式的属性集合。样式可以指定高度、填充、字体颜色、字号、背景色等许多属...

  • 2019-05-24 CSS3用户界面

    appearance 设置或检索外观按照本地默认样式 appearance:none | button | but...

网友评论

      本文标题:WPF-外观样式

      本文链接:https://www.haomeiwen.com/subject/fmnzehtx.html