Custom Control
Сегодня мы поговорим о 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>
Чтобы вы видели, что наш контрол изменит свой вид по умолчанию мы задали ему цвет фона, цвет текста и какой то текст.
По умолчанию у нас будет грузиться страница Page.xaml. Если вы хотите посмотреть, что у нас получилось в нашем Clock.xaml, тогда надо в файле App.xaml.cs поменять:
this.RootVisual = new Page();
на
this.RootVisual = new Clock ();
Убедились что все работает, как мы задумывали и возвращаем все обратно.
Теперь нам необходимо создать свойства для наших свойств контрола, которые мы будем менять, это фон, цвет текста, и формат. Затем мы обрабатываем эти значения в событии Loaded контрола Clock. Встаем задача, так как у нас формат задается определенным образом, то нам надо как-то это учитывать, чтобы пользователь не мучился, какой же формат правильный, но и мог увидеть, какие вообще форматы существуют. Для этого создадим перечисление форматов (enum). В чем еще преимущество в том, что enum наш будет отображаться в Visual Studio при вызову intelecence.
Код С#:
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.
P.S. Вообще, в данной ситуации наш контрол должен быть скорей назван Calendar, я в начале задумывал его немного по другому. Кого это смущает могу перименовать
Popularity: 100% [?]




Сентябрь 30th, 2008 at 15:07
Спасибо за статью.
Честно сказать, статья не покрывает той темы, которую призвана покрыть. Я не имею ввиду всеобъемлющее покрытие, но мне бы не повредила помощь в другом, очень даже насущном для control-maker-а вопросе:
Как генерировать элементы юзер-интерфейса налету? Какой контрол пропогандируется МС-ом как базовый для такого рода кастом-контролов? Где у такого контрола коллекция Childen-ов? Как живой пример для рассмотрения, можно обдумать к примеру написание своего TreeList-а, за неимением стандартного, под SL2 RC0.
Сентябрь 30th, 2008 at 15:36
В этой статье изначально рассматривался простейший CustomControl, чтобы люди могли хотя бы с чего-то начать создавать свои контролы.
В данном случае мы использовали UserControl, как базовый класс :
public partial class Clock : UserControl
если вы хотите добавлять какие-то элементы, создайте внутренний Layout Control. И добавляйте элементы в его коллекцию, а вывод уже сами предуссматривайте, как вам удобно. Также можно использовать в виде базового класса - ContentControl. Тогда можно создавать контролы, которые буду включать в себя некотрый XAML.
Например:
<MyControl>
<!– SOME XAML –>
</MyControl>
Конечно статья не раскрывает, многие вопросы, но их думаю можно вынести в виде отдельной темы.
Сентябрь 30th, 2008 at 16:02
Спасибо за ответ, буду ждать дальнейшего рассмотрения данного и подобных вопросов.
Октябрь 28th, 2008 at 17:12
[...] http://silverlightru.net/custom-control Published окт 28 2008, 09:12 by admin | [Edit Post] Помечено как: Блог, [...]
Октябрь 28th, 2008 at 18:32
[...] http://silverlightru.net/custom-control Published окт 18 2008, 01:32 by admin | [Edit Post] Помечено как: Блог, [...]
Ноябрь 10th, 2008 at 09:53
[quote]Custom Control – это класс унаследованный от UserControl, который содержит набор полей и методов а также свое представление в виде XAML[/quote] - перла!!!