Este documento describe los principales controles de disposición, contenido e ítems en WPF. Explica controles como Canvas, StackPanel, Grid y Button que permiten diseñar interfaces, así como ComboBox, ListBox y TreeView que muestran datos de forma jerárquica.

1. Controles WPF
D A N A E A G U I L A R G U Z M Á N .
M C T , M C P , M C T S
D A N A E A G U I L A R @ G M A I L . C O M

2. Contenido del Módulo
1. Controles de Disposición
2. Controles de Contenido
3. Controles de Ítems

3. 1. Controles de Disposición
1. Canvas
2. StackPanel
3. WrapPanel
4. DockPanel
5. Grid
6. UniformGrid

4. Canvas
Para posiciones especificas (X,Y)
<Canvas>
<Button Canvas.Left="100" Canvas.Top="50"
Content="_Aceptar" Height="23" Width="75" />
<Button Canvas.Left="190" Canvas.Top="50"
Content="_Cancelar" Height="23" Width="75" />
</Canvas>

5. StackPanel
Para apilar contenido verticalmente u horizontalmente
<StackPanel>
<Button Content="Botón #1" Background="Red" Width="90"/>
<Button Content="Botón #2" Background="Yellow" Width="90"/>
<Button Content="Botón #3" Background="Green" Width="90"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Content="Botón #1" Background="Red" Height="30"/>
<Button Content="Botón #2" Background="Yellow" Height="30"/>
<Button Content="Botón #3" Background="Green" Height="30"/>
</StackPanel>

6. WrapPanel
Acomoda el contenido secuencialmente
<WrapPanel>
<Button Content="Botón #1" Background="Red"/>
<Button Content="Botón #2" Background="Yellow"/>
<Button Content="Botón #3" Background="Green"/>
<Button Content="Botón #4"/>
<Button Content="Botón #5"/>
<Button Content="Botón #6"/>
</WrapPanel>
<WrapPanel Orientation="Vertical">
<Button Content="Botón #1" Background="Red"/>
<Button Content="Botón #2" Background="Yellow"/>
<Button Content="Botón #3" Background="Green"/>
<Button Content="Botón #4"/>
<Button Content="Botón #5"/>
<Button Content="Botón #6"/>
</WrapPanel>

7. DockPanel
Acopla los controles hacia arriba, abajo, izquierda o derecha del panel
<DockPanel>
<Button Content="Botón #1 TOP" Background="Red" DockPanel.Dock="Top"/>
<Button Content="Botón #2 BOTTOM" Background="Yellow" DockPanel.Dock="Bottom"/>
<Button Content="Botón #3 LEFT" Background="Green" DockPanel.Dock="Left"/>
<Button Content="Botón #4 RIGHT" DockPanel.Dock="Right"/>
<Button Content="Botón #5" />
</DockPanel>

8. Grid
1. Acomoda los controles en filas y columnas
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Content="Botón #1" Background="Red" />
<Button Content="Botón #2" Background="Yellow" Grid.Column="1" Grid.Row="1"/>
<Button Content="Botón #3" Background="Green" Grid.Column="2" Grid.Row="2" />
<Button Content="Botón #4" Grid.Row="2"/>
<Button Content="Botón #5" Grid.Column="2"/>
</Grid>

9. Grid - GridSplitter
Podemos agregar un splitter al Grid: GridSplitter
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button>botón #1</Button>
<Button Grid.Row="1">botón #2</Button>
<GridSplitter Grid.RowSpan="2" Width="5"
Grid.Column="1" HorizontalAlignment="Left"/>
<Button Grid.Column="2">botón #3</Button>
<Button Grid.Column="2" Grid.Row="1">botón #4</Button>
</Grid>

10. UniformGrid
Todas sus filas y columnas tienen el mismo tamaño
<UniformGrid Columns="2" Rows="4" Background="CadetBlue">
<Button Content="Botón #1" Background="Red" />
<Button Content="Botón #2" Background="Yellow" />
<Button Content="Botón #3" Background="Green" />
<Button Content="Botón #4"/>
<Button Content="Botón #5"/>
</UniformGrid>

11. 2. Controles de Contenido
1. Button
2. CheckBox
3. RadioButton
4. Label
5. GroupBox
6. Expander

12. Button
Indica un área que puede ser clickeada
<Button Content="Hacer Click!" Click="button_Click" />
<Button Content="_Aceptar" IsDefault="True" Click="button1_Click" />
<Button Content="_Cancelar" IsCancel="True" Click="button2_Click" />

13. CheckBox
Indica un estado positivo, negativo o indeterminado
<CheckBox>Valor 1</CheckBox>
<CheckBox IsChecked="True">Valor 2</CheckBox>
<CheckBox IsChecked="{x:Null}">Valor 3</CheckBox>

14. RadioButton
Permite la selección de un solo ítem en un grupo
<RadioButton>Si</RadioButton>
<RadioButton>No</RadioButton>
<RadioButton GroupName="grupo1" Margin="0,50,0,0">Blanco</RadioButton>
<RadioButton GroupName="grupo1">Negro</RadioButton>

15. Label
Contiene texto de solo lectura
<Label Content="_Nombre:" Target="{Binding ElementName=textBox1}" />
<TextBox Name="textBox1"/>

16. GroupBox
Dibuja una cabecera y un rectángulo alrededor de su contenido.
<GroupBox Header="Grupo 1" HorizontalAlignment="Center">
<StackPanel>
<Button>Botón #1</Button>
<Button>Botón #2</Button>
<Button>Botón #3</Button>
</StackPanel>
</GroupBox>

17. Expander
Tiene cabecera y puede expandir y colapsar su contenido
<Expander Header="Grupo 2" Background="LightBlue"
HorizontalAlignment="Center">
<StackPanel>
<Button>Botón #1</Button>
<Button>Botón #2</Button>
<Button>Botón #3</Button>
</StackPanel>
</Expander>

18. 3. Controles de Ítems
1. ComboBox
2. ListBox
3. Menu
4. ContextMenu
5. StatusBar
6. ToolBar
7. TabControl
8. TreeView

19. ComboBox
Muestra el elemento seleccionado de una lista que está oculta por
defecto
ComboBox.Text
IsReadOnly, IsEditable
<ComboBox Width="150">
<ComboBoxItem>Elemento 1</ComboBoxItem>
<ComboBoxItem>Elemento 2</ComboBoxItem>
<ComboBoxItem IsSelected="True">Elemento 3</ComboBoxItem>
<ComboBoxItem>Elemento 4</ComboBoxItem>
<ComboBoxItem Content="Elemento 5" />
<ComboBoxItem Content="Elemento 6" />
</ComboBox>

20. ListBox
Muestra los ítems de una lista a ser seleccionados
ListBox.SelectedIndex
ListBox.SelectedItem
<ListBox Width="150" Height="100" SelectionMode="Multiple">
<ListBoxItem>Elemento 1</ListBoxItem>
<ListBoxItem>Elemento 2</ListBoxItem>
<ListBoxItem IsSelected="True">Elemento 3</ListBoxItem>
<ListBoxItem IsSelected="True">Elemento 4</ListBoxItem>
<ListBoxItem Content="Elemento 5" />
<ListBoxItem Content="Elemento 6" />
</ListBox>

21. Menu
Permite construir menús que son estándar a las aplicaciones:
<Menu>
<MenuItem Header="_File">
<MenuItem Header="_Open" />
<MenuItem Header="_New" >
<MenuItem Header="_Project"/>
<MenuItem Header="_File"/>
</MenuItem>
</MenuItem>
<MenuItem Header="_Edit">
<MenuItem Command="ApplicationCommands.Copy" />
<MenuItem Command="ApplicationCommands.Paste" />
</MenuItem>
</Menu>

22. ContextMenu
Un menú que se muestra cuando el usuario hace Click derecho sobre
un control.<ListBox>
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Cortar" Command="ApplicationCommands.Cut"/>
<MenuItem Header="Copiar" Command="ApplicationCommands.Copy"/>
<MenuItem Header="Pegar" Command="ApplicationCommands.Paste"/>
</ContextMenu>
</ListBox.ContextMenu>
<TextBox>Elemento 1</TextBox>
<TextBox>Elemento 2</TextBox>
</ListBox>

23. StatusBar
Es igual que un ToolBar pero se usa para mostrar información
<StatusBar Height="32" VerticalAlignment="Bottom">
<Label>La aplicación esta cargando...</Label>
<Separator/>
<ProgressBar Height="20" Width="100" IsIndeterminate="True"/>
</StatusBar>

24. ToolBar
Contiene elementos que representan comandos o acciones
<ToolBar Height="26" VerticalAlignment="Top" FontFamily="Webdings">
<Button>9</Button>
<Button>7</Button>
<Button>;</Button>
<Button>4</Button>
<Button>8</Button>
<Button>:</Button>
<Separator/>
<TextBox FontFamily="Arial">Hola!</TextBox>
</ToolBar>

25. TabControl
Organiza los controles en diferentes paginas y solo muestra un tab a la
vez<TabControl>
<TabItem Header="Grupo 1">
<StackPanel>
<Button>Botón #1</Button>
<Button>Botón #2</Button>
<Button>Botón #3</Button>
</StackPanel>
</TabItem>
<TabItem Header="Grupo 2">
<StackPanel>
<Button>Botón #4</Button>
<Button>Botón #5</Button>
<Button>Botón #6</Button>
</StackPanel>
</TabItem>
</TabControl>

26. TreeView
Presenta una estructura jerárquica de padres e hijos (árbol)
<TreeView>
<TreeViewItem Header="Nodo padre">
<TreeViewItem.Items>
<TreeViewItem Header="Hijo 1"/>
<TreeViewItem Header="Hijo 2"/>
<TreeViewItem Header="Hijo 3"/>
</TreeViewItem.Items>
</TreeViewItem>
<TreeViewItem Header="Nodo padre 2" IsExpanded="True">
<CheckBox Content="Otro hijo 1"/>
<CheckBox Content="Otro hijo 2"/>
<CheckBox Content="Otro hijo 3"/>
</TreeViewItem>
</TreeView>