How to Programmatically Switch between the HubTile Visual States

published on: 10/13/2011 | Views: N/A | Tags: WP7Toolkit

by WindowsPhoneGeek

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 to Microsoft.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:

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

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

Comments

Add comment to 'How to Programmatically Switch between the HubTile Visual States'

Title Your Name

Comment