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);

Silverlight Page Container

this.Startup += this.Application_Startup;

this.Exit += this.Application_Exit;

this.UnhandledException += this.Application_UnhandledException;
During project creation those methods automatically create. Application_Startup method invokes during initiation and Application_Exit invoke during closing of project. Application_Startup method load MainPage instance by default.

this.RootVisual = new MainPage();

Main Page is the container of .xaml pages. Now we can create layout of our project according to our requirements. Every .xaml page create <Grid/> control by default. To display or show silverlight pages we use grid control. It acts like a container for silverlight pages. But at a time it can hold one page. To load new page previous page has to remove.

AdminLandingLeftMenu adminLandingLeftMenu = new AdminLandingLeftMenu();

grdMenue.Children.Clear();

grdMenue.Children.Add(adminLandingLeftMenu);

grdMenue – Is the grid name.
adminLandingLeftMenu – Is the instance of a silverlight page.

First we clear the children of grid(if any exist) then add new page instance to display.

Data Bind in Silverlight DataGrid

To show data in datagrid view, we need to assign a list to the itemsource of datagrid.
dgSalesOfficeLiveAgent.ItemsSource = e.Result;
e.Result – is the list of data.
Above is enough for .cs file. But in .xaml we should configure the datagrid. There are lots of property of datagrid. According to our requirement it is configurable.  Most important things are column configuration. Silverlight datagrid is very powerful. A column can be editable. It may contain multiple controls like TextBlock, Image, TextBox etc. We can combine various controls simultaneous. Basic structure of a datagrid –

There are three different type of column declare above.

1. First one simply text binding. It is highly used to bind normal text. Example - How to use it.

Header – is the name to be appears on column head.

FirstName – is the property name of list which is assigned to the datagrid itemsourch.

2. Second one is used when we want to modify our text like bold or coloring etc we have to use control like <TextBlock/>. We may use <Image/> tag to store image. Example –

In <Image/> tag there are various property has set. We can add event like OnMouseleftbuttonUp to fire some event on mouse click.

3. Third Option is used when we want to add multiple controls within a column.

To manipulate datagrid from .cs file we can use LoddingRow event of datagrid. To search control of datagrid we have to search that control by it name –

FrameworkElement eleBargainingRoomButton = dgModelHome.Columns[3].GetCellContent(e.Row);

                Button btnBargainingRoomButton = eleBargainingRoomButton.FindName("btnBargainingRoom") as Button;

btnBargainingRoom – Is the Button control name inside datagrid.

Columns[3] – Button is in fourth column.

File upload from silverlight project to file server

1. Take a Generic Handler file (.ashx) in web project. It’s automatically generated following method.

public void ProcessRequest(HttpContext context)
{
}

Context hold full url. So when we send a request to the handler this method automatically invoked. Now we can extract query string from url.

string action = context.Request.QueryString["action"].ToString();
Where action is the query string name.

2. From silverlight project prepare url and stream data (file) to send into the file server. OpenFileDialog is the class through which we can bind file data to Stream like.

openFileDialog.File.OpenRead();

3. Pass url and data stream by calling UploadFile(url, streamData). Below are the methods. This two methods duty are to send data of the respected url (our handler class).

In the handler class two types of operations take place. One is save data and one is retrieve data.

1. To save data, copy it inside ProcessRequest() method.

BuilderLandingPageImageSave – is the query string, checking the exact query string name of action.

Path – is the location where the file is going to save. Here we saved path name in web.confg file. So we are just calling it.

Filename – is the name of file in which name it is going to save. We can pass the file name from silverlight project by binding query string like action. Below is the WriteFileToDisk() method.

2. To retrive data from ProcessRequest() method

BuilderVideoTutorialLoading - is the query string name.

Path - file location.

ReadMediaFile() method is below.

On click make silverlight pop up on top

To make the pop up window on top we can take help of ZIndex. Silverlight Canvas has a method SetZIndex(ObjectName, ++i).

1. Get the object which you want to make on top.
2. Increase the zindex of that object.

The highest zindex object will show on top.

Canvas.SetZIndex(ObjectName, ++i);

To take the facility of canvas ZIndex we have to take the objects collection as the child of canvas.

Silverlight page dragging

Silverlight page need a container to show. As a container we use grid or border basically. But grid has predefined fixed position. So .xaml page is not drag able if we use grid. Border also have problem for dragging. To use .xaml page as like pop up window and to easily drag thought the pages we can use canvas as container.

In .xaml file paste above line. In .cs file paste following line.

canvas.Children.Add(object);

To make position of object we can define a margin for it.

object.Margin = new Thickness(200, 150, 2, 2);

Edit Template of silverlight controls

We can make suitable change of any control property by editing its template. Most effecting thing is style change. You can change your control as you wish. Without editing it is hardly possible to change control as we needed. Suppose we want to change button style or child window cross button it is never possible without editing their template. Expression blend gives facility to edit template. Below are the steps required to change or editing template.

1. Open project in expression blend.
2. Select control to edit.
3. Open Object & Timeline window. Right click on control -> Edit Template -> Edit a copy -> Give a name(Optional) -> Click ok.

Configurable WCF Service url in Silverlight project side

WCF service gets url and binding properties from “ServiceReferences.ClientConfig “ file in silverlight project (client side). When WCF service initialize, it gets all property from this file. There is no problem reading data from that file. But when web site get deployment url are change. So manually you have to change url of WCF services from that file. <endpoint/> tag address property hold WCF url address.

To get rid of this hassle, we can configure it to read the url from web.config file. We can do followings things.

Create a class as an example ServiceFactory. All the initialization related things which is take place in “ServiceReferences.ClientConfig” file, have to be ServiceFactory class. See the sample code.

BasicHttpBinding _BasicHttpBinding;

      EndpointAddress _EndpointAddress;

public ServiceFactory()

        {

    _BasicHttpBinding = new System.ServiceModel.BasicHttpBinding();

            _BasicHttpBinding.MaxReceivedMessageSize = 2147483647;

            _BasicHttpBinding.MaxBufferSize = 2147483647;

            _BasicHttpBinding.OpenTimeout = new TimeSpan(0, 20, 0);

            _BasicHttpBinding.CloseTimeout = new TimeSpan(0, 20, 0);

            _BasicHttpBinding.ReceiveTimeout = new TimeSpan(0, 20, 0);

            _BasicHttpBinding.SendTimeout = new TimeSpan(0, 20, 0);           

} 

Now when we need to make the instance of WCF service we can create a method in ServiceFactory class. So we can bind BasicHttpBinding and EndpointAddress class property within WCF service instance. Look at sample method below.

public PCBuilderServiceClient GetPCBuilderServiceClient()

        {

            _EndpointAddress = new System.ServiceModel.EndpointAddress(ServiceUrlManager.GetValue(ConstantClass.SERVICE_SERVER_URI) + ServiceUrlManager.GetValue(ConstantClass.PC_BUILDER_SERVICE));

                _PCBuilderServiceClient = new PCBuilderServiceClient(_BasicHttpBinding, _EndpointAddress);

            return _PCBuilderServiceClient;

      }

Here PCBuilderServiceClient is the service name. _EndpointAddress object is binding service url. There are two things one is the server url and another is the exact location and name of the WCF service file in server. So both need to cocate to get the exact location of the WCF service. Initially we have kept thos information inside IDictionary object during starting of the web site. Now just fetching the value from IDictionary by key.