在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
,可以指定设置控件的样式,如下所示:
<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
的结构和外观。 Control
的 Template
属性是公共的,因此可以为 Control
指定与默认值不同的 ControlTemplate
。 通常可以为 Control
指定新的ControlTemplate
,而不是从控件继承以自定义 Control
的外观。
下面的示例为 Button
创建 ControlTemplate
。ControlTemplate
创建一个带圆角和渐变背景的 Button
。 ControlTemplat
e 包含一个Border
,其 Background
是具有两个 GradientStop
对象的 LinearGradientBrush
。 第一个 GradientStop
使用数据绑定将 GradientStop
的 Color
属性绑定到按钮背景的颜色。 设置 Button
的 Background
属性时,该值的颜色将用作第一个 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>
网友评论