wpf 03 - controles wpf
TRANSCRIPT
![Page 1: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/1.jpg)
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
![Page 2: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/2.jpg)
Contenido del Módulo1. Controles de Disposición
2. Controles de Contenido
3. Controles de Ítems
![Page 3: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/3.jpg)
1. Controles de Disposición1. Canvas
2. StackPanel
3. WrapPanel
4. DockPanel
5. Grid
6. UniformGrid
![Page 4: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/4.jpg)
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>
![Page 5: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/5.jpg)
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>
![Page 6: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/6.jpg)
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>
![Page 7: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/7.jpg)
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>
![Page 8: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/8.jpg)
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>
![Page 9: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/9.jpg)
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>
![Page 10: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/10.jpg)
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>
![Page 11: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/11.jpg)
2. Controles de Contenido1. Button
2. CheckBox
3. RadioButton
4. Label
5. GroupBox
6. Expander
![Page 12: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/12.jpg)
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" />
![Page 13: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/13.jpg)
CheckBoxIndica un estado positivo, negativo o indeterminado
<CheckBox>Valor 1</CheckBox> <CheckBox IsChecked="True">Valor 2</CheckBox> <CheckBox IsChecked="{x:Null}">Valor 3</CheckBox>
![Page 14: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/14.jpg)
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>
![Page 15: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/15.jpg)
LabelContiene texto de solo lectura
<Label Content="_Nombre:" Target="{Binding ElementName=textBox1}" /> <TextBox Name="textBox1"/>
![Page 16: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/16.jpg)
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>
![Page 17: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/17.jpg)
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>
![Page 18: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/18.jpg)
3. Controles de Ítems1. ComboBox
2. ListBox
3. Menu
4. ContextMenu
5. StatusBar
6. ToolBar
7. TabControl
8. TreeView
![Page 19: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/19.jpg)
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>
![Page 20: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/20.jpg)
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>
![Page 21: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/21.jpg)
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>
![Page 22: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/22.jpg)
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>
![Page 23: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/23.jpg)
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>
![Page 24: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/24.jpg)
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>
![Page 25: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/25.jpg)
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>
![Page 26: WPF 03 - controles WPF](https://reader034.vdocument.in/reader034/viewer/2022042501/58e8bb1e1a28abc9058b4feb/html5/thumbnails/26.jpg)
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>