【WPF學習】第六十二章構建更復雜的模板

時間 2020-04-08

標籤 WPF學習第六十二構建複雜模板简体版

原文原文鏈接

　　在控件模板和爲其提供支持的代碼之間又一個隱含約定。若是使用自定義控件模板替代控件的標準模板，就須要確保新模板可以知足控件的實現代碼的全部須要。ide

　　在簡單控件中，這個過程比較容易，由於對模板幾乎沒有(或徹底沒有)什麼真正的需求。對於複雜控件，問題就顯得有些微妙了，由於控件的外觀和實現不可能徹底相互獨立的。對於這種狀況，控件須要對其可視化顯示作出一些假設，而無論曾經被設計的多好。動畫

　　在前面已經看到了控件模板的這種需求的兩個例子，佔位元素(如ContentPresenter和ItemsPresenter)和模板綁定。接下來的將例舉另外兩個例子：具備特定名稱(以PART_開頭)的元素和專門設計的用於控件模板的元素(如ScrollBar控件中的Track元素)。爲成功地建立控件模板，須要仔細查看相關控件的標準模板，並注意分析這4種技術的用法，而後將他們複製到本身的模板中。spa

1、嵌套的模板設計

　　按鈕控件的模板可分解成幾個較簡單的部分。然而，許多模板並不是如此簡單。在某些狀況下，控件模板將包含每一個自定義模板也須要的大量元素。而在有些狀況下，改變控件的外觀涉及建立多個模板。3d

　　例如，假設計劃修改熟悉的ListBox控件。建立這個示例的第一步是爲ListBox控件設計模板，並酌情添加自動應用模板的樣式。下面的標記將這兩個要素合併到一塊兒：code

<Style TargetType="{x:Type ListBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border Name="Border" 
                            Background="{StaticResource ListBoxBackgroundBrush}"
                            BorderBrush="{StaticResource StandardBorderBrush}"
                            BorderThickness="1"
                            CornerRadius="3"
                            >
                        <ScrollViewer Focusable="False">
                            <ItemsPresenter Margin="2"></ItemsPresenter>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

　　該樣式使用兩個畫刷繪製邊框和背景。實際模板是標準模板ListBox的簡化版本，但沒有使用ListBoxChrome類，而使用了較簡單的Border元素。在Border元素內部是爲列表提供滾動功能的ScrollViewer元素以及容納全部列表項的ItemsPresenter元素。對象

　　對於該模板，最值的注意之處是它未提供的功能——配置列表中各項的外觀。沒有該功能，唄選擇的元素老是使用熟悉的藍色背景突出顯示。爲改變這種行爲，須要爲ListBoxItem控件添加控件模板，ListBoxItem控件是封裝列表中每一個單獨元素內容的內容控件。blog

　　與ListBox模板同樣，可以使用元素類型樣式應用ListBoxItem模板。下面的基本模板在一個不可見的邊框中封裝了每一個項。所以ListBoxItem是內容控件，因此須要使用ContentPresenter的觸發器：繼承

<Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border Name="Border"
                            BorderThickness="2" CornerRadius="3" Padding="1">
                        <ContentPresenter/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="ListBoxItem.MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="FontSize" To="20" Duration="0:0:1"></DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="FontSize" BeginTime="0:0:0.5" Duration="0:0:0.2"></DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <Trigger  Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource HoverBorderBrush}"></Setter>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
                            <Setter TargetName="Border" Property="TextBlock.Foreground" Value="{StaticResource SelectedForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

　　總之，可使用這兩個模板建立當將鼠標移動到當前定位的項上時使用動畫放大項的列表框。由於每一個ListBoxItem可具備本身的動畫，因此當用戶在列表框中上下移動鼠標時，將看到幾個項開始增大，而後再次收縮，建立了動人的「魚眼」效果(當將鼠標懸停在項上時，使用具備動畫的變換，可實現更誇張的魚眼效果，放大項並使項變形)。事件

　　儘管不可能在一幅圖像中捕獲這種效果，下圖顯示了將鼠標快速移過幾個項以後該列表的快照。

　　在此不會從新分析整個ListBoxItem模板示例，由於它由許多不一樣部分構建，包括用於設置ListBox控件、ListBoxItem控件以及ListBox控件的各類組成元素(如滾動條)樣式的部分，其中重要的部分是改變ListBoxItem模板的樣式。

　　在這個示例中，ListBoxItem對象較緩慢地擴大(通過1秒)，而後更快地進行縮小(通過0.2s)。然而，在開始縮小動畫以前有0.5秒得延遲。

　　須要注意，縮小動畫省略了From和To屬性。經過這種方式，縮小動畫總將文本從當前尺寸縮小到它原來的尺寸。若是將鼠標移到ListBoxItem上而後移開，就會獲得所指望的效果——當鼠標停留在項上時，項會不斷地擴張，當移走鼠標時項會不斷地縮小。

2、修改滾動條

　　列表框還有一個方向沒有改變：右邊的滾動條。它是ScrollViewer元素的一部分，ScrollViewer元素是ListBox模板的一部分。儘管該例從新定義了ListBox模板，但沒有替換ScrollBar的ScrollViewer。

　　爲自定義該細節，可爲ListBox控件建立一個新的ScrollViewer模板。而後可將ScrollViewer模板指向自定義的ScrollBar模板。然而，還有更簡單的選擇。可建立一個改變全部ScrollBar控件模板的特定於元素類型的樣式。這樣就避免了建立ScrollViewer模板所需的額外的工做。

　　固然，還須要考慮這種設計會對應用程序的其餘部分形成什麼影響。若是建立元素類型樣式ScrollBar，並將其添加到窗口的Resources集合中，對於窗口中的全部控件，不管什麼時候使用ScrollBar控件，都會有新樣式的滾動條，這可能正是你所但願的效果。另外一方面，若是但願只改變ListBox控件中的滾動條，就必須爲ListBox控件自己的資源集合添加元素類型樣式ScrollBar。

　　滾動條的背景由Track類表示——實際上時一個具備陰影而且被拉伸佔滿整個滾動條長度的矩形。滾動條的末尾處是按鈕，經過這些按鈕能夠向上或向下(或向左或向右)滾動一個步長。這些按鈕是RepeatButton類的實例，該類繼承自ButtonBase類。RepeatButton類和廣泛Button類之間的重要區別在於，若是在RepeatButton按鈕上保持鼠標爲按下狀態，就會反覆觸發Click事件（對於滾動條這是很是方便的）。

　　在滾動條的中間是表明滾動內容中當前位置的Thumb元素。而且最有趣的是，滑塊兩側的空白實際上由另外兩個RepeatButton對象構成，它們都是透明的。當單擊這兩個按鈕中的一個時，滾動條會滾動一整頁(一頁是滾動內容所在的可見窗口中的內部容量)。經過單擊滑塊兩側的條形區域，可快速瀏覽滾動內容，這一功能是你們所熟悉的。

　　下面是用於垂直滾動條的模板：

<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="18"/>
                <RowDefinition Height="*"/>
                <RowDefinition MaxHeight="18"/>
            </Grid.RowDefinitions>

            <RepeatButton Grid.Row="0" Height="18"
        Style="{StaticResource ScrollBarLineButtonStyle}"
        Command="ScrollBar.LineUpCommand" >
                <Path
              Fill="{StaticResource GlyphBrush}"
              Data="M 0 4 L 8 4 L 4 0 Z"></Path>
            </RepeatButton>
            <Track Name="PART_Track" Grid.Row="1" 
        IsDirectionReversed="True" ViewportSize="0">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource ScrollBarPageButtonStyle}">
                    </RepeatButton>
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource ScrollBarThumbStyle}">
                    </Thumb>
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource ScrollBarPageButtonStyle}">
                    </RepeatButton>
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
        Grid.Row="3" Height="18"
        Style="{StaticResource ScrollBarLineButtonStyle}"
        Command="ScrollBar.LineDownCommand">
                <Path              
              Fill="{StaticResource GlyphBrush}"
              Data="M 0 0 L 4 4 L 8 0 Z"></Path>
            </RepeatButton>
        </Grid>
    </ControlTemplate>

　　一旦理解滾動條的多部分結構，上面的模板就很是直觀了。下面列出須要注意的幾個要點：

　　垂直滾動條由一個包含三行的網格構成。頂行和底行容納兩端的按鈕(並顯示爲箭頭)，它們固定佔用18個單位。中間部分容納Track元素，佔用剩餘空間。

　　兩端的RepeatButton元素使用相同的樣式。惟一的區別是Content屬性，該屬性包含了一個用於繪製箭頭的Path對象，由於頂部的按鈕具備上箭頭而底部的按鈕具備下箭頭。

　　兩個按鈕都鏈接到ScrollBar類中的命令(LineUpCommand和LineDownCommand)。這正是其工做原理。只要提供連接到這個命令的按鈕便可，沒必要考慮按鈕的名稱是什麼，也沒必要考慮其餘外觀像什麼或使用哪一個特定的類。

　　Track元素名爲PART_Track。爲使ScrollBar類可以成功地關聯到它的代碼，必須使用這個名稱。若是查看ScrollBar類的默認模板(相似與上面的模板，但更長一些)，也會看到該元素。

　　Track.ViewportSize屬性被設置爲0,。這是該模板特有的實現細節，可確保Thumb元素總有相同的尺寸(一般，滑塊根據內容按比例地改變尺寸，所以若是滾動的內容在窗口中基本上可以顯示，這是滑塊會變得較長)。

　　Track元素封裝了兩個RepeatButton對象(它們的樣式單獨定義)和Thumb元素。一樣，這些按鈕經過命令鏈接到適當的功能。

　　經過上面代碼，發現模板使用了鍵名，明確指定它做爲垂直滾動條。當爲樣式設置鍵名時，可確保它不能被自動應用，即便同時設置了TargetType屬性也是如此。該例使用這種方法的緣由是，該模板只適用於垂直方向的滾動條，並且若是ScrollBar.Orientation屬性被設置爲Vertical，元素類型樣式會使用觸發器自動應用控件模板：

<Style TargetType="{x:Type ScrollBar}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="18"/>
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>

　　儘管可使用相同的基本部分很容易地建立水平滾動條，但該例沒有采用該步驟(從而保留了正常樣式的水平滾動條)。

　　最後一項任務是填充格式化各個RepeatButton對象和Thumb元素的樣式。這些樣式比較簡單，但它們確實改變了滾動條的標準外觀。首先，Thumb元素的形狀被設置成相似橢圓的形狀：

<Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Margin" Value="1,0,1,0" />
        <Setter Property="Background" Value="{StaticResource StandardBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Ellipse Stroke="{StaticResource StandardBorderBrush}"
                     Fill="{StaticResource StandardBrush}"></Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

　　接下來，在美觀的圓圈中繪製兩端的箭頭。這些圓圈是在控件模板中定義的，而箭頭由RepeatButton對象的內容提供，並使用ContentPresenter元素插入到控件模板中：

 <Style x:Key="ScrollBarLineButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Grid Margin="1">
                        <Ellipse Name="Border" StrokeThickness="1" Stroke="{StaticResource StandardBorderBrush}"
                                 Fill="{StaticResource StandardBrush}"></Ellipse>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Fill" Value="{StaticResource PressedBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

　　顯示在Track元素上面的RepeatButton對象沒有發生改變。它們只使用透明背景，使Track元素可透過它們顯示：

<Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border Background="Transparent" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>