通过

逐步指南：设置 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. 在 属性 窗口中，将 Width 和 Height 属性的值设置为 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. 单击“ 确定 ”和 “取消” 按钮并查看差异。

另请参阅