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

Пошаговое руководство: Оформление содержимого WPF

  • Статья

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

Необходимые условия

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

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

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

Заметка

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

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

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

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

  2. В режиме конструктора убедитесь, что выбран UserControl1.

  3. В окне свойств задайте для свойства и значение 200.

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

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

  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. Новый стиль применяется к элементу управления "Кнопка".

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

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

См. также