XAML - เทมเพลต

เทมเพลตอธิบายรูปลักษณ์โดยรวมและลักษณะที่มองเห็นของตัวควบคุม สำหรับตัวควบคุมแต่ละตัวจะมีเทมเพลตเริ่มต้นที่เชื่อมโยงซึ่งจะทำให้เกิดลักษณะของตัวควบคุมนั้น

ใน XAML คุณสามารถสร้างเทมเพลตของคุณเองได้อย่างง่ายดายเมื่อคุณต้องการปรับแต่งลักษณะการทำงานของภาพและลักษณะที่มองเห็นของตัวควบคุม การเชื่อมต่อระหว่างลอจิกและเทมเพลตสามารถทำได้โดยการผูกข้อมูล

ความแตกต่างที่สำคัญระหว่างสไตล์และเทมเพลตคือ -

  • สไตล์สามารถเปลี่ยนลักษณะที่ปรากฏของตัวควบคุมของคุณด้วยคุณสมบัติเริ่มต้นของตัวควบคุมนั้นเท่านั้น

  • ด้วยเทมเพลตคุณสามารถเข้าถึงส่วนต่างๆของตัวควบคุมได้มากกว่าในสไตล์ คุณยังสามารถระบุพฤติกรรมทั้งที่มีอยู่และใหม่ของตัวควบคุม

มีเทมเพลตสองประเภทที่ใช้กันมากที่สุด

  • เทมเพลตการควบคุม
  • เทมเพลตข้อมูล

เทมเพลตการควบคุม

เทมเพลตการควบคุมกำหนดหรือระบุลักษณะที่มองเห็นและโครงสร้างของตัวควบคุม องค์ประกอบ UI ทั้งหมดมีลักษณะที่ปรากฏเช่นเดียวกับพฤติกรรมเช่นปุ่มมีลักษณะและพฤติกรรม เหตุการณ์การคลิกหรือเหตุการณ์การวางเมาส์เป็นลักษณะการทำงานที่เริ่มทำงานเพื่อตอบสนองต่อการคลิกและการวางเมาส์และยังมีลักษณะเริ่มต้นของปุ่มซึ่งสามารถเปลี่ยนแปลงได้โดยเทมเพลตการควบคุม

มาดูตัวอย่างง่ายๆอีกครั้งซึ่งปุ่มสองปุ่มถูกสร้างขึ้นด้วยคุณสมบัติบางอย่าง หนึ่งอยู่กับtemplate และอีกอันอยู่กับไฟล์ default ปุ่ม.

<Window x:Class = "TemplateDemo.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Window.Resources>
      <ControlTemplate x:Key = "ButtonTemplate" TargetType = "Button">
         <Grid>
            <Ellipse x:Name = "ButtonEllipse" Height = "100" Width = "150" >
               <Ellipse.Fill> 
                  <LinearGradientBrush StartPoint = "0,0.2" EndPoint = "0.2,1.4"> 
                     <GradientStop Offset = "0" Color = "Red"/>
                     <GradientStop Offset = "1" Color = "Orange"/>
                  </LinearGradientBrush> 
               </Ellipse.Fill>
            </Ellipse>
            <ContentPresenter Content = "{TemplateBinding Content}"
               HorizontalAlignment = "Center" VerticalAlignment = "Center" />
         </Grid>
         <ControlTemplate.Triggers> 
            <Trigger Property = "IsMouseOver" Value = "True">
               <Setter TargetName = "ButtonEllipse" Property = "Fill" >
                  <Setter.Value> 
                     <LinearGradientBrush StartPoint = "0,0.2" EndPoint="0.2,1.4"> 
                        <GradientStop Offset = "0" Color = "YellowGreen"/>
                        <GradientStop Offset = "1" Color = "Gold"/>
                     </LinearGradientBrush> 
                  </Setter.Value> 
               </Setter>
            </Trigger> 
				
            <Trigger Property = "IsPressed" Value = "True"> 
               <Setter Property = "RenderTransform"> 
                  <Setter.Value> 
                     <ScaleTransform ScaleX = "0.8" ScaleY = "0.8" CenterX = "0" CenterY = "0" /> 
                  </Setter.Value> 
               </Setter> 
					
               <Setter Property = "RenderTransformOrigin" Value = "0.5,0.5" /> 
            </Trigger>
         </ControlTemplate.Triggers>
      </ControlTemplate> 
   </Window.Resources>
	
   <StackPanel> 
      <Button Content = "Round Button!" Template = "{StaticResource ButtonTemplate}" 
         Width = "150" Margin = "50" />
      <Button Content = "Default Button!" Height = "40" Width = "150" Margin = "5" /> 
   </StackPanel> 
	
</Window>

เมื่อโค้ดด้านบนถูกคอมไพล์และเรียกใช้งานจะสร้าง MainWindow ดังต่อไปนี้ -

เมื่อคุณวางเมาส์เหนือปุ่มที่มีเทมเพลตแบบกำหนดเองมันจะเปลี่ยนสีตามที่แสดงด้านล่าง -

เทมเพลตข้อมูล

เทมเพลตข้อมูลกำหนดและระบุลักษณะและโครงสร้างของการรวบรวมข้อมูล ให้ความยืดหยุ่นในการจัดรูปแบบและกำหนดการนำเสนอข้อมูลบนองค์ประกอบ UI ใด ๆ ส่วนใหญ่จะใช้กับข้อมูลที่เกี่ยวข้องกับการควบคุมรายการเช่น ComboBox, ListBox เป็นต้น

มาดูตัวอย่างเทมเพลตข้อมูลง่ายๆกัน โค้ด XAML ต่อไปนี้สร้างคอมโบบ็อกซ์ที่มีเทมเพลตข้อมูลและบล็อคข้อความ

<Window x:Class = "XAMLDataTemplate.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid VerticalAlignment = "Top">
      <ComboBox Name = "Presidents" ItemsSource = "{Binding}" Height = "30" Width = "400"> 
         <ComboBox.ItemTemplate> 
            <DataTemplate>
               <StackPanel Orientation = "Horizontal" Margin = "2">
                  <TextBlock Text = "Name: " Width = "95" Background = "Aqua" Margin = "2" /> 
                  <TextBlock Text = "{Binding Name}" Width = "95" Background = "AliceBlue" Margin = "2" /> 
                  <TextBlock Text = "Title: " Width = "95" Background = "Aqua" Margin = "10,2,0,2" />
                  <TextBlock Text = "{Binding Title}" Width = "95" Background = "AliceBlue" Margin = "2" /> 
               </StackPanel>
            </DataTemplate>
         </ComboBox.ItemTemplate> 
      </ComboBox> 
   </Grid>
   
</Window>

นี่คือการใช้งานใน C # ซึ่งวัตถุพนักงานถูกกำหนดให้กับ DataContext -

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace XAMLDataTemplate { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() {
         InitializeComponent(); 
         DataContext = Employee.GetEmployees(); 
      }
   }
}

นี่คือการนำไปใช้ใน C # สำหรับคลาสพนักงาน -

using System; 
using System.Collections.Generic; 
using System.Collections.ObjectModel; 
using System.ComponentModel; 
using System.Linq; 
using System.Runtime.CompilerServices; 
using System.Text; 
using System.Threading.Tasks;

namespace XAMLDataTemplate { 
   public class Employee : INotifyPropertyChanged {
      private string name; public string Name {
         get { return name; } 
         set { name = value; RaiseProperChanged(); } 
      }
      private string title; public string Title { 
         get { return title; } 
         set { title = value; RaiseProperChanged(); } 
      }
      public static Employee GetEmployee() {
         var emp = new Employee() { 
            Name = "Waqas", Title = "Software Engineer" };
         return emp; 
      }
      public event PropertyChangedEventHandler PropertyChanged;
      private void RaiseProperChanged( [CallerMemberName] string caller = ""){
         if (PropertyChanged != null) { 
            PropertyChanged(this, new PropertyChangedEventArgs(caller)); 
         } 
      }
      public static ObservableCollection<Employee> GetEmployees() {
         var employees = new ObservableCollection<Employee>();
         employees.Add(new Employee() { Name = "Ali", Title = "Developer" }); 
         employees.Add(new Employee() { Name = "Ahmed", Title = "Programmer" });
         employees.Add(new Employee() { Name = "Amjad", Title = "Desiner" });
         employees.Add(new Employee() { Name = "Waqas", Title = "Programmer" }); 
         employees.Add(new Employee() { Name = "Bilal", Title = "Engineer" });
         employees.Add(new Employee() { Name = "Waqar", Title = "Manager" }); 
         return employees; 
      }
   }
}

เมื่อโค้ดด้านบนถูกคอมไพล์และเรียกใช้งานโค้ดดังกล่าวจะให้ผลลัพธ์ดังต่อไปนี้ มันมีคอมโบบ็อกซ์และเมื่อคุณคลิกที่คอมโบบ็อกซ์คุณจะเห็นว่าคอลเลกชันของข้อมูลที่สร้างขึ้นในคลาสพนักงานแสดงอยู่ในรายการคอมโบบ็อกซ์

เราขอแนะนำให้คุณรันโค้ดด้านบนและทดลองใช้งาน