WPF 入门教程ContentTemplate和DataTemplate

发布时间:2024-09-13 17:01

WPF 中的模板用于自定义 UI。我们可以操作控件和数据。

WPF 中的每个控件都有与之关联的默认模板。默认模板定义了一种外观和感觉,基本上是一种控制风格。

这就是为什么默认情况下 Button 或 TextBox 形状是矩形的,因为它是在其默认模板中定义的。现在我们可以更新该模板并添加我们自己的实现。

在 WPF 中有两种类型的模板,

  1. 控制模板:自定义外观
  2. 数据模板:自定义功能。

ContentTemplate

我们可以在 App.xaml 或资源文件中定义这些模板,以便在应用程序中重用它们。

所以默认情况下,这是 Button 的外观。

WPF 入门教程ContentTemplate和DataTemplate_第1张图片

让我们创建一个自定义控件来更改此按钮的形状。

让我们在 Button 中添加一个 ControlTemplate 来实现这一点。但是您可能会收到以下错误。

WPF 入门教程ContentTemplate和DataTemplate_第2张图片

您所见.net framework 给我们编译时间错误,指定Visual tree 只能设置一次,这意味着ControlTemplate 只能有

一个孩子。但是我们在 ControlTemplate 中有几个标签。

 
 

所以为了克服这个问题,我们可以在 ControlTemplate 中添加 Panel 并在该网格中添加任意数量的标签,因为网格可以有多个子级。

    
        
            
        
     

WPF 入门教程ContentTemplate和DataTemplate_第3张图片

 

WPF 入门教程ContentTemplate和DataTemplate_第4张图片

WPF 入门教程ContentTemplate和DataTemplate_第5张图片

新的ControlTemplat 已分配给Button。

现在让我们在ResourceDictionary中加载我们的ControlTemplate并从那里获取它。

ResourceDictionaryTemplate.xaml

    
        0 5 5 0    
        
            
                
                
            
        

MainWindow.xaml

首先,您需要添加Window.Resources。
其次使用Tag Template绑定EllipseButton ControlTemplate。

    
        
            
        
        
        

ContentPresenter

让我们在 UI 中显示员工信息。
为此,我们将需要员工类:Employee.cs

public class Employee  
{  
       public int EmpId { get; set; }  
       public string EmpName { get; set; }  
       public string Designation { get; set; }  
} 

MainWindowViewModel:当我使用MVVM时,我正在更新ViewModel。
但是你可以在后面的代码中做同样的事情。

using A.Entities;  
using Prism.Mvvm;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;  
  
namespace A  
{  
    class MainWindowViewModel : BindableBase  
    {  
        #region Properties  
        private Employee _empDetails;  
  
        public Employee EmpDetails  
        {  
            get { return _empDetails; }  
            set { _empDetails = value; }  
        }  
 
        #endregion  
 
        #region Constructor  
        public MainWindowViewModel()  
        {  
            EmpDetails = new Employee()  
            {  
                EmpId = 1,  
                EmpName = "Rikam",  
                Designation = "Software Eng."  
            };  
        }  
        #endregion  
    }  
} 

最后MainWindow.xaml:

    
        
            
                
                    
                
            
        
        
            
                
                    
                        
                            
                                
                                
                                
                            
                            
                                
                                                            
                            
                            
                    
                
            
        

WPF 入门教程ContentTemplate和DataTemplate_第6张图片

当我们要使用 DataTemplate 时,我们需要使用 ContentPresenter。
然后你必须指定它的内容,以及我们的内部控件应该从哪里获取它的数据的源。
然后根据需要绑定每个属性。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号