Пользовательские элементы управления (User Controls) в Silverlight - Пользовательский элемент управления (User Control)

Written on . Posted in WPF и Silverlight

ОГЛАВЛЕНИЕ

Страница 3 из 4

Пользовательский элемент управления (User Control)

Это будет достаточно полезным дополнением. На самом деле, нам наверняка понадобится наличие домашнего адреса (Home Address), рабочего адреса (Work Address) и адреса выставления счета (Billing Address), и неплохо было бы иметь комбинацию клавиш для каждого из адресов. Это можно реализовать двумя способами.

  1. Продублируйте xaml и фоновый код для каждого экземпляра (home, work, billing)
  2. Перестройте стандартный xaml и поддерживающий код в элемент управления

Чтобы не терять много времени, мы будем использовать второй способ, поскольку нам не терпится создать пользовательский элемент управления (UserControl). Для начала, вам надо будет щелкнуть правой кнопкой мыши по проекту и выбрать Add. В пределах секции шаблонов диалогового окна выберите Silverlight User Control и назовите новый элемент управления Address.xaml

Рисунок 4-8. Создание пользовательского элемента управления Address

К вашему проекту будут добавлены два файла

  • Address.xaml
  • Address.xaml.cs

Address.xaml выглядит очень знакомо при открытии.

<UserControl x:Class="KeyboardFun.Address"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
    </Grid>
</UserControl>

It is, essentially, the same as Page.xaml, except the names have been changed to protect the innocent namespace.\

Реализация элемента управления

Оставшая часть является делом техники. Вернитесь к Page.xaml и вычерпните Border и все что к нему прилагается. Простейшим способом будет сворачивание элемента управления Border (если режим outlining выключен в Visual Studio 2008, то вы можете просто включить его из меню Edit в режиме дизайнера либо просмотра кода),

 

Рисунок 4-9. Использование Outlining

Сверните Border и затем используйте Control-X чтобы вырезать код из текущей позиции и Control-V для вставки в новом файле .xaml, заменив табличную сетку, созданную там Visual Studio 2008

Обратите внимание на то, что ваш элемент управления находится в правильном месте, но немного узок. Удалите атрибуты ширины (Width) и высоты (Height) и внешнего пользовательского элемента управления,

<UserControl x:Class="UserControlDemo.AddressUserControl"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    > <!--no specific size-->
    <Border BorderBrush="Black"  BorderThickness="1" Margin="15">

Как только вы удалите их, элемент управления будет выровнен по центру, а также расширен для того, чтобы вместить в себя элементы управления,

 

Рисунок 4-10. Автоматическое изменение размера пользовательского элемента управления

Добавление кода

Все последующие шаги выполняются в AddressUserControl.xaml.cs:

  1. Добавьте переменную экземпляра Address так же, как вы это делали раньше
  2. В конструкторе выделите память для объекта Address и настройте обработчик события Loaded
  3. В реализации Page_Loaded добавьте новый обработчик для события KeyDown табличной сетки
    public partial class AddressUserControl : UserControl
    {
        private Address theAddress = null;
        public AddressUserControl()
        {
            InitializeComponent();
            theAddress = new Address();
            Loaded += new RoutedEventHandler(Page_Loaded);
        }
        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            AddressGrid.KeyDown += new KeyEventHandler(AddressGrid_KeyDown);
        }
  4. Реализация AddressGrid.KeyDown была вырезана и может быть вставлена в Page.xaml.cs,
    void AddressGrid_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.C && Keyboard.Modifiers == ModifierKeys.Control)
            {
                theAddress.Location = "The Computer History Museum ";
                theAddress.Address1 = "No Longer in Boston!";
                theAddress.Address2 = "1401 N. Shoreline Blvd";
                theAddress.City = "Mountain View, CA 94043";
            }
            if (e.Key == Key.M && Keyboard.Modifiers == ModifierKeys.Control)
            {
                theAddress.Location = "Microsoft";
                theAddress.Address1 = "One Microsoft Way";
                theAddress.Address2 = "Building 10";
                theAddress.City = "Redmond, WA 98052";
            }
            this.DataContext = theAddress;
        }   // end KeyDown event handler
    }       // end class AddressUserControl

Использование пользовательского элемента управления

Мы завершили создание пользовательского элемента управления, но от него нет толку пока вы его не расположите в файле Page.xaml. Вот как надо это сделать:

  1. Сохраните все файлы
  2. В самой верхней части Page.xaml добавьте пространство имен для вашей страницы с префиксом на ваш вкус (я просто использовал jl). Intellisense очень старается помочь мне в этом.


    Рисунок 4-11. Добавление пространства имен

    Завершите все следующей строкой:

    xmlns:jl="clr-namespace:UserControlDemo"
  3. Теперь вы можете заменить ваш пользовательский элемент управления для всего содержимого Border в Page.xaml. Если вы еще не удалили Border, то удалите и замените своим элементом управления, точно также как вы вставили бы любой другой элемент управления в StackPanel,
    <jl:AddressUserControl x:Name="HomeAddress" />

Многократное использование

Давайте добавим еще один пользовательский элемент управления к StackPanel и изменим подсказки таким образом, чтобы у нас было следующее,

<UserControl x:Class="UserControlDemo.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:jl="clr-namespace:UserControlDemo"
    Width="600" Height="500">
    <StackPanel Background="White">
        <TextBlock Text="Event Address" FontFamily="Verdana" FontSize="24"
            HorizontalAlignment="Left" Margin="15,0,0,0"/>
         <jl:AddressUserControl x:Name="HomeAddress" />
       <TextBlock Text="Billing Address" FontFamily="Verdana" FontSize="24"
            HorizontalAlignment="Left" Margin="15,0,0,0"/>
         <jl:AddressUserControl x:Name="BillingAddress" />           
  </StackPanel>
</UserControl>

Обратите внимание, что добавление второго экземпляра AddressUserControl требует только наличия  двух различных названий. До того, как вы запустите программу, исследуйте Page.xaml.cs,
using System.Windows.Controls;

namespace UserControlDemo
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }
    }
}

Вся логика была экспортирована и инкапсулирована в пользовательском элементе управления. Вы можете добавить 2 (или 20) пользовательских элемента управления Address в ваш интерфейс, не написав и строки кода. При этом, запустив программу, каждый элемент будет работать независимо и каждый поддерживает комбинацию клавиш с клавишей Ctrl,

 

Рисунок 4-12. Два экземпляра одного пользовательского элемента управления

форум c# wpf silverlight