Programmatically changing Visual States of HubTile controls used as ListBox Items

published on: 2/7/2012 | Views: N/A | Tags: WP7Toolkit

by WindowsPhoneGeek

In this post I am going to talk about how to programmatically change the visual states of a HubTile control inside a ListBox(or any ItemsControl).

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

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

We will use as a base a previous article that looks at the simpler case of changing the visual state of a single HubTile control: http://www.windowsphonegeek.com/articles/How-to-Programmatically-switch-the-HubTile-Visual-States

So let`s create a new Windows Phone application project and add a reference to Microsoft.Phone.Controls.Toolkit.dll.

Step1. First we will add a ListBox control and will place a HubTile control inside its ItemTemplate. Next we will add 4 buttons that will be used to change the Visual State of the HubTile control to: Expanded, Semiexpanded, Flipped and Collapsed correspondingly.

NOTE: "toolkit" namespace is defined in the page class in this way:

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

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <!--ContentPanel - place additional content here-->
    <ListBox Grid.Row="0" x:Name="listBox">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <toolkit:HubTile GroupTag="ListTiles" Background="Green" Source="wpglogo.png" Title="Hold Here" Message="This is HubTile message!" Margin="10"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Orientation="Vertical">
            <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>
</Grid>

Step2. Next we will set a dummy data source to the ListBox control in order to show some hub tiles:

public MainPage()
{
    InitializeComponent();

    // use a dummy data source, just to get some tiles displayed in the list box
    this.dataSource = new List<string>() { "item1", "item2", "item3" };
    this.listBox.ItemsSource = this.dataSource;
}

Step3. From a previous article we will use a method to find a visual child of a given type:

NOTE: For reference take a look at: http://www.windowsphonegeek.com/tips/how-to-access-a-control-placed-inside-listbox-itemtemplate-in-wp7

private T FindFirstElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
    var count = VisualTreeHelper.GetChildrenCount(parentElement);
    if (count == 0)
        return null;

    for (int i = 0; i < count; i++)
    {
        var child = VisualTreeHelper.GetChild(parentElement, i);

        if (child != null && child is T)
        {
            return (T)child;
        }
        else
        {
            var result = FindFirstElementInVisualTree<T>(child);
            if (result != null)
                return result;

        }
    }
    return null;
}

Step4. Next, we will use that method to find the HubTile control that corresponds to a given data item in a bound list box control:

private void ChangeTileState(ItemsControl itemsControl, object dataItem, string state)
{
    DependencyObject containerElement = itemsControl.ItemContainerGenerator.ContainerFromItem(dataItem);
    HubTile hubTile = this.FindFirstElementInVisualTree<HubTile>(containerElement);
    if (hubTile != null)
    {
        VisualStateManager.GoToState(hubTile, state, true);
    }
}

Step5. We will also create an overload of the above method to set the visual state of all hub tiles in a list box control:

private void ChangeTileState(ItemsControl itemsControl, string state)
{
    IEnumerable itemsSource = itemsControl.ItemsSource;
    if (itemsSource == null)
    {
        return;
    }
    foreach (object dataItem in itemsSource)
    {
        this.ChangeTileState(this.listBox, dataItem, state);
    }
}

Step6. Finally, we can implement the button handlers using the ChangeTileState method in order to switch between different Visual States(Expanded, Semiexpanded, Flipped and Collapsed ):

private void btnGoToExpanded_Click(object sender, RoutedEventArgs e)
{
    string expandedStateName = "Expanded";
    this.ChangeTileState(this.listBox, expandedStateName);
}

private void btnGoToFlipped_Click(object sender, RoutedEventArgs e)
{
    string flippedStateName = "Flipped";
    this.ChangeTileState(this.listBox, flippedStateName);
}

private void btnGoToCollapsed_Click(object sender, RoutedEventArgs e)
{
    string collapsedStateName = "Collapsed";
    this.ChangeTileState(this.listBox, collapsedStateName);
}

private void btnGoToSemiexpanded_Click(object sender, RoutedEventArgs e)
{
    string semiexpandedStateName = "Semiexpanded";
    this.ChangeTileState(this.listBox, semiexpandedStateName);
}

That was all about how to programmatically change the visual states of a HubTile control placed inside a ListBox(or any ItemsControl). The full source code is available here:

I hope that the article was helpful.

You may also find interesting the following resources:

• "Windows Phone Toolkit In Depth 2nd edition" FREE e-book
• More HubTile articles in our ArticleIndex

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Programmatically changing Visual States of HubTile controls used as ListBox Items'

Title Your Name

Comment