LayOuts in WPF

WPF Layouts spread in to five different types. They are Canvas,StackPanel,Wrappanel,Dockpanel and Grid. All layouts are fit for the specific requirements. Read the below Details for getting clear picture for different layouts.

Canvas Layout.

        This layout is used for designing the page based on the available space and Control angles. You can define the position based on Canvas properties like Left, Right etc. The another important(useful) property is Panel.ZIndex .It is used for aligning the Controls to top position.

 

       <Canvas>

            <Button Panel.ZIndex="1" Canvas.Left="10" Content="One">

            <Button Canvas.Left="10" Content="One"></Button>

            <Button Canvas.Right="10" Content="Two"></Button>

            <Button Canvas.Left="10" Canvas.Bottom="10" Content="Three"></Button>

            <Button Canvas.Right="10" Canvas.Bottom="10" Content="Four"></Button>

        </Canvas>

StackPanel Layout

       This layout is used for arranging the control in an equally fit in the available space. We align the control Horizontal or Vertical using Orientation

<StackPanel Orientation="Horizontal">

     <GroupBox >

        <Button Content="test"></Button>

     </GroupBox>

     <GroupBox  Background="Beige">

        <Button Content="test" Style="{StaticResource DialogButtonStyle}"></Button>

     </GroupBox>

     <GroupBox  Style="{StaticResource gdbox}">

        <Button Content="test"></Button>

     </GroupBox>

</StackPanel>

 

Wrap Panel Layout

       This layout is similar to the StackPanel ,the difference is it will not fill based on the available Space and it will automatically wrap to next line when control reach the last line.

<WrapPanel Orientation="Horizontal">

            <Button>0009090909</Button>

            <Button>000909090900909090999</Button>

            <Button>00090909090090909099999999999999999999</Button>

            <Button>00090909090090909099999999999999999999</Button>

</WrapPanel>

Dock Panel layout

                This layout is used for aligning the controls based on the positions like Left,right,Bottom & Top. Once we are not given any position it will fill the remaining area.

<DockPanel >

            <Button DockPanel.Dock="Right">1</Button>

            <Button DockPanel.Dock="Left">2</Button>

            <TextBox DockPanel.Dock="Top">test</TextBox>

            <TextBox DockPanel.Dock="Bottom">test2</TextBox>            <Button>22222222</Button>

        </DockPanel>

Grid Layout

       This layout very important and widely used one. This layout is similar to HTML table. The implementation is completely based on rows and columns.

<Grid>

    <Grid.RowDefinitions>

       <RowDefinition Height="0.878*"/>

       <RowDefinition Height="Auto"/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

       <ColumnDefinition Width="auto"></ColumnDefinition>

    </Grid.ColumnDefinitions>

<StackPanel Grid.RowSpan="2">

    <DataGrid x:Name="dg1" ItemsSource="{Binding People}" CanUserAddRows="False" HorizontalAlignment="Left"/>

   <TextBlock FontWeight="Bold" Margin="5" Text="The TestText property says '"><Run Text="{Binding TestText}"/><Run Text="'"/></TextBlock>

  <Button Content="Change Text" Command="{Binding ChangeTextCommand}" CommandParameter="{Binding SelectedItem, ElementName=dg1}"/>

</StackPanel>

</Grid>

 --Happy Doing