WFP 樣式（復習用）
阿新 • • 發佈：2018-06-16
glob bind trigger type adding smo screen mouse 其他
WPF的樣式類似HTML的CSS，屬於資源，可以在設計頁面或者資源文件中設計樣式，然後在控件上引用樣式。
資源對象，不屬於樣式，定義如下。 不需要用<Style> </Style>括起來。
<Window.Resources> <FontFamily x:Key="ButtonFontFamily">Times New Roman</FontFamily> <sys:Double x:Key="ButtonFontSize">18</sys:Double> <FontWeight x:Key="ButtonFontWeight">Bold</FontWeight> </Window.Resources>
一、樣式的兩類
普通樣式
<Window.Resources> <Style x:Key="BigFontButtonStyle" TargetType="TextBlock"> //這個樣式只能用在TextBlock <Setter Property="Control.FontFamily" Value="Times New Roman"/> <Setter Property="Control.FontSize" Value="{DynamicResource ButtonFontSize}"/>//在樣式中使用資源對象 <Setter Property="Control.FontWeight" Value="Bold"/> </Style> </Window.Resources>
指定某類控件的樣式。如下將設置頁面中所有的TextBlock樣式。 註意這裏的<Style TargetType="TextBlock">中沒有基礎樣式的x:Key="BigFontButtonStyle"
<Window.Resources> <Style TargetType="TextBlock"> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="TextAlignment" Value="Center"/> <Setter Property="Padding" Value="5"/> </Style> </Window.Resources>
二、樣式的繼承
可以在資源文件中定義一個基礎樣式，被其他樣式繼承（或者叫做擴展）。
<Window.Resources> <Style x:Key="BaseOnStyle" TargetType="TextBlock"> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="TextAlignment" Value="Center"/> <Setter Property="Padding" Value="5"/> </Style> <Style x:Key="TextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseOnStyle}"> <Setter Property="Control.Foreground" Value="Red"/> </Style> </Window.Resources>
三、樣式的引用
樣式定義好後，可以在控件通過樣式名稱直接引用。這裏區分動態引用和靜態引用。動態引用的樣式，程序運行後在後臺代碼再修改樣式源文件後，控件會使用修改後的樣式，而靜態的則不會。
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="人員列表" Style="{DynamicResource TextBlockStyle}" />
在控件中也可以直接使用資源對象
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="人員列表" FontFamily="{DynamicResource ButtonFontFamily}" />
四、樣式觸發器
WPF樣式還支持觸發器，在樣式中定義的觸發器，只有在該屬性或事件發生時才會被觸發，下面具體看看簡單的樣式觸發器是如何定義和使用的，具體的XAML代碼如下所示：
<Window x:Class="StyleDemo.SimpleTriggers" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="SimpleTriggers" Height="300" Width="300"> <Window.Resources> <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="Red" /> </Trigger> <!--鼠標移過時觸發--> <Trigger Property="Control.IsMouseOver" Value="True"> <Setter Property="Control.Foreground" Value="Yellow" /> <Setter Property="Control.FontWeight" Value="Bold" /> </Trigger> <!--按鈕按下時觸發--> <Trigger Property="Button.IsPressed" Value="True"> <Setter Property="Control.Foreground" Value="Blue" /> </Trigger> </Style.Triggers> </Style> </Window.Resources> <StackPanel Margin="5"> <Button Padding="5" Margin="5" Style="{StaticResource BigFontButton}" >A Big Button</Button> <TextBlock Margin="5">Normal Content.</TextBlock> <Button Padding="5" Margin="5" >A Normal Button</Button> </StackPanel> </Window>
上面定義的觸發器都是在某個屬性發生變化時觸發的，也可以定義當某個事件激活時的觸發器，我們也把這樣的觸發器稱為事件觸發器，下面示例定義的事件觸發器是等待MouseEnter事件，一旦觸發MouseEnter事件，則動態改變按鈕的FontSize屬性來形成動畫效果，具體的XAML代碼如下所示：
<Window x:Class="StyleDemo.EventTrigger" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="EventTrigger" Height="300" Width="300"> <Window.Resources> <Style x:Key="BigFontButton"> <Style.Setters> <Setter Property="Control.FontFamily" Value="Times New Roman" /> <Setter Property="Control.FontSize" Value="18" /> <Setter Property="Control.FontWeight" Value="Bold" /> </Style.Setters> <Style.Triggers> <!--定義事件觸發器--> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <!--事件觸發時只需的操作--> <EventTrigger.Actions> <!--把動畫放在動畫面板中--> <BeginStoryboard> <!--在0.2秒的時間內將字體放大到22單位--> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="FontSize" To="22" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <!--鼠標移開觸發的事件--> <EventTrigger RoutedEvent="Mouse.MouseLeave"> <EventTrigger.Actions> <BeginStoryboard> <!--在1秒的時間內將字體尺寸縮小到原來的大小--> <!--如果目標字體尺寸沒有明確指定，則WPF將默認使用第一次動畫之前按鈕的字體尺寸--> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Style.Triggers> </Style> </Window.Resources> <StackPanel Margin="5"> <Button Padding="5" Margin="5" Style="{StaticResource BigFontButton}" >A Big Button</Button> <TextBlock Margin="5">Normal Content.</TextBlock> <Button Padding="5" Margin="5" >A Normal Button</Button> </StackPanel> </Window>
數據觸發器
下面例子中，當TextBox的Text長度小於7個字符時其Border會保持紅色。XAML代碼如下：
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication1" Title="WPF樣式的使用" Height="500" Width="800" WindowStartupLocation="CenterScreen"> <Window.Resources> <local:L2BConverter x:Key="cvtr" /> <Style TargetType="TextBox"> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Text.Length,Converter={StaticResource cvtr}}" Value="false"> <Setter Property="BorderBrush" Value="Red"/> <Setter Property="BorderThickness" Value="1"/> </DataTrigger> </Style.Triggers> </Style> </Window.Resources> <StackPanel> <TextBox Margin="5"/> <TextBox Margin="5,0"/> <TextBox Margin="5"/> </StackPanel> </Window>
這裏用到了Converter，我們創建如下的Converter：
using System; using System.Windows.Data; namespace WpfApplication1 { public class L2BConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { int textLength = (int)value; return textLength > 6 ? true : false; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } }
事件觸發器
EventTrigger是觸發器中最特殊的一個。首先，它不是由屬性值或數據的變化來觸發而是由事件來觸發；其次，被觸發後它並非應用一組Setter，而是執行一段動畫。因此，UI層的動畫效果往往與EventTrigger相關聯。
在下面這個例子中創建了一個針對Button的Style，這個Style包含兩個EventTrigger，一個由MouseEnter事件觸發，另一個由MouseLeave事件觸發。XAML代碼如下：
<Window.Resources> <Style TargetType="Button"> <Style.Triggers> <!--鼠標進入--> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/> <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/> </Storyboard> </BeginStoryboard> </EventTrigger> <!--鼠標離開--> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width"/> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </Window.Resources> <Canvas> <Button Width="40" Height="40" Content="OK"/> </Canvas>
WFP 樣式（復習用）