Visão geral sobre controles
O Windows Presentation Foundation (WPF) vem com muitos dos componentes comuns de interface do usuário que são usados em quase todos os aplicativos Windows, tais como Button, Label, TextBox, Menu e ListBox. Historicamente, esses objetos tem sido chamados controles. Enquanto o SDK do WPF continua a usar o termo "controle" para descrever qualquer classe que represente um objeto visível em um aplicativo, é importante observar que uma classe não precise herdar da classe Control para ter uma presença visível. As classes que herdam da classe Control contém um ControlTemplate, que permite que o consumidor de um controle altere radicalmente a aparência do controle sem ter de criar uma nova subclasse. Este tópico discute como controles (tanto aqueles que herdam da classe Control quanto os que não) são normalmente usados no WPF.
Criando uma instância de um controle
Você pode adicionar um controle a um aplicativo usando Extensible Application Markup Language (XAML) ou código. O exemplo a seguir mostra como criar um aplicativo simples que solicita a um usuário seu nome e sobrenome. Este exemplo cria seis controles: dois rótulos, duas caixas de texto e dois botões, XAML. Todos os controles podem ser criados de forma semelhante.
<Grid>
<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>
O exemplo a seguir cria o mesmo aplicativo em código. Por questões de brevidade, a criação do Grid, grid1, foi excluída da amostra. grid1 tem sistema autônomo mesmas definições de coluna e linha, sistema autônomo mostrado na anterior XAML exemplo.
Private firstNameLabel As Label
Private lastNameLabel As Label
Private firstName As TextBox
Private lastName As TextBox
Private submit As Button
Private clear As Button
Sub 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)
End Sub 'CreateControls
Label firstNameLabel;
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);
}
Alterando a aparência de um controle
É comum alterar a aparência de um controle para se ajustar a aparência do seu aplicativo. Você pode alterar a aparência de um controle através de um dos itens a seguir, dependendo do que você deseja realizar:
Alterar o valor de uma propriedade do controle.
Criar um Style para o controle.
Criar um novo ControlTemplate para o controle.
Alterar o valor de uma propriedade do controle
Muitos controles têm propriedades que permitem que você altere a aparência do controle, como o Background de um Button. Você pode definir as propriedades valor tanto em XAML quanto em código. O exemplo a seguir define as propriedades Background, FontSize e FontWeight de um Button em XAML.
<Button FontSize="14" FontWeight="Bold">
<!--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>
O exemplo a seguir define as mesmas propriedades em código.
Dim buttonBrush As New LinearGradientBrush()
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
LinearGradientBrush buttonBrush = new LinearGradientBrush();
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;
Criando um estilo para um controle
O WPF permite especificar a aparência de controles como um todo, em vez de definir propriedades em cada instância no aplicativo, criando-se um Style. O exemplo a seguir cria um Style que é aplicado a cada Button no aplicativo. Definições de Style geralmente são definidas em XAML em um ResourceDictionary, tal como a propriedade Resources de FrameworkElement.
<Style TargetType="Button">
<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>
Você também pode aplicar um estilo somente a certos controles de um tipo específico ao atribuir uma chave ao estilo e especificando essa chave na propriedade Style do controle. Para obter mais informações sobre estilos, consulte Styling and Templating.
Criando um ControlTemplate
Um Style permite que você defina propriedades em vários controles de cada vez, mas talvez você deseje personalizar a aparência de um Control além do que se pode fazer com um Style. Classes que herdam da classe Control têm um ControlTemplate, que define a estrutura e aparência de um Control. A propriedade Template de um Control é pública, portanto, você pode fornecer a um Control um ControlTemplate que seja diferente do padrão. Você frequentemente pode especificar um novo ControlTemplate para um Control em vez de herdar de um controle para personalizar a aparência de um Control.
Considere o controle muito comum Button. O comportamento primário de um Button é tornar possível que um aplicativo execute alguma ação quando o usuário clica nele. Por padrão, o Button no WPF aparece como um retângulo elevado. Ao desenvolver um aplicativo, você pode deseja aproveitar o comportamento de um Button -- ou seja, o tratamento do evento de clique no botão -- mas você pode alterar a aparência do botão além do que você pode fazer apenas alterando propriedades do botão. Nesse caso, você pode criar um novo ControlTemplate.
O exemplo a seguir cria um ControlTemplate para um Button. O ControlTemplate cria um Button com cantos arredondados e com plano de fundo em dégradé. O ControlTemplate contém uma Border cujo Background é um LinearGradientBrush com dois objetos GradientStop. O primeiro GradientStop usa associação de dados para associar a propriedade Color do GradientStop com a cor do plano de fundo do botão. Quando você define a propriedade Background do Button, a cor desse valor será usada como o primeiro GradientStop. Para obter mais informações, consulte Revisão de Associação de Dados. O exemplo também cria um Trigger que altera a aparência do Button quando IsPressed é true.
<!--Define a template that creates a gradient-colored 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>
.gif "Observação") Observação: |
|---|
O Background propriedade das Button deve ser conjunto para um SolidColorBrush Por exemplo funcione corretamente. |
Inscrevendo-se em Eventos
Você pode se inscrever para receber um evento de controle usando tanto XAML quanto código, mas você só pode tratar um evento em código. O exemplo a seguir mostra como se inscrever para receber o evento Click de um Button.
<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName" Click="submit_Click"
Background="Green">View message</Button>
AddHandler submit.Click, AddressOf submit_Click
submit.Click += new RoutedEventHandler(submit_Click);
O exemplo a seguir trata o evento Click de um Button.
Private Sub submit_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text)
End Sub 'submit_Click
void submit_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text);
}
Conteúdo rico em controles
A maioria das classes que herda da classe Control tem capacidade para conter conteúdo rico. Por exemplo, um Label pode conter qualquer objeto, como uma sequência de caracteres, uma Image ou um Panel. As classes a seguir oferecem suporte a conteúdo rico e atuam como classes base para a maioria dos controles no WPF.
ContentControl -- Alguns exemplos de classes que herdam dessa classe são Label, Button e ToolTip.
ItemsControl -- Alguns exemplos de classes que herdam dessa classe são ListBox, Menu e StatusBar.
HeaderedContentControl -- Alguns exemplos de classes que herdam dessa classe são TabItem, GroupBox e Expander.
HeaderedItemsControl -- Alguns exemplos de classes que herdam dessa classe são MenuItem, TreeViewItem e ToolBar.
Para obter mais informações sobre essas classes, consulte Visão geral de Controles de Modelos de Conteúdo.
Consulte também
Tarefas
Conceitos
Visão geral sobre Templating de dados
Revisão de Associação de Dados