How to Update Secondary and Application Tiles in Windows Phone apps

published on: 12/22/2011 | Views: N/A | Tags: Mango

by WindowsPhoneGeek

This is the second post in the series of articles that guide you through the process of implementing Tiles in Windows Phone apps.

• How to add and remove Secondary Tiles in Windows Phone apps
• How to Update Secondary and Application Tiles in Windows Phone apps

In this article I am going to talk about how to Update Secondary and Application Tiles in Windows Phone apps.

NOTE: We will use the example from the previous post, take a look at it for reference!

In short here is how the previous example looks like.

We will now add some additional Text Boxes which will be used to enter different values to update the tiles. We will also add two buttons to update the secondary and application tiles.

Update Secondary and Application Tiles Step by Step

Step1. Add the following code inside MainPage.xaml.

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <CheckBox x:Name="cbShowTile" Content="Show seconadry tile" 
              Checked="cbShowTile_Checked"
              Unchecked="cbShowTile_Unchecked"/>
    <TextBlock TextWrapping="Wrap" Text="When a new tile is created, the UI will navigate to Start." />
    
    
    <TextBlock Text="Title:" />
    <TextBox x:Name="tbTitle" />
    
    <TextBlock Text="Back title:" />
    <TextBox x:Name="tbBackTitle" />
    
    <TextBlock Text="Count:" />
    <TextBox x:Name="tbCount" />
    
    <TextBlock Text="Back content:" />
    <TextBox x:Name="tbBackContent" />
    
    <Button x:Name="btnUpdateSecondaryTile" Content="Update Secondary Tile" Click="btnUpdateSecondaryTile_Click" />
    <Button x:Name="btnUpdateApplicationTile" Content="Update Application Tile" Click="btnUpdateApplicationTile_Click" />
</StackPanel>

Step2. Add the following code inside the "btnUpdateSecondaryTile" Click handler:

private void btnUpdateSecondaryTile_Click(object sender, RoutedEventArgs e)
{
    ShellTile secondaryTile = this.FindTile(SecondaryTileUriSource);
    if (secondaryTile == null)
    {
        MessageBox.Show("There is no secondary tile");
        return;
    }

    this.UpdateTile(secondaryTile);
}

In the method above, we are using the FindTile method that we developed for the previous example to find the secondary tile. Then, if there is an active secondary tile we use the UpdateTile method to update it using values from the text boxes.

Step3 Add the following methods that will be used to update tiles using text box values:

private void UpdateTile(ShellTile tile)
{
    StandardTileData newTileData = new StandardTileData();

    // set tile data
    this.SetTileData(this.tbTitle, (text) => newTileData.Title = text);
    this.SetTileData(this.tbBackTitle, (text) => newTileData.BackTitle = text);
    this.SetTileData(this.tbBackContent, (text) => newTileData.BackContent = text);
    this.SetTileData(this.tbCount, (text) => newTileData.Count = int.Parse(text));

    // update tile
    tile.Update(newTileData);

    MessageBox.Show("Tile updated. Go to home screen to see the result.");
}

private void SetTileData(TextBox textBox, Action<string> tileDataAction)
{
    string text = textBox.Text;
    if (!string.IsNullOrEmpty(text))
    {
        // only set tile data if text has been entered
        tileDataAction(text);
    }
}

Note that in the snippet above we are using the SetTileData method to update tile properties only if the user has entered a value in the text box. After collecting values from all four text boxes we call the Update method for the tile instance passed in as a parameter to actually update it.

Step4. Add the following code inside "btnUpdateApplicationTile" Click handler:

private void btnUpdateApplicationTile_Click(object sender, RoutedEventArgs e)
{
    ShellTile applicationTile = ShellTile.ActiveTiles.First();
    this.UpdateTile(applicationTile);
}

Note that the application tile is always the first one in the ActiveTiles collection even if the user has not pinned it to the home screen. This is why we can get the application tile instance by just calling the First() extension method as in the code snippet above.

Step5.Testing the app:

NOTE: You will first need to check the "Show Secondary Tile" CheckBox in order to activate the Secondary Tile.

• Update Secondary Tile: Just enter some data and then press the "Update Secondary Tile" button:

 

• Update Application Tile:

NOTE: You will need to pin the application to the start screen. You can do this in the following way:

  

Next just enter some data and press  the "Update Application Tile" button.

  

That was all about how to how to update secondary and application Tiles in Windows Phone apps. The full source code is available here:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'How to Update Secondary and Application Tiles in Windows Phone apps'

Title Your Name

Comment