قالب ها در WPF – آموزش WPF

پنجشنبه ۱۴ مرداد ۱۴۰۰
بازدید ۱,۱۱۳ نفر
آرتین
(10 امتیاز از 2 رای)
Loading...

تصویر wpf-templates_10639 قالب ها در WPF - آموزش WPF

قالب ها در WPF

قالب ها در WPF به منظور توصیف ظاهری یک کنترل استفاده می شوند. برای هر کنترل در WPF یک قالب (Template) پیش فرض وجود دارد که ظاهر پیش فرض هر کنترل را شکل می دهد. در WPF شما به راحتی می توانید قالب یک کنترل را شخصی سازی کرده و یا قالب مورد نظر خود را ایجاد کنید.

به منظور ارتباط قالب ها با منطق برنامه از قابلیت Data Binding استفاده می شود. تفاوت اصلی بین Styles و Templates در این است که با استفاده از استایل فقط می توانیم ظاهری که یک کنترل دارد را شخص سازی کنیم اما استفاده از قالب ها علاوه بر شخص سازی ظاهری امکان اضافه کردن خاصیت های جدید و تغییر رفتار کنترل و در کل قابلیت های بیشتری در اختیار ما قرار می دهد. در WPF دو نوع قالب وجود دارد که در زیر مشاهده میکنید:

Control Template
Data Template

تفاوت دو نوع قالب ذکر شده در این است که Data Template همانطور که از اسم آن نیز مشخص است، به منظور ارائه یک ساختار بصری برای نمایش داده ها استفاده می شود، در حالی که Control Template هیچ کاری با داده مربوط به کنترل ندارد و برای ارائه طرحی برای خود کنترل استفاده می شود. به زبان ساده‌تر Control Template نحوه نمایش خود کنترل و Data Template نحوه نمایش داده را توصیف می کند.

مثال Control Template

برای درک بهتر به مثال زیر توجه کنید. در این مثال ما دو عدد Button ایجاد کرده ایم که قالب Button اول را شخصی سازی کرده ایم و قالب Button دوم همان قالب پیش فرض خود WPF است.

<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>

<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>

<Grid>

<Ellipse.Fill>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

<ContentPresenter Content = "{TemplateBinding Content}"

HorizontalAlignment = "Center" VerticalAlignment = "Center" />

</Grid>

<ControlTemplate.Triggers>

<Setter.Value>

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Trigger>

<Setter.Value>

<ScaleTransform ScaleX = "0.8" ScaleY = "0.8"

CenterX = "0" CenterY = "0" />

</Setter.Value>

</Setter>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Window.Resources>

<Button Content = "Round Button!"

Template = "{StaticResource ButtonTemplate}"

Width = "150" Margin = "50" />

<Button Content = "Default Button!" Height = "40"

Width = "150" Margin = "5" />

</StackPanel>

</Window>

زمانی که مثال فوق کامپایل و اجرا شود، خروجی زیر را تولید خواهد کرد:

تصویر wpf-templates_10639_1 قالب ها در WPF - آموزش WPF

اگر اشاره گر ماوس بر روی Button اول که شخصی سازی شده است ببرید، ظاهر آن مانند نمونه زیر تغییر خواهد کرد:

تصویر wpf-templates_10639_2 قالب ها در WPF - آموزش WPF

مثال Data Template

یک پروژه WPF با نام WPFDataTemplates ایجاد کرده و محتوای آن را مانند نمونه زیر تغییر دهید. محتوای فایل MainWindow.xaml:

<Window x:Class = "WPFDataTemplates.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:WPFDataTemplates" 
   xmlns:loc = "clr-namespace:WPFDataTemplates" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "525"> 
	
   <Window.Resources> 
      <DataTemplate DataType = "{x:Type loc:Person}"> 
		
         <Grid> 
            <Grid.RowDefinitions> 
               <RowDefinition Height = "Auto" /> 
               <RowDefinition Height = "Auto" /> 
            </Grid.RowDefinitions> 
				
            <Grid.ColumnDefinitions> 
               <ColumnDefinition Width = "Auto" /> 
               <ColumnDefinition Width = "200" /> 
            </Grid.ColumnDefinitions>
				
            <Label Name = "nameLabel" Margin = "10"/> 
            <TextBox Name = "nameText" Grid.Column = "1" Margin = "10" 
               Text = "{Binding Name}"/>  
            <Label Name = "ageLabel" Margin = "10" Grid.Row = "1"/> 
            <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10" 
               Text = "{Binding Age}"/> 
         </Grid> 
			
      </DataTemplate> 
   </Window.Resources> 
	
   <Grid> 
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <ListBox ItemsSource = "{Binding}" />  
      <StackPanel Grid.Row = "1" > 
         <Button Content = "_Show..." Click = "Button_Click" Width = "80" HorizontalAlignment = "Left" Margin = "10"/> 
      </StackPanel> 
		
   </Grid> 
	
</Window>

<Window x:Class = "WPFDataTemplates.MainWindow"

xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local = "clr-namespace:WPFDataTemplates"

xmlns:loc = "clr-namespace:WPFDataTemplates"

mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "525">

<Window.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBox Name = "nameText" Grid.Column = "1" Margin = "10"

Text = "{Binding Name}"/>

<TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10"

Text = "{Binding Age}"/>

</Grid>

</DataTemplate>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

</Grid>

</Window>

محتوای فایل MainWindow.xaml.cs:

using System.Collections.Generic; 
using System.Windows;
  
namespace WPFDataTemplates { 

   public partial class MainWindow : Window { 
	
      Person src = new Person { Name = "Ali", Age = 27 }; 
      List<Person> people = new List<Person>(); 
		
      public MainWindow() { 
         InitializeComponent(); 
         people.Add(src); 
         people.Add(new Person { Name = "Mike", Age = 62 }); 
         people.Add(new Person { Name = "Brian", Age = 12 });  
         this.DataContext = people; 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) { 
         string message = src.Name + " is " + src.Age; 
         MessageBox.Show(message); 
      } 
   } 
	
   public class Person { 
      private string nameValue; 
		
      public string Name { 
         get { return nameValue; } 
         set { nameValue = value; } 
      }  
		
      private double ageValue; 
		
      public double Age { 
         get { return ageValue; } 
         set { 
            if (value != ageValue) { 
            ageValue = value; 
            } 
         } 
      } 
   } 
	
}

using System.Collections.Generic;

using System.Windows;

namespace WPFDataTemplates {

public partial class MainWindow : Window {

Person src = new Person { Name = "Ali", Age = 27 };

List<Person> people = new List<Person>();

public MainWindow() {

InitializeComponent();

people.Add(src);

people.Add(new Person { Name = "Mike", Age = 62 });

people.Add(new Person { Name = "Brian", Age = 12 });

this.DataContext = people;

}

private void Button_Click(object sender, RoutedEventArgs e) {

string message = src.Name + " is " + src.Age;

MessageBox.Show(message);

}

public class Person {

private string nameValue;

public string Name {

get { return nameValue; }

set { nameValue = value; }

}

private double ageValue;

public double Age {

get { return ageValue; }

set {

if (value != ageValue) {

ageValue = value;

}

زمانی که مثال فوق را کامپایل و اجرا کنید، خروجی زیر را تولید خواهد کرد که یک شامل یک ListBox است. آیتم های این ListBox شخصی سازی شده اند و هر کدام شامل نام و سن تعریف شده در شیء person هستند.

تصویر wpf-templates_10639_3 قالب ها در WPF - آموزش WPF