Модификация клиентского Silverlight приложения

Изменение визуального поведения элемента Button

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

Стиль ButtonStyle создается для типа Button (TargetType="Button") и в нем определяются шесть свойств: Background, Foreground, Padding, BorderThickness, BorderBrush и Template. Для свойств Background, Foreground, Padding и BorderThickness задаются конкретные значения, а для свойства BorderBrush определяется кисть градиентной заливки. Полный код XAML-разметки стиля ButtonStyle приведен в приложении.

Вложенное свойство ControlTemplate определено для типа Button (TargetType="Button"). Оно содержит контейнер Grid, для которого задается свойства Cursor (Cursor="Hand"). Свойство Cursor будет определять изменение вида курсора при наведении указателя мыши на кнопку. Вложенное свойство зависимостей VisualStateManager.VisualStateGroups элемента управления определяет визуальное представление элемента управления в различных состояниях. Рамка ( Border ) с именем Background определяет визуальное представление, которое будет изменяеться в различных состояниях кнопки. Свойство ContentPresenter определяет, что и как будет формироваться на панели кнопки. Три прямоугольника используются для представления внутреннего содержания кнопки в режимах получения фокуса ( FocusVisualElement ), наведения указателя мыши ( MouseOverVisualElement ) и в недоступном состоянии ( DisabledVisualElement ). Полный код XAML-разметки шаблона ControlTemplate для Button приведен в приложении.

Для элемента управления Button имеются следующие состояния, которые приведены в табл.7.2

Для проектируемого стиля необходимо задать визуальное представление для состояний CommonStates и FocusStates.

Для группы состояний CommonStates в состоянии Normal применяется визуальное представление по умолчанию, а для состояний MouseOver, Pressed и Disabled задается как цветовая ( ColorAnimation ), так числовая ( DoubleAnimation ) анимация свойств кнопки.

Для группы состояний FocusStates в состоянии Unfocused применяется визуальное представление по умолчанию, а для состояния Focused задается как цветовая анимация свойств кнопки – изменяется прозрачность.

Полный код XAML-разметки стиля ButtonStyle приведен в приложении.

Стиль для интерфейсного элемента Buttun добавим в словарь ресурсов StylesAndTemplates.xaml. далее необходимо модифицировать XAML-разметку для элементов Buttun главного окна приложения. Задание стиля производится аналогично для всех кнопок главного окна приложения. Так для кнопки "Создать" ( ButtonNew ) XAML-разметка будет иметь следующий вид:

<Button Name="ButtonNew" 
               Content="Создать"  
              Margin="5" 
              Padding="10,5,10,5" 
              Height="25"
              Click="New_Click" 
              ToolTipService.ToolTip="Создать новую запись"
              IsEnabled="False" 
         	Style="{StaticResource ButtonStyle}" />

Визуальное представление кнопки на основе спроектированного стиля ButtonStyle представлено на рис. 8.5.

Рис. 8.5. Визуальное представление кнопки в различных состояниях

После компиляции и запуска страница приложения имеет вид, приведенный на рис. 8.6.

увеличить изображение
Рис. 8.6. Страница приложения с модифицированным интерфейсным элементом кнопки

Ключевые термины

Конвертор данных, шаблон данных, стиль, объектный ресурс, пользовательский интерфейс, элемент пользовательского интерфейса, словарь ресурсов, визуальное состояние класса,

IValueConverter, Convert, ConvertBack, DataTemplate, OpenFileDialog, stream, ControlTemplate, User Experience, UX, ResourceDictionary, MergedDictionaries , ContentPresenter, VisualStateManager, VisualState

Краткие итоги

Рассмотрены подходы по включению в элементы управления Silverlight- приложения графических объектов, построение сложных стилей и шаблонов для списков и кнопок с целью повышения качества интерфейса пользователя.

Ресурсы для углубленного изучения

1. Silverlight // http://msdn.microsoft.com/ru-ru/library/cc838158(v=VS.95).aspx.
2. [ 2 ] , стр. 193 – 272.
3. [ 3 ] , стр. 385 – 440.
4. [ 5 ] , стр. 134 – 139.
5. [ 9 ] , стр. 1137 – 1212.

Вопросы для самопроверки

1. В каком формате можно хранить изображения с SQL Server 2008?
2. Какие требования предъявляются к классу конвертора данных?
3. Поясните, как можно использовать конвертор данных в XAML-разметке элемента управления.
4. Поясните, что означает визуальная структура и поведение элемента управления.
5. Для чего использутся словарь ресурсов?
6. Поясните назначение свойства MergedDictionaries.
7. Что определяет визуальное состояние элемента контроля?
8. Поясните назначение класса VisualState.
9. Поясните назначение класса VisualStateManager.
10. Поясните назначение свойства VisualStateGroups.
11. Поясните назначение коллекции Storyboard.