WPF：（4）樣式與模板示例集合

源項目地址：https://github.com/Microsoft/...
如下是把樣例轉換爲簡要說明，同時給出實際運行效果及關鍵代碼：
-

AlternatingAppearanceOfItems子項顏色交替變換呈現

• 設置集合視圖源記分組屬性描述項

<local:Places x:Key="Places"/>

<!--Group the items by State.-->
<CollectionViewSource Source="{StaticResource Places}" x:Key="GroupedData">
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="State"/>
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

• 子項交替數索引對應顏色的轉換器

<!--Returns a Brush for the header of a GroupItem.-->
<AlternationConverter x:Key="GroupHeaderBackgroundConverter">
    <SolidColorBrush>LightBlue</SolidColorBrush>
    <SolidColorBrush>LightSteelBlue</SolidColorBrush>
</AlternationConverter>

<!--Returns a Brush for a ListBoxItem.-->
<AlternationConverter x:Key="BackgroundConverter">
    <SolidColorBrush>Silver</SolidColorBrush>
    <SolidColorBrush>LightGray</SolidColorBrush>
    <SolidColorBrush>GhostWhite</SolidColorBrush>
</AlternationConverter>

以上做爲資源項。

• ListBox的分組樣式、標題模板、數據模板 設置相對綁定，其中背景色綁定到GroupItem中的附加屬性ItemsControl.AlternationIndex中索引轉換出的顏色。

ps：AlternationCount 和 ItemsControl.AlternationIndex 屬性容許您爲兩個或更多個交替項容器指定外觀。例如，能夠爲 ItemsControl 中每隔兩項的項目指定交替背景色。 ItemsControl.AlternationIndex 被分配給 ItemsControl 中的每個容器。 ItemsControl.AlternationIndex 從 0 開始，增長到它爲 AlternationCount 減 1 爲止，而後從 0 從新開始。

<ListBox ItemsSource="{Binding Source={StaticResource GroupedData}}"
     DisplayMemberPath="CityName" AlternationCount="3" Name="lb">
    <ListBox.GroupStyle>
        <!--Set alternating backgrounds on the header of each group.-->
        <GroupStyle AlternationCount="2">
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock FontWeight="Bold" 
                               Text="{Binding Path=Name}" 
                               Background="{Binding 
                                   RelativeSource={RelativeSource FindAncestor, 
                                   AncestorType={x:Type GroupItem}},
                                   Path=(ItemsControl.AlternationIndex),
                                   Converter={StaticResource 
                                              GroupHeaderBackgroundConverter}}"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ListBox.GroupStyle>

• 設置ListBox的子項容器樣式，子項背景色綁定到自身的附加屬性ItemsControl.AlternationIndex轉換出的顏色

<ListBox.ItemContainerStyle>
    <!--Set alternating backgrounds on the items in the ListBox.-->
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="Background" 
                    Value="{Binding RelativeSource={RelativeSource Self},
                       Path=(ItemsControl.AlternationIndex),
                       Converter={StaticResource BackgroundConverter}}"/>
    </Style>
</ListBox.ItemContainerStyle>
</ListBox>

• TreeView的資源，包括數據模板、第三層背景色交替項轉換器、第三分層數據模板；第二分層字體交替項轉換器、第1、二分層數據模板資源

<Grid.Resources>
    <local:ListLeagueList x:Key="MyTreeViewData"/>
    
    <!--Returns alternating brushes.-->
    <AlternationConverter x:Key="TeamsBackgroundConverter">
        <SolidColorBrush>LimeGreen</SolidColorBrush>
        <SolidColorBrush>SpringGreen</SolidColorBrush>
        <SolidColorBrush>Chartreuse</SolidColorBrush>
    </AlternationConverter>
    
    <!--The DataTemplate used by TreeViewItems in the third level
        of the TreeView.-->
    <DataTemplate x:Key="Level3Data">
        <TextBlock Text="{Binding Path=Name}"
                   Background="{Binding RelativeSource={RelativeSource FindAncestor, 
                     AncestorType={x:Type TreeViewItem}},
                     Path=(ItemsControl.AlternationIndex),
                     Converter={StaticResource TeamsBackgroundConverter}}"/>
    </DataTemplate>
    
    <!--Returns altnernating FontStyles.-->
    <AlternationConverter x:Key="LeagueFontStyleConverter">
        <FontStyle >Italic</FontStyle>
        <FontStyle >Normal</FontStyle>
    </AlternationConverter>
    
    <!--The HierarchicalDataTemplate used by TreeViewItems
        in the second level of the TreeView.-->
    <HierarchicalDataTemplate x:Key="Level2Data"
                              ItemsSource="{Binding Path=Teams}"
                              ItemTemplate="{StaticResource Level3Data}"
                              AlternationCount="3">
        <TextBlock Text="{Binding Path=Name}"
                   FontStyle="{Binding RelativeSource={RelativeSource FindAncestor, 
                       AncestorType={x:Type TreeViewItem}},
                       Path=(ItemsControl.AlternationIndex),
                       Converter={StaticResource LeagueFontStyleConverter}}"/>
    </HierarchicalDataTemplate>
    
    <!--The HierarchicalDataTemplate used by TreeViewItems
        in the first level of the TreeView.-->
    <HierarchicalDataTemplate x:Key="Level1Data"
        ItemsSource="{Binding Path=Divisions}"
        ItemTemplate="{StaticResource Level2Data}"
        AlternationCount="2">
        <TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>
    </HierarchicalDataTemplate>
    
    <Style TargetType="TreeViewItem">
        <Setter Property="IsExpanded" Value="True"/>
    </Style>
    
    </Grid.Resources>

• 最後TreeView數據源綁定、子項模板綁定，後續分層模板根據ItemTemplate自動綁定

<TreeView ItemsSource="{Binding Source={StaticResource MyTreeViewData}}"
                          ItemTemplate="{StaticResource Level1Data}"/>

ContentControlStyle內容控件樣式

• Label的樣式及模板資源

<Grid.Resources>
    <Style x:Key="ContentCtrl" TargetType="{x:Type ContentControl}">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Foreground" Value="Green"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ContentControl}">
                    <Grid>
                        <!--Keep the Ellipse a circle when ContentControl.Width
            is set.-->
                        <Ellipse Width="{TemplateBinding Width}"
                 Height="{TemplateBinding Width}"
                 Fill="{TemplateBinding Background}"/>
                        <ContentPresenter VerticalAlignment="Center"
                            HorizontalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <DataTemplate x:Key="Template1">
        <TextBlock Text="{Binding}" FontSize="12" FontWeight="Bold" TextWrapping="Wrap" />
    </DataTemplate>
    </Grid.Resources>

• 界面xaml代碼,Lablel爲contentControl的ContentTemplate綁定到數據模板

<Label Margin="10, 10, 3, 3" Grid.Column="0" Grid.Row="2">
    <ContentControl Width="75" Style="{StaticResource ContentCtrl}" 
              Content="Hello"/>
</Label>

<!--Put the ContentControl in a Label just to keep the margin and
    Grid cruft out of the snippet.-->
    <Label Margin="10, 10, 3, 3" Grid.Column="0" Grid.Row="3"
       Background="LightBlue">
        <ContentControl Name="contCtrl" ContentTemplate="{StaticResource Template1}" 
      Content="This is the content of the content control."/>
    </Label>

EventTriggers事件觸發器

<Style.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation To="300" Duration="0:0:1.5" 
        AccelerationRatio="0.10" DecelerationRatio="0.25" 
        Storyboard.TargetProperty="(Canvas.Width)" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseLeave">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Duration="0:0:1.5" 
        AccelerationRatio="0.10" DecelerationRatio="0.25" 
        Storyboard.TargetProperty="(Canvas.Width)" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Style.Triggers>

## FindingElementsInTemplates在模板中查找元素 ##

• 內容控件模板查找元素

private void ControlTemplateFindElement(object sender, RoutedEventArgs e)
{
    // Finding the grid that is generated by the ControlTemplate of the Button
    var gridInTemplate = (Grid) myButton1.Template.FindName("grid", myButton1);

    // Do something to the ControlTemplate-generated grid
    MessageBox.Show("The actual width of the grid in the ControlTemplate: "
                    + gridInTemplate.GetValue(ActualWidthProperty));
}

• 模板控件中查找元素

private void DataTemplateFindElement(object sender, RoutedEventArgs e)
{
    // Getting the currently selected ListBoxItem
    // Note that the ListBox must have
    // IsSynchronizedWithCurrentItem set to True for this to work
    var myListBoxItem =
        (ListBoxItem) (myListBox.ItemContainerGenerator.ContainerFromItem(myListBox.Items.CurrentItem));

    // Getting the ContentPresenter of myListBoxItem
    var myContentPresenter = FindVisualChild<ContentPresenter>(myListBoxItem);

    // Finding textBlock from the DataTemplate that is set on that ContentPresenter
    var myDataTemplate = myContentPresenter.ContentTemplate;
    var myTextBlock = (TextBlock) myDataTemplate.FindName("textBlock", myContentPresenter);

    // Do something to the DataTemplate-generated TextBlock
    MessageBox.Show("The text of the TextBlock of the selected list item: "
                    + myTextBlock.Text);
}
private TChildItem FindVisualChild<TChildItem>(DependencyObject obj)
    where TChildItem : DependencyObject
{
    for (var i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
    {
        var child = VisualTreeHelper.GetChild(obj, i);
        if (child is TChildItem)
            return (TChildItem) child;
        var childOfChild = FindVisualChild<TChildItem>(child);
        if (childOfChild != null)
            return childOfChild;
    }
    return null;
}

其中查找父元素代碼可簡化爲以下：

static DependencyObject VisualUpwardSearch<T>(DependencyObject source)
{
    while (source != null && source.GetType() != typeof(T))
        source = VisualTreeHelper.GetParent(source);

    return source;
}

IntroToStylingAndTemplating介紹樣式與模板

• ListBox樣式

<!--Horizontal ListBox Control Template-->
    <Style TargetType="ListBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border CornerRadius="5" Background="{TemplateBinding ListBox.Background}">
                        <ScrollViewer HorizontalScrollBarVisibility="Auto" >
                            <StackPanel Orientation="Horizontal" 
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       IsItemsHost="True"/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

• ListBoxItem模板

<Style TargetType="ListBoxItem">
    <Setter Property="Opacity" Value="0.5" />
    <Setter Property="MaxHeight" Value="75" />
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Trigger.Setters>
                <Setter Property="Opacity" Value="1.0" />
            </Trigger.Setters>
        </Trigger>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
          Duration="0:0:0.2"
          Storyboard.TargetProperty="MaxHeight"
          To="90"  />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
          Duration="0:0:1"
          Storyboard.TargetProperty="MaxHeight"  />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>

• ListBox模板

<!--DataTemplate to display Photos as images
    instead of text strings of Paths-->
    <DataTemplate DataType="{x:Type local:Photo}">
        <Border Margin="3">
            <Image Source="{Binding Source}"/>
        </Border>
    </DataTemplate>

• ListBox綁定代碼

ps:建議不用設置寬度，源碼設置寬度形成滾動條隨窗口變化顯示不方便

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
               Background="Silver"  Margin="10" SelectedIndex="0"/>