Get Microsoft Silverlight

Wednesday, December 31, 2008

Mix 10K Coding Challenge - Few Tips I have used to limit the code size



While developing for the MIX 10K coding challenge, the major challenge to face is to limit the code in 10K size. So I had to question each and every line of code that would it be possible to write this even with fewer bytes.
 Check out my application at http://2009.visitmix.com/MIXtify/TenKDisplay.aspx?SubmissionID=0044 Make sure to run the application in fullscreen mode.
 Here I am compiling a list of tips and features I used to reduce the code size. 
1.       Automatic Properties - Used this .NET feature to create the Tweet class which represents an RSS feed item from the search result   
public class Tweet {
  public string Guid { get;set; }
  public string Title { get;set; }
  public string Author { get;set;

    … ….

2.       Object Initializers
new Tweet {Title = element.Element("title").Value,
Author = element.Element("author").Value,
Guid = element.Element("guid").Value}};
3.       LINQ to XML - I have used this to read the XML stream from the search result handler.
4.       Collection Initializer - Collection initialize has used along with the LINQ query, which does a huge amount of job with fewer lines.
5.       Use 'Var' - Used to initialize a variable without specifying its type
 The bellow few lines do all the work to grab the RSS feed in to a collection variable which utilizes the features 3,4 and 5 above
XElement elements = XElement.Parse(e.Result);
var items = from element inelements.Descendants("item")
select new Tweet { PrevZ = double.NaN, Title = element.Element("title").Value
 6.       Anonymous functions - This save you some bytes. Bellow line I have used to toggle between the Fullscreen modes when the user clicks on a checkbox named 'chkFullScreen'
chkFullScreen.Click +=delegate{Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen; };
 7.        Remove all Private keywords - Default member accessor is 'Private' so you don’t need to specify that :)
8.       Remove all unused 'Using' statements - Easy ways to check – When you finish coding, removes all the ‘using’ statements and then correct the compile error
Some other editing tricks (This can make the source code un-readable too).
  Reduce the Tab size to zero
  Remove all white spaces
  Make the entire source code into few lines.
  Put all the source code in to a single source file 
  Single character variable names.

I haven’t used much of these editing tricks. The code was just 8.96KB. So I kept the source readable and in 4 separate files.

Mix 10K smart coding challenge


The Mix conference 2009 has organized a coding challenge on Silverlight/WPF with a restriction of using only 10Kb of source code. You can see the gallery of submissions at http://2009.visitmix.com/MIXtify/TenKGallery.aspx. Please visit and cast your vote for the entries you like, You can see my entry here.

My application allows you to search the twitter feeds over the internet using Twitter Search APIs(basically same as what you can see at http://search.twitter.com/) What I am trying to acheive here with silverlight is just another way to visualize the search data along the time line travelling towards the negative Z-space. One more interesting feature I wanted to add to this in the future version would be to give the ability to navigate through the Z-space with mouse scroll to see the older results. This same kind of UX(user experience) can be used to view any sort of time based feeds like blog feeds or search results. Architecturally the application is utilizing the following major features
1) DataTemplate
2) MVVM Pattern-Used mainly an ObservableCollection as the ViewModel to keep the UI notified on all the data change events.
3) Custom Panel - I have used a special panel called Space panel which arranges the items in a way to give a Parallax effect(2.5D)
4) LINQ - More specifically LINQ to XML to parse the incoming search data and other data processing.
Class diagram shown the Entity class and the Panel

My initial reaction to 10K code size restriction was that it would be too less to write this application. But you know, surpisingly with all the richness and power of .NET3.5(Specifically XAML,C#(ver3.0) and LINQ) we can write a moderately rich interactive application with just 10K of code. All the tips and tricks I have used to limit the code in 10Kb will be posted to you in my next blog.

Friday, December 26, 2008

Paginated ObservableCollection

ObservableCollection class makes the collection binding very easy in Silverlight or WPF. This special collection is aware of the binding infrastructures and notify them whenever some changes happens to the collection.


I have often come across the requirement to have  pagination enabled on collections. When we bind a Collection with many items inside to an ItemsControl, the visual will be created for each and every items. But as we can see that there is no big significance in displaying all the data with a huge vertical scroll bar(or similar mechanism) in it. So pagination is the typical user experience strategy we use in this kind of scenarios. Architecturally we can achieve the pagination mainly in three different ways
  1. Making the UI Control or Panel aware of the virtualization, so that the visuals wont create at the time of binding. But as an on demand visual element creation. VirtualizingPanel concept in WPF is actually helps to achieve this idea. For more details about WPF virtualizaiton panels, go here and here - In terms of MVVM pattern this will be implemented at the View side.
  2. Making the collection aware of the pagination and that special collection always gives a subset of items to the UI for making the visuals. In terms of MVVM pattern this solution is implemented as ViewModel
  3. Last and most commonly used way in the web technology - Typical DB/Back end/Web service side pagination where the pagination is controlled in the query side. This is best way for handling huge data like what we see in most of the typical websites out there. Typically the implementation is part of the Model
Paginated ObservableCollection
   I have created a PaginatedObservableCollection as an experiment to achieve the UI vitalization based on the point (2) of the above list. And this special generic Collection is derived from ObservableCollection. This has mainly two properties 
  • PageSize - to store the number of items that can be shown in a single page 
  • CurrentPage - the page number of the current page which the UI is showing in a particulr time.
This collection internally keeps the original items in a private List and based on the above two properties the PaginatedObservableCollection returns a subset of the items inside the list.You can use this new Collection in the same way as you use any ObservableCollection and the two properties are also databindable to the UI to control the collection behaviors.

See a running demo in Silverlight here.


You can find the source code in CodePlex  - http://www.codeplex.com/PaginatedCollection , Feel free to give your suggestions comments to improve this. Source code include  WPF and Silverlight sample code


The current version of source code is not a thread proof implementation, but this can be taken as a starting point to make a working application to get this feature. There are some good articles about Observable collection in the multi-threading environment by Tamir and Beatriz

Wednesday, December 03, 2008

XAML Balloon Comments - Expression Blend Tip

It is often a requirement in Silverlight and WPF that to create Balloon kind of UI for Toolip popups. It can be done in many ways. I am listing out few of the common Balloons you might be interested in.




  <Grid            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="30"/>

            </Grid.RowDefinitions>

            <Rectangle RadiusX="10" RadiusY="10" Stroke="#FF000000"/>

            <Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" Margin="30,-1.6,0,0" Width="20" Grid.Row="1"

                Data="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/>

            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" Text="Hello World" TextWrapping="Wrap" FontWeight="Bold"/>

        </Grid>




This Balloon doesnt change its corner Radius when you resize. And also doesn't change the size of the Tip when you resize. The Tip has its height always be 30 since the Grid Row height is 30. You can tweak the constants in the XAML apporpriately to make it looks proper for your scenarios.




<Path Stretch="Fill"="2" Data="M10.5,0.5
L108.60157,0.5 C109.98227,0.5 111.29763,0.77982046 112.49402,1.2858505
114.88678,2.297905 116.80367,4.2147827 117.81572,6.6075516 118.32175,7.8039356
118.60157,9.1192895 118.60157,10.5 L118.60157,51.442939 C118.60157,52.823647
118.32175,54.139003 117.81572,55.33539 116.80367,57.728154 114.88678,59.645032
112.49402,60.657088 111.29763,61.163118 109.98227,61.442938 108.60157,61.442937
L22.30129,61.681242 11.674737,79.949581 10.48383,61.465811 10.209005,61.465811
C8.8282947,61.465812 7.8039303,61.163115 6.6075497,60.657088 4.2147805,59.645032
2.2979068,57.728154 1.2858486,55.33539 0.77982051,54.139003 0.5,52.823647
0.5,51.442939 L0.5,10.5 C0.5,9.1192895 0.77981997,7.8039356 1.2858486,6.6075516
2.2979069,4.2147827 4.2147808,2.297905 6.6075497,1.2858505 7.8039303,0.7798233
9.1192894,0.5 10.5,0.5 z"
Stroke="#FF000000"/>





If you combine the Rectangle and Path in the above Balloon you will get a single Path. But the issue here is that when you resize this Path along with  your contents the corners and the Tip wont look exactly the same, both will  get stretched on the direction of resize. But this can be useful in many scenarios.