November 28, 2014
Hot Topics:

Creating User Controls in Silverlight

  • May 15, 2011
  • By Arun Karthick
  • Send Email »
  • More Articles »

Introduction

In this article we will learn how to create user controls in Silverlight and use them effectively. I have included a step-by-step guide for creating a sample application. For creating the sample application, Visual Studio 2010 IDE and Silverlight 4.0 version are used.

Sample application

This section will explain the functionality of the sample application. The Silverlight user control will have a few textboxes and a button. By clicking the button in the user control it should add the input data to a Silverlight data grid that is present on the Silverlight application's MainPage.xaml.

Creating a Silverlight User Control

As a first step create a new Silverlight application project and name it as SilverlightUserControlDemo. Also accept "creating the host web application" from the prompt that shows up. The host web application is required as the Silverlight application is required to be run on the client browser.

Now right click on the Silverlight client application and add a new Silverlight User Control item and name it NewCompanyControl. Add three text boxes and a button. Below is the XAML code.

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

 

Create a new entity named Company which will be populated on click on the AddCompanyButton.

public class Company

{

public string CompanyId { get; set; }

public string CompanyName { get; set; }

public int HeadCount { get; set; }

}

 

Below is the code for click event implementation.

namespace SilverlightUserControlDemo

{

public partial class AddNewCompanyControl : UserControl

{

List _companyCollection;

public AddNewCompanyControl()

{

InitializeComponent();

_companyCollection = new List();

}

private void AddCompanyButton_Click(object sender, RoutedEventArgs e)

{

_companyCollection.Add(new Company

{

CompanyId = CompanyIdTextBox.Text,

CompanyName = CompanyNameTextBox.Text,

HeadCount = Convert.ToInt32(HeadCountTextBox.Text)

});

}

}

}

Using the Silverlight User Control in a Silverlight Window

In this section we will look at using the user control in the MainPage.xaml. All you need to do is simply include the UserControl's namespace in the MainPage.xaml file. Below is the code.

xmlns:uc="clr-namespace:SilverlightUserControlDemo"

Once the namespace is included, then the user control will be available on the MainPage. Also add a data grid to the MainPage window so that the added company can be bound to the data grid. Below is the XAML code.

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:uc="clr-namespace:SilverlightUserControlDemo"

mc:Ignorable="d"

d:DesignHeight="400" d:DesignWidth="400">

Exposing Properties

In this section let us expose a Boolean property in the user control called ApplyTextBackColor. If this property is set to true then set background colors to the textbox, otherwise you will use the default background. Add the public property below to the user control's code behind class.

private bool _applyTextBoxBackColor;

public bool ApplyTextBoxBackColor

{

get

{

return _applyTextBoxBackColor;

}

set

{

if (value)

{

CompanyIdTextBox.Background = new SolidColorBrush(Colors.Orange);

CompanyNameTextBox.Background = new SolidColorBrush(Colors.Orange);

HeadCountTextBox.Background = new SolidColorBrush(Colors.Orange);

}

else

{

CompanyIdTextBox.Background = new SolidColorBrush(Colors.White);

CompanyNameTextBox.Background = new SolidColorBrush(Colors.White);

HeadCountTextBox.Background = new SolidColorBrush(Colors.White);

}

}

}

 

This allows you to set the property value in the MainPage.xaml window.

ApplyTextBoxBackColor="True">

Exposing the Events

Now when the AddNewCompany button residing in the user control is clicked, the Company has to be added to the DataGrid which is present in the MainPage.xaml. This would require an event bubbling model. Let's expose an event from the usercontrol using a delegate so that the MainPage window can subscribe to it. Add the event below and delegate it to the user controls.

Public delegate void AddNewCompanyButtonClickEventHandler(IEnumerable companyCollection);

public event AddNewCompanyButtonClickEventHandler OnAddNewButtonClicked;

 

Amend the button click functionality as shown below.

private void AddCompanyButton_Click(object sender, RoutedEventArgs e)

{

_companyCollection.Add(new Company

{

CompanyId = CompanyIdTextBox.Text,

CompanyName = CompanyNameTextBox.Text,

HeadCount = Convert.ToInt32(HeadCountTextBox.Text)

});

 

if (OnAddNewButtonClicked != null)

OnAddNewButtonClicked(_companyCollection.AsEnumerable());

}

 

Below is the code for the event handler function in MainPage.xaml.cs.

namespace SilverlightUserControlDemo

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

AddNewCompanyControl.OnAddNewButtonClicked +=new AddNewCompanyButtonClickEventHandler(AddNewCompanyControl_OnAddNewButtonClicked);

}

private void AddNewCompanyControl_OnAddNewButtonClicked(IEnumerable companyCollection)

{

CompanyDataGrid.ItemsSource = companyCollection;

}

}

}

Now go ahead and run the application. Fig 1.0 below shows a sample screenshot.

Usercontrol

Fig 1.0

Issues Encountered

  1. Property that is exposed in the user control should be provided with a get accessor as well.
  2. The event subscription was provided at the code behind. Providing it in the XAML throws a compile time error.

Conclusion

Learning to create and implement user controls becomes very useful when you create a Silverlight application. I hope this article explains clearly about implementing Silverlight user controls. Please let me know if you need any information that I have missed in the article.

Happy reading!


Tags: Silverlight, tutorial, user controls, Silverlight usercontrol

Originally published on http://www.developer.com.


Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel