本文系本站原創,歡迎轉載! 轉載請注明出處: [http://blog.csdn.net/mr_raptor/article/details/7251948](http://blog.csdn.net/mr_raptor/article/details/7251948) ### [WindowsPhone自定義控件詳解（一） - 控件類庫分析](#) [上一節主要分析了控件類庫，控件類之間的繼承關系，通過繼承關系，可以知道一些屬性，事件的源頭和機制。](http://blog.csdn.net/mr_raptor/article/details/7251942) ? 本節開始介紹模板類庫，并加實例說明和展示。 基類自定義時都要用到模板，在框架中所有的模板都是FrameworkTemplate的子類，包括： 1. **ControlTemplate** 1. **ItemsPanelTemplate** 1. **DataTemplate** 通過上節對控件的繼承關系的分析，你已經可以理解為什么有上面的三種模板了吧。 無非就是對三種控件分類的，三種模板。即： ?> Control類模板對應ControlTemplate ?> ItemsControl類模板對應ItemsPanelTemplate ?> ContentControl、ItemTemplate類模板對應DataTemplate ? 下面分別來解釋三種模板。 ? **一、 模板類詳解** 繼承關系： ? ? 由上圖可知，控件對象模板，項集合模板和數據對象模板都是繼承自FrameworkTemplate類， 1.?ControlTemplate主要用于自定義控件的**操作行為**和**視圖結構**的外觀顯示效果。如：當按鈕按下時如何顯示等，按鈕上要不要同時顯示圖片和文本。 - 通過設置控件的Template屬性（繼承自Control）來應用自定義的ControlTemplate 2. ?ItemsPanelTemplate主要用于自定義帶有列表項的控件中各子控件的**布局外觀**顯示效果，如：ListBox中的列表項怎樣對布局。 - 通過設置控件的ItemsPanel屬性來應用自定義的ItemsPanelTemplate 3. ?DataTemplate主要用于自定義內容控件中的**數據視圖**效果，如：ListBox中每一項顯示什么數據。 - ?通過設置控件的ItemTemplate /ContentTemplate屬性來應用自定義的DataTemplate，注意：一個控件上可能應用多個自定義模板，如：ListBox設置ListBox的列表項Items為橫向排列，設置每個列表項里布局和數據，這樣就要設置ListBox的ItemsPanelTemplate和DataTemplate。 ?**原創地址：[http://blog.csdn.net/mr_raptor/article/details/7251948](http://blog.csdn.net/mr_raptor/article/details/7251948)[](http://blog.csdn.net/mr_raptor/article/details/7227260)** ### ControlTemplate類 ? 定義控件的視圖顯示模板，從而可以對控件進行自定義。在模板內可以構建自己的控件對象樹。 **注意：** - 如果您正在定義一個控件模板來取代一個現有控件類的模板，則您用于定義控件模板內容的 XAML 應與現有的控件匹配。否則，該控件可能無法在用戶界面中正常發揮作用。 - 不能將 ControlTemplate 應用于 UserControl（上一節有說明為什么）。 例如：為 Button 創建一個簡單的 ControlTemplate。控件模板包含一個Grid 并指定以下行為： ·???????? 當用戶將鼠標懸停在Button 上方時，Grid 在半秒之后從綠色變為紅色。 ·???????? 當用戶將鼠標移離按鈕時，Grid 立即變回到綠色。 ? ~~~ <ControlTemplate TargetType="Button"> <Grid > <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <!--Take one half second to trasition to the MouseOver state.--> <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5"/> </VisualStateGroup.Transitions> <VisualState x:Name="Normal" /> <!--Change the SolidColorBrush, ButtonBrush, to red when the mouse is over the button.--> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="ButtonBrush" Storyboard.TargetProperty="Color" To="Red" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.Background> <SolidColorBrush x:Name="ButtonBrush" Color="Green"/> </Grid.Background> </Grid> </ControlTemplate> ~~~ ? ### ItemsPanelTemplate 類 ItemsPanelTemplate定義ItemsControl中的Item項布局的模板。ItemsControl 的默認值是一個指定StackPanel的ItemsPanelTemplate。例如：ListBox是一個ItemsControl子控件，它的Item項布局模板ItemsPanelTemplate為默認的StackPanel，而StackPanel默認布局是垂直布局，因此，默認的ListBox的Item項垂直布局的，當我們向ListBox里添加Item時，都是垂直列表形式，如果你想要自定義你的ListBox風格為水平顯示，那么將要自定義ItemsPanelTemplate里StackPanel為水平方向。 如下例，將ListBox的風格改為水平子項顯示方式。 ? 模板XAML: ~~~ <Grid> <Grid.Resources> <Style x:Key="horizontalListBoxStyle" TargetType="ListBox"> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style> <src:Items x:Key="items"/> </Grid.Resources> <ListBox ItemsSource="{StaticResource items}" Style="{StaticResource horizontalListBoxStyle}"/> </Grid> ~~~ ? C#代碼： ~~~ public class Items : System.Collections.ObjectModel.ObservableCollection<string> { public Items() { Add("Item 1"); Add("Item 2"); Add("Item 3"); Add("Item 4"); Add("Item 5"); } } ~~~ 顯示效果如下： ? **總結：** ItemsPanelTemplate主要用于帶有Item項的控件風格布局模板設置，常見的控件就是ListBox， ?**原創地址：[http://blog.csdn.net/mr_raptor/article/details/7251948](http://blog.csdn.net/mr_raptor/article/details/7251948)[](http://blog.csdn.net/mr_raptor/article/details/7227260)** ### DataTemplate 類 ? 用于定義內容控件內數據對象的可視結構模板。雖然內容控件只能包含一個UIElement，但是，它可以包含一個容器控件，從而可以間接的包含多個子控件，而DataContent就是為這些容器控件里的子控件進行布局的模板類。 下面的例子，自定了ListBox中每一項中的UI如何表現。每一個Item中包含四個水平布局的TextBlock控件，每個TextBlock控件都綁定了Customers的屬性。 XAML： ~~~ <Grid> <Grid.Resources> <src:Customers x:Key="customers"/> </Grid.Resources> <ListBox ItemsSource="{StaticResource customers}" Width="350" Margin="0,5,0,10"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Padding="5,0,5,0" Text="{Binding FirstName}" /> <TextBlock Text="{Binding LastName}" /> <TextBlock Text=", " /> <TextBlock Text="{Binding Address}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> ~~~ C#： ~~~ public class Customer { public String FirstName { get; set; } public String LastName { get; set; } public String Address { get; set; } public Customer(String firstName, String lastName, String address) { this.FirstName = firstName; this.LastName = lastName; this.Address = address; } } public class Customers : ObservableCollection<Customer> { public Customers() { Add(new Customer("Michael", "Anderberg", "12 North Third Street, Apartment 45")); Add(new Customer("Chris", "Ashton", "34 West Fifth Street, Apartment 67")); Add(new Customer("Cassie", "Hicks", "56 East Seventh Street, Apartment 89")); Add(new Customer("Guido", "Pica", "78 South Ninth Street, Apartment 10")); } } ~~~ ? **二、其它** **原創地址：[http://blog.csdn.net/mr_raptor/article/details/7251948](http://blog.csdn.net/mr_raptor/article/details/http://blog.csdn.net/mr_raptor/article/details/7251948)[](http://blog.csdn.net/mr_raptor/article/details/7227260)** **DataContext類** ?  ? ? DataContext是FrameworkElement的屬性，是Object類型，用于獲取或設置 FrameworkElement 參與數據綁定時的數據上下文。也就是說它是被數據綁定的對象。 DataContext也就是第四代控件祖宗的屬性（說實話，控件從第三代祖宗UIElement開始才有了外觀，有了點人樣）， 如果你給它綁定了數據源，CLR就會從數據源里拿出對應數據用于顯示，DataContext有傳遞性，如果外部包含控件設置了DataContext，被包含控件沒有設置該屬性，則被包含控件也可以使用外部包含控件的DataContext。 比如： ?XAML： ~~~ <phone:PhoneApplicationPage.Resources> <local:WeiBoData x:Key="MyWeiBoData"/> </phone:PhoneApplicationPage.Resources> <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource MyWeiBoData}"> <StackPanel Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="DateTextBlock" Text="{Binding WeiBoDate}" > <TextBlock x:Name="TitleTextBlock" Text="{Binding WeiBoTitle}" /> </StackPanel> </Grid> ~~~ WeiBoData類中包含有WeiBoDate屬性和WeiBoTitle屬性，雖然沒有指定兩個TextBlock的綁定對象，但是它有Grid控件的DataContext。 ?在后續兩節，我們分別以這兩節的知識，分享兩個例子： **自定義水印密碼輸入控件**和**下拉刷新控件**。 注：上述兩個控件經常使用，并且方便快捷。 本文系本站原創,歡迎轉載! 轉載請注明出處: [http://blog.csdn.net/mr_raptor/article/details/7251948](http://blog.csdn.net/mr_raptor/article/details/http://blog.csdn.net/mr_raptor/article/details/7251948)[](http://blog.csdn.net/mr_raptor/article/details/7227260)