Silverlight

Сегодня мы поговорим о Custom Control. Что такое Custom Control?
Custom Control – это класс унаследованный от UserControl, который содержит набор полей и методов а также свое представление в виде XAML, которые обеспечивают работу этого контрола. Затем этот контрол может встраиваться в другую страницу (он же самый UserControl). Custom Control могут быть как универсальные, которые могут быть использованы в любом проекте, например, какой-нибудь слайдер, галерея и т.п. А могут относиться только к данному проекту и использоваться только в этом проекте. Для примера, можно вынести в отдельный контрол меню, блок баннеров и т.д.

Сегодня я сделаю простой User Control и покажу его использование. Мы создадим простые часики, которые будут показывать дату и время, иметь несколько настроек. Мы можем менять цвет фона, цвет текста, и формат вывода даты.

Для начала создаем два User Control Page.xaml, Clock.xaml. На Clock создадим одно текстовое поле и все J

Clock.xaml:

<UserControl x:Class="CustomControl.Clock"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="50">
  <Grid  x:Name="LayoutRoot" Background="White"  VerticalAlignment="Center" HorizontalAlignment="Center">
  	<TextBlock  x:Name="Time"   Text="SomeText" Foreground="Red" />
  </Grid></UserControl>

Чтобы вы видели, что наш контрол изменит свой вид по умолчанию мы задали ему цвет фона, цвет текста и какой то текст.

http://silverlightru.net/

По умолчанию у нас будет грузиться страница Page.xaml. Если вы хотите посмотреть, что у нас получилось в нашем Clock.xaml, тогда надо в файле App.xaml.cs поменять:

this.RootVisual = new Page();

на

this.RootVisual = new Clock ();

Убедились что все работает, как мы задумывали и возвращаем все обратно.

Теперь нам необходимо создать свойства для наших свойств контрола, которые мы будем менять, это фон, цвет текста, и формат. Затем мы обрабатываем эти значения в событии Loaded контрола Clock. Встаем задача, так как у нас формат задается определенным образом, то нам надо как-то это учитывать, чтобы пользователь не мучился, какой же формат правильный, но и мог увидеть, какие вообще форматы существуют. Для этого создадим перечисление форматов (enum). В чем еще преимущество в том, что enum наш будет отображаться в Visual Studio при вызову intelecence.

http://silverlightru.net/

Код С#:

namespace CustomControl
{
    public partial class Clock : UserControl
    {
        public SolidColorBrush TextColor { get; set; } //Цвет текста
        public SolidColorBrush LayoutColor { get; set; } //Цвет фона
        public Formats Format { get; set; } //Наш список форматов
        public Clock()
        {
            InitializeComponent();

			//создаем обработчик события, чтобы использовать значения наших свойств
            Loaded += new RoutedEventHandler(Clock_Loaded);
        }

        void Clock_Loaded(object sender, RoutedEventArgs e)
        {
			//устанавливаем свойство цвета текста
            if (TextColor != null)
                Time.Foreground = TextColor;

			//устанавливаем свойство цвета фона
            if (LayoutColor != null)
                LayoutRoot.Background = LayoutColor;

			//устанавливаем свойство текста и задаем ему формат
            Time.Text = DateTime.Now.ToString(Format.ToString());
        }

		//Форматы доступные для использования в DateTime структуре
        public enum Formats { 
            d, D, t, T, f, F, g, G, M, R, s, u, U, Y, o
        }
    }
}

Наш контрол создан, он работает. Но как же нам использовать наш контрол там, где нам нужно и задавать ему разные настройки? Вернемся к нашему Page.xaml. Для того, чтобы использовать Custom Controls, необходимо подключить assembly к которому они относятся и также указать namespace в котором находится наш контрол.

Открываем Page.xaml и добавляем туда следующую строчку, так как наши контролы можно было не указывать assembly, но чтобы было понятней, я привожу нормальную запись.

XAML:

<UserControl x:Class="CustomControl.Page"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
<!—Подключаем наш assembly -->

     xmlns:CC="clr-namespace:CustomControl;assembly=CustomControl"
     Width="400" Height="300">
    <Grid  x:Name="LayoutRoot" Background="White">
        <CC:Clock  TextColor="Aquamarine" LayoutColor="Bisque"  Format="G" />
    </Grid>
</UserControl>

Расмотрим строку:
xmlns:CC="clr-namespace:CustomControl;assembly=CustomControl"

СС – специальный префикс, который мы будем использовать для обозначения нашего контрола. Например:

<CC:Clock TextColor="Aquamarine"  LayoutColor="Bisque" Format="G" />

clr-namespace:CustomControl; – Указываем namespace CustomControl надо поменять при необходимости на ваш namespace

assembly=CustomControl; – Указываем assembly CustomControl надо поменять при необходимости на ваш assembly

Далее задаем уже используем наш контрол, задавая ему необходимые свойства TextColor, LayoutColor, Format.

Используйте Custom Control там, где вам удобно, если вам кажется, что логика программы должна быть вынесена в виде отдельного контрола, сделайте это. Если ваш код универсален и может быть использован во многих местах, опять используйте Custom Control.

http://silverlightru.net/

http://silverlightru.net/

http://silverlightru.net/

 P.S. Вообще, в данной ситуации наш контрол должен быть скорей назван Calendar, я в начале задумывал его немного по другому. Кого это смущает могу перименовать

Popularity: 79%

Похожие статьи по SilverLight:

1. Навигация между страницами
2. DataBinding (часть 2 – метод вынесения контрола)
3. SilverLight и JavaScript
4. Custom Window Chrome и Events: видео
5. Обработка событий MouseLeftButtonDown и MouseLeftButtonUp у контрола – Slider