WPF(三)举例讲解WPF样式
来源:互联网 发布:淘宝 胖驴 编辑:程序博客网 时间:2024/05/17 06:22
WPF(三)举例讲解WPF样式
WPF学习
一: Creating a Style Object 创建样式
<Style TargetType="…">
<Setter Property="…" Value="…" />
</Style>
TargetType:控件
Property:属性
Value:值
二:Setting Properties 设置属性
例如设置Button背景为红色:
<Style TargetType="Button">
<Setter Property="Background" Value="Red" />
</Style>
三:Attaching Event Handlers 事件处理
举例处理程序的theMouseEnter和MouseLeave事件
<Style x:Key="MouseOverHighlightStyle">
<EventSetter Event="TextBlock.MouseEnter" Handler="element_MouseEnter" />
<EventSetter Event="TextBlock.MouseLeave" Handler="element_MouseLeave" />
<Setter Property="TextBlock.Padding" Value="5"/>
</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 x:Key="BigFontButtonStyle">
<Setter Property="Control.FontFamily" Value="Times New Roman" />
<Setter Property="Control.FontSize" Value="18" />
<Setter Property="Control.FontWeight" Value="Bold" />
</Style>
<Style x:Key="EmphasizedBigFontButtonStyle" BasedOn="{StaticResource BigFontButtonStyle}">
<Setter Property="Control.Foreground" Value="White" />
<Setter Property="Control.Background" Value="DarkBlue" />
</Style>
</Window.Resources>
里面设置了两个Style,用x:Key=""定义了样式的名字,BasedOn="{StaticResource BigFontButtonStyle}">表示继承了样式BigFontButtonStyle,BasedOn是继承
五:Automatically Applying Styles by Type 自动样式类型(你设置个Button的样式,你的所有Button都这个样式了,除非你给Button指定样式)
<Window.Resources>
<Style TargetType="Button">
<Setter Property="FontFamily" Value="Times New Roman" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</Window.Resources>
<StackPanel Margin="5">
<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 x:Key="BigFontButton">
<Style.Setters>
<Setter Property="Control.FontFamily" Value="Times New Roman" />
<Setter Property="Control.FontSize" Value="18" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="Control.IsFocused" Value="True">
<Setter Property="Control.Foreground" Value="DarkRed" />
</Trigger>
</Style.Triggers>
</Style>
当"Control.IsFocused= True "时,就Control.Foreground= DarkRed!哈哈,很容易理解吧!
(二)An Event Trigger 事件触发器
...
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
这个有点GIF的感觉,或者Flash也可以,我们一般用Blend来制作!其中代码会自动生成!不过对代码了解,修改起来比较方便!
七 巩固(一)——多种样式的Button
<!--声明了一个Style,它被声明在Window.Resources中说明它的有效范围是当前窗
也可以放在APP里面,是哪个项目的APP,就作用于哪个项目-->
<Window.Resources>
<Style TargetType="Button" x:Key="ButtonStyle">
<!--TargetType="Button" 指示该Style的作用对象是Button类的实例
也就是说在当前窗体中的所有Button实例都将受到该Style的影响
除非某Button有明确地指明它所使用的是另外的Style-->
<!--定义的Style影响指定的Button对象而不是所有的Button对象
为Style添加一个x:Key="ButtonStyle"-->
<Setter Property="Foreground" Value="Blue" />
<Setter Property="FontFamily " Value="CourierNew"/>
<!--Setter是一个设置器,用来设置该Style要对TargetType的那些属性或对象进行设置
我们这里设置的是Button的Foreground属性,将其值设置为Blue
同理,我们将Button的FontFamily属性设置为CourierNew-->
</Style>
<Style TargetType="Button" x:Key="TriggerButtonStyle" BasedOn="{StaticResource ButtonStyle}">
<!--Style对外界的交互
可以使用BaseOn来使一个Style“继承”另一个Style-->
<Style.Triggers>
<!--可以在Style中添加Trigger(触发器)-->
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Red"/>
<!--事件 按下BUTTON变红...影藏含义:Value="False"BUTTON还原-->
</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 Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0" Height=" 25" Margin="10" Background="AliceBlue">1</Button>
<Button Grid.Column="0" Grid.Row="1" Height=" 25" Margin="10" Background="Beige">2</Button>
<Button Grid.Column="0" Grid.Row="2" Height=" 25" Margin="10" Background="CadetBlue">3</Button>
<Button Grid.Column="1" Grid.Row="0" Height=" 25" Margin="10" Background="DarkBlue">4</Button>
<Button Grid.Column="1" Grid.Row="1" Height=" 25" Margin="10" Background="Firebrick">5</Button>
<Button Grid.Column="1" Grid.Row="2" Height=" 25" Margin="10" Background="Gainsboro">6</Button>
<Button Grid.Column="2" Grid.Row="0" Height=" 25" Margin="10" Background="Honeydew">7</Button>
<Button Grid.Column="2" Grid.Row="1" Height=" 25" Margin="10" Background="IndianRed">8</Button>
<Button Grid.Column="2" Grid.Row="2" Height=" 25" Margin="10" Background="Khaki">9</Button>
</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>
<!--定义按钮样式-->
<Style TargetType="Button">
<Setter Property="Foreground" Value="Black"/>
<!--修改模板属性-->
<Setter Property="Template">
<Setter.Value>
<!--控件模板-->
<ControlTemplate TargetType="Button">
<!--背景色-->
<Border x:Name="back" Opacity="0.8" CornerRadius="3">
<Border.BitmapEffect>
<OuterGlowBitmapEffect Opacity="0.7" GlowSize="0" GlowColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" />
</Border.BitmapEffect>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/>
<GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/>
<GradientStop Color="#FFF" Offset="1"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<!--前景色及边框-->
<Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#6FFF" Offset="0.5"/>
<GradientStop Color="#1111" Offset="0.51"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<!--按钮内容-->
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}">
<ContentPresenter.BitmapEffect>
<DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3" />
</ContentPresenter.BitmapEffect>
</ContentPresenter>
</Border>
</Border>
<!--触发器-->
<ControlTemplate.Triggers>
<!--鼠标移入移出-->
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--按钮按下弹起-->
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="3" Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<ColorAnimation To="#3AAA" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation To="#2111" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--按钮失效-->
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#B444"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:0.3" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<DoubleAnimation To="1" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />
<DoubleAnimation To="-135" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />
<ColorAnimation To="#FFF" Duration="0:0:0.3" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />
<ColorAnimation To="#D555" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
<ColorAnimation To="#CEEE" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation To="#CDDD" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />
<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
效果图:鼠标是在2这里,有微微的光芒!
- WPF(三)举例讲解WPF样式
- WPF(二)举例讲解WPF布局
- WPF(五)举例讲解WPF数据绑定
- WPF(四)举例讲解WPF控件模版
- WPF(一)举例讲解XML语法和格式
- WPF 样式
- WPF样式
- WPF 样式
- wpf样式
- WPF 样式
- WPF样式
- WPF基础之样式设置和模板化(三)
- WPF 中的样式(Style)
- WPF 按钮样式(2)
- WPF样式(Style)入门
- WPF初学者之WPF样式
- WPF中的拖放(三)
- WPF数据绑定(三)
- BitMapData位图相交区域透明 解决深度管理方案
- makefile:29: *** missing separator
- Linux操作系统下的多线程编程详细解析
- hql 多表查询
- Java线程:并发协作-生产者消费者模型
- WPF(三)举例讲解WPF样式
- JSP中实现添加一行,删除一行操作
- C++ 类型转换详解
- tomcat启动报错,不能正常创建连接池
- video4linux(v4l)使用摄像头的实例基础教程与体会
- 一道有道编程题
- ajax 发送xml文件,java接受xml文件并解析
- 分治算法
- Spring编程式事务