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. 

Add CSS in ASP.Net class file

Normally we add CSS in .aspx file. It is pretty easy to add CSS in .aspx file just drag CSS file and drop it to .ascx header. Automatically a link will create. Sometimes we need to add CSS in class file. In page load event we can add CSS by adding following code.

HtmlLink link = new HtmlLink();

link.ID = ID;

link.Attributes.Add("type", "text/css");

link.Attributes.Add("rel", "stylesheet");

link.Href = "/" + SiteSettingsConfiguration.GlobalPathPrefix + "Global/CommonSite/Css/GeneralStyles.css";

Page.Header.Controls.Add(link);

Add/Remove value in cookie

To set value copy following method:

        public static void SetCookie(string key, string value)

        {

            string oldCookie = HtmlPage.Document.GetProperty("cookie") as String;

            DateTime expiration = DateTime.UtcNow + TimeSpan.FromDays(2000);

            string cookie = String.Format("{0}={1};expires={2}", key, value, expiration.ToString("R"));

            HtmlPage.Document.SetProperty("cookie", cookie);

        }

To get cookie value copy below method. 

        public static string GetCookie(string key)

        {

            try

            {

                string[] cookies = HtmlPage.Document.Cookies.Split(';');

                //key += '=';

                foreach (string cookie in cookies)

                {

                    string cookieStr = cookie.Trim();

                    string[] vals = cookieStr.Split('=');

                    if (vals.Length >= 2)

                    {

                        if (vals[0].Equals(key, StringComparison.OrdinalIgnoreCase))

                        {

                            return vals[1];

                        }

                    }

                }

            }

            catch

            {

               

               

            }

            return null;

        }

Delete value from cookie add below method

   public static void DeleteCookie(string key)

        {

            string oldCookie = HtmlPage.Document.GetProperty("cookie") as String;

            DateTime expiration = DateTime.UtcNow - TimeSpan.FromDays(1);

            string cookie = String.Format("{0}=;expires={1}", key, expiration.ToString("R"));

            HtmlPage.Document.SetProperty("cookie", cookie);

        }

Change Silverlight Border Background

Silverlighet Border is a strong control. It is widely used. To make Border stylish it has various properties to design accordingly.

<Border x:Name="bdrBody" Margin="12,71,20,16"  Visibility="Visible" CornerRadius="5,5,10,10" BorderThickness="4,1,1,1" BorderBrush="Blue" Padding="5,5,5,5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

            <Border.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="White" />

                    <GradientStop Color="Black" Offset="1"/>

                </LinearGradientBrush>

            </Border.Background>

            <Grid x:Name="grdMain" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

</Border>
Here is an example of Border.
CornerRadius – Make border corner rounded.
BorderThickness – Make border side thickness bold or light.
BorderBrush – Change border rounded color.
Margin – To fix position of border.
We can give a button look and feel of a border by changing LinearGradientBrush property of Border.Background. Expression blend is the best way of changing border style. Manually changing GradientStop color and Offset value we can make border attractive. It can be use as container of another pages, here grdMain is used as a container.

Expanded TreeViewItem Style in Silverlight TreeView

By default TreeView item child is not expanded. It remains collapsed. To make it expanded we have to apply following style in .xaml page where TreeViwe controls are used.

<controls:TreeView x:Name="trvLeftMenu"  BorderThickness="0,1,0,0" Margin="0" Width="auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

                                       ItemContainerStyle="{StaticResource expandedTreeViewItemStyle}">

</controls:TreeView>

ItemContainerStyle – is the expand property.
expandedTreeViewItemStyle – is the name of style.

Below is the calling style.

<UserControl.Resources>

<Style x:Key="expandedTreeViewItemStyle" TargetType="controls:TreeViewItem">

            <Setter Property="IsExpanded" Value="True" />

</Style>

</UserControl.Resources>

Treeview control of Silverlight

Using TreeView is pretty simple to use. It takes TreeViewItem as its child. Depending on child item we can feed TreeViewItem  to TreeView. If we need inner child we will feed TreeViewItem  to TreeViewItem . Like –

<controls:TreeView x:Name="trvLeftMenu"  BorderThickness="0,1,0,0" Margin="0" Width="auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> </controls:TreeView>

trvLeftMenu.Items.Clear();

for (int i = 0; i < builderList.Count; i++)

{

TreeViewItem item1 = new TreeViewItem();

for (int j = 0; j < builderList[i].SalesOffices.Count; j++)

{

      TreeViewItem soItem = new TreeViewItem();

      item1.Items.Add(soItem);

}

trvLeftMenu.Items.Add(item1);

}

Through this way we can build up a tree. Child item and inner child item binding. There are various properties of TreeView and TreeViewItem. Header property hold header name. We can bind image with text in stackpanel then bind that stackpanel as a Header of TreeView.
mhItem.Selected += new RoutedEventHandler(modelHomeItem_Selected);
If we apply Selected event it will execute when we click on items on run time.

WCF Service method async call from Silverlight project.

There are three steps to call a WCF service from silverlight project.

1. Create WCF service client instance.

PCSalesOfficeServiceClient _PCSalesOfficeServiceClient = new PCSalesOfficeServiceClient();

2. To catch asynchronous call response we have to use delegates. For every method of WCF service there is a completed event and an asynchronous method. So initially we will assign completed event of any WCF methods.

_PCSalesOfficeServiceClient.SaveSalesOfficeCompleted += new EventHandler<SaveSalesOfficeCompletedEventArgs>(_PCSalesOfficeServiceClient_SaveSalesOfficeCompleted);

3. Finally we will make call where it is necessary. For every call there is a completed event, no matter what is return type of calling method. To catch completed event we have to follow step two.

_PCSalesOfficeServiceClient.SaveSalesOfficeAsync(_SalesOffice);