程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> C#入門知識 >> WPF中模板(ControlTemplate and DataTemplate)

WPF中模板(ControlTemplate and DataTemplate)

編輯:C#入門知識

WPF中的模板是一個特別重要的概念,對於做UI開發的同學來說熟悉ControlTemplate(控件模板) 和DataTemplate(數據模板)是必須掌握的技能,否則就只能做個拖控件的菜鳥。

下面就著重介紹下這兩類模板的概念和使用。

1.ControlTemplate 就是我們常說的控件模板,主要用途是更改控件的外觀,比如你要修改一個Button的形狀是圓形的,改變背景顏色,定制動畫效果等等。

下面舉例說明它的應用,一個簡單的例子就是我們想把TabControl的tab頁放在下面,那麼就可以這樣修改TabControl的style

[csharp] 
<Style TargetType="{x:Type TabControl}" x:Key="ButtomTab"> 
        <Setter Property="Template"> 
            <Setter.Value> 
                <ControlTemplate TargetType="{x:Type TabControl}"> 
                    <Grid> 
                        <Grid.RowDefinitions> 
                            <RowDefinition Height="*"/> 
                            <RowDefinition Height="Auto"/> 
                        </Grid.RowDefinitions> 
                        <TabPanel Grid.Row="1" Panel.ZIndex="1" Margin="0" IsItemsHost="True" Background="Transparent" /> 
                        <Border Grid.Row="0" Background="White" BorderThickness="1 0 1 0" CornerRadius="0" > 
                            <ContentPresenter ContentSource="SelectedContent" /> 
                        </Border> 
                    </Grid> 
                </ControlTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 

從代碼中我們可以看到ControlTemplate 裡面是一個Grid然後你可以布局它的TabPanel的位置,我們把TabPanel 的屬性設置為Grid.Row="1" 這樣就使得TabPanel 放在了內容
ContentPresenter 的下面 這樣我們就可以得到一個tab頁在下面的tabcontrol控件。看吧,夠簡單easy吧。

具體怎麼設置style,每個控件的controltemplate是什麼樣的 可以看看這篇文章有了它wpf的style可以任你發揮了

當然在controltemplate裡面還有個非常重要的概念就是trigger,在以後的博客裡我會具體介紹tirgger的使用。


2.DataTemplate就是我們所說的數據模板,主要用於數據的呈現,比如你列表控件裡面放哪些數據,怎麼排版這些數據,是橫著排還是豎著排。大部分在itemscontrol和treeview類得控件綁定數據所用,它不影響外觀,只為呈現數據內容。

DataTemplate的使用比較簡單 示例如下

[csharp]
<ItemsControl x:Name="ic_PowerPort" AlternationCount="2"> 
                      <ItemsControl.ItemTemplate> 
                          <DataTemplate> 
                              <Border Margin="1" x:Name="back" Height="50"> 
                                  <ToggleButton HorizontalAlignment="Stretch" MouseDoubleClick="ToggleButton_Click"> 
                                      <DockPanel > 
                                          <TextBlock Text="{Binding Name}" ToolTip="{Binding Name}"  Margin="10 0 0 0" VerticalAlignment="Center" TextTrimming="WordEllipsis"/> 
                                          <Image x:Name="_img" Width="18" Height="18" Margin="10 0" MouseLeftButtonDown="DelPowerPort_Click" HorizontalAlignment="Right" Source="/Vdc3D.Coms.DModelEditor;component/Images/del.png"/> 
                                      </DockPanel> 
 
                                  </ToggleButton> 
                              </Border> 
                      </ItemsControl.ItemTemplate> 
                  </ItemsControl> 
從上面的代碼我們可以看出給定一個ItemsControl 的控件用於顯示一個列表,裡面綁定一個對象的Name屬性,同是還有個Image 用於刪除,由此可以知道DataTemplate的主要作用是在綁定數據的時候做數據呈現的。

在此特別說明下TreeView 的數據綁定需要一個HierarchicalDataTemplate 它是一個級聯的綁定數據模板

[csharp]
<TreeView Name="_tree" Margin="0" BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" ItemsSource="{Binding Children}" > 
                <TreeView.ItemTemplate> 
                    <HierarchicalDataTemplate ItemsSource="{Binding Children}"> 
                        <Border CornerRadius="0" Margin="1"  x:Name="back" MinWidth="70" 
                                Background="Transparent" DataContext="{Binding}" PreviewMouseMove="TreeItem_PreviewMouseMove"> 
                            <StackPanel Orientation="Horizontal" Margin="2"> 
                                <Image x:Name="BGimage" Source="/Vdc3D.Coms.DModelEditor;component/Images/item.png" Height="15" Width="15" /> 
                                <TextBlock Text="{Binding ShowText}" Margin="2 0"/> 
                            </StackPanel> 
                        </Border> 
                    </HierarchicalDataTemplate> 
                </TreeView.ItemTemplate> 
            </TreeView> 

這樣我們就可以給一個treeview綁定數據了UI會級聯的綁定數據對象的Children屬性
至此wpf中的兩大類模板已經介紹完畢,如果有不懂的地方,或者說的不正確的地方,可以留言交流。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved