Styles & Triggers

1. Styles & Triggers

1.1. 什么是Style & Triggers

Styles enable you to create a cohesive appearance and behavior for your application. use triggersto provide dynamic interaction with your UI elements.

 

l Style

System.Object
  System.Windows.Threading.DispatcherObject
    System.Windows.Style

Namespace: System.Windows
Assembly:  PresentationFramework (in PresentationFramework.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation

1.2. Properties of Style Sytle属性

Name	Description
BasedOn	Gets or sets a defined style that is the basis of the current style. 说明这个属性依赖了其他那个属性，对于继承Sytle很有用.
Dispatcher	Gets the Dispatcher this DispatcherObject is associated with. (Inherited from DispatcherObject.)
IsSealed	Gets a value that indicates whether the style is read-only and cannot be changed.
Resources	Gets or sets the collection of resources that can be used within the scope of this style. 包含style使用的本地资源
Setters	Gets a collection of Setter and EventSetter objects. 包含了Setter或者EventSetter对象集合，用来在元素上设置属性和事件，当做Style.
TargetType	Gets or sets the type for which this style is intended. Identifies the intended element type（期望元素类型） for the style.
Triggers	Gets a collection of TriggerBase objects that apply property values based on specified 。包含Trigger对象集合和相关的对象，可以指定当用户界面发生变化时触发这个Trigger，发生响应的变化。Enable you to designate a change in the user interface in response to changes in properties.

 

在XAML中如何设置Style,在XAML中的骨架

<Style>

<!-- A collection of setters is enumerated here -->

<Style.Triggers>

<!-- A collection of Trigger and related objects is enumerated here -->

</Style.Triggers>

<Style.Resources>

<!-- A collection of local resources for use in the style -->

</Style.Resources>

</Style>

 

1.3. Setters

l property setters:which set values for properties

ü <Setter Property="Button.Background" Value="Red" /> 其中Property的格式必须是：Element.PropertyName

ü 如果想要创建一个Style，把一个属性设置多个元素类型:

<Style>

<Setter Property="Control.Background" Value="Red" />

</Style>

从Control继承的元素都保留Background的属性

l event setters

ü <EventSetter Event="Button.MouseEnter" Handler="Button_MouseEnter" />

ü Handler属性必须是指向现存的真确的event handler

ü Event property 格式：Element.EventName

 

1.4. Creating a Style

如何给元素加载Sytle,如何应用Style；

1.4.1. SETTING THE STYLE PROPERTY DIRECTLY

l 直接设置法，直接明了，但却不常用，因为需要在每个需要使用style的地方都添加一笔。在通常情况下，在设计阶段Style就已经做好了

<Button Height="25" Name="Button1" Width="100">

<Button.Style>

<Style>

<Setter Property="Button.Content" Value="Style set directly" />

<Setter Property="Button.Background" Value="Red" />

</Style>

</Button.Style>

</Button>

l 只有一种情况，可以直接设置Style,那就是在对元素设置一些TRIGGER时。

1.4.2. SETTING A STYLE IN A RESOURCES COLLECTION

1.       在资源集合中设置Style。最常用；

<Window.Resources>

<Style x:Key="StyleOne">

<Setter Property="Button.Content" Value="Style defined in resources" />

<Setter Property="Button.Background" Value="Red" />

</Style>

</Window.Resources>

2.       怎么应用

<Button Name="Button1" Style="{StaticResource StyleOne}" Height="30" Width="200" />

好处：可以在任何想要用这个Style的地方，引用这个Style属性；

1.4.3. APPLYING STYLES TO ALL CONTROLS OF A SPECIFIC TYPE

l 使用TargetType，来限定将这个属性应用在所有的限定元素上，后面使用这个元素就可以不要再给这个style属性了。

l Style的定义

<Window.Resources>

<Style TargetType="Button">

<Setter Property=" Content" Value="Style set for all buttons" />

<Setter Property="Background" Value="Red" />

</Style>

</Window.Resources>

问题：在什么情况下，一个style能自动的被元素应用？

回答：在style中增加TargetType属性

l Style的使用

<Button Style="{x:Null}" Margin="10">No Style</Button>

这里将Style名称设置为Null，就是获得默认的元素Style属性，当然也可以设置其他类型的属性。

1.4.4. SETTING A STYLE PROGRAMMATICALLY

l 在C#中设置Style

Style aStyle = new Style(); // create the Style object

Setter aSetter = new Setter(); // create setters & triggers

aSetter.Property = Button.BackgroundProperty;  

aSetter.Value = Brushes.Red;

aStyle.Setters.Add(aSetter);   // add them to the appropriate collection on the Style object

Setter bSetter = new Setter();

bSetter.Property = Button.ContentProperty;

bSetter.Value = "Style set programmatally";

aStyle.Setters.Add(bSetter);

Button1.Style = aStyle;   //set the Style property on the target elements

 

l 以上代码和下面写的一样

<!-- XAML -->

<Window.Resources>

<Style x:Key="StyleOne">

<Setter Property="Button.Content" Value="Style applied in code" />

<Setter Property="Button.Background" Value="Red" />

</Style>

</Window.Resources>

l 在C#使用style;

Style aStyle;

aStyle = (Style)this.Resources["StyleOne"];

Button1.Style = aStyle;

1.5. Implementing Style Inheritance

 使用Basedon属性，来实现style继承

<Window.Resources>

<Style x:Key="StyleOne">

<Setter Property="Button.Content" Value="Style set in original Style" />

<Setter Property="Button.Background" Value="Red" />

<Setter Property="Button.FontSize" Value="15" />

<Setter Property="Button.FontFamily" Value="Arial" />

</Style>

<Style x:Key="StyleTwo" BasedOn="{StaticResource StyleOne}">

<Setter Property="Button.Content" Value="Style set by inherited style" />

<Setter Property="Button.Background" Value="AliceBlue" />

<Setter Property="Button.FontStyle" Value="Italic" />

</Style>

</Window.Resources>

1.6. Triggers

继承Triggers:

System.Object
  System.Windows.Threading.DispatcherObject
    System.Windows.DependencyObject
      System.Windows.TriggerBase
        System.Windows.Trigger

Namespace: System.Windows
Assembly:  PresentationFramework (in PresentationFramework.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation

TYPE	CLASS NAME	DESCRIPTION
Property trigger	Trigger	Monitors a property and activates when the value of that property matches the Value property
Multi-trigger	MultiTrigger	Monitors multiple properties and activates only when all the monitored property values match their corresponding Value properties
Data trigger	DataTrigger	Monitors a bound property and activates when the value of the bound property matches the Value property
Multi-data trigger	MultDataTrigger	Monitors multiple bound properties and activates only when all the monitored bound properties match their corresponding Value properties
Event trigger	EventTrigger	Initiates a series of actions when a specified event is raised

一般Triggers只在<Style.Triggers>标签中有用，只有一种例外：EventTrigger可以在Control.Triggers集合中有用。

1.6.1. Property Triggers

这个属性是用来监督属性的值变化的，如果属性的值（value）等于了设定值，则Trigger触发。

PROPERTY	DESCRIPTION
EnterActions	Contains a collection of Action objects that are applied when the trigger becomes active.
ExitActions	Contains a collection of Action objects that are applied when the trigger
Property	Indicates the property that is monitored for changes.
Setters	Contains a collection of Setter objects that are applied when the trigger becomes active.
Value	Indicates the value that is compared to the property referenced by the Property property.

例子：

<Style.Triggers>

<Trigger Property="Button.IsMouseOver" Value="True">

<Setter Property="Button.FontWeight" Value="Bold" />

</Trigger>

</Style.Triggers>

1.6.2. Multi-triggers

<Style.Triggers>

<MultiTrigger>

<MultiTrigger.Conditions>

<Condition Property="Button.IsMouseOver" Value="True" />

<Condition Property="Button.IsFocused" Value="True" />

</MultiTrigger.Conditions>

<MultiTrigger.Setters>

<Setter Property="Button.FontWeight" Value="Bold" />

</MultiTrigger.Setters>

</MultiTrigger>

</Style.Triggers>

1.6.3. Data Triggers and Multi-data Triggers

l Date Triggers:

<Style.Triggers>

<DataTrigger Binding="{Binding Path=CustomerName}" Value="Fabrikam">

<Setter Property="Label.Background" Value="Red" />

</DataTrigger>

</Style.Triggers>

问题：Value中是否可以存放变量？实现数据读取中的，字体变化；

l Multi-data Triggers:

<Style.Triggers>

<MultiDataTrigger>

<MultiDataTrigger.Conditions>

<Condition Binding="{Binding Path=CustomerName}" Value="Fabrikam" />

<Condition Binding="{Binding Path=OrderSize}" Value="500" />

</MultiDataTrigger.Conditions>

<MultiDataTrigger.Setters>

<Setter Property="Label.Background" Value="Red" />

</MultiDataTrigger.Setters>

</MultiDataTrigger>

</Style.Triggers>

1.6.4. Event Triggers

l event triggers specify an event and activate when that event is raised

l event triggers do not have a Setters collection; rather, they have an Actions collection

<EventTrigger RoutedEvent="Button.Click">

<SoundPlayerAction Source="C:\myFile.wav" />

</EventTrigger>

 

<EventTrigger RoutedEvent="Button.Click">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation Duration="0:0:5"

Storyboard.TargetProperty="Height" To="200" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

 

1.7. Understanding Property Value Precedence

资源设置的优先顺序，和设置的先后顺序没有关系，和怎么设置有关系。

1. Set by coercion（强制） by the property system.

2. Set by active animations or held animations.

3. Set locally by code, by direct setting in XAML, or through data binding.

4. Set by TemplatedParent. Within this category is a sub-order of precedence, again listed in descending order:

a. Set by triggers from the templated parent

b. Set by the templated parent through property sets

5. Implicit style; this applies only to the Style property.

6. Set by Style triggers.

7. Set by Template triggers.

8. Set by Style setters.

9. Set by the default Style. There is a sub-order within this category, again listed in descending order:

a. Set by triggers in the default style

b. Set by setters in the default style

10. Set by inheritance.

11. Set by metadata.

个人理解，排名优先顺序如下：

l property coercion. 例如设置了slider标签的value值超过了系统允许的max值，系统会强制把这个值设置为MAX值

l animations.动画？Mark一下，还没学到

l 程序员设置的显性的属性数据，例如TemplatedParent, <style TargetType> ,<style x:key=>, triggers。

l 然后是Style,用户自定义style 优先级大于默认style,

l 最后面是继承和应用中的元数据。

TIPS:

l 如果程序员在XAML和C#中设置了属性数据，会屏蔽掉Style和trigger标签中的内容，但可以被animation重载（by active override）

l 在Visual Studio designer surface中从工具箱通过拖拽（drag and drop）方式画出layout时，会设置很多Implicitly属性，需要手工的去删除，最好是直接在XAML view中写explicit的属性

l 可以使用DependencyObject.ClearValue方法，来代替手工删除Implicitly属性,例如在XAML中建一个button1,然后在代码中写：

Button1.ClearValue(WidthProperty);