Silverlight 5: Some New Features For Developers

Posted by: Mahesh Sabnis , on 5/22/2012, in Category Silverlight 2, 3, 4 and 5
Views: 60015
Abstract: Silverlight 5, the latest version of Microsoft's browser plug-in comes with significant improvements with respect to Controls, Text, Dialog, Performance and data-binding. In this article, we will take an overview of some of the new Silverlight 5 features.

Silverlight 5, the latest version of Microsoft's browser plug-in was made available in December 2011. I have been working on it ever since and also consulting my clients about the new changes in Silverlight 5 with respect to Controls, Text, Dialog and of course about data-binding. I thought of discussing some of the new Silverlight 5 features with you with the help of some examples.

Silverlight 5 comes with the following feature list (not comprehensive):

  • New Controls
  • Text Control Changes
  • Databinding Improvements
  • Performance Improvements
  • XAML Changes
  • User Interface Changes
  • Graphics Changes
  • Media Changes

In this article, I am going to walk you through some New Controls, Text Control Changes, and Databinding improvements. I have explained some simple but important features that can be used for developing UI and for any Silverlight 5 based LOB applications.

New Controls

Silverlight 5 provides new controls like the PivotViewer for developers which can handle and display large amounts of data at a given instance. One of the best uses of this control is that, an end-user can now easily search the information he needs from the source collection. This control provides property types like:

  • PivotProperties:
    • PivotViewerStringProperty : Used to bind string data from source.
    • PivotViewerDateTimeProperty: Used to bind DateTime property from source
  • ItemTemplates:
    • PivotViewerItemTemplate: Provides a UI element structure for define template for data display.

Example:

I am using Visual Studio 2011 beta for this demo.

Step 1: Consider the following solution:

public class Student
{
    public int StudentId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Stream { get; set; }
    public string AcademicYear { get; set; }
}

public class StudentCollection : ObservableCollection<Student>
{
    public StudentCollection()
    {
        Add(new Student() { StudentId = 1, FirstName="Vikram", LastName="Pethe",
                                            Stream="Computer", AcademicYear="Final" });
        Add(new Student() { StudentId = 2, FirstName = "Ajay", LastName = "Doshi",
                                            Stream = "IT", AcademicYear = "Second" });
        Add(new Student() { StudentId = 3, FirstName = "Sameer", LastName = "Rakhe",
                                            Stream = "Electronic", AcademicYear = "First" });
        Add(new Student() { StudentId = 4, FirstName = "Vinod", LastName = "Lakhe",
                                            Stream = "Mechanical", AcademicYear = "Third" });
        Add(new Student() { StudentId = 5, FirstName = "Akash", LastName = "Velhe",
                                            Stream = "Computer", AcademicYear = "Second" });
        Add(new Student() { StudentId = 6, FirstName = "Rajesh", LastName = "Bhopale",
                                            Stream = "IT", AcademicYear = "Third" });
    }
}

Step 2: Drag-Drop the PivotViewer control and set the Data Source and properties of the PivotControl as shown below:

<UserControl.Resources>
<src:StudentCollection x:Key="StudentDs"></src:StudentCollection>
</UserControl.Resources>  
<Grid x:Name="LayoutRoot" Background="White" Margin="0,0,-240,-117">

<sdk:PivotViewer x:Name="pv1" HorizontalAlignment="Left" Height="326"
             Margin="35,59,0,0" VerticalAlignment="Top" Width="555"
              ItemsSource="{Binding Source={StaticResource StudentDs}}">

<!--Set Properties using  PivotProperties-->
<sdk:PivotViewer.PivotProperties>
    <sdk:PivotViewerStringProperty Id="StudentId" Options="CanFilter"
                        DisplayName="StudentId" Binding="{Binding StudentId}" />
    <sdk:PivotViewerStringProperty Id="FirstName" Options="CanFilter"
                        DisplayName="First Name" Binding="{Binding FirstName}" />
    <sdk:PivotViewerStringProperty Id="LastName" Options="CanFilter"
                        DisplayName="Last Name" Binding="{Binding LastName}" />
    <sdk:PivotViewerStringProperty Id="Stream" Options="CanFilter"
                        DisplayName="Stream" Binding="{Binding Stream}" />
    <sdk:PivotViewerStringProperty Id="AcademicYear" Options="CanFilter"
                        DisplayName="AcademicYear" Binding="{Binding AcademicYear}" />
</sdk:PivotViewer.PivotProperties>

<!--Set Data -->
<sdk:PivotViewer.ItemTemplates>
    <sdk:PivotViewerItemTemplate>
        <Border Width="200" Height="200" Background="Blue">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding StudentId}" FontSize="20" Foreground="White" />
                <TextBlock Text="{Binding FirstName}" FontSize="20" Foreground="White" />
                <TextBlock Text="{Binding LastName}" FontSize="20" Foreground="White" />
                <TextBlock Text="{Binding Stream}" FontSize="20" Foreground="White" />
                <TextBlock Text="{Binding AcademicYear}" FontSize="20" Foreground="White" />
            </StackPanel>
        </Border>
    </sdk:PivotViewerItemTemplate>
</sdk:PivotViewer.ItemTemplates>

</sdk:PivotViewer>

Step 3: Run the application and you should see a result similar to the following:

silverlight5-pivot-viewer

Under the studentId on the left, click 1. The result will be as shown below:

pivotviewer-result

Using the PivotViewer Control, the end-user has more control on filtering data from the source collection.

 

ItemsControl Text Search improvements

Controls like the ListBox, ComboBox are more frequently used to display collection data. Now if the end-user wants to search any specific matching date element from any of these ItemsControls, he/she needs to scroll down all the way which is time consuming and does not provide a good user experience. In Silverlight 5, an attached property ‘TextPath’ is provided which you can set against any property of the source collection. Now the end-user can click on any data element inside the ListBox and by using the keyboard keys, the data element matching to the specific character can be found.

Example:

Step 1 : Consider the collection below:

public class Customer
{
    public int CustomerId { get; set; }
    public string CustomerName { get; set; }
    public int Age { get; set; }
}

public class CustomerCollection : ObservableCollection<Customer>
{
    public CustomerCollection()
    {
        Add(new Customer() {CustomerId=1,CustomerName="Sachin", Age=40});
        Add(new Customer() { CustomerId = 2, CustomerName = "Malhar", Age = 40 });
        Add(new Customer() { CustomerId = 3, CustomerName = "Virbhadra", Age = 40 });
        Add(new Customer() { CustomerId = 4, CustomerName = "Saket", Age = 40 });
        Add(new Customer() { CustomerId = 5, CustomerName = "Viraj", Age = 40 });
        Add(new Customer() { CustomerId = 6, CustomerName = "Amit", Age = 40 });
        Add(new Customer() { CustomerId = 7, CustomerName = "Pankaj", Age = 40 });
        Add(new Customer() { CustomerId = 8, CustomerName = "Kiran", Age = 40 });
    }
}

Step 2: In the MainPage.Xaml, define the Data Source as shown below:

<UserControl.Resources>
    <src:CustomerCollection x:Key="CustDs"></src:CustomerCollection>
    <DataTemplate x:Key="CustTemplate">
        <StackPanel>
           
            <TextBlock Text="{Binding CustomerName}"></TextBlock>
        </StackPanel>
    </DataTemplate>
</UserControl.Resources>

Step 3: Set the Data Source to the ListBox and Set the TextPath attached property as shown below:

<ListBox x:Name="lstCistomers" HorizontalAlignment="Left" Height="201"
     Margin="45,47,0,0" VerticalAlignment="Top"
     Width="80"
      ItemsSource="{Binding}" ItemTemplate="{StaticResource CustTemplate}"
      TextSearch.TextPath="CustomerName" />

Step 4: Run the application and you will should see some Data in ListBox. Click on the first value of the ListBox and press any alphabet from the keyboard, the first data value matching the first character will be selected as shown below:

silverlight5-textpath-search

 

DialogBox improvements

Silverlight applications allow us to create a file and save it on local disk.  It also allows us to open the file from the local store. To do this, we have been provided with ‘openFileDialog’ and ‘SaveFileDialog’ classes. OpenFIleDialog by default opens the documents and settings (user specific folder) whereas SaveFileDialog allows us to save file of any extension. In Silverlight 5, OpenFileDialog has introduced a new property called ‘InitialDictionary’ using which you can specify a default path. Similarly by setting the ‘DefaultFileName’ property of the SaveFileDialog, you can specify a default file name that gets created when user wants to save data locally from the Silverlight application. It’s a simple feature, but very useful!

Example:

Create a Silverlight 5 application and add the following two buttons on the MainPage.Xaml as shown here:

silverlight5-dialog-box

Step 1 : Write the following code on the click event of the button:


/// <summary>
/// Open File Dialog has the Initial Directory path set
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Button_Click_1(object sender, RoutedEventArgs e)
{
    OpenFileDialog opDlg = new OpenFileDialog();
    opDlg.InitialDirectory = @"C:\Rastad";
    opDlg.ShowDialog();
    
}

/// <summary>
/// Save Dialog box has the default file name set
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Button_Click_2(object sender, RoutedEventArgs e)
{
    SaveFileDialog svDlg = new SaveFileDialog();
    svDlg.DefaultFileName = "MyFile.txt";
    svDlg.Filter = "text(*.*)|*.*";
    svDlg.ShowDialog();
}

Step 2: Run the application Out-of-Browser. 

Click on the ‘Open File Dialog’ button

silverlight5-open-file-dialog

Observe how the user was taken to the file path C:\Rastad

Click on the Save file Dialog button

silverlight5-savefile-dialog

 

Text Control Changes

Character Spacing:

In Silverlight 5, controls like TextBox and TextBlock provide the ‘CharacterSpacing’ feature. This provides a mechanism to increase and/or decrease characters spacing in the entered text. The distance between the characters is calculated based upon 1000th of the font size. E.g. if the FontSize is 50 pixels and CharacterSpecing is set to 200, the distance between two characters will be (50*200/1000=10 pixels).

Example:

Consider the following Xaml:

<TextBox HorizontalAlignment="Left" Height="46" Margin="129,27,0,0"
         TextWrapping="Wrap"  Name="txtBxData"
         VerticalAlignment="Top" Width="216" CharacterSpacing="200" FontSize="50" />
<TextBlock HorizontalAlignment="Left" Height="82" Margin="43,161,0,0"
           TextWrapping="Wrap" Text="Mahesh Sabnis" VerticalAlignment="Top"
           Width="272" Name="txtTxData"
           CharacterSpacing="200" FontSize="50"/>
<TextBlock HorizontalAlignment="Left" Height="37" Margin="21,27,0,0"
            TextWrapping="Wrap" Text="Text Box" VerticalAlignment="Top" Width="86"/>
<TextBlock HorizontalAlignment="Left" Height="37" Margin="76,119,0,0"
            TextWrapping="Wrap" Text="Text Block" VerticalAlignment="Top" Width="86"/>

 

Here for the TextBox and TextBlock, the CharacterSpacing is set to 200 and the FontSize is 50, now if you run the application, the result will be as shown below:

silverlight5-character-spacing

 

Databinding Basic changes

There are many features introduced in databinding. One of them  is you can directly apply a breakpoint on the Binding Expression on XAML and using the local window, you can see the bound object data:

silverlight5-binding-debug

 

Performance

One of the most exciting features is the improved performance for Silverlight 5 applications. Now SL 5 applications support native 64 bit browsers which is a big boost to consuming large amount of data. The XAML parser has been improved for parsing User Controls and resource dictionaries where style and other UI effects are declared. Significant improvements have been made while booting apps, so now it takes less time to start-up Silverlight applications.  There have also been some significant improvements on hardware acceleration, text rendering quality and animation quality

You can find details about all new features over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by sachin nimbalkar on Tuesday, May 22, 2012 11:55 PM
The examples shown in these article are good and  made me feel more confident in the understating new features of SL 5.0
Comment posted by Yurov on Wednesday, May 23, 2012 7:53 AM
thanks for the feature round up. seems like silverlight is ALIVE
Comment posted by silverlight is on Monday, December 17, 2012 3:50 AM
Tuesday, May 22, 2012 11:55 PM
Comment posted by abirami on Saturday, February 9, 2013 6:08 PM
useful to me
Comment posted by Do we have menu control in Silverlight ? on Wednesday, August 14, 2013 3:13 PM
Microsoft did not implement Menu control in the earlier versions. Is it there in the current version ?
Comment posted by munaf khan on Wednesday, July 23, 2014 6:20 AM
sir.
i am totally new in silverlight .please help me .

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel