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