Update to How to add items to Windows Phone 7 ListPicker

I had this clarified by Delay

ListPicker? I hardly even know 'er! [A detailed overview of the Windows Phone Toolkit's ListPicker control]

Delay clarified

ObservableCollection (via ItemsSource) is definitely the most flexible option for ItemsControl subclasses like ListPicker. However, your first example using Items.Add should work, as well. You don't say what about that didn't work for you, but one thing to remember with all ItemsControl subclasses is that you can't mix Items and ItemsSource - you need to pick one method of providing the items and then use that exclusively or else an exception results.

My reply

Delay,
I got it working.
You are right.
I was making the mistake of mixing up items and ItemSource.
Both the following  scenarios work:
1. When I have a list and add items to the listpicker using foreach.
2. Bind list directly to listpicker  .
I think I was getting into trouble when I mixed up both.
Thanks.
Vijay

JQuery Mobile How to add items and get selected items from menu

The following example is given in JQuery Mobile documentation.

<div data-role="fieldcontain">
 <label for="select-choice-1" class="select">Choose shipping method:</label>
 <select name="select-choice-1" id="select-choice-1">
 <option value="standard">Standard: 7 day</option>
 <option value="rush">Rush: 3 days</option>
 <option value="express">Express: next day</option>
 <option value="overnight">Overnight</option>
 </select>
</div>

I wanted to do this dynamically by code. and my solution is given below

the array

var shippingarray = [
    { name: "Standard: 7 day", id: "Standard" },
    { name: "Rush: 3 days", id: "Rush" },
    { name: "Express: next day", id: "Express" },
    { name: "Overnight", id: "Overnight" },
    { name: "slow boat", id: "slow" }
  ]

Loading the menu

function Load_select_shipping() {

    var arraytoload = shippingarray;
         var  optionlist = '';
         var i = 0;
        // <option value="volvo">Volvo</option>

        $.each(arraytoload, function (index,item) {
            if (i == 0) {
                optionlist += '<option selected="' + item.id + '">' + item.name + '</option>';
            }
            else {
                optionlist += '<option value="' + item.id + '">' + item.name + '</option>';
            }
            i++;
        })
        optionlist += '';
       $("#select-choice-1").html(optionlist).selectmenu('refresh', true);

     //   $("#select-choice-1").html(shippingarray2).selectmenu('refresh', true);
    }

to get the selected item

function Get_Data() {

    $('#content_data_list').empty();
    var index = $("#select-choice-1")[0].selectedIndex;

    var selected_item = shippingarray[index].id;

    shippingselected = "val: " + $("#select-choice-1").val() + " index: " + selected_item;
      var listitem = '<li > ' + shippingselected +  '</li>';
      $('#content_data_list').append(listitem);
      $('#content_data_list').listview('refresh');
   
       }

Note the refresh. This has to be done for updating any lists to which add items!

Had interesting posts in JQuery Mobile given below:

Add items and refresh

How to get selected item

Add link buttons and refresh

JQuery Mobile Goto

How to add items to Windows Phone 7 ListPicker

I figured  out how to add list items from code behind. For some one who might have a similar problem, my solution is given below.
I created an observable collection

Code behind

int startyear 2000;
int endyear 2010;
 ObservableCollection<string> yearlist = new ObservableCollection<string>();
 for (int i = endyear; i >= startyear; i--)
            {
                yearlist.Add(i.ToString());
            }
 YearListPicker.ItemsSource = yearlist; 

XAML

<toolkit:ListPicker  Margin="4,4,4,4" 
x:Name="YearListPicker" Header="Year" >
</toolkit:ListPicker>

Interesting article on ListPicker

http://blogs.msdn.com/b/delay/archive/2010/11/03/listpicker-i-hardly-even-know-er-a-detailed-overview-of-the-windows-phone-toolkit-s-listpicker-control.aspx

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.

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.