Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment

Locations of visitors to this page

Latest Articles

Move to top
Working with Stack Panel in silverlight
Posted By Sarin on May 20, 2012     RSS Feeds     Latest Hinduism news

The StackPanel provides developers with a quick layout option for positioning objects. The StackPanel
Control allows you to position Silverlight objects in more of a flow layout, stacking objects either
Horizontally or vertically. In Other Words, StackPanel control is a simple layout panel that supports positioning its contained controls in either a row or column layout.  StackPanels are typically used in scenarios where you want to arrange a small subsection of the UI on your page.

To better understand the StackPanel control, Let us create a sample application.
  • In Visual Studio 2010, create a new Silverlight application named StackPanel  
  • In MainPage.Xaml, Within the main Grid element, add a StackPanel control with four rectangles  With different colors
    StackPanel Orientation="Horizontal" Background="White" Height="100" Width="300">
                <Rectangle Height="100" Width="60" Fill="Red" />
                <Rectangle Height="100" Width="60" Fill="Blue" />
                <Rectangle Height="100" Width="60" Fill="gray" />
                <Rectangle Height="100" Width="60" Fill="Goldenrod" />        

    At this point, your application should look as shown above. Notice that the rectangles are stacked horizontally.  If you would have not specified orientation, then the stackpanel would have rendered these rectangles vertically as vertical is the default value for orienation
    Notice that all the rectangles are touching each other, which is quite unattractive. You can easily space them out by using their Margin property. Margin property separates your control from other control for the specified amount of pixel in a particular direction (right,bottom,left and top). If you specify only a single value, it will leave the specified amount of pixels in all direction.
    <Rectangle Height="100" Width="60" Fill="Red" Margin="5"/>
                <Rectangle Height="100" Width="60" Fill="Blue" Margin="5"/>
                <Rectangle Height="100" Width="60" Fill="gray" Margin="5"/>
                <Rectangle Height="100" Width="60" Fill="Goldenrod" Margin="5"/>

    Microsoft designed the control framework in such a way that any object can be contained within another object. One way you can enhance your layout is by nesting a layout control within another layout control. In this example, you will nest StackPanel control within another StackPanel control, but realize that you can nest any layout control within any other layout control to get the exact layout functionality you are looking for.

    <StackPanel Grid.Row="2" Orientation="Horizontal">
                <Button Width="100" Height="50" Content="Button 1"></Button>
                <Button Width="100" Height="50" Content="Button 2"></Button>
                <Button Width="100" Height="50" Content="Button 3"></Button>
                <StackPanel x:Name="sp" VerticalAlignment="Center">
               <Button Width="100" Height="30" Content="Button Middle 1" Margin="5"></Button>
               <Button Width="100" Height="30" Content="Button Middle 2" Margin="5"></Button>
               <Button Width="100" Height="30" Content="Button Middle 3" Margin="5"></Button>

    As you can see from these two exercises, the StackPanel control is a very useful layout option, and
    you will probably use it often in your Silverlight applications. By nesting Silverlight controls, you have a
    lot of flexibility when designing your applications
    Adding Controls to Stackpanel from code behind.
    Although I am showing this functionality here only for stackpanel, in reality, the same thing can be applied to other layout controls also.
  • Add name to the StackPanel in XAML.  This will allow you to access it from the code-behind.  
            <StackPanel x:Name="sp" VerticalAlignment="Center">
  • In the code, you can add to the StackPanel by adding the element to the StackPanel's Children property.
                  sp.Children.Add(new Button()  {Content = "ok", Height = 30 });

    Share this to your friends. One of your friend is waiting for your share.
    Related Articles
    is Lord Kuber indian santa claus
    Appending Html elements or contents dynamically
    Paging in silver light Datagrid
    Why all gods are born in india
    Science in hinduism-Evolution in vishnu avatars
    Dinosaurs in Bhagavad Purana
    Science in hinduism-Evolution in vishnu avatars part 2
    Working with Dockpanel in silverlight
    How to sort an ObservableCollection
    showing row details on button click of silver light datagrid

    Post Comment