演练:设置 WPF 内容的样式
本演练演示如何将样式应用于 Windows 窗体上承载的 Windows Presentation Foundation (WPF) 控件。
在本演练中,您将执行下列任务:
创建项目。
创建 WPF 控件类型。
对 WPF 控件应用样式。
提示
显示的对话框和菜单命令可能会与“帮助”中的描述不同,具体取决于您现用的设置或版本。 若要更改设置,请在“工具”菜单上选择“导入和导出设置”。 有关更多信息,请参见 使用设置。
系统必备
您需要以下组件来完成本演练:
- Visual Studio 2010.
创建项目
第一步是创建 Windows 窗体项目。
提示
当承载 WPF 内容时,仅支持 C# 和 Visual Basic 项目。
创建项目
- 使用 Visual Basic 或 Visual C# 创建一个名为 StylingWpfContent 的新 Windows 窗体应用程序项目。 有关更多信息,请参见如何:创建新的 Windows 窗体应用程序项目。
创建 WPF 控件类型
将 WPF 控件类型添加到项目后,可以在 ElementHost 控件中承载它。
创建 WPF 控件类型
向解决方案添加新的 WPF UserControl 项目。 使用该控件类型的默认名称 UserControl1.xaml。 有关更多信息,请参见演练:设计时在 Windows 窗体上创建新的 WPF 内容。
在“设计”视图中,确保选中 UserControl1。 有关更多信息,请参见如何:在设计图面上选择和移动元素。
将 System.Windows.Controls.Button 控件添加到 UserControl,并将 Content 属性的值设置为“取消”。
将第二个 System.Windows.Controls.Button 控件添加到 UserControl,并将 Content 属性的值设置为“确定”。
生成项目。
对 WPF 控件应用样式
可以对 WPF 控件应用不同的样式,以更改其外观和行为。
对 WPF 控件应用样式
在 Windows 窗体设计器中打开 Form1。
在**“工具箱”**中,双击 UserControl1 在窗体上创建 UserControl1 的一个实例。
UserControl1 的实例承载在一个名为 elementHost1 的新 ElementHost 控件中。
在 elementHost1 的智能标记面板中,单击下拉列表中的**“编辑所承载的内容”**。
在 WPF 设计器 中打开 UserControl1。
在“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>
通过在“取消”按钮的 <Button> 标记中插入以下 XAML 来将上一步中定义的 SimpleButton 样式应用于“取消”按钮。
Style="{StaticResource SimpleButton}
按钮声明将类似于以下 XAML。
<Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
Style="{StaticResource SimpleButton}">Cancel</Button>
生成项目。
在 Windows 窗体设计器中打开 Form1。
将新的样式应用于按钮控件。
从**“调试”菜单中,选择“开始调试”**以运行应用程序。
单击“确定”和“取消”按钮并查看差异。