Pages

Wednesday, December 31, 2014

When we are using MVVM, events triggered from the View should be bound to a ICommand in the ViewModel. In this post let’s see how we can bind an ItemClick event of a ListView to a implementation of a ICommand in the ViewModel.

For the demonstration purposes, I am going ahead with a Windows Phone App. I am creating a Blank Windows Phone App and there I am creating two folders named “Model” and “ViewModel”. I am creating the following class named “Item” inside the Model folder.

publicclass Item

{

publicint Id { get; set; }

publicstring Name { get; set; }

publicstring Description { get; set; }

publicdouble Price { get; set; }

publicstatic List<Item> GetItems()

{

returnnew List<Item>()

{

new Item()

{

Id = 1,

Name = "Item 1",

Description = "Item 1 Description",

Price = 120.00

},

new Item()

{

Id = 2,

Name = "Item 2",

Description = "Item 2 Description",

Price = 360.00

},

new Item()

{

Id = 3,

Name = "Item 3",

Description = "Item 3 Description",

Price = 590.00

}

};

}

}

Now I am adding the following ItemViewModel class to ViewModel folder.

publicclass ItemViewModel

{

public List<Item> Items { get; set; }

public ItemViewModel()

{

Items = Item.GetItems();

}

}

Next, I am modifying the MainPage.xaml adding a ListView and changing it’s ItemTemplate to show only the Name of the item.

<Grid>

<Grid.RowDefinitions>

<RowDefinitionHeight="20*"/>

<RowDefinitionHeight="105*"/>

</Grid.RowDefinitions>

<StackPanelGrid.Row="1">

<ScrollViewer>

<ListViewItemsSource="{Binding Items}">

<ListView.ItemTemplate>

<DataTemplate>

<StackPanel>

<TextBlockText="{Binding Name}"

Style="{StaticResource ListViewItemTextBlockStyle}"/>

</StackPanel>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</ScrollViewer>

</StackPanel>

</Grid>

Now from the code behind of the MainPage.xaml I am setting up it’s DataContext to new ItemViewModel.

publicsealedpartialclass MainPage : Page

{

public MainPage()

{

this.InitializeComponent();

this.DataContext = new ItemViewModel();

}

}

Once I got all these steps completed and if I run the project, I am getting the following.

Initial Result

So now my requirement is once I click on a item, an event should be triggered and there I should be able get the clicked item information. So I can do whatever I want with that item like navigating to another page. And all these should be happened using an ICommand and not with the regular ItemClick event of the ListView. Now let’s see how we can achieve that.

First let’s create an implementation of an ICommand. I am creating a folder named “Common” and adding the following class named “DelegateCommand”.

Basically if you have created a Windows Runtime App other than using the blank app template, Visual Studio will create a folder named “Common” inside your project and he will be adding several boilerplated classes there. One of them is a class named “RelayCommand”. Here my DelegateCommand is a modified version of RelayCommand. I did some changes to make it generic.

Now let’s modified the ItemViewModel by adding a property of type DelegateCommand<ItemClickEventArgs>.

In the constructor, I am creating a new object of ItemClickedCommand passing in the Action method as OnItemClicked. Inside my OnItemClicked I can get the item information from which it was triggered.

Now let’s see how I can bind the created ItemClickedCommand to my ListView in the MainPage.xaml. The easy way to do this by using Blend. Right click on the MainPage.xaml and click on “Open in Blend”.

Opened in Blend

First open up the Objects and Timeline window, and drill up to ListView. Select the ListView and from the Assets window, select Behaviors and double click on EventTriggerBehavior. A new EventTriggerBehavior will be created under the ListView and now select the EventTriggerBehavior. From the Properties window, in the EventName dropdown, select the ItemClick. Now save the project and move back to Visual Studio.

Load the changes and now you will see two new xml namespaces are added (Microsoft.Xaml.Interactivity and Microsoft.Xaml.Interactions.Core) along with the EventTriggerBehavior. Modify the EventTriggerBehavior further as follows.

Now you can see that the DelegateCommand in the ViewModel is bound to InvokeCommandAction. And please note, for the ListView to be click enabled, I have set the IsItemClickEnabled to "True".

Now put a breakpoint to OnItemClicked method in the ViewModel and run the application and click on an item. Breakpoint will get hit and you can see it is successfully getting the clicked item information.

Clicked Item

Now you can do whatever you want to do with item (navigate to another page showing detailed information of the item etc.). I choose to show details of an item in another page, and this is how it looks like.

Tuesday, December 16, 2014

Wiki Ninjas is a group of authors who celebrate and evangelize the community catalyst and social-authoring excellence that is called TechNet Wiki. As one of the Wiki Ninjas, I have got the opportunity to write my first ever post in Wiki Ninjas Official Blog of TechNet Wiki.

I have started off with the session giving an introduction to what's new in the Windows Runtime Application Development ecosystem. Then after explaining about Windows Runtime Apps, went deep with the Application Life-cycle and page navigation. Then moved to the Universal App template and showed the newest Visual Studio features to support Universal App development. Wound up the session demoing Code Sharing Strategies and XAML Sharing Strategies.