|
在控件模板和為其提供支持的代碼之間又一個(gè)隱含約定。如果使用自定義控件模板替代控件的標(biāo)準(zhǔn)模板，就需要確保新模板能夠滿足控件的實(shí)現(xiàn)代碼的所有需要。 在簡(jiǎn)單控件中，這個(gè)過(guò)程比較容易，因?yàn)閷?duì)模板幾乎沒(méi)有(或完全沒(méi)有)什么真正的需求。對(duì)于復(fù)雜控件，問(wèn)題就顯得有些微妙了，因?yàn)榭丶耐庥^和實(shí)現(xiàn)不可能完全相互獨(dú)立的。對(duì)于這種情況，控件需要對(duì)其可視化顯示做出一些假設(shè)，而不管曾經(jīng)被設(shè)計(jì)的多好。 在前面已經(jīng)看到了控件模板的這種需求的兩個(gè)例子，占位元素(如ContentPresenter和ItemsPresenter)和模板綁定。接下來(lái)的將例舉另外兩個(gè)例子：具有特定名稱(以PART_開(kāi)頭)的元素和專門(mén)設(shè)計(jì)的用于控件模板的元素(如ScrollBar控件中的Track元素)。為成功地創(chuàng)建控件模板，需要仔細(xì)查看相關(guān)控件的標(biāo)準(zhǔn)模板，并注意分析這4種技術(shù)的用法，然后將他們復(fù)制到自己的模板中。 一、嵌套的模板 按鈕控件的模板可分解成幾個(gè)較簡(jiǎn)單的部分。然而，許多模板并非如此簡(jiǎn)單。在某些情況下，控件模板將包含每個(gè)自定義模板也需要的大量元素。而在有些情況下，改變控件的外觀涉及創(chuàng)建多個(gè)模板。 例如，假設(shè)計(jì)劃修改熟悉的ListBox控件。創(chuàng)建這個(gè)示例的第一步是為L(zhǎng)istBox控件設(shè)計(jì)模板，并酌情添加自動(dòng)應(yīng)用模板的樣式。下面的標(biāo)記將這兩個(gè)要素合并到一起： <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> 該樣式使用兩個(gè)畫(huà)刷繪制邊框和背景。實(shí)際模板是標(biāo)準(zhǔn)模板ListBox的簡(jiǎn)化版本，但沒(méi)有使用ListBoxChrome類(lèi)，而使用了較簡(jiǎn)單的Border元素。在Border元素內(nèi)部是為列表提供滾動(dòng)功能的ScrollViewer元素以及容納所有列表項(xiàng)的ItemsPresenter元素。 對(duì)于該模板，最值的注意之處是它未提供的功能——配置列表中各項(xiàng)的外觀。沒(méi)有該功能，唄選擇的元素總是使用熟悉的藍(lán)色背景突出顯示。為改變這種行為，需要為L(zhǎng)istBoxItem控件添加控件模板，ListBoxItem控件是封裝列表中每個(gè)單獨(dú)元素內(nèi)容的內(nèi)容控件。 與ListBox模板一樣，可使用元素類(lèi)型樣式應(yīng)用ListBoxItem模板。下面的基本模板在一個(gè)不可見(jiàn)的邊框中封裝了每個(gè)項(xiàng)。因此ListBoxItem是內(nèi)容控件，所以需要使用ContentPresenter的觸發(fā)器： <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> 總之，可以使用這兩個(gè)模板創(chuàng)建當(dāng)將鼠標(biāo)移動(dòng)到當(dāng)前定位的項(xiàng)上時(shí)使用動(dòng)畫(huà)放大項(xiàng)的列表框。因?yàn)槊總€(gè)ListBoxItem可具有自己的動(dòng)畫(huà)，所以當(dāng)用戶在列表框中上下移動(dòng)鼠標(biāo)時(shí)，將看到幾個(gè)項(xiàng)開(kāi)始增大，然后再次收縮，創(chuàng)建了動(dòng)人的“魚(yú)眼”效果(當(dāng)將鼠標(biāo)懸停在項(xiàng)上時(shí)，使用具有動(dòng)畫(huà)的變換，可實(shí)現(xiàn)更夸張的魚(yú)眼效果，放大項(xiàng)并使項(xiàng)變形)。 盡管不可能在一幅圖像中捕獲這種效果，下圖顯示了將鼠標(biāo)快速移過(guò)幾個(gè)項(xiàng)之后該列表的快照。
在此不會(huì)重新分析整個(gè)ListBoxItem模板示例，因?yàn)樗稍S多不同部分構(gòu)建，包括用于設(shè)置ListBox控件、ListBoxItem控件以及ListBox控件的各種組成元素(如滾動(dòng)條)樣式的部分，其中重要的部分是改變ListBoxItem模板的樣式。 在這個(gè)示例中，ListBoxItem對(duì)象較緩慢地?cái)U(kuò)大(經(jīng)過(guò)1秒)，然后更快地進(jìn)行縮小(經(jīng)過(guò)0.2s)。然而，在開(kāi)始縮小動(dòng)畫(huà)之前有0.5秒得延遲。 需要注意，縮小動(dòng)畫(huà)省略了From和To屬性。通過(guò)這種方式，縮小動(dòng)畫(huà)總將文本從當(dāng)前尺寸縮小到它原來(lái)的尺寸。如果將鼠標(biāo)移到ListBoxItem上然后移開(kāi)，就會(huì)得到所期望的效果——當(dāng)鼠標(biāo)停留在項(xiàng)上時(shí)，項(xiàng)會(huì)不斷地?cái)U(kuò)張，當(dāng)移走鼠標(biāo)時(shí)項(xiàng)會(huì)不斷地縮小。 二、修改滾動(dòng)條 列表框還有一個(gè)方向沒(méi)有改變：右邊的滾動(dòng)條。它是ScrollViewer元素的一部分，ScrollViewer元素是ListBox模板的一部分。盡管該例重新定義了ListBox模板，但沒(méi)有替換ScrollBar的ScrollViewer。 為自定義該細(xì)節(jié)，可為L(zhǎng)istBox控件創(chuàng)建一個(gè)新的ScrollViewer模板。然后可將ScrollViewer模板指向自定義的ScrollBar模板。然而，還有更簡(jiǎn)單的選擇?？蓜?chuàng)建一個(gè)改變所有ScrollBar控件模板的特定于元素類(lèi)型的樣式。這樣就避免了創(chuàng)建ScrollViewer模板所需的額外的工作。 當(dāng)然，還需要考慮這種設(shè)計(jì)會(huì)對(duì)應(yīng)用程序的其他部分造成什么影響。如果創(chuàng)建元素類(lèi)型樣式ScrollBar，并將其添加到窗口的Resources集合中，對(duì)于窗口中的所有控件，無(wú)論何時(shí)使用ScrollBar控件，都會(huì)有新樣式的滾動(dòng)條，這可能正是你所希望的效果。另一方面，如果希望只改變ListBox控件中的滾動(dòng)條，就必須為L(zhǎng)istBox控件本身的資源集合添加元素類(lèi)型樣式ScrollBar。 滾動(dòng)條的背景由Track類(lèi)表示——實(shí)際上時(shí)一個(gè)具有陰影并且被拉伸占滿整個(gè)滾動(dòng)條長(zhǎng)度的矩形。滾動(dòng)條的末尾處是按鈕，通過(guò)這些按鈕可以向上或向下(或向左或向右)滾動(dòng)一個(gè)步長(zhǎng)。這些按鈕是RepeatButton類(lèi)的實(shí)例，該類(lèi)繼承自ButtonBase類(lèi)。RepeatButton類(lèi)和普遍Button類(lèi)之間的重要區(qū)別在于，如果在RepeatButton按鈕上保持鼠標(biāo)為按下?tīng)顟B(tài)，就會(huì)反復(fù)觸發(fā)Click事件（對(duì)于滾動(dòng)條這是非常方便的）。 在滾動(dòng)條的中間是代表滾動(dòng)內(nèi)容中當(dāng)前位置的Thumb元素。并且最有趣的是，滑塊兩側(cè)的空白實(shí)際上由另外兩個(gè)RepeatButton對(duì)象構(gòu)成，它們都是透明的。當(dāng)單擊這兩個(gè)按鈕中的一個(gè)時(shí)，滾動(dòng)條會(huì)滾動(dòng)一整頁(yè)(一頁(yè)是滾動(dòng)內(nèi)容所在的可見(jiàn)窗口中的內(nèi)部容量)。通過(guò)單擊滑塊兩側(cè)的條形區(qū)域，可快速瀏覽滾動(dòng)內(nèi)容，這一功能是大家所熟悉的。 下面是用于垂直滾動(dòng)條的模板： <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> 一旦理解滾動(dòng)條的多部分結(jié)構(gòu)，上面的模板就非常直觀了。下面列出需要注意的幾個(gè)要點(diǎn)： 垂直滾動(dòng)條由一個(gè)包含三行的網(wǎng)格構(gòu)成。頂行和底行容納兩端的按鈕(并顯示為箭頭)，它們固定占用18個(gè)單位。中間部分容納Track元素，占用剩余空間。 兩端的RepeatButton元素使用相同的樣式。唯一的區(qū)別是Content屬性，該屬性包含了一個(gè)用于繪制箭頭的Path對(duì)象，因?yàn)轫敳康陌粹o具有上箭頭而底部的按鈕具有下箭頭。 兩個(gè)按鈕都連接到ScrollBar類(lèi)中的命令(LineUpCommand和LineDownCommand)。這正是其工作原理。只要提供鏈接到這個(gè)命令的按鈕即可，不必考慮按鈕的名稱是什么，也不必考慮其他外觀像什么或使用哪個(gè)特定的類(lèi)。 Track元素名為PART_Track。為使ScrollBar類(lèi)能夠成功地關(guān)聯(lián)到它的代碼，必須使用這個(gè)名稱。如果查看ScrollBar類(lèi)的默認(rèn)模板(類(lèi)似與上面的模板，但更長(zhǎng)一些)，也會(huì)看到該元素。 Track.ViewportSize屬性被設(shè)置為0,。這是該模板特有的實(shí)現(xiàn)細(xì)節(jié)，可確保Thumb元素總有相同的尺寸(通常，滑塊根據(jù)內(nèi)容按比例地改變尺寸，因此如果滾動(dòng)的內(nèi)容在窗口中基本上能夠顯示，這是滑塊會(huì)變得較長(zhǎng))。 Track元素封裝了兩個(gè)RepeatButton對(duì)象(它們的樣式單獨(dú)定義)和Thumb元素。同樣，這些按鈕通過(guò)命令連接到適當(dāng)?shù)墓δ堋?/p> 通過(guò)上面代碼，發(fā)現(xiàn)模板使用了鍵名，明確指定它作為垂直滾動(dòng)條。當(dāng)為樣式設(shè)置鍵名時(shí)，可確保它不能被自動(dòng)應(yīng)用，即使同時(shí)設(shè)置了TargetType屬性也是如此。該例使用這種方法的原因是，該模板只適用于垂直方向的滾動(dòng)條，而且如果ScrollBar.Orientation屬性被設(shè)置為Vertical，元素類(lèi)型樣式會(huì)使用觸發(fā)器自動(dòng)應(yīng)用控件模板： <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> 盡管可以使用相同的基本部分很容易地創(chuàng)建水平滾動(dòng)條，但該例沒(méi)有采用該步驟(從而保留了正常樣式的水平滾動(dòng)條)。 最后一項(xiàng)任務(wù)是填充格式化各個(gè)RepeatButton對(duì)象和Thumb元素的樣式。這些樣式比較簡(jiǎn)單，但它們確實(shí)改變了滾動(dòng)條的標(biāo)準(zhǔn)外觀。首先，Thumb元素的形狀被設(shè)置成類(lèi)似橢圓的形狀： <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> 接下來(lái)，在美觀的圓圈中繪制兩端的箭頭。這些圓圈是在控件模板中定義的，而箭頭由RepeatButton對(duì)象的內(nèi)容提供，并使用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對(duì)象沒(méi)有發(fā)生改變。它們只使用透明背景，使Track元素可透過(guò)它們顯示： <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> 與正常的滾動(dòng)不同，在該模板中沒(méi)有為T(mén)rack元素指定背景，所以保持原有的透明背景。這樣，列表框的輕微陰影漸變可透過(guò)滾動(dòng)條顯示。下圖是最終的列表框：
|
|
|
來(lái)自： 頭號(hào)碼甲 > 《待分類(lèi)》
