Программирование на C# 4 и.NET 4 Лекция 15. WPF

Шаблон элемента управления Элементы управления WPF спроектированы таким образом, чтобы полностью отделить функциональность элемента от его визуального оформления Чтобы по новому оформить пользовательский интерфейс элемента WPF, нужно создать новый шаблон элемента управления Шаблон элемента – XAML, описывающий оформление элемента управления Шаблон элемента управления определяется в элементе Шаблон элемента управления определяется в элементе

ControlTemplate Для отображения содержимого элемента управления в шаблоне элемента управления используются элементы для элементов управления содержимым (для отображения свойства Content) для элементов управления содержимым (для отображения свойства Content) для элементов элементами (для отображения свойства Items) для элементов элементами (для отображения свойства Items) Для правильной работы необходимо указать атрибут TargetType у ControlTemplate <ContentPresenter VerticalAlignment="Center" <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/> HorizontalAlignment="Center"/> </ControlTemplate>

Шаблон как ресурс Обычно шаблоны определяются в ресурсах, что их можно было использовать многократно <ControlTemplate x:Key="ButtonTemplate" <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"> TargetType="{x:Type Button}"> ….. ….. </Window.Resources> <Button Template="{StaticResource ButtonTemplate}" Content="Button" Width="100" Height="30"/> Content="Button" Width="100" Height="30"/>

Триггеры в шаблоне Триггеры задаются в коллекции ControlTemplate.Triggers Триггеры необходимо задавать в конце ControlTempplate, чтобы они имели доступ к объектам шаблона В объектах Triggers можно определять объекты Animation

Свойства родителя шаблона Шаблон можно настраивать, задавая свойства элемента управления, использующего этот шаблон. Для настройки шаблона используется TemplateBinding <ControlTemplate x:Key="ButtonTemplate <ControlTemplate x:Key="ButtonTemplate TargetType="{x:Type Button}"> TargetType="{x:Type Button}"> … <Button Template="{StaticResource ButtonTemplate}" <Button Template="{StaticResource ButtonTemplate}" BorderThickness="3"> BorderThickness="3"> Другой способ, использование Binding Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background} Path=Background}

Применение шаблонов в стиле Можно использовать стили для автоматического применения шаблона всем элементам данного типа <Setter Property="Template" <Setter Property="Template" Value="{StaticResource Value="{StaticResource ButtonTemplate}"/> ButtonTemplate}"/></Style>

User и Custom Controls Пользовательские элементы управления Состоят из связанных вместе элементов управления с общей функциональностью в общем пользовательском интерфейсе Наследуют класс UserControl Шаблон проекта в VS WPF User Control Library Настраиваемые элементы управления Определяют собственное визуальное оформления и функциональность Наследуют класс Control или ContentControl Шаблон проекта в VS WPF Custom Control Library

ControlTemplate Демонстрации

Конвертеры Конвертер – класс, преобразующий один тип в другой XAML использует их повсеместно Преобразование строки в объект Реализует IValueConverter Методы Convert и ConvertBack object Convert(object value, Type targetType, object parameter, CultureInfo Culture)

Дополнительные свойства ConverterParameter – дополнительный параметр ConverterCulture – культура конвертера Нужна для локализации

Установка конвертера Для использования конвертера: Необходимо указать пространство имен, где находится конвертер Необходимо указать пространство имен, где находится конвертер<xmlns:src=clr-namespace:MyProg> Создать в ресурсах экземпляр конвертера Создать в ресурсах экземпляр конвертера Использовать конвертер в Binding Использовать конвертер в Binding {Binding Converter={StaticResource myconv} }

Конвертер Демонстрация

Привязка к данным Привязка к данным – это создание связи между двумя свойствами разных объектов Не обязательно визуальных Характеристики связи Направление Источник и получатель Динамичность (один раз или постоянно) Сложность (один к одному или привязка к коллекции)

Объекты связи Binding – объекты этого класса задают связь В XAML используются расширение {Binding} В C# - объект Binding Свойства Binding Source – объект-источник привязки ElementName – UI-объект источник привязки Path – путь к свойству привязки XPath – xpath-запрос при привязке к XML Mode: OneWay, TwoWay, OneTime, OneWayToSource

Простая привязка к данным Демонстрация

Привязка к коллекциям Некоторые элементы отображают много элементов ListBox, ListView Особенности таких элементов: Модель содержимого – Items (элементы, значки) Можно задать ItemsSource – источник элементов

Коллекции для привязки Обычные коллекции Не поддерживают динамического обновления Специальные коллекции ObservableCollection<T> Поддерживают динамическое обновление INotifyPropertyChange Позволяет реализовывать оповещение изменения свойства для любого элемента

Простая привязка к коллекциям Демонстрация

Шаблоны данных Простая привязка коллекции Вызывает ToString() Очень ограничена в применении Привязка с шаблонами данных «Второй уровень» привязки Задается шаблон В шаблоне можно осуществлять простую или сложную привязку свойств Можно делать следующий уровень иерархии и т.д.!

Пример шаблона <Image Source={Binding <Image Source={Binding Path=FullName}/> Path=FullName}/></DataTemplate>…. ItemTemplate="{StaticResource dt}" Осуществит привязку свойства Source рисунка к пути к файлу

Шаблон панели Для ListBox можно задать шаблон панели Расположение элементов нужным образом

Привязка к шаблону Демонстрация

Привязки Любое свойство можно можно связать с любым другим объектом, свойством, коллекцией. Основа привязки данных – класс Binding Связывает два свойства: источник и конечное свойство

Класс Binding ElementName – имя элемента-источника при привязке к элементу WPF Source – имя объекта при привязке не к элементу WPF Path – путь к свойству в объекте- источнике Mode – направление привязки RelativeSource – задает источник связывания, относительно текущего элемента в визуальном дереве.

Привязка к элементу WPF <Label Height="25" Width="100" <Label Height="25" Width="100" Content="{Binding ElementName=Slider1, Path=Value}« Content="{Binding ElementName=Slider1, Path=Value}« Margin="202,174,200,112" /> Margin="202,174,200,112" />

Привязка к объекту Привязка к статическому объекту системы Привязка к статическому объекту системы Привязка к объекту Привязка к объекту<Window.Resources> </Window.Resources>

Привязки Демонстрация