۱۹
اسفند

جلسه ۱۹ : بررسی کنترل های سفارشی در WPF

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

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

دوستان و علاقمندان به مباحث WPF وقتتون بخیر. با آموزش WPF از وب سایت آموزشی پی وی لرن همراهتون هستیم. بررسی کنترل های سفارشی در WPF را در این بخش از آموزش wpf خواهیم داشت و User Control را به همراه ایجاد کنترل های سفارشی ، البته در صورت نیار ، توضیح خواهیم داد. با ادامه ی آموزش ها از وب سایت پی وی لرن همراه ما باشید.

فهرست

بررسی کنترل های سفارشی در WPF

برنامه های WPF اجازه می دهد تا کنترل های سفارشی ایجاد کنند که ایجاد کنترل های غنی از ویژگی و قابل تنظیم را بسیار آسان می کند. کنترل های سفارشی وقتی استفاده می شوند که همه کنترل های داخلی ارائه شده توسط مایکروسافت معیارهای شما را برآورده نمی کنند یا شما نمی خواهید هزینه های کنترل شخص ثالث (third-party) را بپردازید.

در این بخش نحوه ایجاد کنترل های سفارشی را یاد خواهید گرفت. قبل از این که نگاهی به کنترل های سفارشی بیندازیم ، ابتدا نگاهی کوتاه به یک User Control می اندازیم.

User Control

User Controls راهی برای جمع آوری و ترکیب کنترل های داخلی مختلف در کنار هم و بسته بندی آن ها در XAML قابل استفاده مجدد را فراهم می کند. کنترل های کاربر در سناریوهای زیر استفاده می شوند.

اگر کنترل شامل کنترل های موجود باشد ، به عنوان مثال ، می توانید یک کنترل واحد از کنترل های چندگانه ، از قبل موجود ایجاد کنید.
اگر کنترل برای مضمون نیازی به پشتیبانی نداشته باشد. User Control ها از شخصی سازی پیچیده ، الگوهای کنترل و استایل دشوار پشتیبانی نمی کند.
در صورتی که یک توسعه دهنده ترجیح می دهد کنترل ها را با استفاده از مدل code-behind که در آن یک نمایش و سپس یک کد مستقیم برای کنترل کننده های رویداد وجود دارد ، بنویسید.

شما نمی توانید کنترل خود را در برنامه های مختلف به اشتراک بگذارید.

مثال

حال بیایید به یک نمونه از User Control را مورد بررسی قرار دهیم. پس مراحل زیر را دنبال کنید.

یک پروژه WPF جدید ایجاد کنید و سپس بر روی راه حل خود کلیک راست کرده و …Add > New Article را انتخاب کنید.

بررسی کنترل های سفارشی در WPF – بررسی یک نمونه از User Control

پنجره زیر باز خواهد شد. اکنون (User Control (WPF را انتخاب کرده و نام آن را MyUserControl بگذارید.

بررسی کنترل های سفارشی در WPF – بررسی یک نمونه از User Control

بر روی دکمه Add کلیک کنید و خواهید دید که دو فایل جدید (MyUserControl.xaml و MyUserControl.cs) در راه حل شما اضافه خواهند شد.

در این جا کد XAML وجود دارد که در آن یک دکمه و یک جعبه متن با برخی از خصوصیات در فایل MyUserControl.xaml ایجاد شده است.

مثال :

<UserControl x:Class = "WPFUserControl.MyUserControl" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"  
   mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300"> 
	
   <Grid> 
      <TextBox Height = "23"  
         HorizontalAlignment = "Left"  
         Margin = "80,49,0,0" Name = "txtBox"  
         VerticalAlignment = "Top" Width = "200" /> 
			
      <Button Content = "Click Me"  
         Height = "23" HorizontalAlignment = "Left"  
         Margin = "96,88,0,0" Name = "button"  
         VerticalAlignment = "Top" Click = "button_Click" />    
   </Grid>
	
</UserControl>

<UserControl x:Class = "WPFUserControl.MyUserControl"

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

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

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

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

mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">

<Grid>

<TextBox Height = "23"

HorizontalAlignment = "Left"

Margin = "80,49,0,0" Name = "txtBox"

VerticalAlignment = "Top" Width = "200" />

<Button Content = "Click Me"

Height = "23" HorizontalAlignment = "Left"

Margin = "96,88,0,0" Name = "button"

VerticalAlignment = "Top" Click = "button_Click" />

</Grid>

</UserControl>

در زیر کد #C برای رویداد کلیک دکمه در فایل MyUserControl.cs آورده شده است که کادر متن را به روز می کند.

مثال :

using System; 
using System.Windows; 
using System.Windows.Controls; 
 
namespace WPFUserControl {
   /// <summary>
      /// Interaction logic for MyUserControl.xaml 
   /// </summary> 
	
   public partial class MyUserControl : UserControl { 
	
      public MyUserControl() { 
         InitializeComponent(); 
      }  
		
      private void button_Click(object sender, RoutedEventArgs e) { 
         txtBox.Text = "You have just clicked the button"; 
      } 
   } 
}

using System;

using System.Windows;

using System.Windows.Controls;

namespace WPFUserControl {

/// <summary>

/// Interaction logic for MyUserControl.xaml

/// </summary>

public partial class MyUserControl : UserControl {

public MyUserControl() {

InitializeComponent();

}

private void button_Click(object sender, RoutedEventArgs e) {

txtBox.Text = "You have just clicked the button";

}

در این جا پیاده سازی در MainWindow.xaml برای اضافه کردن user control آمده است.

مثال :

<Window x:Class = "XAMLUserControl.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:control = "clr-namespace:WPFUserControl" 
   Title = "MainWindow" Height = "350" Width = "525"> 
	
   <Grid> 
      <control:MyUserControl/> 
   </Grid> 
	
</Window>

<Window x:Class = "XAMLUserControl.MainWindow"

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

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

xmlns:control = "clr-namespace:WPFUserControl"

Title = "MainWindow" Height = "350" Width = "525">

<Grid>

<control:MyUserControl/>

</Grid>

</Window>

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

بررسی کنترل های سفارشی در WPF – کامپایل و اجرای کد

پس از کلیک بر روی دکمه “Click Me” متوجه می شوید که متن داخل جعبه ی متن به روز شده است.

بررسی کنترل های سفارشی در WPF – به روز شدن متن داخل جعبه ی متن

کنترل های سفارشی

کنترل سفارشی کلاسی است که سبک و الگوی خاص خود را ارائه می دهد که معمولاً در generic.xaml تعریف شده است. کنترل های سفارشی در سناریوهای زیر مورد استفاده قرار می گیرند.

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

مثال

حال بیایید یک مثال برای درک بهتر نحوه ی عملکرد کنترل های سفارشی را بررسی نماییم. یک پروژه WPF جدید ایجاد می کنیم و سپس بر روی راه حل خود راست کلیک کرده و …Add> New Article را انتخاب می کنیم.

بررسی کنترل های سفارشی در WPF – ایجاد کنترل های سفارشی

این کار پنجره ی زیر را باز می کند. اکنون (Custom Control (WPF را انتخاب کرده و نام آن را MyCustomControl قرار دهید.

بررسی کنترل های سفارشی در WPF – ایجاد کنترل های سفارشی

بر روی دکمه Add کلیک کنید و خواهید دید که دو فایل جدید (hemes/Generic.xaml و MyCustomControl.cs) در راه حل شما اضافه خواهد شد.

در این جا کد XAML آورده شده است که در آن استایل برای کنترل سفارشی در فایل Generic.xaml تنظیم شده است.

مثال :

<ResourceDictionary 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "clr-namespace:WPFCustomControls">  
	
   <Style TargetType = "{x:Type local:MyCustomControl}"
      BasedOn = "{StaticResource {x:Type Button}}"> 
      <Setter Property = "Background" Value = "LightSalmon" /> 
      <Setter Property = "Foreground" Value = "Blue"/> 
   </Style> 
	
</ResourceDictionary>

<ResourceDictionary

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

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

xmlns:local = "clr-namespace:WPFCustomControls">

<Style TargetType = "{x:Type local:MyCustomControl}"

BasedOn = "{StaticResource {x:Type Button}}">

</Style>

</ResourceDictionary>

در این قسمت کد #C برای کلاس MyCustomControl آورده شده است که از کلاس دکمه به ارث می رسد و در سازنده آن متا دیتا را نادیده می گیرد.

مثال :

using System; 
using System.Windows; 
using System.Windows.Controls; 
 
namespace WPFCustomControls { 

   public class MyCustomControl : Button { 
	
      static MyCustomControl() { 
         DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl), new
            FrameworkPropertyMetadata(typeof(MyCustomControl))); 
      } 
		
   } 
}

using System;

using System.Windows;

using System.Windows.Controls;

namespace WPFCustomControls {

public class MyCustomControl : Button {

static MyCustomControl() {

DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl), new

FrameworkPropertyMetadata(typeof(MyCustomControl)));

}

در این بخش پیاده سازی رویداد کنترل کلیک سفارشی در #C آورده شده است که متن بلاک متن را به روز می کند.

مثال :

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

namespace WPFCustomControls { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window { 
	
      public MainWindow() { 
         InitializeComponent(); 
      }  
		
      private void customControl_Click(object sender, RoutedEventArgs e) { 
         txtBlock.Text = "You have just click your custom control"; 
      }
		
   } 
}

using System;

using System.Windows;

using System.Windows.Controls;

namespace WPFCustomControls {

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window {

public MainWindow() {

InitializeComponent();

}

private void customControl_Click(object sender, RoutedEventArgs e) {

txtBlock.Text = "You have just click your custom control";

}

در این قسمت پیاده سازی در MainWindow.xaml برای اضافه کردن کنترل سفارشی و TextBlock آورده شده است.

مثال :

<Window x:Class = "WPFCustomControls.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:control = "clr-namespace:WPFCustomControls" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <control:MyCustomControl x:Name = "customControl"  
         Content = "Click Me" Width = "70" 
         Margin = "10" Click = "customControl_Click"/> 
			
      <TextBlock Name = "txtBlock"  
         Width = "250" Height = "30"/> 
   </StackPanel>
	
</Window>

<Window x:Class = "WPFCustomControls.MainWindow"

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

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

xmlns:control = "clr-namespace:WPFCustomControls"

Title = "MainWindow" Height = "350" Width = "604">

<control:MyCustomControl x:Name = "customControl"

Content = "Click Me" Width = "70"

Margin = "10" Click = "customControl_Click"/>

<TextBlock Name = "txtBlock"

Width = "250" Height = "30"/>

</StackPanel>

</Window>

هنگامی که کد بالا را کامپایل و اجرا می کنید ، پنجره ی زیر را با یک کنترل سفارشی که یک دکمه سفارشی شده است تولید می کند.

بررسی کنترل های سفارشی در WPF – کامپایل و اجرای کد کنترل سفارشی

پس از کلیک بر روی دکمه ی سفارشی ، خواهید دید که متن داخل بلوک متن به روز شده است.

بررسی کنترل های سفارشی در WPF – به روز شدن متن داخل بلوک متن

کلام پایانی

دوستان عزیز متشکریم از این که با مباحث آموزش wpf و موضوع بررسی کنترل های سفارشی در WPF همراه هستید. در این بخش به بررسی User Control و ایجاد کنترل های سفارشی در صورت نیار پرداختیم و در مورد هریک توضیحاتی داده شد. در ادامه ی آموزش ها و جلسه ی آینده مبحث Exception Handling یا مدیریت استثنا را مورد بررسی قرار خواهیم داد. با وب سایت آموزشی پی وی لرن همراه باشید.

QR: جلسه ۱۹ : بررسی کنترل های سفارشی در WPF

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

User Control در wpf چیست؟ ,آموزش wpf ,ایجاد پروژه WPF با استفاده از کنترلهای سفارشی ,دلایل استفاده از کنترل های سفارشی در wpf ,کنترل های سفارشی در WPF

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

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

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

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

جلسه ۱۹ : بررسی کنترل های سفارشی در WPF

بررسی کنترل های سفارشی در WPF

User Control

مثال

کنترل های سفارشی

مثال

کلام پایانی

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ