Пошаговое руководство. Применение стилей к содержимому WPF
В данном пошаговом руководстве показано, как применить стили к элементу управления WPF, размещенному в Windows Forms.
В данном пошаговом руководстве выполняются следующие задачи.
Создание проекта.
Создание типа элемента управления WPF.
Применение стиля к элементу управления WPF.
Примечание
Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих настроек или выпуска.Чтобы изменить параметры, выберите в меню Сервис пункт Импорт и экспорт параметров.Дополнительные сведения см. в разделе Работа с параметрами.
Обязательные компоненты
Ниже приведены компоненты, необходимые для выполнения данного пошагового руководства.
- Visual Studio 2010.
Создание проекта
Для начала следует создать проект Windows Forms.
Примечание
При размещении WPF-содержимого поддерживаются только проекты C# и Visual Basic.
Создание проекта
- Создайте новый проект приложения Windows Forms в Visual Basic или Visual C# с именем StylingWpfContent. Дополнительные сведения см. в разделе Практическое руководство. Создание проекта приложения Windows Forms.
Создание типов элемента управления WPF
После добавления типа элемента управления WPF в проект, его можно разместить к элементе управления ElementHost.
Создание типов элемента управления WPF
Добавьте в решение новый проект WPF UserControl. Используйте имя по умолчанию (UserControl1.xaml) для данного типа элемента управления. Дополнительные сведения см. в разделе Пошаговое руководство. Создание нового содержимого WPF для формы Windows Forms во время разработки.
Убедитесь, что элемент UserControl1 выбран в представлении конструктора. Дополнительные сведения см. в разделе Практическое руководство. Выбор и перемещение элементов в область конструктора.
В окне Свойства присвойте свойствам Width и Height значение 200.
Добавьте элемент управления System.Windows.Controls.Button в UserControl и присвойте свойству Content значение Cancel.
Добавьте второй элемент управления System.Windows.Controls.Button в UserControl и задайте для свойства Content значение OK.
Выполните построение проекта.
Применение стиля к элементу управления WPF
Можно применять различные стили элемента управления WPF для изменения его внешнего вида и поведения.
Применение стиля к элементу управления WPF
Откройте форму Form1 в конструкторе Windows Forms.
В Области элементов дважды щелкните UserControl1 для создания экземпляра UserControl1 в форме.
Экземпляр UserControl1 размещается в новом элементе управления ElementHost с именем elementHost1.
В области смарт-тега для elementHost1 из раскрывающегося списка выберите Изменить размещенное содержимое.
UserControl1 откроется в сред. Конструктор WPF.
В представлении XAML вставьте следующий код после открывающего тега <UserControl>:
XAML создает градиент с другой границей градиента. При нажатии элемента управления градиенты изменяются, и создается представление нажатой кнопки. Дополнительные сведения см. в разделе Стилизация и использование шаблонов.
<UserControl.Resources>
<LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#BBB" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="0.1"/>
<GradientStop Color="#EEE" Offset="0.9"/>
<GradientStop Color="#FFF" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#444" Offset="0.0"/>
<GradientStop Color="#888" Offset="1.0"/>
</LinearGradientBrush>
<Style x:Key="SimpleButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
<Setter Property="Background" Value="{StaticResource NormalBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="Grid">
<Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" Value="{StaticResource PressedBrush}" TargetName="Border"/>
<Setter Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" TargetName="Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Примените стиль SimpleButton, определенный на предыдущем шаге, к кнопке Cancel, вставив следующий код XAML в тег <Button> кнопки Cancel.
Style="{StaticResource SimpleButton}Объявление кнопки будет выглядеть примерно так.
<Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
Style="{StaticResource SimpleButton}">Cancel</Button>
Выполните построение проекта.
Откройте форму Form1 в конструкторе Windows Forms.
К элементу управления ''Кнопка'' применен новый стиль.
Чтобы запустить приложение, в меню Отладка выберите команду Начать отладку.
Нажмите кнопки OK и Cancel, обратите внимание на различия.
См. также
Ссылки
Основные понятия
Общие сведения о языке XAML (WPF)
Стилизация и использование шаблонов
Другие ресурсы
Миграция и взаимодействие систем