WPF QuickStart系列之樣式和模板(Style and Template)

時間 2020-06-15

標籤 wpf quickstart 系列樣式模板 style template 简体版

原文原文鏈接

在WPF桌面程序中，當咱們想構建一個統一的UI表現時(在不一樣操做系統下，顯示效果一致)，此時咱們就須要使用到WPF中的樣式和模板技術。簡單來講，若是咱們須要簡單的給一個Button設置寬，高，Margin等，能夠使用Style來指定這一系列的屬性。能夠把Style理解爲一個屬性的集合。若是須要徹底改變控件的樣子，就須要使用到Template技術，至關於給控件換一層皮，不過Button仍是Button，它原有的行爲(Click事件)還存在。並且咱們僅須要在XAML中遍能夠完成對樣式和模板的定義和重寫。很是簡潔方便。ide

首先經過一個例子瞭解Style。spa

 <Window.Resources>
        <Style x:Key="numericStyle" TargetType="{x:Type Button}">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="Margin" Value="4" />
            <Setter Property="Padding" Value="6" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Blue"/>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="Button" x:Key="operatorStyle"
            BasedOn="{StaticResource numericStyle}">
            <Setter Property="FontWeight" Value="ExtraBold" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Red" />
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBox Background="Cyan" IsReadOnly="True" Grid.ColumnSpan="4" FontSize="20"/>
        <Button Content="7" Style="{StaticResource numericStyle}" Grid.Row="1"/>
        <Button Content="8" Style="{StaticResource numericStyle}" Grid.Row="1" Grid.Column="1"/>
        <Button Content="9" Style="{StaticResource numericStyle}" Grid.Row="1" Grid.Column="2"/>
        <Button Content="4" Style="{StaticResource numericStyle}" Grid.Row="2"/>
        <Button Content="5" Style="{StaticResource numericStyle}" Grid.Row="2" Grid.Column="1"/>
        <Button Content="6" Style="{StaticResource numericStyle}" Grid.Row="2" Grid.Column="2"/>
        <Button Content="1" Style="{StaticResource numericStyle}" Grid.Row="3"/>
        <Button Content="2" Style="{StaticResource numericStyle}" Grid.Row="3" Grid.Column="1"/>
        <Button Content="3" Style="{StaticResource numericStyle}" Grid.Row="3" Grid.Column="2"/>
        <Button Content="0" Style="{StaticResource numericStyle}" Grid.Row="4"/>
        <Button Content="=" Style="{StaticResource operatorStyle}" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2">
            <Button.Effect>
                <DropShadowEffect Color="Green"/>
            </Button.Effect>
        </Button>
        <Button Content="+" Style="{StaticResource operatorStyle}" Grid.Row="4" Grid.Column="3"/>
        <Button Content="-" Style="{StaticResource operatorStyle}" Grid.Row="3" Grid.Column="3"/>
        <Button Content="X" Style="{StaticResource operatorStyle}" Grid.Row="2" Grid.Column="3"/>
        <Button Content="/" Style="{StaticResource operatorStyle}" Grid.Row="1" Grid.Column="3"/>
    </Grid>

運行效果：操作系統

經過上面的示例能夠看到，3d

1. Style中包含了不少Setter，每一個Setter都會對應着不一樣屬性的設置。正如博客開頭講到的同樣。Style是一組屬性的集合；code

2. 在Style中能夠設置TargetType，指示這個Style是給哪個控件使用的；component

3. Style能夠繼承，例如操做按鈕的Style繼承了數字按鈕的Style，使用BaseOn，而後引用到Style的資源便可；orm

4. Style的優先級，=按鈕，在Style中設置了Button的DropShadowEffect爲紅色，而後在Button內部咱們設置DropShadowEffect爲藍色，最後顯示的效果能夠看出來，=按鈕最終顏色爲藍色。能夠理解爲後來者居上。blog

Style中不只能夠包含一系列的Setter，還能夠包含Trigger。WPF中有三種Trigger，Property Trigger，Event Trigger，Data Trigger。下面咱們介紹Property Trigger，沿用上面的示例，在鼠標點擊按鈕時，設置Transform效果。繼承

        <Style TargetType="Button" x:Key="operatorStyle"
            BasedOn="{StaticResource numericStyle}">
            <Setter Property="FontWeight" Value="ExtraBold" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Red" />
                </Setter.Value>
            </Setter>

            <Style.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <TranslateTransform X="4" Y="4" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

運行效果以下：事件

Trigger表示當知足某個/某些條件時觸發。上面的例子中，當IsPressed爲True時，觸發了Transform的改變，當IsPressed爲False時，自動恢復到初始狀態，不須要額外的代碼來恢復初始狀態。

不只能夠在Style中使用Trigger，還能夠在DataTemplate，ControlTemplate中使用。

Property Trigger針對的是依賴屬性，那普通屬性改變時，如何觸發UI的改變呢？因此下面介紹另外一種Trigger，Data Trigger。請看示例：

XAML:

        <ListBox HorizontalAlignment="Center" ItemsSource="{Binding .}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Border Margin="2" BorderBrush="Blue" BorderThickness="1" Padding="2" x:Name="_border">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <TextBlock Text="{Binding Name}" FontSize="20" FontWeight="Bold" />
                                <TextBlock Grid.Row="1" Text="{Binding AuthorName}" FontSize="16" Foreground="Blue" />
                                <TextBlock Opacity=".5" FontWeight="Bold" FontStyle="Italic" Foreground="Red" TextAlignment="Right" Grid.RowSpan="2" VerticalAlignment="Center" Visibility="Hidden"
                                x:Name="_free" Text="Free!" Margin="4" FontSize="25"/>
                            </Grid>
                        </Border>
                    </Grid>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsFree}" Value="True">
                            <Setter Property="Background" TargetName="_border" Value="Yellow" />
                            <Setter Property="Visibility" Value="Visible" TargetName="_free" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

C#:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new List<Book>
            {
                new Book { Name = "Windows Internals",
                AuthorName = "Mark Russinovich", IsFree = false },
                new Book { Name = "AJAX Introduction",
                AuthorName = "Bhanwar Gupta", IsFree = true },
                new Book { Name = "Essential COM",
                AuthorName = "Don Box", IsFree = false },
                new Book { Name = "Blueprint for a Successful Presentation",
                AuthorName = "Biswajit Tripathy", IsFree = true }
            };
        }
    }

    public class Book
    {
        public string Name { get; set; }

        public bool IsFree { get; set; }

        public string AuthorName { get; set; }

    }

運行效果：

DataTrigger根據Binding查找特定屬性，當知足條件時觸發。

下面簡單介紹下Event Trigger，請看示例代碼：

    <Grid>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="1" Duration="0:0:5"
                            Storyboard.TargetProperty="Opacity" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        <TextBlock Text="Event Trigger Demo" FontSize="24"/>
    </Grid>

運行效果，Grid的透明度從0到1。

注意：Event Trigger只能夠用於路由事件。

上面咱們介紹了三種Trigger，可是它們都是使用與知足某一個條件而後觸發。若是要知足一些條件才觸發，咱們能夠使用MultiTrigger，請看示例：

    <Window.Resources>
        <Style x:Key="HoverButtonStyle" TargetType="{x:Type Button}">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True" />
                        <Condition Property="IsDefault" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" Value="Cyan" />
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect />
                        </Setter.Value>
                    </Setter>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Button Content="Move mouse over me" FontSize="20"
            HorizontalAlignment="Center" Margin="20" Padding="6"
            x:Name="theButton" Style="{StaticResource HoverButtonStyle}"/>
        <CheckBox Content="Default button" Margin="10"
            IsChecked="{Binding IsDefault, ElementName=theButton,
            Mode=TwoWay}" FontSize="15"/>
    </StackPanel>

運行效果：

注意：只有兩種MultiTrigger，除了上面這種，還有MultiDataTrigger。用於當多個數據屬性知足某一條件時觸發。

下面經過一個示例來介紹ControlTemplate的使用，

例若有兩個"原生態"的的RadioButton,

    <StackPanel Orientation="Horizontal">
        <RadioButton Content="做業練習" IsChecked="True" Margin="10,5,10,0"/>
        <RadioButton Content="考試測驗" Margin="0,5,10,0"/>
    </StackPanel>

在Win 10 和Win 7中的顯示效果以下：

一樣的控件在Win10與Win7下顯示效果不一致，下面咱們對RadioButton進行"整容"，

    <Window.Resources>
        <Style x:Key="RadioButtonStyle01" TargetType="RadioButton">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Foreground" Value="#565656"/>
            <Setter Property="Background" Value="#EDEEEF"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="45"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Border x:Name="MainBorder" BorderThickness="1" BorderBrush="#8B99BC" CornerRadius="1" Background="#F0F2F2">
                            <Grid>
                                <Image x:Name="imgChecked" Visibility="Collapsed" Source="/ControlTemplatingDemo;component/Resources/Images/Completed_02.png" Width="20" Height="20" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,-8,-10,0"/>
                                <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" 
                                                      ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
                                                      ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="5" HorizontalAlignment="Center" 
                                                      VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="MainBorder" Property="Background" Value="#239FFF"/>
                                <Setter TargetName="imgChecked" Property="Visibility" Value="Visible"/>
                                <Setter Property="Foreground" Value="White"/>
                                <Setter TargetName="MainBorder" Property="BorderBrush" Value="#239FFF"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel Orientation="Horizontal">
        <RadioButton Content="做業練習" Style="{StaticResource RadioButtonStyle01}" IsChecked="True" Margin="10,5,10,0"/>
        <RadioButton Content="考試測驗" Style="{StaticResource RadioButtonStyle01}" Margin="0,5,10,0"/>
    </StackPanel>

通過ControlTemplate樣式重寫後的RadioButton：

如今RadioButton在不一樣操做系統下外貌一致了。

爲了在不一樣OS下得到相同的顯示效果，咱們須要對WPF的控件進行樣式的重寫。對控件樣式的重寫，能夠理解爲對它的表現進行重組。咱們能夠經過Blend來查看控件的內部構造，而後根據項目需求對控件進行重寫。

感謝您的閱讀。代碼點擊這裏下載。