Getting the total number of characters (count) from a Silverlight text box.

Let’s say that we have a requirement where we should restrict the users to enter only a certain number of characters (let’s say 150) in a TextBox of a Silverlight usercontrol. We will see how to achieve that in Silvelright.

1. Create a Silverlight project and add a Text Box in to it as shown below.

<TextBox Height="100" Width="600" FontSize="20" HorizontalAlignment="Left" TextChanged="tbPost_TextChanged" Name="tbPost" AcceptsReturn="True" TextWrapping="Wrap" VerticalAlignment="Top"  />

as seen above we have set its height and width to a large number to make it look like a RichTextBox, we have also added a Event Handler called tbPost_TextChanged for TextChanged Event and also the AcceptsReturn has been set to true for multiline functionality.

2. Add a TextBlock below the TextBox to display the number of characters being entered in to the TextBox.

<TextBlock FontFamily="Tahoma" Name="tblkCharLeft" Width="150" HorizontalAlignment="Left" FontSize="12" FontWeight="Light" >

3. In the MainPage.xaml.cs write the following code in the tbPost_TextChanged  event.

private void tbPost_TextChanged(object sender, TextChangedEventArgs e)
            count = 150 - tbPost.Text.Count();
            tblkCharLeft.Text = Convert.ToString(count);

            tblkCharLeft.Foreground = count  > 150 ? new SolidColorBrush(Colors.Red) : new SolidColorBrush(Colors.Black);

4. In the above code, we are getting the number of characters in the Text Box and subtracting it from 150(which is the total number of characters allowed) and storing the result in an Integer variable called count. And then display the number in the Text Block.

5. In the last line we are changing the Foreground of the Text block to Red color after checking if the value of the integer variable count is greater than 150 using tertiary operator.

6. When you build and run the application. You can see that, as you type in the text box the number of characters in the text box gets displayed in the text block.

7. The color of the text in the text block gets changed when the number goes more than 150 as shown in the below screenshot.



Subtotals (Summary rows) in Silverlight DataGrid

I was breaking my head a lots with the knowledge and the experience that I have on Silverlight itself on the whole. After creating a complex Stored procedure in SQL and binding the results to a Silverlight DataGrid and grouping them  I was asked to insert Subtotals after each of the Group of Rows. After working hard on Grouping in the DataGrid I started working on Inserting the Subtotals and finally accomplished.

Well, guys I was finally able to accomplish this using ObservableCollection, PagedCollectionView,  and CollectionViewGroup.

Fine Lets start with them then.

1. Create a Silverlight project, I’m not gonna go deep in to it as you guys should know how to create a Silverlight project.

2. Add a DataGrid to the  MainPage.XAML.

3. Now, lets create a class and properties in them which are gonna be bound to the DataGrid.

public class Revenues
        public string Restaurant { get; set; }
        public string Shift { get; set; }
        public decimal Revenue { get; set; }

4.Now, lets use ObservableCollection and add data to our Class through ObservableCollection in the MainPage Constructor .
ObservableCollection(NameSpace : System.Collections.ObjectModel)

            ObservableCollection<Revenues> OCRevenues = new ObservableCollection<Revenues>();

            OCRevenues.Add(new Revenues() { Restaurant = "McDonalds", Shift = "Breakfast", Revenue = 3000 });
            OCRevenues.Add(new Revenues() { Restaurant = "McDonalds", Shift = "Lunch", Revenue = 2000 });
            OCRevenues.Add(new Revenues() { Restaurant = "McDonalds", Shift = "Dinner", Revenue = 4000 });
            OCRevenues.Add(new Revenues() { Restaurant = "KFC", Shift = "Breakfast", Revenue = 1000 });
            OCRevenues.Add(new Revenues() { Restaurant = "KFC", Shift = "Lunch", Revenue = 5000 });
            OCRevenues.Add(new Revenues() { Restaurant = "KFC", Shift = "Dinner", Revenue = 8000 });
            OCRevenues.Add(new Revenues() { Restaurant = "Pizza Hut", Shift = "Breakfast", Revenue = 12000 });
            OCRevenues.Add(new Revenues() { Restaurant = "Pizza Hut", Shift = "Lunch", Revenue = 15000 });
            OCRevenues.Add(new Revenues() { Restaurant = "Pizza Hut", Shift = "Dinner", Revenue = 10000 });

5. Now, create a PagedCollectionView which is to be grouped and then bind it to the ObservableCollection  created above.

PagedCollectionView (NameSpace: using System.Windows.Data)

PagedCollectionView PGV = new PagedCollectionView(OCRevenues);

6. Group the PagedCollectionViewb by Restaurant property of the Revenues class using PropertyGroupDescription after checking if it can be grouped.

      if (PGV.CanGroup)
                PGV.GroupDescriptions.Add(new PropertyGroupDescription("Restaurant"));

7. Create  a Generic List for the Revenue class. This Generic List is going to store the the subtotals in future. Also, declare a decimal variable whose usage will be known shortly.

            List<Revenues> lstRev = new List<Revenues>();

            decimal subtotal = 0;

8. Now, let’s loop through each of the Groups in PagedCollectionView using CollectionViewGroup and then loop through each row in the CollectionViewGroup and calculate the Subtotals.

        foreach (CollectionViewGroup CVG in PGV.Groups)
                foreach (var row in CVG.Items)
                    subtotal = ((Revenues)row).Revenue + subtotal;

                Revenues revenues = new Revenues();
                revenues.Revenue = subtotal;
                revenues.Restaurant = CVG.Name.ToString();
                subtotal = 0;

Let me explain what is happening in this part of coding. We are looping through each CollectionViewGroup  in the PagedCollectionView . And then looping through each row inside the CollectionViewGroup  to sum the value in the Revenue property and store it in the subtotal variable.

Then, create a new object for the Revenue class. Assign the above subtotaled value to the Revenue property of the newly created object for the Revenue class and also assign the name of the CollectionViewGroup  to the Restaurant property.

Now, add the above create object for the Revenue class to the Generic List lstRev that was created previously.

And also make the value of the subtotal variable to be zero, so that the its value does not get added continuously.

7. Now, lets loop through each data in the Generic List lstRev and add it to the ObservableCollection and refresh our PagedCollectionView so that our new data in the ObservableCollection  gets added to it and bind the PagedCollectionView  to the DataGrid.

      foreach (var data in lstRev)


            RevenueDG.ItemsSource = PGV;

Now, let’s execute the application to see the output.


Once executed we will get a DataGrid with each group of data having a row in the end with a total.