۱۹
اسفند

جلسه ۱۵ : بررسی Template ها در WPF

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

دوستان و علاقمندان به مباحث WPF وقتتون بخیر. با آموزش WPF از وب سایت آموزشی پی وی لرن همراهتون هستیم. بررسی Template ها در WPF را دنبال خواهیم نمود و مثال هایی نیز خواهیم داشت.

فهرست

بررسی Template ها در WPF

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

اتصال بین منطق و الگو را می توان با اتصال داده (data binding) به دست آورد. تفاوت اصلی بین استایل ها و الگو ها در زیر ذکر شده است.

استایل ها فقط می توانند ظاهر کنترل شما را با خصوصیات پیش فرض آن کنترل، تغییر دهند.
با استفاده از قالب ها یا الگوها، می توانید به بخش های بیش تری از یک کنترل، نسبت به استایل ها، دسترسی داشته باشید. همچنین می توانید رفتار کنونی و جدید یک کنترل را مشخص کنید.

دو نوع قالب وجود دارد که بیش تر مورد استفاده قرار می گیرند.

الگوی کنترل
الگوی داده

الگوی کنترل (Control Template)

الگوی کنترل ظاهر بصری یک کنترل را تعریف می کند. همه عناصر UI دارای یک نوع ظاهر و همچنین رفتار هستند ، به عنوان مثال ، دکمه از ظاهر و رفتاری برخوردار است. رویداد کلیک یا رویداد ماوس شناور رفتارهایی هستند که در پاسخ به کلیک و شناور بودن نتیجه می شوند و همچنین ظاهری پیش فرض برای دکمه وجود دارد که می تواند توسط الگوی کنترل تغییر کند.

مثال

بیایید یک مثال ساده داشته باشیم، دو دکمه (یکی با الگو و دیگری دکمه پیش فرض) ایجاد خواهیم کرد و آن ها را با برخی از خصوصیات مقدار دهی می کنیم.

مثال :

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

وقتی کد فوق را کامپایل و اجرا می کنید ، MainWindow زیر را نمایش می دهد.

بررسی Template ها در WPF

وقتی ماوس را با الگوی دلخواه روی دکمه منتقل می کنید ، مطابق شکل زیر رنگ آن تغییر می کند.

بررسی Template ها در WPF

الگوی داده (Data Template)

یک الگوی داده ها شکل و ساختار مجموعه ای از داده ها را تعریف و مشخص می کند. این انعطاف پذیری برای قالب بندی و تعریف ارائه داده ها روی هر عنصر UI را فراهم می کند. بیش تر برای کنترل داده های مربوط به داده ها مانند ComboBox ، ListBox و غیره استفاده می شود.

مثال

بیایید یک مثال ساده برای درک مفهوم الگوی داده را در نظر بگیریم. یک پروژه WPF جدید با نام WPFDataTemplates ایجاد کنید.

در کد 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>

در این جا در #C پیاده سازی شده است که در آن لیستی از اشیاء Person به DataContext ، پیاده سازی کلاس Person و رویداد کلیک روی دکمه اختصاص داده می شود.

مثال :

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;

}

وقتی کد بالا را کامپایل و اجرا می کنید ، پنجره زیر تولید را می کند. این شامل یک لیست است و در داخل جعبه لیست ، هر مورد جعبه لیست شامل داده های شی کلاس Person است که در Labels و Text boxe ها نمایش داده می شود.

بررسی Template ها در WPF

کلام پایانی

با آموزش wpf و مبحث بررسی Template ها در WPF همراه بودیم. برای درک بهتر مثال هایی نیز بیان شد. در بخش بعدی به بررسی Style ها خواهیم پرداخت. با وب سایت پی وی لرن همراه باشید.

به اشتراک بگذارید

Template یا الگو چیست؟ ,آموزش wpf ,الگوها یا Template ها در WPF ,الگوی داده (Data Template) در wpf ,الگوی کنترل (Control Template) در wpf

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۵ : بررسی Template ها در WPF

بررسی Template ها در WPF

الگوی کنترل (Control Template)

مثال

الگوی داده (Data Template)

مثال

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ