原文来自MSDN
控件概述
Windows Presentation Foundation (WPF) 附带了许多几乎可以在所有 Windows 应用程序中使用的常见 UI 组件,其中包括 Button、
Label、TextBox、Menu 和 ListBox。以前,这些对象被称为控件。不过,WPF SDK 仍继续使用术语“控件”,泛指任何代表应用程序中可
见对象的类。请注意,类不必从 Control 类继承,即可具有可见外观。从 Control 类继承的类包含一个 ControlTemplate,允许控件的使
用方在无需创建新子类的情况下根本改变控件的外观。 本主题讨论在 WPF 中使用控件(包括从 Control 类继承的控件以及不从该类继承
的控件)的常见方式。
创建控件的实例
可以通过使用可扩展应用程序标记语言 (XAML) 或以代码形式向应用程序添加控件。 下面的示例演示如何创建一个向用户询问其姓名的简
单应用程序。 此示例在 XAML 中创建六个控件:两个标签、两个文本框及两个按钮。所有控件都可以按相似的方式创建。
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label>
Enter your first name:
</Label>
<TextBox Grid.Row="0" Grid.Column="1"
Name="firstName" Margin="0,5,10,5"/>
<Label Grid.Row="1" >
Enter your last name:
</Label>
<TextBox Grid.Row="1" Grid.Column="1"
Name="lastName" Margin="0,5,10,5"/>
<Button Grid.Row="2" Grid.Column="0"
Name="submit" Margin="2">
View message
</Button>
<Button Grid.Row="2" Grid.Column="1"
Name="Clear" Margin="2">
Clear Name
</Button>
</Grid>
下面的示例以代码的形式创建同一应用程序。为了简单起见,示例中不包括 Grid grid1 的创建。grid1 与前面的 XAML 示例内容具有
相同的列和行定义。
Label lastNameLabel;
TextBox firstName;
TextBox lastName;
Button submit;
Button clear;
void CreateControls()
{
firstNameLabel = new Label();
firstNameLabel.Content = "Enter your first name:";
grid1.Children.Add(firstNameLabel);
firstName = new TextBox();
firstName.Margin = new Thickness(0, 5, 10, 5);
Grid.SetColumn(firstName, 1);
grid1.Children.Add(firstName);
lastNameLabel = new Label();
lastNameLabel.Content = "Enter your last name:";
Grid.SetRow(lastNameLabel, 1);
grid1.Children.Add(lastNameLabel);
lastName = new TextBox();
lastName.Margin = new Thickness(0, 5, 10, 5);
Grid.SetColumn(lastName, 1);
Grid.SetRow(lastName, 1);
grid1.Children.Add(lastName);
submit = new Button();
submit.Content = "View message";
Grid.SetRow(submit, 2);
grid1.Children.Add(submit);
clear = new Button();
clear.Content = "Clear Name";
Grid.SetRow(clear, 2);
Grid.SetColumn(clear, 1);
grid1.Children.Add(clear);
}
更改控件外观
更改控件的外观以适应应用程序的外观,这是很常见的操作。可以根据您要达到的效果,通过执行以下操作之一来更改控件的外观:
• 更改控件的属性值。
• 为控件创建 Style。
• 为控件创建新 ControlTemplate。
更改控件的属性值
许多控件具有允许您更改控件外观的属性,例如 Button 的 Background。可以在 XAML 和代码中设置值属性。下面的示例在 XAML 中
设置 Button 的 Background、FontSize 和 FontWeight 属性。
<!--Set the Background property of the Button to
a LinearGradientBrush.-->
<Button.Background>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="Green" Offset="0.0" />
<GradientStop Color="White" Offset="0.9" />
</LinearGradientBrush>
</Button.Background>
View message
</Button>
下面的示例在代码中设置相同的属性。
buttonBrush.StartPoint = new Point(0, 0.5);
buttonBrush.EndPoint = new Point(1, 0.5);
buttonBrush.GradientStops.Add(new GradientStop(Colors.Green, 0));
buttonBrush.GradientStops.Add(new GradientStop(Colors.White, 0.9));
submit.Background = buttonBrush;
submit.FontSize = 14;
submit.FontWeight = FontWeights.Bold;
为控件创建样式
利用 WPF,通过创建 Style,您可以同时为许多控件指定相同的外观,而不是在应用程序中设置每个实例的属性。 下面的示例创建一个 Style,
它可以应用于应用程序中的每个 Button。Style 定义通常是在 ResourceDictionary(例如 FrameworkElement 的 Resources)中以
XAML 形式定义的。
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="Green" Offset="0.0" />
<GradientStop Color="White" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
通过将键分配给样式并在控件的 Style 属性中指定该键,还可将样式仅应用于某些特定类型的控件。
创建 ControlTemplate
利用 Style,可以一次为多个控件设置属性,但有时除了通过创建 Style 可执行的操作之外,您可能想要自定义 Control 的外观。从 Control
类继承的类具有 ControlTemplate,它用于定义 Control 的结构和外观。 Control 的 Template 属性是公共的,因此您可以为 Control 指
定非默认 ControlTemplate。通常,您可以为 Control 指定新的 ControlTemplate(而不是从控件继承)以自定义 Control 的外观。
请考虑一个很常用的控件 Button。 Button 的主要行为是当用户单击它时让应用程序实现某些操作。 默认情况下,WPF 中的 Button 显
示为一个凸出的矩形。 开发应用程序时,您可能会希望利用 Button 的行为(即通过处理按钮的单击事件),不过,除了通过更改按钮的属
性可以执行的操作外,您也可以更改按钮的外观。 在这种情况下,您可以创建新 ControlTemplate。
下面的示例创建 Button 的 ControlTemplate。 ControlTemplate 创建一个带圆角和渐变背景的 Button。 ControlTemplate 包含一
个 Border,其 Background 为 LinearGradientBrush,它具有两个 GradientStop 对象。 第一个 GradientStop 使用数据绑定将
GradientStop 的 Color 属性绑定到按钮背景的颜色。 当设置 Button 的 Background 属性时,该值的颜色将用作第一个
GradientStop。此示例还创建一个 Trigger,用于在 IsPressed 为 true 时更改 Button
的外观。
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Border"
CornerRadius="20"
BorderThickness="1"
BorderBrush="Black">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="{Binding Background.Color,
RelativeSource={RelativeSource TemplatedParent}}"
Offset="0.0" />
<GradientStop Color="White" Offset="0.9" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<!--Change the appearance of
the button when the user clicks it.-->
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="{Binding Background.Color,
RelativeSource={RelativeSource TemplatedParent}}"
Offset="0.0" />
<GradientStop Color="DarkSlateGray" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName"
Background="Green">View message</Button>
注意:
为使此示例正常工作,Button 的 Background 属性必须设置为 SolidColorBrush。