Створення елементів управління в Silverlight/WinRT

Привіт! В даній статті, я напишу про створення власних елементів управління в таких технологіях як Silverlight/WinRT, їх типи та відмінності.

Звичайна ситуація – потрібно створити якийсь елемент управління, який вміє щось робити. Для прикладу, це може бути елемент який показує теперішню годину та змінює колір відображення години на червоний в певний проміжок часу.

Silverlightв наявності має два принципи створення елементів управління:

  1. UserControl
  2. Control (Templated Control)

Виникає питання – який елемент ліпше використати в даній ситуації?

Для відповіді на це запитання, потрібно подумати:

  1. Чи потрібно користувачу елемента (той що з панелі інструментів його буде перетягувати) використовувати його і змінювати його шаблон?
  2. Елемент буде складатись з композиції інших елементів управління чи тільки з одного елементу? Може він взагалі буде додавати функціональність до вже існуючого елементу?

Я вирішую дуже просто – потрібно клієнту змінювати шаблон мого елементу то створюю Control. У випадку композиції інших елементів, які між собою співпрацюють та створюють якусь логічну одиницю специфічну до аплікації, я вибираю UserControl.

Тепер, перейдемо до їх створення

User Control

Створіть новий проект Silverlight, в вікні Solution Explorer виберіть опцію новий елемент та в шаблонах знайдіть Silverlight User Control:

clip_image002

Рис 1.1

Після того, як ви додасте цей елемент, відкриється XAML, який ви зможете його редагувати.

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

clip_image003

Рис 1.2

Для його використання вам достатньо просто відкрити файл MainPage.xaml та перетягнути його з панелі Toolbox:

clip_image004

Рис 1.3

Зверніть увагу на те, що цей файл створився з наступним .cs, який містить клас CompositeControl, який в свою чергу унаслідує UserControl,:

1 namespace CustomControlsSample 2 { 3 publicpartialclass CompositeControl : UserControl 4 { 5 public CompositeControl() 6 { 7 InitializeComponent(); 8 } 9 } 10 } 11

Control

Можна перейти до створення цього типу елемента. Відкрийте діалогове вікно Add New Item та виберіть наступний шаблон:

clip_image006

Рис 1.4

Після його створення має відкритись новостворений .cs файл, в якому буде ось такий код:

1 publicclass TemplatedControl : Control 2 { 3 public TemplatedControl() 4 { 5 this.DefaultStyleKey =typeof(TemplatedControl); 6 } 7 } 8

В даному випадку, батьківським класом виступає клас Control.

Для зміни вигляду цього елементу, вам потрібно відкрити файл \Themes\Generic.xaml:

<ResourceDictionary xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221; xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221; xmlns:local=”clr-namespace:CustomControlsSample”><Style TargetType=”local:TemplatedControl”><Setter Property=”Template”><Setter.Value><ControlTemplate TargetType=”local:TemplatedControl”><Border Background=”{TemplateBinding Background}” BorderBrush=”{TemplateBinding BorderBrush}” BorderThickness=”{TemplateBinding BorderThickness}”></Border></ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary>

Ось тут, за допомогою засобів стилів Silverlight, а саме атрибуту TargetType підчепиться шаблон для вашого елементу.

Для редагування цього документу дизайнер вже не підходить і потрібно користуватись або такою програмою як Expression Blend, або писати код вручну.

Функціональність можна писати в двох типах елементів управління, так як вони обидва містять файл з кодом C#. Деталі написання функціональності в даній статті я описувати не буду.

Підсумок

  1. Створюйте шаблонні елементи управління Control тоді, коли вам потрібно дозволити клієнту міняти його вигляд не змінюючи функціональність.
  2. Створюйте елемент типу UserControl тоді, коли вам потрібно зробити композицію елементів управління.

Скачати код

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: