Getting Started with the Coding4Fun toolkit Tile Control

published on: 10/20/2011 | Views: N/A | Tags: C4FToolkit

by WindowsPhoneGeek

In this article I am going to talk about the new Tile control from the FREE Coding4fun Toolkit in details. I will explain everything about the main features, available public API, and will  give lots of examples in different scenarios.

Basically Tile is an UI component that looks like the well known windows phone application tiles but can be used internally inside windows phone applications. I.e. Tile is a whole new control that fits in the Metro UI and can help you build cool looking Metro like applications for windows phone. It can be thought as a kind of extended button that derives from the Button class and exposes several new properties like Tile and TextWrapping.

 Getting Started

To begin using Tile first  add a reference to  the Coding4Fun.Phone.Controls.dll assembly.

NOTE: You can download this assembly from here: Coding4Fun Toolkit .

The next step is to add the "c4fToolkit" prefix declaration. Make sure that your page declaration includes the "c4fToolkit" namespace:

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

The sample code should looks like:

<c4fToolkit:Tile Width="173" Height="173" TextWrapping="Wrap" Title="Windows Phone Geek">
    <Image Source="Images/logo.png" Stretch="None"/>
</c4fToolkit:Tile>

Key Properties

The Tile control derives all properties and events from the Button class and exposes the following additional public properties:

• Title 

This is a dependency property of type string. It represents the text that will appear in the Tile control.

• TextWrapping

This is a dependency property of type TextWrapping. It represents the wrapping of the text that will appear in the Tile control.

TextWrapping="NoWrap" or not set	TextWrapping="Wrap "

Examples

1. Simple Usage:

The following examples demonstrate how to use this control in a simple way. You can place different elements as a content of the Tile control like for example: Image, Grid, Canvas, etc. and add some text via the Title property.  We will also subscribe to the "Click" event in order to indicate that the tile has been pressed.

Example1:

<c4fToolkit:Tile Click="Tile_Click" Width="173" Height="173" TextWrapping="Wrap" Title="Windows Phone Geek">
    <Image Source="Images/logo.png" Stretch="None"/>
</c4fToolkit:Tile>

Example2:

<c4fToolkit:Tile Click="Tile_Click"
                Margin="0, 0, 12, 0"
                Width="173"
                Height="173" TextWrapping="Wrap"
                Title="Click Me with  text wrapping" Click="Tile_Click">
    <Grid>
        <Image Source="Images/logo.png" Stretch="None" />

        <c4fToolkit:TileNotification Content="99" />
    </Grid>
</c4fToolkit:Tile>

private void Tile_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Tile has been clicked!");
}

NOTE: You can control the size of the Tile via its Height and Width properties.

NOTE: TileNotification is also a new component that comes with the latest version of the toolkit. Basically it  is a simple control that exposes a content property of type Object and has a predefined style:

2. Complex Example:

Example1:

This example demonstrates how to use Tiles in a complex scenario. We have a Canvas with Image transformed via RenderTransform and a TileNotification.

<c4fToolkit:Tile 
            HorizontalAlignment="Left"
            Margin="0, 12"
            Width="358"
            Height="173"
            c4fToolkitBinding:FrameworkElementBinding.ClipToBounds="True"
            Title="WindowsPhoneGeek"  >
    <Grid>
        <Canvas>
            <Image 
                        x:Name="image" 
                        Source="Images/map.jpg" 
                        Width="360">
                <Image.RenderTransform>
                    <CompositeTransform />
                </Image.RenderTransform>
            </Image>
        </Canvas>
        <c4fToolkit:TileNotification
                    Padding="18, 0"
                    Background="{StaticResource PhoneAccentBrush}">
            <TextBlock>model?</TextBlock>
        </c4fToolkit:TileNotification>
    </Grid>
</c4fToolkit:Tile>

Example2:

Here is another interesting example that comes with the Coding4Fun Toolkit samples:

<c4fToolkit:Tile 
    Height="173"
    Title="Coding4Fun Phone Toolkit">
    <Grid>
        <StackPanel 
            Orientation="Horizontal" 
            VerticalAlignment="Bottom"
            HorizontalAlignment="Right"
            Margin="12, 0">
            <TextBlock VerticalAlignment="Bottom">
    <Run>Fri</Run>
    <Run 
        FontSize="54"
        FontWeight="Bold"
        FontFamily="{StaticResource PhoneFontFamilySemiBold}">
        15
    </Run>
            </TextBlock>

        </StackPanel>
        <c4fToolkit:TileNotification
            Padding="0"
            Background="Transparent"
            HorizontalAlignment="Left">
            <StackPanel Orientation="Horizontal">
                <Image 
                    Height="35"
                    Stretch="Uniform"
                    Source="/Coding4Fun.Phone.TestApplication;component/Media/icons/appbar.share.rest.png" />
                <TextBlock 
                    VerticalAlignment="Center">Birthday</TextBlock>
            </StackPanel>
        </c4fToolkit:TileNotification>
    </Grid>
</c4fToolkit:Tile>

That was all about the Tile control from the Coding4fun Toolkit in depth.  You can find the full source code here:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Getting Started with the Coding4Fun toolkit Tile Control'

Title Your Name

Comment