Application Bar binding in Windows Phone 7 using Ultralight.MVVM

The boot camp at Dallas for Windows Phone is going great, it is a open lab model where if there are any interesting questions, the speakers provide short demo for the whole group otherwise work on the project and ask questions. I am really enjoying it. For my project that I am developing, up front I decided to use Ultralight.MVVM frame work since I am very familiar with Jounce. One thing I stumbled up on when using Ultralight.MVVM is the difficulty to bind Application Bar like you would bind normal buttons. Fortunately the sample Jeremy provided did have his work around to this problem by keeping clean MVVM framework without writing any code in the code behind. We will see how to do that in this blog.

If you are new to Windows Phone development using MVVM framework then please read Jeremy’s blog to understand ins and out of the using Ultralight.MVVM. So lets get on to how to do view model binding for Application Bar.

In my application I am planning to have four buttons in my application bar and they are to Clear the data, Add or Remove data and apply changes. So my Application bar in XAML looks like the following

    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">             
    <shell:ApplicationBarIconButton IconUri="/Images/OK.png" Text="Score" />             
    <shell:ApplicationBarIconButton IconUri="/Images/Clear.png" Text="Clear"/>             
    <shell:ApplicationBarIconButton IconUri="/Images/Add.png" Text="Add" />             
    <shell:ApplicationBarIconButton IconUri="/Images/Remove.png" Text="Remove"/>         

By the way I am using free icons from this web site for testing. If you would look at the application bar there is no binding to tell the view what command to execute. This magic happens in the ViewModel.

This is three set process;

1. Create the commands first as follows

        public IActionCommand<object> AddCommand { get; private set; }         
        public IActionCommand<object> RemoveCommand { get; private set; }         
        public IActionCommand<object> ApplyCommand { get; private set; }         
        public IActionCommand<object> ClearCommand { get; private set; }
2. Instantiate the commands in the constructor as 
public MainViewModel()         
AddCommand = new ActionCommand<object>(o => _Navigate());             
RemoveCommand = new ActionCommand<object>(o => _Navigate());             
ApplyCommand = new ActionCommand<object>(o => _Navigate());             
ClearCommand = new ActionCommand<object>(o => _Navigate());         
3. Next and the final step to make sure you create a collection of commands and assign it to ApplicationBinding as shown below. 
         /// <summary>         
         ///     For pages, the list of commands to bind to application bar buttons         
         /// </summary>         
         public override IEnumerable<IActionCommand<object>> ApplicationBindings         
              get { return new[] { ApplyCommand, ClearCommand, AddCommand, RemoveCommand }; 

That’s about it, now you have bound the application bar buttons to Action Command in the View Model.

Windows Phone over Starwars MMO

After a long wait, I was finally able to login and play Star wars MMO, I was so psyched. I logged in and created my first Sith toon then I logged out since I have to go and learn and do some cool stuff in Windows Phone 7, how about that? So here I am at Microsoft and started my Windows Phone 7 application that I wanted to develop for some time. I never get time to do Windows Phone since I was doing few other things in my spare time. So here are the things, I got recommended by Microsoft to get started on Windows Phone development and thought I share it with you all and as a book mark for my future reference.

Code Samples

Silverlight Toolkit

“How do I” videos

Design Resources

Download free e-book for Windows Phone 7

Chirs is hosting the event and he has a fantastic blog and resources for Windows Phone development. I have been using Jounce for all my Silverlight development so obviously I decided to used Ultralight.MVVM. I keep you all posted on my progress on the application that I am developing.

Making Grid editable through program for C1FlexGrid

In some scenarios, you may have some user options, when they were selected, you want to take the user to a specific row and make it editable rather than asking the user to double click to enter editing. It is very easy to do it in Component One using following two lines

_flex2.Selection = new C1.Silverlight.FlexGrid.CellRange(0, 0);

First like set the row and cell where you want the control to go to and the second line enable editing for you.

If you still have trouble getting focus change the code to

Dispatcher.BeginInvoke(() => { this._flex2.Focus(); });.

Elegant way to create combo box in C1FlexGrid (Tip 8)

You are asked to create a Silverlight application to show a grid where one or more columns are combo boxes. This is a very common scenario. It can be very easily solved by creating a data edit template on the grid column and show a combo box, with a converter. There are lots of examples for this scenario, one in code project and another one in Manish blog. When I binged, there are lot of information in stack overflow. There is a much better solution if you are using Component One.

If you have component one, then we can remove all these data template, combo box and converters with simple property called Value Converter. Lets see the problem statement. We need to create a grid, with employee name and job title.


When you enter title in edit mode, it show available jobs like the following


Nothing special here, it is the standard combo box which shows all the available jobs for user to pick from. So how do we solve this problem using the special Value Converter?

Lets start from ViewModel this time. 

Code Snippet
  2. public List<Person> People
  3. {
  4.     get
  5.     {
  6.         List<Person> list = new List<Person>();
  7.         list.Add(new Person { ID = 1, Name = "Ajay", JobID = 1 });
  8.         list.Add(new Person { ID = 2, Name = "Jeeem", JobID = 2 });
  9.         return list;
  10.     }
  11. }

Nothing new in the view model, it is same as you would build a collection in any other program. How about View?

Code Snippet
  1. <c1:C1FlexGrid Name="_flex" ItemsSource="{Binding People}" AutoGenerateColumns="False">
  2.     <c1:C1FlexGrid.Columns>
  3.         <c1:Column Binding="{Binding Name}"/>
  4.         <c1:Column Binding="{Binding JobID, Mode=TwoWay}" Header="Title"/>
  5.     </c1:C1FlexGrid.Columns>
  6. </c1:C1FlexGrid>

Look at that, there is nothing special here either. We have a grid with two columns, first column is name and second column is Job ID. Please note that, we are not using combo box here. Ok so far we did not do anything new and I still want a combo box in second column. Lets go to the view code behind, that’s where the magic happens.

Code Snippet
  1. public Dictionary<int, string> dict = new Dictionary<int, string>();
  3. public MainPage()
  4. {
  5.     InitializeComponent();
  6.     dict.Add(1, "Manager");
  7.     dict.Add(2, "Team Lead");
  8.     _flex.Columns[1].ValueConverter = new ColumnValueConverter(dict);
  9. }

We first create a dictionary, where we are going to keep the options available to show in the combo box. Line 6 and 7 adds two job titles to the dictionary and finally in line 8, we say, for second column use the value converter and point to new instance Column Value Converter with dictionary collection. This informs flex grid that, this column needs to a combo box and use the dictionary to show the string value of the value bound to the column.

Look at the code, it is very simple and elegant. I really like the approach more than writing data template, converters etc.,

One things, I haven’t figured out yet is to bind the value converter directly to view model property. If we could do it, we can eliminate all code from code behind. If I find a solution, I will post it here.