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

Contenido del Módulo1. Controles de Disposición

2. Controles de Contenido

3. Controles de Ítems

1. Controles de Disposición1. Canvas

2. StackPanel

3. WrapPanel

4. DockPanel

5. Grid

6. UniformGrid

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

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

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

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

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

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

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

2. Controles de Contenido1. Button

2. CheckBox

3. RadioButton

4. Label

5. GroupBox

6. Expander

ButtonIndica 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" />

CheckBoxIndica un estado positivo, negativo o indeterminado

<CheckBox>Valor 1</CheckBox> <CheckBox IsChecked="True">Valor 2</CheckBox> <CheckBox IsChecked="{x:Null}">Valor 3</CheckBox>

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

LabelContiene texto de solo lectura

<Label Content="_Nombre:" Target="{Binding ElementName=textBox1}" /> <TextBox Name="textBox1"/>

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

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

3. Controles de Ítems1. ComboBox

2. ListBox

3. Menu

4. ContextMenu

5. StatusBar

6. ToolBar

7. TabControl

8. TreeView

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

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

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

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

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

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

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

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