۱۹
اسفند

جلسه ۱۳ : اتصال داده یا Data Binding در WPF

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

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

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

فهرست

اتصال داده یا Data Binding در WPF

Data Binding مکانیزمی در برنامه های WPF است که روشی ساده و آسان برای برنامه های Windows Runtime برای نمایش و تعامل با داده ها فراهم می کند. در این مکانیسم ، مدیریت داده ها کاملاً از روند داده جدا می شوند.

Data Binding اجازه می دهد تا جریان داده ها بین عناصر UI و شیء داده در رابط کاربر انجام شود. وقتی اتصال برقرار شد و اطلاعات شما تغییر کرد ، آنگاه به روزرسانی های خودکار به عناصر UI و بالعکس آن را منعکس می کند. همچنین امکان اتصال ، نه به یک منبع داده استاندارد ، بلکه به عنصر دیگری در صفحه امکان پذیر است.

Data Binding دو نوع است. Data Binding یک طرفه و Data Binding دو طرفه.

Data Binding یک طرفه

در Data Binding یک طرفه ، داده ها از منبع شان (یعنی شیئی که داده ها را نگه می دارد) به طزف هدف شان حرکت می کنند (این همان شیئی است که داده ها را نمایش می دهد)

حال بیایید یک مثال ساده برای درک جزئیات اتصال یک طرفه بیاوریم. اول از همه ، یک پروژه WPF جدید با نام WPFDataBinding ایجاد کنید.

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

خصوصیات متن هر دو جعبه متن به “Name” و “Age” متصل اند که متغیرهای کلاس Class Person است که در زیر نشان داده شده است.

در کلاس Person فقط دو متغیر Name و Age داریم و شی آن در کلاس MainWindow مقدر دهی می شود.

در کد XAML ، به یک ویژگی Name و Age متصل می شویم ، اما هنوز آبجکتی که ویژگی به آن متصل می شود را انتخاب نکرده ایم.

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

مثال :

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;

}

بیایید این برنامه را اجرا کنیم، می توانید بلافاصله در MainWindow مشاهده کنید که ما با موفقیت به Name و Age شیء Person پیوستیم.

اتصال داده یا Data Binding در WPF

وقتی دکمه Show را فشار می دهید ، نام و سن آن را در جعبه پیام نشان می دهد.

اتصال داده یا Data Binding در WPF

حال بگذارید نام و سن را در کادر گفتگو تغییر دهیم.

اتصال داده یا Data Binding در WPF

اگر اکنون دکمه Show را بزنید ، دوباره همان پیام را نشان می دهد.

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

Data Binding دو طرفه

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

بیایید همین مثال بالا را داشته باشیم. اما در این جا ، حالت حالت اتصال را از یک طرفه به دو طرفه (One Way به Two Way) در کد 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>

<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 = TwoWay}"/>

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

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

</StackPanel>

</Grid>

</Window>

بیایید این برنامه را دوباره اجرا کنیم.

اتصال داده یا Data Binding در WPF

همان خروجی را تولید می کند.

اتصال داده یا Data Binding در WPF

اکنون بگذارید مقادیر نام و سن را تغییر دهیم.

اتصال داده یا Data Binding در WPF

اگر اکنون دکمه Show را بزنید ، پیام به روز شده را نشان می دهد.

توصیه می کنیم برای درک بهتر مفهوم ، کد فوق را برای هر دو مورد اجرا کنید.

کلام پایانی

در این قسمت از آموزش wpf با مفهوم اتصال داده یا Data Binding در WPF و انواع آن آشنا شدیم. در بخش بعدی به بررسی Resources یا منابع خواهیم پرداخت. با وب سایت آموزشی پی وی لرن همراه باشید.

QR: جلسه ۱۳ : اتصال داده یا Data Binding در WPF

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

Data Binding در WPF چیست؟ ,Data Binding دو طرفه ,Data Binding یک طرفه ,آموزش wpf ,بررسی اتصال داده یا Data Binding در WPF

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

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

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

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

جلسه ۱۳ : اتصال داده یا Data Binding در WPF

اتصال داده یا Data Binding در WPF

Data Binding یک طرفه

Data Binding دو طرفه

کلام پایانی

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ