How to implement Stack panel in windows phone?

Leave a Comment
Hi friend here i am introducing stack panel for designing in windows phone Here i am explain you all syntax of codes  here. Basically stack panel is used for keeping collection of controls. generally it is used in under grid panel for design particular in row to make controls together.

<phone:PhoneApplicationPage
    x:Class="StackPanel.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="90">
            <TextBlock Text="What's your Name!!" VerticalAlignment="Top" Height="80" Margin="20" />
            <TextBox Text="" VerticalAlignment="Top" Width="257" Height="80" Margin="3" />
        </StackPanel>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="90" Margin="0,90,0,0">
            <TextBlock Text="What's your Name!!" VerticalAlignment="Top" Height="80" Margin="20" />
            <TextBox Text="" VerticalAlignment="Top" Width="257" Height="80" Margin="3" />
        </StackPanel>
    </Grid>
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->
</phone:PhoneApplicationPage> 

here I have taken two text boxes in first stack panel.
   <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="90">
            <TextBlock Text="What's your Name!!" VerticalAlignment="Top" Height="80" Margin="20" />
            <TextBox Text="" VerticalAlignment="Top" Width="257" Height="80" Margin="3" />
        </StackPanel>
You can set stack panel here for keeping two text boxes in single row.

Same as in second stack panel.

   <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="90" Margin="0,90,0,0">
            <TextBlock Text="What's your Name!!" VerticalAlignment="Top" Height="80" Margin="20" />
            <TextBox Text="" VerticalAlignment="Top" Width="257" Height="80" Margin="3" />
        </StackPanel>
This stack panel keep both text boxes under first text panel in it.

Here i am giving you complete source code here.

Download Complete Source Code:

Output:


0 comments:

Post a Comment