Binding to HubTile Events using MVVM Light EventToCommand

by WindowsPhoneGeek

In this post I am going to talk about data binding to HubTile events using MVVM Light. Previously we explained how to use the HubTile events in a simple scenario without using data binding. However, when working with MVVM and data binding the usual approach to handle events is by using commands. Unfortunately, the HubTile does not expose any of its events as commands. Here, the EventToCommand behavior from the MVVM Light framework comes handy and we will use it to create a solution that works better with data binding and MVVM.

Before we begin you can also take a look at:

• How to bind a Windows Phone control Event to a Command using MVVM Light
• Working with the Windows Phone HubTile Events

We will use as a basis the code from our previous post: Windows Phone HubTile in depth| Part2: Data Binding.

To begin with at first we will add the following changes:

Step1. Add a new TapCommand property of type ICommand to the TileItem class. The full code is:

public class TileItem
{
    public string ImageUri
    {
        get;
        set;
    }

    public string Title
    {
        get;
        set;
    }

    public string Notification
    {
        get;
        set;
    }

    public bool DisplayNotification
    {
        get
        {
            return !string.IsNullOrEmpty(this.Notification);
        }
    }

    public string Message
    {
        get;
        set;
    }

    public string GroupTag
    {
        get;
        set;
    }

    public ICommand TapCommand
    {
        get;
        set;
    }
}

Step2. We will add a new HubTileTapAction method that will be used to handle the HubTile Tap event:

private void HubTileTapAction(string param)
{
    string message = string.Format("{0} was tapped", param);
    MessageBox.Show(message);
}

Step3. Create an ICommand instance using the previously created HubTileTapAction method:

public MainPage()
{
    InitializeComponent();

    ICommand tapCommand = new RelayCommand<string>(this.HubTileTapAction);
    //...
}   

Step4. Create a sample data source(List of TileItems) and set the TapCommand  property:

public MainPage()
{
    InitializeComponent();

    ICommand tapCommand = new RelayCommand<string>(this.HubTileTapAction);

    List<TileItem> tileItems = new List<TileItem>()
    {
        new TileItem() {
            ImageUri ="/Images/chicken.jpg", 
            Title = "Chicken", Notification = "$3.49", GroupTag = "TileGroup",
            TapCommand = tapCommand
        },
        new TileItem() { 
            ImageUri ="/Images/wings.jpg", 
            Title = "Wings", Notification = "Only $2.49", GroupTag = "TileGroup",
             TapCommand = tapCommand
        },
        
        //...
    };
   //.
}

Step5. Bind the TapCommand property from the model to the HubTile Tap event using EventToCommand:

<ListBox Grid.Row="0" x:Name="tileList">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <toolkit:HubTile Title="{Binding Title}" Margin="3" 
                             Notification="{Binding Notification}"
                             DisplayNotification="{Binding DisplayNotification}" 
                             Message="{Binding Message}" 
                             GroupTag="{Binding GroupTag}" Source="{Binding ImageUri}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Tap">
                        <cmd:EventToCommand Command="{Binding TapCommand}" CommandParameter="{Binding Title}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </toolkit:HubTile>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

NOTE: In the code sample above the Title property is used as a CommandParameter.

Step6. Set the HubTile ItemsSource(this is already done in the previous article that we use as a basis):

public MainPage()
{
    //.

   this.tileList.ItemsSource = tileItems;
}

That was all about data binding to HubTile Events using MVVM Light EventToCommand. The source code is available here:

I hope that the article was helpful.

You may also find interesting the following articles:

• Working with the Windows Phone HubTile Events
• How to bind a Windows Phone control Event to a Command using MVVM Light
• Windows Phone HubTile in depth| Part1: key concepts and API
• Windows Phone HubTile in depth| Part2: Data Binding
• Windows Phone HubTile in depth| Part3: Freezing and Unfreezing tiles

You can also follow us on Twitter @winphonegeek

Comments

       i:Interaction.Triggers
            :EventTrigger EventName="Tap"
                cmd:EventToCommand CommandParameter="{Binding KpiName}" Command="{Binding KpiCommand}"
                     !--local:BindingHelper.Binding
                     local:RelativeSourceBinding Path="TapCommand"
                     TargetProperty="Command" RelativeMode="ParentDataContext"/
                    /local:BindingHelper.Binding--
                /cmd:EventToCommand
            /i:EventTrigger
       /i:Interaction.Triggers