WPF 03 - controles WPF
0 recomendaciones385 vistas
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.
WPF 03 - controles WPF
- 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>