WPF(三)举例讲解WPF样式

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 事件处理

举例处理程序的theMouseEnterMouseLeave事件

<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}">表示继承了样式BigFontButtonStyleBasedOn是继承

 

五: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的那些属性或对象进行设置

    我们这里设置的是ButtonForeground属性,将其值设置为Blue

    同理,我们将ButtonFontFamily属性设置为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这里,有微微的光芒!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值