XAML - टेम्पलेट

एक टेम्पलेट एक नियंत्रण के समग्र रूप और दृश्य उपस्थिति का वर्णन करता है। प्रत्येक नियंत्रण के लिए, इसके साथ एक डिफ़ॉल्ट टेम्पलेट जुड़ा होता है जो उस नियंत्रण को उपस्थिति देता है।

एक्सएएमएल में, आप आसानी से अपने स्वयं के टेम्पलेट बना सकते हैं जब आप दृश्य व्यवहार और नियंत्रण के दृश्य उपस्थिति को अनुकूलित करना चाहते हैं। तर्क और टेम्पलेट के बीच कनेक्टिविटी डेटा बाइंडिंग द्वारा प्राप्त की जा सकती है।

शैलियों और टेम्पलेट्स के बीच मुख्य अंतर हैं -

• शैलियाँ केवल उस नियंत्रण के डिफ़ॉल्ट गुणों के साथ आपके नियंत्रण की उपस्थिति को बदल सकती हैं।

• टेम्पलेट्स के साथ, आप शैलियों की तुलना में नियंत्रण के अधिक हिस्सों तक पहुंच सकते हैं। आप एक नियंत्रण के मौजूदा और नए व्यवहार दोनों को भी निर्दिष्ट कर सकते हैं।

दो प्रकार के टेम्प्लेट हैं जो सबसे अधिक उपयोग किए जाते हैं।

• नियंत्रण टेम्पलेट
• डेटा टेम्प्लेट

नियंत्रण टेम्पलेट

नियंत्रण टेम्प्लेट नियंत्रण की दृश्य उपस्थिति और संरचना को परिभाषित या निर्दिष्ट करता है। यूआई तत्वों के सभी प्रकार के रूप में अच्छी तरह से व्यवहार है, जैसे, बटन एक उपस्थिति और व्यवहार है। ईवेंट या माउस हॉवर ईवेंट वे व्यवहार हैं, जो किसी क्लिक और होवर के जवाब में निकाल दिए जाते हैं, और बटन का डिफ़ॉल्ट रूप भी होता है जिसे नियंत्रण टेम्पलेट द्वारा बदला जा सकता है।

आइए एक सरल उदाहरण पर फिर से नज़र डालें जिसमें कुछ गुणों के साथ दो बटन बनाए गए हैं। एक साथ है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 का उत्पादन करेगा -

जब आप कस्टम टेम्प्लेट के साथ बटन पर माउस को घुमाते हैं, तो यह नीचे दिखाए अनुसार रंग भी बदलता है -

डेटा टेम्प्लेट

एक डेटा टेम्प्लेट डेटा के संग्रह की उपस्थिति और संरचना को परिभाषित और निर्दिष्ट करता है। यह किसी भी यूआई तत्व पर डेटा की प्रस्तुति को प्रारूपित करने और परिभाषित करने के लिए लचीलापन प्रदान करता है। इसका उपयोग ज्यादातर डेटा से संबंधित आइटम नियंत्रणों जैसे कि कॉम्बो बॉक्स, लिस्टबॉक्स आदि पर किया जाता है।

आइए डेटा टेम्पलेट के एक सरल उदाहरण पर एक नज़र डालते हैं। निम्न 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; 
      }
   }
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो यह निम्नलिखित आउटपुट का उत्पादन करेगा। इसमें एक कॉम्बोबॉक्स होता है और जब आप कॉम्बोबॉक्स पर क्लिक करते हैं, तो आप देखते हैं कि कर्मचारी वर्ग में बनाए गए डेटा के संग्रह को कॉम्बोक्स आइटम के रूप में सूचीबद्ध किया गया है।

हम आपको उपरोक्त कोड निष्पादित करने और इसके साथ प्रयोग करने की सलाह देते हैं।