Effective Data Representation in Silverlight 4.0 using TargetNullValue, StringFormat and FallbackValue

There is a common issue regarding data representation in Silverlight ItemsControls is that while fetching data from service and displaying in a DataGrid, some data values (especially string) are sometimes Null and also some numeric values need to be represented in a currency format.

Silverlight 4.0 Binding class, provides mechanism to handle the data representation easiness using TargetNullValue, StringFormat and FallBackValue properties.     

·         TargetNullValue: Used to represent value in the UI when the source value is Null.

·         StringFormat: Used to specify a specific format for the data when it is to be represented in UI. E.g. Current ‘C’ etc.

·         FallBackValue: If the binding source path is not found then this is used to represent value in UI.

In this article, have created a simple class ‘clsEmployee’ for data consumption and to be used as a source. 

Step 1: Open VS2010 and create a Sliverlight Application targeting version 4.0. Name this as ‘SILV_TargetNullValues’.

Step 2: To the Silverlight project, add a new class file and name this as ‘DataAccessClasses.cs’, write following two classes in it:

C# 

namespace SILV_TargetNullValues

{

    public class clsEmployee

    {

        public int EmpNo { get; set; }

        public string EmpName { get; set; }

        public string DeptName { get; set; }

        public string Designation { get; set; }

        public decimal? Salary { get; set; }

    }

    public class EmployeeCollection : ObservableCollection<clsEmployee>

    {

        public EmployeeCollection()

        {

            Add(new clsEmployee() { EmpNo = 101, EmpName = "Emp_1", DeptName = "IT", Designation = "Manager", Salary = 78000 });

            Add(new clsEmployee() { EmpNo = 102, EmpName = "Emp_2", DeptName = "IT", Designation = "Engineer", Salary = 88000 });

            Add(new clsEmployee() { EmpNo = 103, EmpName = "Emp_3", DeptName = "ACCT", Designation = "Manager" });

            Add(new clsEmployee() { EmpNo = 104, EmpName = "Emp_4", DeptName = "ACCT", Designation = "Clerk", Salary = 68000 });

            Add(new clsEmployee() { EmpNo = 105, EmpName = "Emp_5", Designation = "Manager", Salary = 38000 });

            Add(new clsEmployee() { EmpNo = 106, EmpName = "Emp_6", DeptName = "HRD", Salary = 88000 });

            Add(new clsEmployee() { EmpNo = 107, EmpName = "Emp_7", DeptName = "HRD", Designation = "HEAD", Salary = 98000 });

            Add(new clsEmployee() { EmpNo = 108, EmpName = "Emp_8", Designation = "Manager", Salary = 48000 });

            Add(new clsEmployee() { EmpNo = 109, EmpName = "Emp_9", DeptName = "IT", Salary = 58000 });

            Add(new clsEmployee() { EmpNo = 110, EmpName = "Emp_10", Designation = "Manager", Salary = 78000 });

        }

    }

}

VB.NET

 Namespace SILV_TargetNullValues

      Public Class clsEmployee

            Public Property EmpNo() As Integer

            Public Property EmpName() As String

            Public Property DeptName() As String

            Public Property Designation() As String

            Public Property Salary() As Decimal?

      End Class

      Public Class EmployeeCollection

            Inherits ObservableCollection(Of clsEmployee)

            Public Sub New()

                  Add(New clsEmployee() With {.EmpNo = 101, .EmpName = "Emp_1", .DeptName = "IT", .Designation = "Manager", .Salary = 78000})

                  Add(New clsEmployee() With {.EmpNo = 102, .EmpName = "Emp_2", .DeptName = "IT", .Designation = "Engineer", .Salary = 88000})

                  Add(New clsEmployee() With {.EmpNo = 103, .EmpName = "Emp_3", .DeptName = "ACCT", .Designation = "Manager"})

                  Add(New clsEmployee() With {.EmpNo = 104, .EmpName = "Emp_4", .DeptName = "ACCT", .Designation = "Clerk", .Salary = 68000})

                  Add(New clsEmployee() With {.EmpNo = 105, .EmpName = "Emp_5", .Designation = "Manager", .Salary = 38000})

                  Add(New clsEmployee() With {.EmpNo = 106, .EmpName = "Emp_6", .DeptName = "HRD", .Salary = 88000})

                  Add(New clsEmployee() With {.EmpNo = 107, .EmpName = "Emp_7", .DeptName = "HRD", .Designation = "HEAD", .Salary = 98000})

                  Add(New clsEmployee() With {.EmpNo = 108, .EmpName = "Emp_8", .Designation = "Manager", .Salary = 48000})

                  Add(New clsEmployee() With {.EmpNo = 109, .EmpName = "Emp_9", .DeptName = "IT", .Salary = 58000})

                  Add(New clsEmployee() With {.EmpNo = 110, .EmpName = "Emp_10", .Designation = "Manager", .Salary = 78000})

            End Sub

      End Class

End Namespace

The above two classes represent entity and collection class. In the EmployeeCollection class constructor, values are added into ObservableCollection. If you carefully look at the code, you will find that some clsEmployee objects have ‘DeptName’, ‘Designation’ and ‘Salary’ missing.

Step 3: On MainPage.xaml, drag and drop a TextBlock and DataGrid control. The Xaml will be as shown below:

<UserControl x:Class="SILV_TargetNullValues.MainPage"

    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:src="clr-namespace:SILV_TargetNullValues"        

    mc:Ignorable="d"

    d:DesignHeight="532" d:DesignWidth="868"

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

    <UserControl.Resources>

        <src:EmployeeCollection x:Key="EmpCol"></src:EmployeeCollection>

    </UserControl.Resources>

        <Grid x:Name="LayoutRoot" Background="White" Width="750" Height="371"

           DataContext="{Binding Source={StaticResource EmpCol}}">

        <TextBlock Height="41" HorizontalAlignment="Left" Margin="80,12,0,0"

                   Name="textBlock1" Text="Employee Information System"

                   VerticalAlignment="Top" Width="452" FontWeight="ExtraBold"

                   FontSize="25" TextAlignment="Center">

        </TextBlock>

    

            <sdk:DataGrid AutoGenerateColumns="False" Height="277" HorizontalAlignment="Left"

                      Margin="22,62,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="707"

                       ItemsSource="{Binding}">

            <sdk:DataGrid.Columns>

                <sdk:DataGridTextColumn Width="100" Header="EmpNo" Binding="{Binding EmpNo}"></sdk:DataGridTextColumn>

                <sdk:DataGridTextColumn Width="140" Header="EmpName" Binding="{Binding EmpName}"></sdk:DataGridTextColumn>

                <sdk:DataGridTextColumn Width="140" Header="DeptName" Binding="{Binding DeptName}"></sdk:DataGridTextColumn>

                <sdk:DataGridTextColumn Width="120" Header="Designation" Binding="{Binding Designation}"></sdk:DataGridTextColumn>

                <sdk:DataGridTextColumn Width="100" Header="Salary" Binding="{Binding Salary}"></sdk:DataGridTextColumn>

            </sdk:DataGrid.Columns>

        </sdk:DataGrid>

    </Grid>

</UserControl>

The above Xaml code represents that the EmployeeCollection class is bound with the DataGrid.

Note: The EmployeeCollection instance is created using UserControl Resources, and using DataContext property of Grid Control.

READ MORE >>

http://dotnetcurry.com/(S(dj1v44450vcw3k2xgcgpqq55)X(1))/ShowArticle.aspx?ID=550