演练:设置 WPF 内容的样式

本演练演示如何将样式应用于 Windows 窗体上承载的 Windows Presentation Foundation (WPF) 控件。

在本演练中,您将执行下列任务:

  • 创建项目。

  • 创建 WPF 控件类型。

  • 对 WPF 控件应用样式。

提示

显示的对话框和菜单命令可能会与“帮助”中的描述不同,具体取决于您现用的设置或版本。 若要更改设置,请在“工具”菜单上选择“导入和导出设置”。 有关更多信息,请参见 使用设置

系统必备

您需要以下组件来完成本演练:

  • Visual Studio 2010.

创建项目

第一步是创建 Windows 窗体项目。

提示

当承载 WPF 内容时,仅支持 C# 和 Visual Basic 项目。

创建项目

创建 WPF 控件类型

将 WPF 控件类型添加到项目后,可以在 ElementHost 控件中承载它。

创建 WPF 控件类型

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

  2. 在“设计”视图中,确保选中 UserControl1。 有关更多信息,请参见如何:在设计图面上选择和移动元素

  3. 在**“属性”**窗口中,将 WidthHeight 属性的值设置为 200。

  4. System.Windows.Controls.Button 控件添加到 UserControl,并将 Content 属性的值设置为“取消”。

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

  6. 生成项目。

对 WPF 控件应用样式

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

对 WPF 控件应用样式

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

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

    UserControl1 的实例承载在一个名为 elementHost1 的新 ElementHost 控件中。

  3. 在 elementHost1 的智能标记面板中,单击下拉列表中的**“编辑所承载的内容”**。

    在 WPF 设计器 中打开 UserControl1。

  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>
  1. 通过在“取消”按钮的 <Button> 标记中插入以下 XAML 来将上一步中定义的 SimpleButton 样式应用于“取消”按钮。

    Style="{StaticResource SimpleButton}
    

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

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

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

  3. 将新的样式应用于按钮控件。

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

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

请参见

参考

ElementHost

WindowsFormsHost

概念

XAML 概述 (WPF)

样式设置和模板化

其他资源

迁移和互操作性

使用 WPF 控件

WPF 设计器