Este documento describe seis tipos de controles comúnmente usados en aplicaciones WPF (Windows Presentation Foundation): controles de ventana, controles de diseño, controles de presentación de datos, controles de edición de texto, controles de selección y controles de acción. Para cada tipo de control, se proporcionan dos ejemplos ilustrativos con código XAML y C#.

1. TIPO DE CONTROLES
En la siguiente investigación de la materia Desarrollo de aplicaciones con Software
Propietario mostramos seis tipos de controles que se utilizan en las aplicaciones WPF
(Windows Presentation Foundation), además dos ejemplos de cada control.
CONTROLES DE VENTANA
Cuando se crea una aplicaciónenWPF, el primerelementoes con la clase Window.Esta sirve
como raíz de la ventana y provee algunos elementos estándar comoun borde, una barra de
títulos, y los botones de control de ventana. Una ventana de WPF es una combinación de un
archivo XAML (.xaml), donde el elemento <Window> es la raíz, y este contiene un archivo
CodeBehind(.cs).Si estásutilizandoVisual Studio(Express) ycreasuna nueva aplicaciónWPF,
el IDE generará una ventana por defecto que se verá de la siguiente forma:
EJEMPLOS
1- En este ejemplo, Markup And Code Behind Window se crea una instancia del al
iniciarse la aplicación, que se produce cuando Startup se genera el evento.
usingSystem.Windows;
namespace SDKSample
{
publicpartial classApp: Application
{
voidapp_Startup(objectsender,StartupEventArgse)
{
//Create a window
MarkupAndCodeBehindWindow window =new MarkupAndCodeBehindWindow();
//Opena window
window.Show();
}
}

2. }
La ventana se abre finalmente llamando al Show método; el resultado se muestra en la
ilustración siguiente.
2- Ejemplo donde usames, el Menú WPF viene con un control preciso para crear
menús llamado Menú. Agregar items es muy simple - simplemente agregas los
elementos del MenuItem a él, y cada MenuItem puede tener una gama de Sub-
Items, permitiéndo crear menús jerárquicos comolos de muchas aplicaciones de
Windows.:
<Window
x:Class="WpfTutorialSamples.Common_interface_controls.MenuSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MenuSample" Height="200" Width="200">
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File">
<MenuItem Header="_New" />
<MenuItem Header="_Open" />
<MenuItem Header="_Save" />
<Separator />
<MenuItem Header="_Exit" />
</MenuItem>
</Menu>
<TextBox AcceptsReturn="True" />
</DockPanel>
</Window>

3. CONTROLES DE DISEÑO
Los controles de diseño se utilizan para administrar el tamaño, las dimensiones, la posición
y la disposición de los elementos secundarios. Permite al control de WPF participar en
el diseño del formulario y recibir mensajes de teclado y de mouse.
EJEMPLOS
1- La siguiente definición de UserControl1 se muestra razonablemente en tiempo
de diseño pero se muestra como un tamaño fijo en tiempo de ejecución:
<UserControl x:Class="ExampleApplication3.UserControl1"
xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<Grid Background="LightCyan" />
</UserControl>
2- La siguiente definición de UserControl1se muestra como un punto en tiempo de
diseño pero se expande para llenar el padre Window en tiempo de ejecución:
<UserControl x:Class="ExampleApplication3.UserControl1"
xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml">

4. <Grid Background="LightCyan"/>
</UserControl>
CONTROLES DE PRESENTACION DE DATOS
Los controles de presentación de datos comprenden cómoy cuándo ocurren los cálculos de
diseño es esencial para crear interfaces de usuario en WPF
EJEMPLOS
1. El siguiente ejemplo muestra un diseño simple
<Grid Name="myGrid" Background="LightSteelBlue" Height="150">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Name="txt1" Margin="5" FontSize="16" FontFamily="Verdana"
Grid.Column="0" Grid.Row="0">Hello World!</TextBlock>
<Button Click="getLayoutSlot1" Width="125" Height="25" Grid.Column="0"
Grid.Row="1">Show Bounding Box</Button>
<TextBlock Name="txt2" Grid.Column="1" Grid.Row="2"/>
</Grid>
2. La ranura de diseño de TextBlock se traduce en una ruta mediante
el método GetLayoutSlot . Esta técnica puede ser útil para mostrar el cuadro
delimitador de un elemento.
Private Sub getLayoutSlot1(ByVal sender As Object, ByVal e As
RoutedEventArgs)
Dim myRectangleGeometry As New RectangleGeometry

5. myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1)
Dim myGeometryDrawing As New GeometryDrawing
Dim myPath As New Path
myPath.Data = myRectangleGeometry
myPath.Stroke = Brushes.LightGoldenrodYellow
myPath.StrokeThickness = 5
Grid.SetColumn(myPath, 0)
Grid.SetRow(myPath, 0)
myGrid.Children.Add(myPath)
txt2.Text = "LayoutSlot is equal to " +
LayoutInformation.GetLayoutSlot(txt1).ToString()
End Sub
CONTROLES DE EDICION DE TEXTO
El control TextBox es el control más básico para introducir texto en WPF, permitiendo al
usuario final escribirtextoplanoenuna sola línea para un formularioocomomúltipleslíneas
como en un editor de texto.
EJEMPLOS
1. En este ejemplo el control TextBox es algo tan usado que de hecho no se tiene
que usar propiedades en él para tener un campo de texto funcional.
<Window x:Class="WpfTutorialSamples.Basic_controls.TextBoxSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TextBoxSample" Height="80" Width="250">
<StackPanel Margin="10">
<TextBox />
</StackPanel>
</Window>
2. Ejemplo dos, corregir errores ortográficos: Funciona igual a Microsoft Word,
donde los errores ortográficos son subrayados y puede hacer clic derecho para
alternativas sugeridas

6. <Window x:Class="WpfTutorialSamples.Basic_controls.TextBoxSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TextBoxSample" Height="160" Width="280">
<Grid Margin="10">
<TextBox AcceptsReturn="True" TextWrapping="Wrap"
SpellCheck.IsEnabled="True" Language="en-US" />
</Grid>
</Window>
CONTROLES DE SELECCION
Los controles de selección se utilizan para permitir que un usuario seleccione una o más
opciones. El control ComboBoxes parecido al control ListBox en muchos sentidos, pero usa
mucho menos espacio, ya que la lista de ítems se encuentra oculta cuando no se necesita.
El control ComboBox es usado en muchos lugares dentro de Windows, pero para
asegurarnos que todos saben cómo luce y cómo opera.
EJEMPLOS
1. En ejemploquesemuestra a continuaciónse encuentra activadoel control al haberle
hecho clic, lo que ocasiona que despliegue la lista de ítems. Como se puede ver en
el código, el ComboBox, en su forma simple es muy fácil de usar.
<Window x:Class="WpfTutorialSamples.ComboBox_control.ComboBoxSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ComboBoxSample" Height="150" Width="200">
<StackPanel Margin="10">
<ComboBox>
<ComboBoxItem>ComboBox Item #1</ComboBoxItem>

7. <ComboBoxItem IsSelected="True">ComboBox Item #2</ComboBoxItem>
<ComboBoxItem>ComboBox Item #3</ComboBoxItem>
</ComboBox>
</StackPanel>
</Window>
2. En el siguiente ejemplo se obtiene la lista de todos los colores utilizando un enfoque
basado en Reflection con la clase Colors. Se asigna la lista a la
propiedad ItemsSource del ComboBox, el cual entonces representa cada color
utilizando la plantilla que he definido en la porción XAML.
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
namespace WpfTutorialSamples.ComboBox_control
{
public partial class ComboBoxDataBindingSample : Window
{
public ComboBoxDataBindingSample()
{
InitializeComponent();
cmbColors.ItemsSource = typeof(Colors).GetProperties();
}
}
}

8. CONTROLES DE ACCION
Los comandos permiten definir acciones en un único sitio, para posteriormente referirse a
ellas desde cualquier control de la interfazde usuario (elementos de un menú, botones, etc).
También es posible asociar atajos de teclado a los comandos, siendo éste método la forma
ideal de ofrecer atajos de teclado en las aplicaciones.
EJEMPLOS
1. En este ejemplo el uso la propiedad de Encabezado para definir la etiqueta del
elemento, y se nota el guion bajo antes de cada primer letra de cada etiqueta. Le
dice a WPF que use ese carácter como la tecla de acelerador, lo que significa que el
usuario puede presionar la tecla ALT seguido de un carácter dado, para activar el
elemento del Menú. Esto funciona desde el Item de Nivel superior, hasta lo más bajo
dela jerarquía,se podrá presionarAlt,yluego F y luego N, para activarel item Nuevo.
<Windowx:Class="WpfTutorialSamples.Common_interface_controls.MenuIconCheckableSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MenuIconCheckableSample"Height="150"Width="300">
<DockPanel>
<MenuDockPanel.Dock="Top">
<MenuItemHeader="_File">
<MenuItemHeader="_Exit"/>
</MenuItem>

9. <MenuItemHeader="_Tools">
<MenuItemHeader="_Manage users">
<MenuItem.Icon>
<Image Source="/WpfTutorialSamples;component/Images/user.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItemHeader="_Show groups"IsCheckable="True"IsChecked="True"/>
</MenuItem>
</Menu>
<TextBox AcceptsReturn="True"/>
</DockPanel>
</Window>
2. Para el manejo de click. Cuando el usuario hace clic en un elemento de menú,
generalmente querrá que pase algo. La forma más fácil es simplemente agregar un
controlador de evento click al MenuItem, Como esto:
<MenuItem Header="_New" Click="mnuNew_Click" />
private void mnuNew_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("New");
}