How to use the Coding4Fun Tile control?

How to use the Coding4Fun Tile control?

There has been an update to the Coding4Fun toolkit around 10 days ago, which included a new control – Tile control. It’s an interesting control which basically creates you a button with Content and Title part, without animation. So it’s a static tile, unlike the HubTile I wrote about earlier. But, it does the trick – it looks like an ordinary Tile, and if you don’t need animations, it might be a perfect choice for you. Let’s see what can we do with it.

In my last post, I created a small application called NoteKeeper which basically keeps a few static notes and displays them on a screen. What if we didn’t want to use the ExpanderView control, but instead the Tile control, to make our NoteKeeper more similar to the original Notes application in Windows Phone OS? Well, it’s rather simple, and it will let me show what a Tile control can do. Since there is no official documentation on the C4F Codeplex site, I hope this will be helpful to anyone starting to use this control.

So, go back to the NoteKeeper project (or get the code from the last post first). Delete all stuff in the MainPage.xaml that we used for displaying the notes in ExpanderViews. After you’ve done, add the coding4fun toolkit to your project. Go to

Tools –> Library Package Manager –> Package Manager Console.

If you don’t have it in your Visual Studio, you can install it from here.

Write the following text in the console:

Install-Package Coding4Fun.Phone.Controls

After you press enter, you should get the following text:

Successfully installed 'Coding4Fun.Phone.Controls 1.4.6'.
Successfully added 'Coding4Fun.Phone.Controls 1.4.6' to NoteKeeper.

If you didn’t get that, there must be something wrong.

Now, add the C4F toolkit to your MainPage.xaml namespaces:

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

Now you’re good to go.

To display the Notes in the form of the Tiles, go to the line after this one:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  

And add a ListBox to hold our notes. Make sure that ItemsPanel of the Listbox is WrapPanel (from the Silverlight for WP toolkit – we added it earlier, in my last post, so if you didn’t, make sure you do!):

<ListBox ItemsSource="{StaticResource Notes}">  
  <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
          <toolkit:WrapPanel />
      </ItemsPanelTemplate>
  </ListBox.ItemsPanel>

Now, change the ItemTemplate of the Listbox:

<ListBox.ItemTemplate>  
      <DataTemplate>
          <c4f:Tile Title="{Binding Title}"
                    Background="{StaticResource PhoneAccentBrush}"
                    Width="173" Height="173"
                    Margin="16"
                    FontSize="18">
          <c4f:Tile.Content>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Content}"
                               MaxHeight="130" VerticalAlignment="Top"
                               FontSize="24"/>
           </c4f:Tile.Content>
           </c4f:Tile>
      </DataTemplate>
  </ListBox.ItemTemplate>
 </ListBox>

You can see that we bound the Title property of the Tile to the Title of our Notes. We changed the Tile background to be in the colours of your phone’s accent colour. We changed the width and height to 173, put a Margin of 16, and FontSize 18. Now, the Content property could’ve just been plain text, but since it’s basically a button, you can put anything you like in the Content part of the Tile. I put a TextBlock, to wrap the text of our notes, vertically aligned it to top, and bound it to Content of our notes.

To show you that you can put pretty much what ever you like to the Tile Content, I will give you the following 2 code snippets:

<c4f:Tile Margin="16"  
            FontSize="24"
            Background="{StaticResource PhoneAccentBrush}"
            Width="173" Height="173">
  <c4f:Tile.Content>
      <StackPanel>
          <TextBlock Text="{Binding ElementName=col, Path=Color}" />
          <c4f:ColorHexagonPicker Name="col"/>
      </StackPanel>
  </c4f:Tile.Content>
</c4f:Tile>  

In this one, I put a StackPanel in the Content, and in the StackPanel I put a TextBlock which I bound to the ColorHexagonPicker from the Coding4Fun toolkit, so I am basically putting a hexagon colour picker and a textblock that shows the value of the picked colour. In the next code snippet, I put an image in the Tile, and enabled the Tilt effect from the Silverlight for WP toolkit:

<c4f:Tile Margin="16"  
            FontSize="24"
            Background="{StaticResource PhoneAccentBrush}"
            Width="173" Height="173"
            Title="Trash"
            toolkit:TiltEffect.IsTiltEnabled="True">
      <c4f:Tile.Content>
          <Image Source="Toolkit.Content/ApplicationBar.Delete.png"
                 Stretch="None"></Image>
      </c4f:Tile.Content>
  </c4f:Tile>

The image can be found in the Toolkit.Content folder, which was added when you installed Silverlight for Windows Phone toolkit package in the project.

The final result including the last two code snippets is shown in the next image:

notesTiles

I hope you enjoyed this post. If you did, make sure the others do to – let them know about it over Twitter and other channels

Igor Ralic

igor ralic

View Comments
Microsoft Certified Solutions Developer: Windows Store Apps in C#