Coding4Fun Toolkit – Now With In-App Tiles

Windows Phone tiles are cool – everyone knows that. So far, developers can create shell tiles outside the application itself, pinning them to the user’s home screen (read more about ShellTile and ShellTileSchedule). Today, Clint Rutkas updated his Coding4Fun Toolkit with a component called Tile, that allows the usage of tiles directly in a third-party application. It doesn’t act exactly like an OS live tile (i.e. does not automatically update or turn), but it provides the look-and-feel for one.

At the moment when I was writing this article, the control was not yet a part of the official ZIP and NuGet packages because of more ongoing testing, but it is available through the Source Code channel. The initial changeset was 68838, but there were some reference issues – now fixed, so the changeset that should be downloaded is 68882.

Once you download and build the solution, you need to add the libraries from the bin folder as references to your project:

Image lost since transition to new blog

The Tile control is a part of the Coding4Fun.Phone.Controls assembly. That being said, you need a proper namespace reference in the XAML page where Tile controls will be used.

xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

You can now access the control through c4f:Tile elements.

NOTE: For experimentation purposes I was using the WrapPanel control – that way, I can easily stack the Tile controls without the need to adapt the set to a more constrained (read: not wrappable by default) StackPanel. WrapPanel is a part of the Silverlight for Windows Phone Toolkit.

Let’s take a look at a short XAML snippet:

<toolkit:WrapPanel  x:Name="ContentPanel" Orientation="Horizontal">
    <c4f:Tile Height="170" Width="170" Title="Test Tile 1"></c4f:Tile>
    <c4f:Tile Margin="10,0,0,0"  Height="170" Width="170" Title="Test Tile 2">
        <Image Source="ApplicationIcon.png"></Image>
    </c4f:Tile>
    <c4f:Tile Margin="0,10,0,0" Height="170" Width="170" Title="Test Tile 3">
        <toolkit:DatePicker></toolkit:DatePicker>
    </c4f:Tile>
</toolkit:WrapPanel>

I have three custom tiles created here, all with a pre-defined width and height. By default, an in-app tile doesn’t look like a square – after all, some developers might decide to build a rectangular Metro layout. In my case, I set both the height and the width to exactly the same values so it does look like an original Live Tile.

Here is the visual output for the snippet above:

Image lost since transition to new blog

Notice that the default tile background is the same as the phone theme. The color itself is represented by the PhoneAccentColor static resource and the brush is PhoneAccentBrush (more on pre-defined system styles here). The background color can be modified through the Background property that can be set as a custom brush.

What I find particularly interesting is the fact that I can set a VideoBrush to be the background and play an actual video inside the tile – perfect for short video clips and quick previews. For example, if you decide to build a video hub, you might do quick previews directly in the tile. Learn more about the VideoBrush class here.

The text on the bottom is defined by the Title property. As a general recommendation, I would advice on not setting the Title to be longer than 13 characters because the text will not look well being close to the edge or going outside the visible area.

There is no default ImageSource property that would let you define the image that is used in the tile, but since it inherits from the regular Button class, the Content property can be set to an Image control, that will automatically fill the entire tile, given the default Image parameters.

The last tile is carrying an internal control, also through the Content property. Notice that the padding is automatically set for controls placed inside the tile. As a general practice, you won’t see many tiles with other controls inside them, but I always had the concept of a preference window that was based solely on live tiles. Something like this:

Image lost since transition to new blog

It would be even better if developers were able to pin such custom tiles to the home screen for fast settings modifications (e.g. a WiFi switch), but alas – it is not available with the current SDK.