Поделиться через

Пошаговое руководство. Применение стилей к содержимому WPF

  • Статья

В этой статье показано, как применить стили к элементу управления Windows Presentation Foundation (WPF), размещенному на форме Windows Forms.

Необходимые компоненты

Для выполнения шагов, описанных в этом руководстве, вам понадобится Visual Studio.

Создание проекта

Откройте Visual Studio и создайте на Visual Basic или Visual C# проект приложения Windows Forms с именем StylingWpfContent.

Примечание.

При размещении содержимого WPF поддерживаются только проекты C# и Visual Basic.

Создание типов элементов управления WPF

После добавления в проект типа элемента управления WPF можно разместить его в элементе управления ElementHost.

  1. Добавьте в решение новый проект WPF UserControl. Используйте имя по умолчанию для этого типа элемента управления (UserControl1.xaml). Дополнительные сведения см. в разделе Пошаговое руководство. Создание содержимого WPF для формы Windows Forms во время разработки.

  2. Убедитесь в том, что элемент UserControl1 выбран в представлении конструирования.

  3. В окне Свойства присвойте свойствам Width и Height значение 200.

  4. Добавьте элемент управления System.Windows.Controls.Button в UserControl и присвойте свойству Content значение Отмена.

  5. Добавьте второй элемент управления System.Windows.Controls.Button в UserControl и присвойте свойству Content значение ОК.

  6. Выполните сборку проекта.

Применение стиля к элементу управления WPF

Для изменения внешнего вида и поведения элемента управления WPF к нему можно применить различные стили.

  1. Откройте Form1 в конструкторе Windows Forms.

  2. На панели элементов дважды щелкните UserControl1, чтобы создать экземпляр UserControl1 на форме.

    Экземпляр UserControl1 размещается в новом элементе управления ElementHost с именем elementHost1.

  3. На панели смарт-тегов для elementHost1 в раскрывающемся списке выберите пункт Редактировать содержимое.

    UserControl1 откроется в конструкторе WPF.

  4. В представлении XAML вставьте следующий код 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>

  5. Примените стиль SimpleButton, определенный на предыдущем шаге, к кнопке "Отмена", вставив приведенный ниже код XAML в тег <Button> кнопки Отмена.

    Style="{StaticResource SimpleButton}

    Объявление кнопки будет выглядеть так, как в XAML ниже.

    <Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
             Style="{StaticResource SimpleButton}">Cancel</Button>

  6. Выполните сборку проекта.

  7. Откройте Form1 в конструкторе Windows Forms.

  8. Новый стиль применяется для элемента управления button.

  9. Чтобы запустить приложение, в меню Отладка выберите команду Начать отладку.

  10. Нажмите кнопки OK и Отмена и просмотрите различия.

См. также