零基礎學通Silverlight4（7）：控件模板

控件能夠包含一幅圖像、一段視頻、一個動畫，甚至一個文本框。此外還有風格、模板以及觸發器等，這些功能進一步增強了控件的擴展能力。開發人員還能夠修改已經存在的控件的外觀，以加強它的可視化功能，並且還能夠保留用戶已經熟悉的控件預期行爲，還能夠根據特定數據輸入和檢查的須要，爲應用程序定製自定義控件。提供的用於擴展和建立控件的基礎類，爲設計控件的可視化外觀提供了巨大的靈活性。

一個新的控件須要先選擇一個基類。能夠基於許多基類來建立自定義控件，包括Control、UserControl等，當建立一個新控件時，可根據自定義控件的定製和靈活性來選擇所要繼承的基類，可能還須要考慮如下問題：

（1）自定義控件是否由已存在的控件組成?

（2）自定義控件須要定製哪些可視化外觀？

（3）自定義控件須要提供什麼行爲或功能?

做用UserControl做爲基類是建立一個新控件最簡單的方法，自定義控件由一引發標準控件組合在一塊兒，來完成一個特定的用戶接口功能，自定義控件能夠爲單個元素應用樣式，並使其處理一些特定的事件，或者爲控件引起特定的自定義事件。

模板的方式與樣式很是相似，也可做爲資源，並經過Setter來定義模板的內容。要定義模板，須要設置Setter的Property爲Template，並使用<Setter.Value>來定義ControlTemplate來指定模板的目標類型。

模板還能保持控件的衆多功能，而且可直接定義鼠標指針移入、移出以及單擊的統一的變化效果。每一個模板必須有一個根元素，爲了方便容納多個 UI 元素，根據元素一般是 Panel 、 Grid 等

範例象棋棋子按鈕

   項目 利用模板生成統一外觀的立體棋子按扭。當鼠標單擊時，外觀都會有變化，如移到上面時增長陰影，單擊棋子會改變效果，如圖 7-1 。

圖 7-1

（ 1 ）打開 Microsoft Expression Blend ，新建項目中，選擇「 Silverlight Application 」。

（ 2 ）設置二個圓形，其中一個具備漸變效果做爲棋的外形，另外一個帶來陰影立體效果，加上「車」字，模板的外觀如圖 7-2 ：

圖 7-2

（ 3 ）將它們分紅一組。選中二圓和字塊後右健菜單中分紅一個 Grid 組，如圖圖 7-3 。

                      圖 7-3

對應的主要 XAML 以下：

<Grid x:Name="LayoutRoot" Background="White" Margin="56,0,0,37">

           <Grid Margin="126,96,0,0" HorizontalAlignment="Left" Width="108" Height="108" VerticalAlignment="Top">

                  <Ellipse Stroke="Black" Margin="4,6,4,2" StrokeThickness="0" Height="100" Width="100" Fill="#FFA 7A 1A 1"/>

                  <Ellipse Stroke="Black" StrokeThickness="0" Width="100" Height="100" VerticalAlignment="Top" Margin="2,0,6,0">

                         <Ellipse.Fill>

           <LinearGradientBrush EndPoint="0.795,0.998" StartPoint="0.227,-0.092">

                                       <GradientStop Color="#FF2CC017" Offset="0.032"/>

                                       <GradientStop Color="#FFC6E 2C 3" Offset="1"/>

                                </LinearGradientBrush>

                         </Ellipse.Fill>

                  </Ellipse>

           <TextBlock Margin="22,14,28,14" Text="馬" TextWrapping="Wrap" FontSize="66.667" FontWeight="Bold" Foreground="#FF 17181C " FontFamily="Arial"/>

           </Grid>

    </Grid>

</UserControl>

（ 4 ）將所繪製圖案轉換成模板。選擇上面的 Grid 容器，即變成繪製圖案的最外層對象，而後從「工具」菜單中選擇「生成按扭」命令，見圖 7-4 。

圖 7-4

 

（ 5 ）出現「構成控件」對話框，選擇 Button ，位置定義在資源字典中，可新建一個字典文件中，見圖圖 7-5 。

                                              圖 7-5

生成了一個字典文件，代碼以下：

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="ButtonStyle1" TargetType="Button">

           <Setter Property="Template">

                  <Setter.Value>

                         <ControlTemplate TargetType="Button">

                                <Grid>

                                       <VisualStateManager.VisualStateGroups>

                                              <VisualStateGroup x:Name="FocusStates">

                                                     <VisualState x:Name="Focused"/>

                                                     <VisualState x:Name="Unfocused"/>

                                              </VisualStateGroup>

                                              <VisualStateGroup x:Name="CommonStates">

                                                     <VisualState x:Name=" Normal "/>

                                                     <VisualState x:Name="MouseOver"/>

                                                     <VisualState x:Name="Pressed"/>

                                                     <VisualState x:Name="Disabled"/>

                                              </VisualStateGroup>

                                       </VisualStateManager.VisualStateGroups>

                                       <Ellipse Stroke="Black" Margin="4,6,4,2" StrokeThickness="0" Height="100" Width="100" Fill="#FFA 7A 1A 1"/>

                                       <Ellipse Stroke="Black" StrokeThickness="0" Width="100" Height="100" VerticalAlignment="Top" Margin="2,0,6,0">

                                              <Ellipse.Fill>

    <LinearGradientBrush EndPoint="0.795,0.998" StartPoint="0.227,-0.092">

                         <GradientStop Color="#FF2CC017" Offset="0.032"/>

                                <GradientStop Color="#FFC6E 2C 3" Offset="1"/>

                                                     </LinearGradientBrush>

                                              </Ellipse.Fill>

                                       </Ellipse>

                                       <ContentPresenter Margin="22,14,28,14"/>

                                </Grid>

                         </ControlTemplate>

                  </Setter.Value>

           </Setter>

           <Setter Property="FontFamily" Value="Arial"/>

           <Setter Property="FontWeight" Value="Bold"/>

           <Setter Property="FontSize" Value="66.667"/>

           <Setter Property="Foreground" Value="#FF 17181C "/>

    </Style>

</ResourceDictionary>

 

（ 6 ）現已建立了一個模板，並且也建立了一個棋子按鈕，並已經將模板應用於此棋子按鈕了，打開 MainPage.xaml 文件，可見 XAML 文件內容以下：

    <Grid x:Name="LayoutRoot" Background="White" Margin="56,0,0,37">

           <Button Height="108" HorizontalAlignment="Left" Margin="126,96,0,0" Style="{StaticResource ButtonStyle1}" VerticalAlignment="Top" Width="108" Content="馬"/>

    </Grid>

</UserControl>

（ 7 ）繼續編輯模板，使其具有鼠標單擊的外觀變換效果，雙擊字典文件，進入到模板編輯狀態，也可從所建立的棋子控件，從級聯菜單中按照順序選擇「編輯控件」、「編輯模板「、「編輯當前模板「進入，如圖 7-6 。

圖 7-6

 

（ 8 ）定義鼠標單擊的外觀變換效果，在左側「狀態」面板的 CommonStates 區域中選擇 Pressed 狀態，接着選擇 Ellipse 的標誌 ( 棋子最外層 ) ，如圖圖 7-7 。

圖 7-7

（ 9 ）使用漸變工具，修改漸變的方向，轉動約 180 度。顏色變爲從淡到深的漸變，與原來的相反，如圖 7-8 。

 

            

如圖 7-8

（ 10 ）繼續編輯模板，選擇 MouseOver 狀態，背景色設爲綠色到紅色的漸變， （ 11 ）模板已修改完成，保存，可安 F5 運行試看點擊的效果。打開對應資源文件，可看到對應的 XAML 代碼：

<VisualState x:Name="MouseOver">

    <Storyboard>

<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">

                  <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFE 85C 26"/>

    </ColorAnimationUsingKeyFrames>

           </Storyboard>

    </VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

           <PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.StartPoint)">

                  <EasingPointKeyFrame KeyTime="00:00:00" Value="0.88,0.944"/>

    </PointAnimationUsingKeyFrames>

                         <PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)">

           <EasingPointKeyFrame KeyTime="00:00:00" Value="0.142,-0.038"/>

    </PointAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

（ 12 ）在設計畫面中的 MainPage.xaml 中，拖放方式建立更多的 Button 控件，如圖 7-10 。

                          圖 7-10

      

（ 12 ）要將模板應用於 Button 控件，單擊畫面右上角的「資源」選項卡，而後找到資源文件中的模板，將模板拖放至應用的 Button 控件上，而且選擇 Style 選項。這樣一個個方形按鈕變成了統同樣式的棋子，並調整修改文字、大小等，如圖 7-11 。

圖 7-11

（ 13 ） F5 運行，鼠標移移到「馬」上，並點擊「馬」後可看到會有明顯的變化效果。

更詳細內容及源代碼下載：

http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_encoding=UTF8&s=books&qid=1287058088&asin=B0043RT7I2&sr=8-1