Blend 2015 教程 （三） 模板

前一篇講述了一些基本樣式的修改方法，並搭建了Style層的基本框架，本篇將進一步修改ListBox的樣式。

1. 首先選中ListBox控件，在美工板導航欄中點擊ListBox，選擇 編輯其餘模板-編輯項的佈局-編輯副本，起名爲PeopleListItemsPanelTemplate，選擇該文檔選項，點擊肯定，進入項佈局編輯模式。

此時，美工板導航欄變爲

2. 在文檔大綱面板中選擇VirtualizingStackPanel，右鍵點擊，選擇 更改佈局類型-WrapPanel，點擊返回上一層，退出項佈局編輯模式。

3. 選擇ListBox控件，在屬性面板中，點擊佈局組的展開更多按鈕，展開更多屬性後，把ScrollViewer.HorizontalScrollBarVisibility改成Disabled。

4. 選擇ListBox控件，點擊美工板導航欄中的ListBox，選擇 編輯其餘模板-編輯生成的項-編輯當前項。在文檔大綱面板中選擇Grid，在屬性面板中把Width和Height改成200和100。在文檔大綱面板中，在Grid上點擊右鍵，選擇 分組-Grid。能夠看到樹中變爲兩層Grid，選擇外層Grid，在屬性面板中，點擊RowDefinitions屬性的...按鈕，在彈出的對話框中點擊兩次添加按鈕，把Grid改成兩行，把第一行的Height屬性改成Auto，第二行的Height屬性保留Star，以下圖所示，

美工板以下圖所示，

5. 在美工板中按T鍵，選擇TextBlock工具，在Grid的第二行的位置上繪製一個TextBlock並重置其佈局。在數據面板中，點擊樹中的Persons項的加號按鈕，看到新添加了一個屬性，起名爲Description。在美工板中選擇剛纔添加的TextBlock，在屬性面板中，點擊Text屬性的小方塊，選擇 建立數據綁定，選擇Description屬性。在數據面板中，點擊Persons項的編輯示例值按鈕，彈出以下對話框，把某些Description改長點。

6. 在文檔大綱面板中，在內層Grid上右鍵點擊，選擇 分組-Border。在文檔大綱面板中的Border上右鍵點擊，選擇 編輯樣式-建立空樣式，起名爲SubtitleStyle。在屬性面板中把背景色改成淺藍色，Padding改成5，5，5，5。 在文檔大綱面板中，點擊返回上一層按鈕，退出樣式編輯模式。

7. 在美工板中選擇第二行的TextBlock控件，修改Margin爲5，5，5，5。在文檔大綱面板中，點擊返回上一層按鈕，退出模板編輯模式。

8. 在選擇ListBox控件的條件下，點擊美工板導航欄的ListBox，選擇 編輯其餘模板-編輯生成的項目容器-編輯副本，起名爲PeopleListItemStyle，進入模板編輯模式。點擊美工板導航欄中間的畫板圖標按鈕，進入樣式編輯模式，以下圖。

在屬性面板中把Padding修改成0，0，0，0。Margin修改成5，5，5，5。BorderBrush改成藍色。效果以下圖，

列表項的標題不該該有換行。點擊美工板導航欄的ListBox部分，再點擊一次，選擇 編輯其餘模板-編輯生成的項-編輯當前項。選擇標題部分的TextBlock，在屬性面板中把文本組展開，把TextWrapping屬性改成NoWrap，把TextTrimming屬性改成WordEllipsis。點擊ToolTip屬性的小方塊，選擇建立數據綁定，選擇Name屬性。效果以下圖。

此時完整的代碼以下，

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BlendDemo"
        xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="BlendDemo.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" d:DataContext="{d:DesignData /SampleData/SampleDataSource/SampleDataSource.xaml}">
    <Window.Resources>
        <DataTemplate x:Key="PeopleListDataTemplate">
            <Grid Height="100" Width="200">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Border Style="{DynamicResource SubtitleStyle}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Height="Auto" TextWrapping="NoWrap" Text="{Binding Name}" Width="Auto" Style="{DynamicResource CoreTextStyle}" TextTrimming="WordEllipsis" ToolTip="{Binding Name}"/>
                        <CheckBox Content="男" Grid.Column="1" Height="Auto" Width="Auto" IsChecked="{Binding Sex}" Style="{DynamicResource CheckBoxBaseStyle}"/>
                    </Grid>
                </Border>
                <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="{Binding Description}" Margin="5"/>
            </Grid>
        </DataTemplate>
        <Style x:Key="TitleStyle" TargetType="{x:Type Border}">
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Background" Value="#FFDEDDDD"/>
        </Style>
        <ItemsPanelTemplate x:Key="PeopleListItemsPanelTemplate">
            <WrapPanel IsItemsHost="True"/>
        </ItemsPanelTemplate>
        <Style x:Key="SubtitleStyle" TargetType="{x:Type Border}">
            <Setter Property="Background" Value="#FFB2E8F3"/>
            <Setter Property="Padding" Value="5"/>
        </Style>
        <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
        <SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
        <SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
        <SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
        <SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
        <SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
        <Style x:Key="PeopleListItemStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="#FF2391DE"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType ="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="False"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="True"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Margin" Value="5"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border Style="{DynamicResource TitleStyle}" >
            <TextBlock Text="人員列表" Style="{DynamicResource TitleTextStyle}"/>
        </Border>
        <ListBox Grid.Row="1" ItemsSource="{Binding Persons}" ItemTemplate="{DynamicResource PeopleListDataTemplate}" HorizontalContentAlignment="Stretch" ItemsPanel="{DynamicResource PeopleListItemsPanelTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemContainerStyle="{DynamicResource PeopleListItemStyle}"/>
    </Grid>
</Window>

9. 設計視圖能夠顯示設計的效果，但觀察動態效果較難。

解決方法是，在文檔大綱面板中，退出樣式或模板編輯模式，選擇Window，在屬性面板中找到DataContext屬性，點擊小方塊，選擇 本地資源-SampleDataSource。這時運行程序，能夠看到效果。

這時鼠標移動到ListBox中的項目上時，或點擊選中時，是有交互效果的。

10. 若是不滿意動態交互效果，能夠到觸發器面板中編輯。選中ListBox控件，點擊美工板導航欄中的ListBox，選擇 編輯其餘模板-編輯生成的項目容器-編輯當前項，在觸發器面板中選擇第三項，以下圖。

在屬性面板中把Background改成其餘顏色。修改的方法爲，在屬性面板中找到Background屬性，此時小方塊是綠色的，表面是引用的資源。點擊小方塊，選擇編輯資源，在彈出的對話框中編輯新的顏色便可。

完成後別忘了重置Window的DataContext屬性，爲下一步後端開發人員開發留出餘地。

下一篇將修改性別顯示那一部分的樣式，重點演示控件模板的修改方法，敬請關注。