锐英源精品原创，禁止全文或局部转载，禁止任何形式的非法使用，侵权必究。点名“简易百科”和闲暇巴盗用锐英源原创内容。

WPF模板

前几天写DataGrid列动态列，研究了模板，在codeproject上找到了个好文章翻译给大家，要点是模板功能灵活强大，能轻松制作出来类似ListView效果WPF控件，并且对父子关系数据也能模板化，希望大家能够喜欢。提示下：看不懂codeproject，找锐英源。

介绍

每个控件都有自己关联的默认模板。使用样式，您只能修改关联的默认模板。WPF 使您能够更改控件的外观和感觉，这可以通过使用模板来实现。

有四种类型的模板：

• ControlTemplate
• DataTemplate
• ItemsPanelTemplate
• HeirarchialDataTemplate

控件模板

控件模板使您能够自定义控件的默认外观和行为。这可以通过将依赖属性“ Template”设置为控件模板的实例来实现。

例子

让我们为按钮创建一个控件模板。

1. 创建一个新项目“ Templates”并添加一个 XAML 文件ControlTemplate.xaml。

    

2. 在其中放置一个按钮：
   XML

   <Grid>      <Button Margin="50" Foreground="Black" Content="Custom" ></Button>  </Grid>

3. 添加Button.Template标签并ControlTemplate在其中创建，如以下示例代码所示。
   XML

   <Button Margin="50" Foreground="Black" Content="Custom" >
              <Button.Template>
                  <ControlTemplate TargetType="{x:Type Button}">
                      <Grid>
                          <Ellipse Width="210" Height="110"
                          Fill="Black"/>
                          <Ellipse Width="200" Height="100"
                          Name="Button" Fill="Brown" />
                          <ContentPresenter HorizontalAlignment="Center"
                                        VerticalAlignment="Center"/>
                      </Grid>
                  </ControlTemplate>
              </Button.Template>
          </Button>

一旦您创建了ControlTemplate，该按钮就会将其默认模板替换为您创建的模板。

 

数据模板

数据模板使您能够自定义数据对象的外观。当对象集合像ListView、ListBox和ComboBox与ItemControls绑定时，这是有益的。

要了解数据模板的重要性，让我们看看ListBox在没有数据模板的情况下创建会发生什么。

步骤 - 没有 DataTemplate 的 ListBox

<Grid>
    <ListBox Name="dataTemplate" ></ListBox>
</Grid>

1. 添加新的 XAML 文件DataTemplate.xaml并在其中放置一个Listbox控件。
   1. 创建一个类“ Book”，如下图：
      C＃

      public class Book
                	{
             		  public string CoverImage { get; set; }
             		  public string Name { get; set; }
             		  public string Author { get; set; }
         	        }

   2. 创建类实例的Book集合并将集合与ListBox如下所示的绑定：
      C＃

      public partial class DataTemplate : Window
         	{
             		public DataTemplate()
            		 {
                 		InitializeComponent();
                 		// Create the Collection
                 		List<'Book> bookList = new List<Book>();
                 		bookList.Add(new Book() 
                      { 
                         CoverImage = @"images\ComputerNetworking6E.jpg", 
                         Name = "Computer Networking",
      	               Author = "James F. Kurose" 
                      });
                 		bookList.Add(new Book() 
                      { 
                         CoverImage = @"images\software-engineering-oup.jpg", 
                         Name = "Software Engineering",
                         Author = "Deepak Jain"
                      });
                	    bookList.Add(new Book() 
                      { 
                         CoverImage = @"images\MyCoverImage.jpg",
                         Name = "HTML 5", 
                         Author = "Adam McDaniel" 
                      });
                 		bookList.Add(new Book()
                      { 
                         CoverImage = @"images\9780134133164.jpg",
                         Name = "Visual Studio 2015", 
                         Author = "Lars Powers"
                     });
                 
                    //Bind it with the ListBox
                    this.dataTemplate.ItemsSource = bookList;          
             }
         }

输出

 

数据对象的默认模板是Textblock. 因此，如果我们在没有数据模板的情况下将对象绑定到它，ToString()则会在其上被调用并且数据显示为string.

现在让我们看看数据模板会发生什么。

附加步骤 - 带有 DataTemplate 的 ListBox

添加ListBox.ItemTemplate标签并在其中创建数据模板，如下所示：

<ListBox Name="dataTemplate" >
           <ListBox.ItemTemplate>
               <DataTemplate>
                   <StackPanel Orientation="Horizontal" 
                   VerticalAlignment="Center">
                       <Image Source="{Binding CoverImage}" 
                       Height="200" Width="150"></Image>
                       <StackPanel Orientation="Vertical"  
                       VerticalAlignment="Center">
                           <TextBlock Text="{Binding Name}" 
                           FontSize="16"></TextBlock>
                           <TextBlock Text="{Binding Author}" 
                           FontSize="16"></TextBlock>
                       </StackPanel>
                   </StackPanel>
               </DataTemplate>
           </ListBox.ItemTemplate>
   </ListBox>

输出

 

为了数据对象的正确图形表示，我们应该创建带有DataTemplate的ItemsControl，但是如果我们需要自定义项目的默认布局怎么办。在这种情况下，ItemsPanelTemplate可用。

ItemsPanelTemplate

ItemsPanelTemplate 使您能够自定义ItemControls，类似ListBox、ListView. 每个ItemControl都有其默认面板。

例如：默认面板ListBox是VirtualizingStackPanel。

为了更详细地理解它，让我们自定义ListBox上面示例中的布局。Listbox渲染所有项目一个接一个垂直对齐，每个项目占据整行。此布局可以自定义如下。

添加ListBox.ItemsPanel标签并ItemsPanelTemplate在其中创建。

<ListBox.ItemsPanel>
                   <ItemsPanelTemplate>
                       <UniformGrid Columns="3" />
                   </ItemsPanelTemplate>
</ListBox.ItemsPanel>

 

输出

 

现在很清楚，像ListBox&ListView的ItemContro的模板可以使用DataTemplateand进行自定义ItemsPanelTemplate。WPF 还提供了一个本质上是父子分层的ItemControl调用，即TreeView。在这种情况下没有用DataTemplate和ItemPanelTemplate

分层数据模板

HierarchialDataTemplate使您能够自定义 ParentTreeViewItem及其 ChildTreeViewItem的模板。

让我们举个例子来更详细地理解它：

1. 创建一个Child类并声明一个string类型属性“ Title”，如下所示：
   C＃

   public class Child
                     {
                     public Child(string title)
                     {
                     Title = title;
                     }
                   public string Title { get; set; }
                     }               

3. 创建一个Parent类并声明一个string类型属性“ Title”和一个子类“ ChildItems”类型的列表，如下所示：
   C＃
4. public class Parent
   {
   public Parent(string title)
   {
   Title = title;
   ChildItems = new List<Child>();
   }
5. public string Title { get; set; }
   public List<Child> ChildItems { get; set; }
   }
7. 现在创建一个虚拟的 Hierarchical 集合：
   C＃
8. var parent1 = new Parent("Parent #1")
   {
   ChildItems =
   {
   new Child("Child Item #1.1"),
   new Child("Child Item #1.2"),
   new Child("Child Item #1.3")
9. }
   };
   var parent2 = new Parent("Parent #2")
   {
   ChildItems =
   {
   new Child("Child Item #2.1"),
   new Child("Child Item #2.2"),
   new Child("Child Item #2.3")
10. }
    };
    this.treeView.Items.Clear();
    List<Parent> parent = new List<Parent>();
    parent.Add(parent1);
    parent.Add(parent2);
12. 添加一个TreeView并为它创建一个HierarchialDataTemplate：
    XML

    <Grid>
           <TreeView Name="treeView">
               <TreeView.ItemTemplate>
                   <HierarchicalDataTemplate ItemsSource="{Binding ChildItems}">
                       <StackPanel Orientation="Horizontal">
                           <Rectangle Height="10" Width="10" 
                           Fill="Red"></Rectangle>
                           <TextBlock  Text="{Binding Title}"></TextBlock>
                       </StackPanel>
                   </HierarchicalDataTemplate>
               </TreeView.ItemTemplate>
           </TreeView>
       </Grid>

13. 将分层集合父级绑定到TreeView：
    C＃

    this.treeView.ItemsSource = parent;

输出

 

模板改变了父项及其子项的外观和感觉。

结论

使用这些模板我们可以做很多事情。我举了非常简单的例子，让你了解所有四种模板的基础知识。我希望这有帮助。感谢您的阅读。