Шаг 1. Создание повторно используемой функциональности
Повторное использование функциональности пригодно в том случае, если данная функциональность стоит того, чтобы ее еще раз использовали. Мы начнем c создания формы (рис. 7.1) как совокупность элементов управления расположенных на странице и закончим выносом повторно используемого кода в отдельный UserControl. Создаваемая форма будет иметь возможность заполнения вручную, а также поддерживать клавишную комбинацию "быстрого вызова", в частности Ctrl-M будет добавлять адрес Microsoft.
Рисунок
7.1. Адресная форма, заполненная посредством
нажатия Ctrl-M
Рассмотрим XAML разметку адресной формы, которую мы пока разместим на главной странице Silverliht приложения (MainPage). Подразумевается, что первым элементом управления будет StackPanel, поэтому мы можем с легкостью расположить элементы управления один над другим, а в пределах StackPanel у нас Grid в котором располагаются стандартные элементы управления.
<UserControl x:Class="Example.MainPage" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="500" Height="500"> <Border> <StackPanel Background="White"> <TextBlock Text="Home Address" FontFamily="Verdana" FontSize="24" HorizontalAlignment="Left" Margin="15,0,0,0"/> <Grid x:Name="AddressGrid" > <!--More Here--> </Grid> </Border> </StackPanel> </UserControl>
Устанавливаем стили для элементов управления
Табличная сетка (Grid) будет заполнена четырьмя подсказками и четырьмя текстовыми полями ввода, но они все настроены вручную, и пока нас это устраивает. Приведенный ниже код должен располагаться в файле App.xaml в теги Application.Resources. Каждый Style определяет свой TargetType (т.е., Button или TextBlock) и затем устанавливает значение для каждого свойства, стилем которого оно хочет управлять. Мы создаем всего 2 стиля - один для TextBlock, который будет использован в качестве ярлыков, и второй - для получения информации в TextBox. Все TextBlocks будут выровнены по нижнему (Bottom) и левому (Left) краю, и у них будет установлен шрифт Verdana, размер шрифта 18, а текст будет синего цвета. Данные элементы TextBlock также будут иметь отступ в 5 пикселей со всех сторон
<Application.Resources> <Style TargetType="TextBlock" x:Key="TextBlockPrompt"> <Setter Property="VerticalAlignment" Value="Bottom" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="FontFamily" Value="Verdana" /> <Setter Property="FontSize" Value="18" /> <Setter Property="FontWeight" Value="Medium" /> <Setter Property="Foreground" Value="Blue" /> <Setter Property="Margin" Value="5" /> </Style>
Все элементы TextBoxe будут иметь черный жирный шрифт Verdana размера 18, а также будут выровнены по нижнему левому краю. TextBox будет размером 250 на 30 и также будет иметь отступ в 5 пикселей со всех сторон.
<Style TargetType="TextBox" x:Key="TextBoxStyle"> <Setter Property="FontFamily" Value="Verdana" /> <Setter Property="FontSize" Value="18" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Foreground" Value="Black" /> <Setter Property="VerticalAlignment" Value="Bottom" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="Width" Value="250" /> <Setter Property="Height" Value="30" /> <Setter Property="Margin" Value="5" /> </Style> </Application.Resources>
Вместо добавления информации о стиле TextBlock вручную, мы можем привязать информацию об атрибуте Style при помощи "key" для определения желаемого стиля.
<TextBlock Text="Location: " Style="{StaticResource TextBlockPrompt}" Grid.Row="2" Grid.Column="1" />
Строка Style="{StaticResource TextBlockPrompt}" переходит в App.xaml и находит стиль, ключом которого является TextBlockPrompt и присваивает все значения разом. Точно так же мы можем присвоить все значения стиля TextBox привязанному текстовому полю.
<TextBox x:Name="Location" Style="{StaticResource TextBoxStyle}" Text ="Silverlight Central" Grid.Row="2" Grid.Column="3" />
Оставшиеся элементы в разметке сопоставимы, им так же применяем стиль.