Logo 
Search:

WPF Articles

Submit Article
Home » Articles » WPF » XAMLRSS Feeds

Nesting of Layout in XAML

Posted By: Vivek Patel     Category: WPF     Views: 8899

This article will explain Nesting of Layout in XAML. A very simple tutorial to understand Nesting of Layout in XAML.

Understanding Nesting of Layout

  • Nesting of Layout is widely used to combine advantage of more than one layout.
  • Considering example of real world wherein we used grid layout for outlining and used stackpanel to display controls inside it.

Example of Nesting of Layout

In following example we would be combining Grid Layout + Stack Panel Layout.  This would give us effect of Table control and Span Control of HTML.

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="60"/>
        <RowDefinition Height="40"/>
        <RowDefinition Height="40"/>
        <RowDefinition Height="40"/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Label Content="Nesting Layout Demo" 
                FontSize="15" FontWeight="Bold"
                Foreground="Blue"
                Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"/>

    <StackPanel Grid.Column="0" Grid.Row="1" Orientation="Horizontal">
        <Label Content="Name" FontSize="15" FontWeight="Bold" />
        <TextBox Name="txtName" Text="Barack Obama" VerticalAlignment="Center"></TextBox>
    </StackPanel>

    <StackPanel Grid.Column="0" Grid.Row="2" Orientation="Horizontal">
        <Label Content="City" FontSize="15" FontWeight="Bold"/>
        <TextBox Name="txtCity" Text="New York" VerticalAlignment="Center"></TextBox>
    </StackPanel>

    <StackPanel Grid.Column="0" Grid.Row="3" Orientation="Horizontal">
        <Label Content="State" FontSize="15" FontWeight="Bold"/>
        <TextBox Name="txtState" Text="New York" VerticalAlignment="Center"></TextBox>
    </StackPanel>

    <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal">
        <Label Content="Country" FontSize="15" FontWeight="Bold"/>
        <TextBox Name="txtCountry" Text="USA" VerticalAlignment="Center"></TextBox>
    </StackPanel>
</Grid>

Output


Check out more Information on

  
Share: 

 
 
 

Didn't find what you were looking for? Find more on Nesting of Layout in XAML Or get search suggestion and latest updates.

Vivek Patel
Vivek Patel author of Nesting of Layout in XAML is from United States. Vivek Patel says

I have started working in .Net Technology since its beta release and lucky to got chance to work on .Net 1.1, 2.0 and now working on .Net 3.5. I have worked in both C# and VB.Net for Asp.net Projects. I can also provide Sharepoint development needs. I can efficiently switch role from Tech Lead and Developer. I have comprehensive knowledge of Asp.net Development. I have been award Microsoft Most Valuable Award twice in Asp.net Technology.

Blog: http://dotnetguts.blogspot.com

 
View All Articles

 
Please enter your Comment

  • Comment should be atleast 30 Characters.
  • Please put code inside [Code] your code [/Code].

 
No Comment Found, Be the First to post comment!