Telerik blogs

The LiveTileHelper has been in our suite for over a year, but now with the releases of Windows Phone 7.8 and Windows Phone 8 it grabs the attention again. This Windows Phone component can be used to update your application’s primary tile and also to create or update Secondary Tiles linking to pages inside your application. Once created, the tile can change its size depending on the preferences of your users. LiveTileHelper gives you the option to use custom UIElements for content of the tiles and allows you to use different elements for the different sizes of the tile you create.

The new templates added with the release of Windows Phone 8 are Flip, Iconic and Cycle. All of them have been integrated with LiveTileHelper and all of them have been enhanced with the ability to be created with custom UIElements. Here’s an example for such a custom element:

<Grid x:Name="compass" Width="150" Height="150">
    <Ellipse Stroke="White" StrokeThickness="8" />
    <Path Width="100" Height="10" Stretch="Fill" Fill="White" Data="M0,5 L55,0 L110,5 L55,10 z M59,5.50002 C59,7.43302 57.433,9.00002 55.5,9.00002 C53.567,9.00002 52,7.43302 52,5.50002 C52,3.56702 53.567,2.00002 55.5,2.00002 C57.433,2.00002 59,3.56702 59,5.50002 z" UseLayoutRounding="False" Margin="40,39,10,101">
        <Path.RenderTransform>
            <RotateTransform Angle="40" CenterX="0.5" CenterY="0.5"/>
        </Path.RenderTransform>
    </Path>
    <TextBlock Text="N" FontSize="16" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,15" />
    <TextBlock Text="S" FontSize="16" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,15" />
</Grid>

Now if you want to create a tile with the new iconic template, here’s how you can do it:

public void CreateTile()
{
    RadIconicTileData iconicData = new RadIconicTileData()
    {
  IconVisualElement = this.compass,
         SmallIconVisualElement = this.pin,
         Title = "my map service",
         WideContent1 = "service"
    };
 
    Uri tileUri = new Uri("/MainPage.xaml", UriKind.RelativeOrAbsolute);
    LiveTileHelper.CreateTile(iconicData, tileUri, true);
}

Once the tile is created, your users can choose one of the three possible sizes for the tile:


The other tile templates can be used in a similar way. All of them include properties which allow you to use visual elements instead of the images that the native templates use. Here’s a list of these properties:

  • RadFlipTileData - VisualElement (used as BackgroundImage), BackVisualElement (as BackBackgroundImage), SmallVisualElement (as SmallBackgroundImage), WideVisualElement (as WideBackgroundImage), WideBackVisualElement (as WideBackBackgroundImage)
  • RadIconicTileData - IconVisualElement (as IconImage), SmallIconVisualElement (as SmallIconImage)
  • RadCycleTileData - SmallVisualElement (as SmallBackgroundImage), CycleVisualElements (as CycleImages)

These new features are also available in RadControls for Windows Phone 7. They can help you take advantage of the new tile templates if your WP7 app runs on a device with Windows Phone 7.8 or 8. The API is almost the same in both RadControls for Windows Phone 7 and 8. The only difference is that when developing for WP7 you will need to use the AreNewTilesSupported property in order to determine whether the device that runs the application supports the new tile templates. If it doesn’t you can still use the old RadExtendedTileData:

public void CreateTile()
{
    if (LiveTileHelper.AreNewTilesSupported)
    {
        RadIconicTileData iconicData = new RadIconicTileData()
        {
            IconVisualElement = this.compass,
            SmallIconVisualElement = this.pin,
            Title = "my map service",
            WideContent1 = "service"
        };
 
        Uri tileUri = new Uri("/MainPage.xaml", UriKind.RelativeOrAbsolute);
        LiveTileHelper.CreateTile(iconicData, tileUri, true);
    }
    else
    {
        RadExtendedTileData tileData = new RadExtendedTileData()
        {
            VisualElement = this.compass,
            IsTransparencySupported = true,
            Title = "my map service"
        };
        Uri tileUri = new Uri("/MainPage.xaml", UriKind.RelativeOrAbsolute);
        LiveTileHelper.CreateTile(tileData, tileUri);
    }
}

I hope this article will help you make that one small step in your application development, which is hopefully one giant leap to the hearts of your users.

Don’t hesitate to share your comments and feedback in our forums.


TodorPhoto
About the Author

Todor Petrov

Todor Petrov has been with Telerik since 2011, working on the Android and Windows Phone UI suites. He is passionate about technologies, movies and music.

 



Comments

Comments are disabled in preview mode.