通过

演练：设置 WPF 内容的样式

  • 项目

本文介绍如何将样式应用到 Windows 窗体上承载的 Windows Presentation Foundation (WPF) 控件中。

先决条件

若要完成本演练，必须具有 Visual Studio。

创建项目

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

注意

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

创建 WPF 控件类型

将 WPF 控件类型添加到项目后，就可在 ElementHost 控件中托管它。

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

  2. 在设计视图中，请确保已选中 UserControl1。

  3. 在“属性”窗口中，将 Width 和 Height 属性的值设置为 200。

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

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

  6. 生成项目。

将样式应用到 WPF 控件

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

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

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

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

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

    将在 WPF 设计器中打开 UserControl1。

  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. 通过插入“取消”按钮的 <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. 单击“确定”和“取消”按钮并查看差异。

另请参阅