WPF快速指導2:模板
??? 本文摘要:
??? 1:模板作用;
??? 2:樣式模板;
??? 3:數據模板;
??? 4:如何使用ControlTemplate;
??? 5:如何使用DataTemplate;
?
一:模板作用
??? 1:樣式模板,在應用程序內部維護和共享外觀;
??? 2:數據模板,實現表現形式和邏輯的分離;
二:樣式模板
??? 如:
??? 片段1:???
<Style TargetType="TextBlock"><Setter Property="HorizontalAlignment" Value="Center" /><Setter Property="FontFamily" Value="Comic Sans MS"/><Setter Property="FontSize" Value="14"/></Style>
??? 以上的樣式模板用于對頁面范圍內TextBlock進行規范。注意Style中一個屬性關鍵字BaseOn,如:
片段2???
<Style BasedOn="{StaticResource {x:Type TextBlock}}"TargetType="TextBlock"x:Key="TitleText">……</Style>
??? 這個屬性標識是指如上的風格基于片段1,同時進行拓展。
關于樣式模板需要注意的幾個方面:
1:如果有多個 Setter 對 Style 的同一屬性進行設置,則最后聲明的 Setter 優先;
2:以編程方式設置屬性,textblock1.Style = (Style)(this.Resources["TitleText"]);
三:數據模板
??? 數據模板的作用就是實現表現形式和邏輯的分離。
??? 查看如下的代碼片段,
??? 片段3:????
<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}" > </ListBox>
??? 這就意味著這個ListBox的數據源是資源中定義的MyPhotos數據源,如下:
??? 片段4????
<Window.Resources><ObjectDataProvider x:Key="MyPhotos" ObjectType="{x:Type local:PhotoList}"/></Window.Resources>
??? 這個資源定義中有一個Package名local,我們如下定義:
??? xmlns:local="clr-namespace:WpfApplication2"
??? 同時也指定了數據源的類型為PhotoList,即存在類為PhotoList以及PhotoList所對應的Item,類Photo。
??? 在UI呈現的時候,需要為MyPhotos動態添加數據,添加數據的代碼如下:
PhotoList Photos;private void WindowLoaded(object sender, RoutedEventArgs e){Photos = (PhotoList)(this.Resources["MyPhotos"] as ObjectDataProvider).Data;Photos.Path = "...\\...\\Images";}
??? 注意,以上代碼如果運行的話,ListBox呈現的是Photo的ToString()。要按照我們的需求顯示實際的圖片,仍舊需要定義DataTemplate,即
??? 片段5:
<DataTemplate DataType="{x:Type local:Photo}"> <Border Margin="3"> <Image Source="{Binding Source}"/> </Border> </DataTemplate>
四:如何使用ControlTemplate
??? WPF 中的許多控件都使用 ControlTemplate 來定義控件的結構和外觀,這樣可將控件外觀和控件功能分離開。 重新定義控件的 ControlTemplate 可以徹底改變控件的外觀。使用ControlTemplate還可以創建自定義控件,在這里不做贅述。
??? 改變現有控件的一個典型例子如下:????
<Style TargetType="Button"><!--Set to true to not get any properties from the themes.--><Setter Property="OverridesDefaultStyle" Value="True"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid><Ellipse Fill="{TemplateBinding Background}"/><ContentPresenter HorizontalAlignment="Center"VerticalAlignment="Center"/></Grid></ControlTemplate></Setter.Value></Setter></Style>
五:如何使用DataTemplate
??? DataTemplate 可用于自定義數據在控件上的顯示方式。除了自定義數據外觀之外,DataTemplate 還可以包含 UI 元素,這樣大大增加了自定義 UI 的靈活性。DataTemplate的用法見下一章。本文轉自最課程陸敏技博客園博客,原文鏈接:http://www.cnblogs.com/luminji/archive/2011/01/09/1931392.html,如需轉載請自行聯系原作者