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:

Step1. Add the following code in MainPage.xaml:

<phone:PhoneApplicationPage

x:Class="HubTileDemo.MainPage"

...

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">

<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:

public MainPage()

{

InitializeComponent();

this.hubTile.IsFrozen = true;

}

Step3. Go To Expanded State implementation:

private void btnGoToExpanded_Click(object sender, RoutedEventArgs e)

{

VisualStateManager.GoToState(this.hubTile, "Expanded", true);

}

Step4. Go To Semiexpanded State implementation:

private void btnGoToSemiexpanded_Click(object sender, RoutedEventArgs e)

{

VisualStateManager.GoToState(this.hubTile, "Semiexpanded", true);

}

Step5. Go To Flipped State implementation:

private void btnGoToFlipped_Click(object sender, RoutedEventArgs e)

{

VisualStateManager.GoToState(this.hubTile, "Flipped", true);

}

Step6. Go To Collapsed State implementation:

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:

You can also follow us on Twitter: @winphonegeekfor Windows Phone; @winrtgeekfor 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.

巴特西

How to Programmatically Switch between the HubTile Visual States

Comments

Thanks again

How to Switch on dynamically created HubTiles?

Programatically adding and animating

最新文章

热门文章