WPF（三）举例讲解WPF样式

最新推荐文章于 2024-10-09 08:32:45 发布

cs_victor

最新推荐文章于 2024-10-09 08:32:45 发布

阅读量1.5k

点赞数

分类专栏： C# - WPF 文章标签： wpf button setter binding styles triggers

C# - WPF 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

WPF（三）举例讲解WPF样式

WPF学习

一： Creating a Style Object 创建样式

</Style>

TargetType:控件

Property:属性

Value：值

二：Setting Properties 设置属性

例如设置Button背景为红色：

</Style>

三：Attaching Event Handlers 事件处理

举例处理程序的theMouseEnter和MouseLeave事件

</Style>

Event：事件名称

Handler：事件方法

以下为该事件后台代码：

private void element_MouseEnter(object sender, MouseEventArgs e)

{

((TextBlock)sender).Background = new

SolidColorBrush(Colors.LightGoldenrodYellow);

}

private void element_MouseLeave(object sender, MouseEventArgs e)

{

((TextBlock)sender).Background = null;

}

四：The Many Layers of Styles 多种样式

<Window.Resources>

</Style>

</Style>

</Window.Resources>

里面设置了两个Style，用x:Key=""定义了样式的名字，BasedOn="{StaticResource BigFontButtonStyle}">表示继承了样式BigFontButtonStyle，BasedOn是继承

五：Automatically Applying Styles by Type 自动样式类型（你设置个Button的样式，你的所有Button都这个样式了，除非你给Button指定样式）

<Window.Resources>

</Style>

</Window.Resources>

<Button Padding="5" Margin="5">Customized Button</Button>

<TextBlock Margin="5">Normal Content.</TextBlock>

<Button Padding="5" Margin="5" Style="{x:Null}">A Normal Button</Button>

<TextBlock Margin="5">More normal Content.</TextBlock>

<Button Padding="5" Margin="5">Another Customized Button</Button>

</StackPanel>

第二个Button指定的样式,将不会采用设置的样式：<Button Padding="5" Margin="5" Style="{x:Null}">A Normal Button</Button>

Style="{x:Null}" :指定样式

六：Triggers 触发器

Name	Description
Trigger	This is the simplest form of trigger. It watches for a change in a dependency property and then uses a setter to change the style.
MultiTrigger	This is similar to trigger but combines multiple conditions. All the conditions must be met before the trigger springs into action.
DataTrigger	This trigger works with data binding. It’s similar to Trigger, except it watches for a change in any bound data
MultiDataTrigger	This combines multiple data triggers
EventTrigger	This is the most sophisticated trigger. It applies an animation when an event occurs

（一）A Simple Trigger 一个简单的触发器

<Style.Setters>

</Style.Setters>

<Style.Triggers>

</Trigger>

</Style.Triggers>

</Style>

当"Control.IsFocused= True "时，就Control.Foreground= DarkRed！哈哈，很容易理解吧！

（二）An Event Trigger 事件触发器

...

<EventTrigger.Actions>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Style.Triggers>

</Style>

这个有点GIF的感觉，或者Flash也可以，我们一般用Blend来制作！其中代码会自动生成！不过对代码了解，修改起来比较方便！

七巩固（一）——多种样式的Button

<!--声明了一个Style，它被声明在Window.Resources中说明它的有效范围是当前窗

也可以放在APP里面，是哪个项目的APP，就作用于哪个项目-->

<Window.Resources>

<!--TargetType="Button" 指示该Style的作用对象是Button类的实例

也就是说在当前窗体中的所有Button实例都将受到该Style的影响

除非某Button有明确地指明它所使用的是另外的Style-->

<!--定义的Style影响指定的Button对象而不是所有的Button对象

为Style添加一个x:Key="ButtonStyle"-->

<!--Setter是一个设置器，用来设置该Style要对TargetType的那些属性或对象进行设置

我们这里设置的是Button的Foreground属性，将其值设置为Blue

同理，我们将Button的FontFamily属性设置为CourierNew-->

</Style>

<!--Style对外界的交互

可以使用BaseOn来使一个Style“继承”另一个Style-->

<Style.Triggers>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

使用样式！

基本格式: Style="{StaticResource 样式名字}"

比如:

Style="{StaticResource ButtonStyle}"

Style="{StaticResource TriggerButtonStyle}"

举例:

普通Button

<Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1">normal button</Button>

样式一Button x:Key="ButtonStyle"

<Button Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled button</Button>

样式二button x:Key="TriggerButtonStyle"

<Button Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="1" Style="{StaticResource TriggerButtonStyle}">trigger button</Button>

七巩固(二)——漂亮的Button

(1) 创建个项目Style，新建窗体BeautifulButton，顺便把自动生成的Windows1删除

(2) 在BeautifulButton导入以下代码

<Window x:Class="Style.BeautifulButton"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="BeautifulButton" Height="300" Width="300">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

</Window>

(3) 在APP导入以下代码

<Application x:Class="Style.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="BeautifulButton.xaml">

<Application.Resources>

<Setter.Value>

<Border.BitmapEffect>

</Border.BitmapEffect>

<Border.Background>

<GradientBrush.GradientStops>

</GradientStopCollection>

</GradientBrush.GradientStops>

</LinearGradientBrush>

</Border.Background>

<Border.Background>

<GradientBrush.GradientStops>

</GradientStopCollection>

</GradientBrush.GradientStops>

</LinearGradientBrush>

</Border.Background>

<ContentPresenter.BitmapEffect>

</ContentPresenter.BitmapEffect>

</ContentPresenter>

</Border>

<ControlTemplate.Triggers>

<Trigger.EnterActions>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

<Trigger.EnterActions>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

<Trigger.EnterActions>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Application.Resources>

</Application>

效果图：鼠标是在2这里，有微微的光芒！