Friday, November 26, 2010

Observable collections and photo slide show in Silverlight

Recently I did a  nice photo collection slide show in Silverlight. It is really simple. Use observable collection.

I had a list of thumbnail URLs in a list generated from a web service. The image list had 10 image urls in it.

I created a second list with 3 image urls as an observable collection in the class declaration.

public ObservableCollection<String>  Thumb_list { get; set; }

Then I had XAML for holding 3 images and had a left and right arrow buttons on both sides of the images.

When they were clicked the observable collections image list was again populated with new images offset by one from the original image list. The code is given below.  Of course, you have to make sure that you are not over running the indexes.

  private void Click_Left_Arrow(object sender, RoutedEventArgs e)
{
var thumblistdetails = ((Button)sender).DataContext as client_data;
if (thumblistdetails.image_index > 0)
{
thumblistdetails. Thumb_list[0] = List_silver_data[thumblistdetails.row_index].Thumb_list[thumblistdetails.image_index - 1];
thumblistdetails. Thumb_list[1] = List _silver_data[thumblistdetails.row_index].Thumb_list[thumblistdetails.image_index];
thumblistdetails Thumb_list[2] = List_silver_data[thumblistdetails.row_index]. Thumb_list[thumblistdetails.image_index + 1];
thumblistdetails.image_index--;
}
}



This was a cool application. Shortly I will write a code project article on this.

Saturday, November 20, 2010

JQuery Mobile, JQTouch and CSS: This is not your father’s HTML or CSS!

Like what they would say, this is not your father’s HTML. Things have advanced a lot in HTML and CSS. I am now designing for the mobile phones, concentrating on Windows Phone 7. At the same time I am fascinated with HTML 5 which is available in both Android and Iphone. I am not happy that Microsoft has not provided HTML 5 in Windows Phone 7. I like Silverlight, but you can also do cool things with HTML 5 and CSS.
Button design is also lot of fun with CSS, Icons and HTML! If you want to design seriously for mobile phones you should definitely  look at these sites.

  1. iPhone Book Excellent book by Jonathan Stark on mobile telephone design and development.
  2. JQTouch A plug in for JQuery which works fine for Iphone. Unfortunately Windows Phone 7 ignores most of it because it is still based on IE 7.
  3. JQueryMobile Excellent work, very good again for Iphone and Android but does not render in Windows Phone 7.
  4. Rediscovering the button element Excellent Article by Kevin Hale which is a very good introduction to merging icons with text on buttons.
  5. jQuery Image Strip Very good article about simple tricks in Javascript to create nice results
  6. CSS Image Techniques: Part 1 Excellent series of articles by GuiStuff
  7. Scalable CSS buttons using PNG and background colors
  8. 3d css buttons
  9. 30 Excellent CSS Based Navigation and Buttons Tutorial
  10. Button Collection
  11. icons for mobile apps
  12. Display icons using a single image and CSS “Sprites”
  13. Create superior web buttons and menus in a few clicks! very good software mainly to create prototypes quickly.
  14. Glueit Excellent software to create icon strips
  15. What Are CSS Sprites?
  16. Playing with CSS3 gradients
  17. Playing with CSS3 gradients
  18. Updated: Windows Phone 7 IE Mobile gets webkit-compatible update
     

Sivlerlight Animation

I am looking at Silverlight animation to make interesting user interface designs. Came across a few interesting applications which might be of use to you to.

  1. Fluid Dynamics in Silverlight Excellent animation by Rick Barrazza. You can play with the animation in the article itself.
  2. Silverlight Controls with Effects and Transitions by Nikhile
  3. Effects and Transitions for Silverlight is an excellent article by Nikhil.    samples are in this page http://projects.nikhilk.net/SilverlightFX
  4. Excellent flipping tiles animation by Joel http://joel.neubeck.net/2008/05/silverlight-flipping-tiles-animation/
  5. photogallerywall
  6. How to dispaly HTML/rich text in Silverlight
  7. Silverlight Panorama Viewer but no source code!
  8. Polyhedra Excellent mathematical/ geometry animation by Declan.
  9.  Album Nice album, but in French and the site is slow!
  10. Scroll Viewer List box
  11. Adorners good animation
  12.  Image space 3d Images are organized in a 3D space. Not 3d library is used. It doesn't use Perspective 3D which means it can perform very well.
  13. Image slider control in Silverlight 2 good explanation of the animation.
  14. Silverlight 2 Rolemenu inspired by Microsoft Italy

Parsing Json using C# dynamic

I had an application where I had to get data from  a web service. Get some name data from that service and then get relevant images from another web service. I was wondering how to do that because my application is MVC2 with Javascript and JQuery.
My first approach was to try to get the results  from first web service in the view page,  manipulate the result with JQuery, extract the information and then make the second web service call. However, I thought it was clumsy.
Then I came across JavascriptSerializer. But it required that I declare a complete class for the Javascript object which I was reluctant to do. Then I looked at Json.NET. Elegant solution but I thought was an overkill for what I wanted to do.
Then I came across C# 4.0, Dynamic Programming and JSON  by Nikhil which is also great, but again for my application was an overkill.
Finally I hit pay dirt when I saw this great article  Using C# 4.0 and dynamic to parse JSON by Shawn which is wonderful. Excellent piece of code to extract what I wanted. Almost like working with Javascript in C#. I had to do the minor  bug correction by Drew mentioned in serialize JSON into C# dynamic object?.
I used the code and I was able to scan through the objects like I would do in Javascript notation.
Excellent tool to have in your arsenal when you want to work with web services which returen JSON in MVC.