逐步指南:设置 WPF 内容的样式

本文介绍如何将样式应用于 Windows 窗体上托管的 Windows Presentation Foundation (WPF) 控件。

先决条件

需要 Visual Studio 才能完成本演练。

创建项目

打开 Visual Studio 并在 Visual Basic 或名为 StylingWpfContent的 Visual C# 中创建新的 Windows 窗体应用程序项目。

注释

托管 WPF 内容时,仅支持 C# 和 Visual Basic 项目。

创建 WPF 控件类型

当您将 WPF 控件类型添加到项目后,可以在 ElementHost 控件中托管它。

  1. 向解决方案添加新的 WPF UserControl 项目。 使用控件类型的默认名称,UserControl1.xaml。 有关详细信息,请参阅演练:设计时在 Windows 窗体上创建新的 WPF 内容

  2. 在“设计”视图中,确保已选择 UserControl1

  3. 属性 窗口中,将 WidthHeight 属性的值设置为 200

  4. UserControl中添加一个System.Windows.Controls.Button控件,并将Content属性的值设置为取消

  5. 将第二个 System.Windows.Controls.Button 控件添加到 UserControl,并将 Content 属性的值设置为 “确定”

  6. 构建项目。

将样式应用于 WPF 控件

可以将不同的样式应用于 WPF 控件以更改其外观和行为。

  1. 在 Windows 窗体设计器中打开 Form1

  2. 在“工具箱”中,双击 在窗体上创建 UserControl1 的实例UserControl1

    一个 UserControl1 实例被托管在一个名为 ElementHost的新 elementHost1 控件中。

  3. elementHost1 的智能标记面板中,从下拉列表中单击 编辑托管内容

    UserControl1 在 WPF 设计器中打开。

  4. 在 XAML 视图中,在<UserControl>开头标签后插入以下 XAML。 此 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. “取消”按钮的<Button>标签中插入以下 XAML,以应用上一步定义的SimpleButton样式。

    Style="{StaticResource SimpleButton}
    

    按钮声明将类似于以下 XAML:

    <Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
                 Style="{StaticResource SimpleButton}">Cancel</Button>
    
  6. 构建项目。

  7. 在 Windows 窗体设计器中打开 Form1

  8. 新样式应用于按钮控件。

  9. “调试 ”菜单中,选择“ 开始调试 ”以运行应用程序。

  10. 单击“ 确定 ”和 “取消” 按钮并查看差异。

另请参阅