Зв’язування даних в Silverlight, WPF, WinRT

Кожен програміст, який розробляє програму за допомогою технологій Silverlight/WPF/WinRT знає, що можливості які вони пропонують є досить зручними та значно збільшують продуктивність. Охопити кожну можливість цих технологій в дані статті я не збираюсь, але хочу написати, про таку особливість, яка найчастіше використовується – зв’язування даних (data binding).

Уявіть таку ситуацію – вам потрібно, щоб один елемент управління відображав стан іншого елемента управління, або в вас є екземпляр певного класу і ви хочете відобразити всі значення його властивостей. Також можлива ситуація, коли ви хочете зробити шаблон для відображення окремого елементу в списку, а саме, коли буде список з 10 елементів, вони будуть містити один шаблон і різні значення. Всі ці сценарії підтримуються в технологіях Silverlight/WPF/WinRT і я зараз коротко опишу кожен з них.

Сценарій №1 – зв’язування двох елементів управління

Самий простий приклад – в вас є слайдер і текстове поле. При зміні слайдера потрібно змінити значення в текстовому полі. Створіть проект Silverlight та добавте наступну розмітку:

1 <StackPanel x:Name="LayoutRoot" Background="White"> 2 <Slider /> 3 <TextBox /> 4 </StackPanel> 5

Якщо запустити програму, то вона буде мати наступний вигляд:

clip_image002[4]

Рис 1.1

В елементі управління Slider нас цікавить властивість Value, яка визначає вибране значення в ньому. Елемент управління TextBox має властивість Text, яка визначає текст для відображення.

Дайте назву слайдеру та добавте такий байндінг в текстове поле:

1 <StackPanel x:Name="LayoutRoot" Background="White"> 2 <Slider x:Name="slider" /> 3 <TextBox Text="{Binding ElementName=slider, Path=Value}" /> 4 </StackPanel> 5 6

Запустіть програму і ви побачите автоматичне відображення теперішнього значення слайдера в текстовому полі:

clip_image003[4]

Рис 1.2

Добавте одну особливість зв’язування – TwoWay:

1 <StackPanel x:Name="LayoutRoot" Background="White"> 2 <Slider x:Name="slider" /> 3 <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=TwoWay}" /> 4 </StackPanel> 5

Тепер, коли користувач введе число в текстовому полі і забере з нього фокус, воно автоматично перетвориться в значення в слайдері.

Сценарій №2 – зв’язування з екземпляром якогось класу

Добавте самий простий клас – Person:

1 namespace Sample 2 { 3 public class Person 4 { 5 public string FirstName { get; set; } 6 public string LastName { get; set; } 7 } 8 } 9

Відкрийте файл коду сторінки MainPage, в конструкторі якого створіть екземпляр цього класу та встановіть його як контекст даних (DataContext) кореневого елемента управління:

1 public partial class MainPage : UserControl 2 { 3 public MainPage() 4 { 5 InitializeComponent(); 6 Person person = new Person {FirstName = "Simon", LastName = "Vegas"}; 7 LayoutRoot.DataContext = person; 8 } 9 } 10

Відкрийте файл з розміткою, добавте два текстових поля та зробіть наступні зв’язування:

1 <StackPanel x:Name="LayoutRoot" Background="White"> 2 <TextBox Text="{Binding FirstName}" /> 3 <TextBox Text="{Binding LastName}" /> 4 </StackPanel> 5

Якщо запустити програму, то буде ось такий результат:

clip_image004[4]

Рис 1.3

Хочу зауважити, що тут так само працює принцип TwoWay. В даному випадку, якщо його застосувати, то при вводу значень в текстові поля, значення властивостей екземпляру класу Person будуть відповідати значенням текстових полів. З іншого боку, якщо хтось в коді поміняє значення властивостей в цього екземплярі, то вони автоматично не будуть оновлені в елементах управління. Для реалізації такої поведінки розгляньте інтерфейс INotifyPropertyChanged.

Сценарій №3 – зв’язування списку з колекцією об’єктів

Насправді, це все робиться дуже просто – потрібно створити список, в якому задати шаблон відображення окремого елементу:

1 <StackPanel x:Name="LayoutRoot" Background="White"> 2 <ListBox x:Name="list"> 3 <ListBox.ItemTemplate> 4 <DataTemplate> 5 <StackPanel Orientation="Horizontal"> 6 <TextBox Text="{Binding FirstName}"/> 7 <TextBox Text="{Binding LastName}"/> 8 </StackPanel> 9 </DataTemplate> 10 </ListBox.ItemTemplate> 11 </ListBox> 12 </StackPanel> 13

В коді створіть колекцію об’єктів Person та встановіть цей список як значення властивості ItemsSource елементу ListBox:

1 public MainPage() 2 { 3 InitializeComponent(); 4 var persons = new List<Person>() 5 { 6 new Person {FirstName = "Simon", LastName = "Vegas"}, 7 new Person {FirstName = "John", LastName = "Vegas"}, 8 new Person {FirstName = "Layne", LastName = "Vegas"}, 9 }; 10 11 list.ItemsSource = persons; 12 } 13

Запустіть програму, де ви побачите ось такий результат:

clip_image005[4]

Рис 1.4

Ось, я показав основні можливості зв’язування даних. Для подальшого вивчення додаткових можливостей, можете переглянути ось цей ресурс: http://www.silverlight.net/learn.

Скачати код

Advertisements

, , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: