WPF Layout Containers

WPF Layout Containers Panels, Tab Containers ,[object Object],[object Object],[object Object],[object Object],[object Object]

Table of Contents ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Containers Overview What is a Container? Containers in XAML

What is a Container? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Containers in WPF ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Containers in WPF (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Canvas Container ,[object Object],[object Object],[object Object],[object Object],[object Object]

The Canvas Container (2) ,[object Object],[object Object],[object Object],<Canvas> <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="Red" Width="100" Height="100"/> … </Canvas>

The Canvas Container (3) ,[object Object],[object Object],[object Object],[object Object],[object Object]

The Canvas Container – Example < Canvas Background="White" Height="680"> <Rectangle Canvas.Left="0" Canvas.Top="0" Fill="Red" Width="100" Height="100" Canvas.ZIndex ="3" /> <Rectangle Canvas.Left="20" Canvas.Top="20" Fill="Orange" Width="100" Height="100" Canvas.ZIndex ="2" /> <Canvas Canvas.Left="300" Canvas.Top="300" Canvas.ZIndex ="1"> <Rectangle Width="120" Height="330" RadiusX="20" RadiusY="20" Fill="Black"/> <Ellipse Canvas.Left="10" Canvas.Top="10" Width="100" Height="100" Fill="Red"/> </Canvas> </Canvas>

Customize the Z-order and Multiple Canvas Elements Live Demo

Stacking Panels StackPanel, DockPanel, Wrap Panel

StackPanel ,[object Object],[object Object],[object Object],[object Object],[object Object],<StackPanel> <TextBlock Text="Text" Background="Yellow"/> <TextBlock Text="Text" Background="Blue"/> </StackPanel>

WrapPanel ,[object Object],[object Object],[object Object],[object Object],<WrapPanel> <TextBlock Text="Text" Background="Yellow"/> <TextBlock Text="Text" Background="Blue"/> <TextBlock Text="Text" Background="Yellow"/> <TextBlock Text="Text" Background="Blue"/> </WrapPanel>

DockPanel ,[object Object],[object Object],[object Object],[object Object],<DockPanel LastChildFill="True"> <Button Content="Top" DockPanel.Dock="Top"/> <Button Content="Bottom" DockPanel.Dock="Bottom"/> <Button Content="Left"/> <Button Content="Right" DockPanel.Dock="Right"/> <Button Content=" LastChildFill=True "/> </DockPanel>

Proportional Panels Grid and UniformGrid

Grid Panel ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Grid Panel (2) ,[object Object],[object Object],[object Object],<Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="50" /> </Grid.ColumnDefinitions>

Grid Panel (3) ,[object Object],<Grid> … <Button Grid.Row="0" Grid.Column="0" Content="{0, 0}"/> <Button Grid.Row="0" Grid.Column="1" Content="{0, 1}"/> <Button Grid.Row="1" Grid.Column="0" Content="{1, 0}"/> <Button Grid.Row="1" Grid.Column="1" Content="{1, 1}"/> <Button Grid.Row="2" Grid.Column="0" Content="{2, 0}"/> <Button Grid.Row="2" Grid.Column="1" Content="{2, 1}"/> </Grid>

UniformGrid Panel ,[object Object],[object Object],[object Object],[object Object],[object Object],<UniformGrid Rows="3"> <Button Content="First"/> … <Button Content="Seventh"/> </UniformGrid>

GridSplitter ,[object Object],[object Object],[object Object],<Grid Height="100" Width="400"> <Grid.ColumnDefinitions>…</Grid.ColumnDefinitions> <Ellipse Grid.Column="0" Fill="Red" /> <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" /> <Ellipse Grid.Column="2" Fill="Blue" /> </Grid>

Sizing ,[object Object],[object Object],[object Object],<StackPanel> <Button Content="First" Margin="1" Padding="5" Height="50" Width="Auto"/> … <Button Content="Fifth" Margin="5" Padding="1" Height="50" Width="Auto"/> </StackPanel>

Border Container ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Border Example ,[object Object],<Window … WindowStyle="None"/> <Border BorderThickness="5" Background="Transparent" CornerRadius="10"> <Border.BorderBrush> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="Blue" Offset="0.2"/> <GradientStop Color="DarkBlue" Offset="0.8"/> </LinearGradientBrush> </Border.BorderBrush> … </Border> Lets have no Windows Border

TabContol ,[object Object],[object Object],[object Object],<TabControl> <TabItem Header="Tab 1">Content for Tab1.</TabItem> <TabItem Header="Tab 2">Content for Tab2.</TabItem> <TabItem Header="Tab 3">Content for Tab3.</TabItem> </TabControl>

Exercises ,[object Object],[object Object]

Exercises (2) ,[object Object],[object Object]

Exercises (3) ,[object Object],[object Object]

WPF Layout Containers

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a WPF Layout Containers

Similar a WPF Layout Containers (20)

Más de Doncho Minkov

Más de Doncho Minkov (20)

Último

Último (20)

WPF Layout Containers

Notas del editor