Data Binding در WPF – آموزش WPF

دوشنبه ۱۱ مرداد ۱۴۰۰
بازدید ۱,۱۲۷ نفر
یعثوب سیفی زاده
(10 امتیاز از 2 رای)
Loading...

تصویر wpf-data-binding_10634 Data Binding در WPF - آموزش WPF

Data Binding در WPF

Data Binding (اتصال داده) مکانیزمی در برنامه های WPF است که یک روش ساده و راحت را به منظور نمایش داده و تعامل با آن را در اختیار برنامه های Windows Runtime قرار می دهد. در WPF دو نوع اتصال داده وجود دارد:

یک طرفه (One Way)
دو طرفه (Two Way)

روش یک طرفه

در این نوع اتصال، همانطور که از اسم آن نیز مشخص است، سورس داده (یعنی شیء نگه دارنده داده) به عنصر نمایش دهنده داده اتصال می یابد. برای درک بهتر یک پروژه WPF با نام WPFDataBinding ایجاد کنید و آن را مانند نمونه زیر تغییر دهید. محتوای فایل MainWindow.xaml:

<Window x:Class = "WPFDataBinding.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:WPFDataBinding" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition Width = "200" /> 
      </Grid.ColumnDefinitions>
		
      <Label Name = "nameLabel" Margin = "2">_Name:</Label> 
		
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2" 
         Text = "{Binding Name, Mode = OneWay}"/>  
			
      <Label Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</Label> 
		
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2" 
         Text = "{Binding Age, Mode = OneWay}"/>  
			
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "_Show..." Click="Button_Click" /> 
      </StackPanel> 
		
   </Grid> 
</Window>

<Window x:Class = "WPFDataBinding.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:WPFDataBinding"

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

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

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

Text = "{Binding Name, Mode = OneWay}"/>

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

Text = "{Binding Age, Mode = OneWay}"/>

</StackPanel>

</Grid>

</Window>

خاصیت Text مربوط به TextBox ها به خاصیت Name و Age کلاس Person که در زیر نشان داده شده است، Bind شده اند. در کد زیر ما شیء Person را به عنوان DataContext تنظیم کرده ایم. محتوای فایل MainWindow.xaml.cs:

using System.Windows;  
namespace WPFDataBinding { 

   public partial class MainWindow : Window {
	
      Person person = new Person { Name = "Salman", Age = 26 };
		
      public MainWindow() { 
         InitializeComponent(); 
         this.DataContext = person; 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) { 
         string message = person.Name + " is " + person.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.Windows;

namespace WPFDataBinding {

public partial class MainWindow : Window {

Person person = new Person { Name = "Salman", Age = 26 };

public MainWindow() {

InitializeComponent();

this.DataContext = person;

}

private void Button_Click(object sender, RoutedEventArgs e) {

string message = person.Name + " is " + person.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 با موفقیت Bind شده اند.

تصویر wpf-data-binding_10634_1 Data Binding در WPF - آموزش WPF

زمانی که بر روی دکمه Show کلیک کنید، مقادیر شیء person مانند نمونه زیر نمایش داده می شود:

تصویر wpf-data-binding_10634_2 Data Binding در WPF - آموزش WPF

حال مانند نمونه زیر مقادیر TextBox ها را تغییر دهید:

تصویر wpf-data-binding_10634_3 Data Binding در WPF - آموزش WPF

اگر دوباره بر روی دکمه کلیک کنید، مقادیر قبلی نمایش داده می شوند:

تصویر wpf-data-binding_10634_4 Data Binding در WPF - آموزش WPF

علت این است که ما از نوع اتصال یک طرفه استفاده کرده ایم. برای اینکه بتوانیم داده به روز شده را نمایش دهیم، باید از نوع اتصال دو طرفه استفاده کنیم.

اتصال دو طرفه

در این نوع اتصال، کاربر می تواند مقادیر شیء را از طریق تغییر آن ها در UI برنامه تغییر دهد. یعنی اتصال داده به صورت دو طرفه است. مثال قبلی را در نظر بگیرید با این تفاوت که نحوه اتصال را به دو طرفه تغییر داده ایم. محتوای فایل MainWindow.xaml:

<Window x:Class = "WPFDataBinding.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:WPFDataBinding" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition Width = "200" /> 
      </Grid.ColumnDefinitions> 
		
      <Label Name = "nameLabel" Margin = "2">_Name:</Label> 
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2" 
         Text = "{Binding Name, Mode = TwoWay}"/>  
      <Label Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</Label> 
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2" 
         Text = "{Binding Age, Mode = TwoWay}"/> 
			
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "_Show..." Click = "Button_Click" /> 
      </StackPanel>
		
   </Grid>
	
</Window>