當(dāng)前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

WPF模板（二）应用

發(fā)布時間：2025/7/25 asp.net 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 WPF模板（二）应用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

原文:WPF模板（二）應(yīng)用

? ? ? ? ? 本次內(nèi)容來源于電子書，和上一篇一樣。

在WPF中有三大模板ControlTemplate,ItemsPanelTemplate,DataTemplate.其中ControlTemplate和ItemsPanelTemplate是控件模板，DataTemplate是數(shù)據(jù)模板，他們都派生自FrameworkTemplate抽象類。

1、ControlTemplate

ControlTemplate:控件模板主要有兩個重要屬性：VisualTree內(nèi)容屬性和Triggers觸發(fā)器。所謂VisualTree(視覺樹),就是呈現(xiàn)我們所畫的控件。Triggers可以對我們的視覺樹上的元素進(jìn)行一些變化。一般用于單內(nèi)容控件。

畫一個按鈕模板來舉例說明：

結(jié)果：

ControlTemplate之子 ContentControl和ContentPresenter

我們在ControlTemplate中畫了兩個橢圓，應(yīng)用于所有的Button按鈕，但我們Button中有Content屬性(內(nèi)容為Hello WPF)，卻沒有顯示出來。因為這里用ControlTemplate重寫了Button的樣式，所以我們也要在ControlTemplate中增加ContentControl。通過ContentControl中的Content來綁定父容器的Content屬性。

這下內(nèi)容出來了

我們來看一下，ContentControl繼承于Control的，用MSDN的話是：表示包含單項內(nèi)容的控件、ContentControl 可以包含任何類型的公共語言運行庫對象。如下ContentControl類圖。

為了提高性能,我們可以用一個ControlPresenter來代替ContentControl，效果還是一樣，那他們有什么區(qū)別呢？

來看下ControlPresenter這個類，它繼承于FreameworkElement，如下圖：

ControlPresenter 通常叫做內(nèi)容占位符。所以我們可以看到

<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>來代替<ContentControl VerticalAlignment="Center" HorizontalAlignment="Center"?Content="{TemplateBinding Content}"/>?。這里少了Content綁定父容器，因為ControlPresenter有個隱式的Content="{TemplateBinding Content}"，也就是你可以寫也可以不寫它。

從他們的基類可以看出，ContentControl比ContentPresenter大多了。其實ControlPresenter是一個原始的構(gòu)建塊，而ContentControl是一個帶控件模板的成熟控件(里面包含ControlPresenter)。

所以我們一般用ControlPresenter。

ControlTemplate的VisualTree我們講過了，下面看下他的trigger如何運用。

我們在原來的代碼中增加

<ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="ellipse1" Property="Fill" Value="Red"/> </Trigger> </ControlTemplate.Triggers>

當(dāng)我們把鼠標(biāo)移上去的時候就會變成如下圖所示：

發(fā)揮我們的想象力，我們可以根據(jù)ControlTemplate做更多的特效。如下

效果圖：點擊之前點擊之后

2、ItemsPanelTemplate

ItemsPanelTemplate在MSDN的解釋是：ItemsPanelTemplate 指定用于項的布局的面板。?GroupStyle?具有一個類型為 ItemsPanelTemplate 的?Panel屬性。?ItemsControl?類型具有一個類型為ItemsPanelTemplate 的?ItemsPanel?屬性。

我們先講ItemTemplate。它一般用在多個內(nèi)容控件的模板。比如ListBox。

如下看ListBox應(yīng)用ItemTemplate：

在xaml中

? <ListBox x:Name="listBox" />

在后臺代碼我們給它一些圖片來填充這個ListBox.

public partial class ListBoxUserControl : UserControl{public ListBoxUserControl(){InitializeComponent();listBox.ItemsSource = LoadImages();}public List<BitmapImage> LoadImages(){List<BitmapImage> bitmapImages=new List<BitmapImage>();DirectoryInfo directoryInfo = new DirectoryInfo(@"E:\WPFDEMO\ControlTest\ControlTest\Images");foreach (var item in directoryInfo.GetFiles("*.jpg")){Uri uri=new Uri(item.FullName);bitmapImages.Add(new BitmapImage(uri));}return bitmapImages;}}

每一張圖片就是一個Item。

我們?nèi)绻胱寛D片以橫向顯示。一開始我以為用StackPanel的Orientation=”Horiziontal”,發(fā)現(xiàn)犯了個錯誤。這樣設(shè)置是現(xiàn)在把Items中某一個item中的內(nèi)容水平顯示啊。這時就要用到ItemsPanelTemplate這個模板了。我們在ListBox的樣式中增加如下紅色區(qū)域的代碼：

</Style>

這里我在DataTemplate中加了StackPanel 為了說明加在這里的效果只是區(qū)分：Items整體橫向和Item中內(nèi)容的區(qū)別。

現(xiàn)在我們要想讓布局可以隨著窗體寬度變化，我們只要把ItemsPanelTemplate中的StackPanel 改成WrapPanel，并且設(shè)置ListBox的ScrollViewer.HorizontalScrollBarVisibility="Disabled"，這樣才可以看到效果。

ControlTemplate之 ItemsPresenter和ContentPresenter

我們先構(gòu)造一個TreeView

xaml中：

在開始加個Loaded="UserControl_Loaded"

后臺代碼中：

public class Node{private IList<Node> _childNodes;private string _name;public Node(){}public Node(string name){_name = name;}public string Name{get { return _name; }set { _name = value; }}public IList<Node> ChildNodes{get{if (_childNodes==null)_childNodes=new List<Node>();return _childNodes;}}}public partial class TreeViewUserControl : UserControl{public TreeViewUserControl(){InitializeComponent();}private void UserControl_Loaded(object sender, RoutedEventArgs e){treeview.PreviewKeyDown += (o,a) => { a.Handled = true; };PopulateTreeView();}void PopulateTreeView(){Node rootNode=new Node("GrandFather");for (int i = 0; i < 2; i++){Node child=new Node("Father");rootNode.ChildNodes.Add(child);for (int j = 0; j < 3; j++){Node child2=new Node("Son");child.ChildNodes.Add(child2);}}Node dummy=new Node();dummy.ChildNodes.Add(rootNode);treeview.ItemsSource = dummy.ChildNodes;}}

沒有任何樣式的TreeView

下面我們?nèi)绾芜\用ItemsPresenter和ContentPresenter來添加樣式。來實現(xiàn)下面這幅圖的效果

在TreeView中ItemsPresenter和ContentPresenter是什么關(guān)系：ContentPresenter是用來顯示TreeView中Item的內(nèi)容。ItemsPresenter是用來顯示它的子項(Item的子項，也就是說child’s Items)。

看紅色代碼的部分，這里ContentPresenter顯示了父容器的Header的內(nèi)容，比如GrandFather,Father,Son.而ItemsPresenter則是否讓他顯示其子元素。比如GrandFather的子元素為Father,沒有設(shè)置<ItemsPresenter Grid.Row="1"/>?的話。子元素Father是不會顯示的。

這里為了突出層次化，運用了ItemsPanelTemplate。最后我們在資源里引用這個樣式。

<UserControl.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="/Controls/TreeViewItemStyle.xaml"/></ResourceDictionary.MergedDictionaries><HierarchicalDataTemplate DataType="{x:Type controls:Node}" ItemsSource="{Binding ChildNodes}"><TextBlock Text="{Binding Name}"/></HierarchicalDataTemplate></ResourceDictionary></UserControl.Resources>