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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie WPF Layout Containers

Ähnlich wie WPF Layout Containers (20)

Mehr von Doncho Minkov

Mehr von Doncho Minkov (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

WPF Layout Containers

Hinweis der Redaktion