Sunday 25 July 2010

Tab Control in Silverlight

Silverlight tab control is very easy to use. Drag and drop the control on .xaml page. You can change various property of tab control like height, width, background etc. It has various events also. There is place holder around the tab control. To make it void make the border thickness property zero. It took bit time to fix this problem. Tab control contain tab item. Numbers of tab items are added as it is require. 
Tab Items may contain border for beautification. One important thing we need in page that is scroll viewer when page become large. We can add scroll viewer within tab item. 

<controls:TabControl x:Name="tbBuilder" Height="auto" Width="auto" BorderThickness="0"
                  Background="Transparent" SelectionChanged="tbBuilder_SelectionChanged" Margin="0,9,0,0">

                    <!--General-->
                    <controls:TabItem x:Name="tbItemBuilderInformation" Header="Information" Margin="5,0,0,0">
                            <Border  BorderThickness="1,1,1,1" BorderBrush="Black" Height="auto" Width="auto" Background="White"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <StackPanel x:Name="stkPnlBuilderInformation" Height="auto" Width="auto"></StackPanel>                       
                            </Border>
                    </controls:TabItem>
               
                <!--Logo-->
                    <controls:TabItem x:Name="tbItemBuilderLogo" Header="Logo and Video">
                        <Border  BorderThickness="1,1,1,1" BorderBrush="Black" Height="auto" Width="auto" Background="White"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"  BorderThickness="0" Margin="0" Height="auto" Style="{StaticResource ScrollViewerStyle1}" >
                                <StackPanel x:Name="stkPnlBuilderLogo" Height="auto" Width="auto"></StackPanel>
                            </ScrollViewer>
                        </Border>
                    </controls:TabItem>
</controls:TabControl>

In the above example we used stackpanel inside tab item. Now we can load xaml page in stack panel. There is various ways to code with tab control. 

No comments:

Post a Comment