How to Programmatically Switch between the HubTile Visual States

In this post I am going to talk about how to programmatically switch between different HubTile Visual States.  Since the HubTile does not expose any API for changing / switching between its visual states manually it is not obvious how you can do that. However, the solution is pretty simple: you just need to use the VisualStateManager class which manages states and the logic for transitioning between states of controls.

For reference take a look at the official MSDN Documentation.

To begin with, lets first create a new Windows Phone application project and add a reference toMicrosoft.Phone.Controls.Toolkit.dll.

NOTE: For more information about the HubTile control take a look at:

• "Silverlight for Windows Phone Toolkit In Depth" FREE e-book
• Windows Phone HubTile in depth| Part1: key concepts and API

Step1. Add the following code in MainPage.xaml:

?

1 2 3 4

<phone:PhoneApplicationPage    x:Class="HubTileDemo.MainPage"    ...    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">

?

1 2 3 4 5 6 7 8

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Orientation="Vertical">         <toolkit:HubTile x:Name="hubTile" Background="Green" Source="wpglogo.png" Title="Hold Here" Message="This is HubTile message!" Margin="10"/>           <Button x:Name="btnGoToExpanded" Content=" Go To Expanded State" Click="btnGoToExpanded_Click" />         <Button x:Name="btnGoToSemiexpanded" Content="Go To Semiexpanded State" Click="btnGoToSemiexpanded_Click" />         <Button x:Name="btnGoToFlipped" Content="Go To Flipped State" Click="btnGoToFlipped_Click" />         <Button x:Name="btnGoToCollapsed" Content="Go To Collapsed State" Click="btnGoToCollapsed_Click" /> </StackPanel>

Step2.  Set the HubTile "IsFrozen" property to true in order to prevent the HubTile Visual State from being changed automatically. Add the following code in MainPage.xaml.cs:

?

1 2 3 4 5 6

public MainPage() {     InitializeComponent();       this.hubTile.IsFrozen = true; }

Step3. Go To Expanded State implementation:

?

1 2 3 4

private void btnGoToExpanded_Click(object sender, RoutedEventArgs e) {     VisualStateManager.GoToState(this.hubTile, "Expanded", true); }

Step4. Go To Semiexpanded State implementation:

?

1 2 3 4

private void btnGoToSemiexpanded_Click(object sender, RoutedEventArgs e) {     VisualStateManager.GoToState(this.hubTile, "Semiexpanded", true); }

Step5. Go To Flipped State implementation:

?

1 2 3 4

private void btnGoToFlipped_Click(object sender, RoutedEventArgs e) {     VisualStateManager.GoToState(this.hubTile, "Flipped", true); }

Step6. Go To Collapsed State implementation:

?

1 2 3 4

private void btnGoToCollapsed_Click(object sender, RoutedEventArgs e) {     VisualStateManager.GoToState(this.hubTile, "Collapsed", true); }

That was all about programmatically switching between the different HubTile Visual States. The source code is available here:

HubTileVisualStates

I hope that the article was helpful.

You may also find interesting the following articles:

• "Silverlight for Windows Phone Toolkit In Depth" FREE e-book
• Working with the Windows Phone HubTile Events
• 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 for Windows Phone; @winrtgeek for Windows 8 / WinRT

Comments

Thanks again

posted by: Steven on 10/15/2011 6:18:40 PM

Thanks again! Very useful for me!

How to Switch on dynamically created HubTiles?

posted by: MSiccDev on 1/30/2012 1:24:46 PM

This works fine with a single HubTile.

But how can I do this if I add my HubTiles as DataTemplate to a ListBox?

The VisualStateManager does not recognize the HubTile as control, and returns alwas null.

Anyone an idea?

Programatically adding and animating

posted by: Nate Radebaugh on 12/21/2012 8:51:14 PM

If you are going to be controlling the states of a HubTile you have programatically added, you must do it after the HubTile is loaded. For instance:

    HubTile tile = new HubTile();
    tile.Title = "Title";
    tile.Message = "Message";
    tile.Loaded += tile_Loaded;

And then have the event handler perform the settings: (for example)

    void tile_Loaded(object sender, RoutedEventArgs e)
    {
        HubTile tile = (HubTile)sender;

        string setState = "Semiexpanded";

        // set the tile's state
        VisualStateManager.GoToState(tile, setState, true);

        tile.IsFrozen = true;
    }

Hope this helps someone else, took me a while to figure out where I was going wrong since the VisualStateManager.GoToState() does nothing and returns false if it doesn't know the state you send it, which it never knows before the HubTile is Loaded.