ControlesControls

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) incluye muchos de los componentes de interfaz de usuario comunes que se usan en casi todas las aplicaciones de Windows, como Button, Label, TextBox, Menuy ListBox.Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) ships with many of the common UI components that are used in almost every Windows application, such as Button, Label, TextBox, Menu, and ListBox. Históricamente, estos objetos se han denominado controles.Historically, these objects have been referred to as controls. Aunque el SDK de WPFWPF sigue usando el término "control" para referirse a cualquier clase que represente un objeto visible en una aplicación, es importante tener en cuenta que una clase no necesita heredar de la clase Control para tener una presencia visible.While the WPFWPF SDK continues to use the term "control" to loosely mean any class that represents a visible object in an application, it is important to note that a class does not need to inherit from the Control class to have a visible presence. Las clases que heredan de la clase Control contienen un ControlTemplate, que permite al consumidor de un control cambiar radicalmente la apariencia del control sin tener que crear una nueva subclase.Classes that inherit from the Control class contain a ControlTemplate, which allows the consumer of a control to radically change the control's appearance without having to create a new subclass. En este tema se describe cómo se utilizan normalmente los controles (tanto los que heredan de la clase Control como los que no) en WPFWPF.This topic discusses how controls (both those that do inherit from the Control class and those that do not) are commonly used in WPFWPF.

Creación de una instancia de un controlCreating an Instance of a Control

Puede Agregar un control a una aplicación mediante Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML) o código.You can add a control to an application by using either Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML) or code. En el ejemplo siguiente se muestra cómo crear una aplicación simple que pide al usuario su nombre y su apellido.The following example shows how to create a simple application that asks a user for their first and last name. En este ejemplo se crean seis controles: dos etiquetas, dos cuadros de texto y dos botones, en XAMLXAML.This example creates six controls: two labels, two text boxes, and two buttons, in XAMLXAML. Todos los controles se pueden crear de igual forma.All controls can be created similarly.

<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>

En el ejemplo siguiente se crea la misma aplicación mediante código.The following example creates the same application in code. Por motivos de brevedad, la creación de la Grid, grid1, se ha excluido del ejemplo.For brevity, the creation of the Grid, grid1, has been excluded from the sample. grid1 tiene las mismas definiciones de columna y fila que se muestran en el ejemplo anterior XAMLXAML.grid1 has the same column and row definitions as shown in the preceding XAMLXAML example.

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);

}
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

Cambio de la apariencia de un controlChanging the Appearance of a Control

Es común cambiar la apariencia de un control para ajustarlo a la apariencia de la aplicación.It is common to change the appearance of a control to fit the look and feel of your application. Puede cambiar la apariencia de un control mediante una de las acciones siguientes, dependiendo de lo que desea realizar:You can change the appearance of a control by doing one of the following, depending on what you want to accomplish:

  • Cambiar el valor de una propiedad del control.Change the value of a property of the control.

  • Cree un Style para el control.Create a Style for the control.

  • Cree un nuevo ControlTemplate para el control.Create a new ControlTemplate for the control.

Cambiar el valor de propiedad de un controlChanging a Control's Property Value

Muchos controles tienen propiedades que le permiten cambiar el modo en que aparece el control, como el Background de un Button.Many controls have properties that allow you to change how the control appears, such as the Background of a Button. Puede establecer las propiedades de valor en XAMLXAML y en el código.You can set the value properties in both XAMLXAML and code. En el ejemplo siguiente se establecen las propiedades Background, FontSizey FontWeight en un Button de XAMLXAML.The following example sets the Background, FontSize, and FontWeight properties on a Button in XAMLXAML.

<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>

En el ejemplo siguiente se establecen las mismas propiedades mediante código.The following example sets the same properties in code.

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;
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

Crear un estilo para un controlCreating a Style for a Control

WPFWPF ofrece la posibilidad de especificar la apariencia de los controles de forma mayorista, en lugar de establecer las propiedades en cada instancia de la aplicación mediante la creación de un Style.gives you the ability to specify the appearance of controls wholesale, instead of setting properties on each instance in the application, by creating a Style. En el ejemplo siguiente se crea un Style que se aplica a cada Button de la aplicación.The following example creates a Style that is applied to each Button in the application. las definiciones de Style se definen normalmente en XAMLXAML en un ResourceDictionary, como la propiedad Resources del FrameworkElement.Style definitions are typically defined in XAMLXAML in a ResourceDictionary, such as the Resources property of the 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>

También puede aplicar un estilo a ciertos controles de un tipo específico asignando una clave al estilo y especificando esa clave en la Style propiedad del control.You can also apply a style to only certain controls of a specific type by assigning a key to the style and specifying that key in the Style property of your control. Para obtener más información sobre los estilos, vea aplicar estilos y plantillas.For more information about styles, see Styling and Templating.

Creación de una plantilla de controlCreating a ControlTemplate

Una Style permite establecer propiedades en varios controles a la vez, pero en ocasiones puede ser conveniente personalizar la apariencia de un Control más allá de lo que se puede hacer creando una Style.A Style allows you to set properties on multiple controls at a time, but sometimes you might want to customize the appearance of a Control beyond what you can do by creating a Style. Las clases que heredan de la clase Control tienen un ControlTemplate, que define la estructura y la apariencia de una Control.Classes that inherit from the Control class have a ControlTemplate, which defines the structure and appearance of a Control. La propiedad Template de una Control es pública, por lo que puede asignar a una Control un ControlTemplate que sea diferente de su valor predeterminado.The Template property of a Control is public, so you can give a Control a ControlTemplate that is different than its default. A menudo, se puede especificar un nuevo ControlTemplate para un Control en lugar de heredar de un control para personalizar la apariencia de un Control.You can often specify a new ControlTemplate for a Control instead of inheriting from a control to customize the appearance of a Control.

Tenga en cuenta el control muy común Button.Consider the very common control, Button. El comportamiento principal de un Button es permitir que una aplicación realice alguna acción cuando el usuario hace clic en él.The primary behavior of a Button is to enable an application to take some action when the user clicks it. De forma predeterminada, el Button en WPFWPF aparece como un rectángulo elevado.By default, the Button in WPFWPF appears as a raised rectangle. Al desarrollar una aplicación, es posible que quiera aprovechar el comportamiento de un Button, es decir, controlar el evento click del botón, pero puede cambiar la apariencia del botón más allá de lo que puede hacer si cambia las propiedades del botón.While developing an application, you might want to take advantage of the behavior of a Button--that is, by handling the button's click event--but you might change the button's appearance beyond what you can do by changing the button's properties. En este caso, puede crear un nuevo ControlTemplate.In this case, you can create a new ControlTemplate.

En el ejemplo siguiente se crea un ControlTemplate para un Button.The following example creates a ControlTemplate for a Button. El ControlTemplate crea un Button con esquinas redondeadas y un fondo degradado.The ControlTemplate creates a Button with rounded corners and a gradient background. El ControlTemplate contiene una Border cuya Background es una LinearGradientBrush con dos objetos GradientStop.The ControlTemplate contains a Border whose Background is a LinearGradientBrush with two GradientStop objects. La primera GradientStop utiliza el enlace de datos para enlazar la propiedad Color de la GradientStop al color del fondo del botón.The first GradientStop uses data binding to bind the Color property of the GradientStop to the color of the button's background. Cuando establezca la propiedad Background del Button, el color de ese valor se utilizará como primer GradientStop.When you set the Background property of the Button, the color of that value will be used as the first GradientStop. Para más información sobre el enlace de datos, consulte Información general sobre el enlace de datos.For more information about data binding, see Data Binding Overview. En el ejemplo también se crea un Trigger que cambia la apariencia del Button cuando se trueIsPressed.The example also creates a Trigger that changes the appearance of the Button when IsPressed is 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>

Nota

La propiedad Background de la Button debe establecerse en un SolidColorBrush para que el ejemplo funcione correctamente.The Background property of the Button must be set to a SolidColorBrush for the example to work properly.

Suscripción a eventosSubscribing to Events

Puede suscribirse al evento de un control mediante XAMLXAML o código, pero solo puede controlar un evento en el código.You can subscribe to a control's event by using either XAMLXAML or code, but you can only handle an event in code. En el ejemplo siguiente se muestra cómo suscribirse al evento Click de un Button.The following example shows how to subscribe to the Click event of a Button.

<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName" Click="submit_Click"
  Background="Green">View message</Button>
submit.Click += new RoutedEventHandler(submit_Click);
AddHandler submit.Click, AddressOf submit_Click

En el ejemplo siguiente se controla el evento de Click de una Button.The following example handles the Click event of a Button.

void submit_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text);
}
Private Sub submit_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text)

End Sub

Contenido enriquecido en los controlesRich Content in Controls

La mayoría de las clases que heredan de la clase Control tienen la capacidad de incluir contenido enriquecido.Most classes that inherit from the Control class have the capacity to contain rich content. Por ejemplo, un Label puede contener cualquier objeto, como una cadena, un Imageo un Panel.For example, a Label can contain any object, such as a string, an Image, or a Panel. Las siguientes clases proporcionan compatibilidad con contenido enriquecido y actúan como clases base para la mayoría de los controles de WPFWPF.The following classes provide support for rich content and act as base classes for most of the controls in WPFWPF.

Para obtener más información sobre estas clases base, vea modelo de contenido de WPF.For more information about these base classes, see WPF Content Model.

Vea tambiénSee also