Flipping C1Tiles in Code

Now a days, Tiles have become one of the necessary feature of every application. Every one wants to have tiled display for providing quick navigation and better UI to their application. C1Tile helps you achieve the same and you can get several different tile controls that support sliding and flipping animations with live updates. By default, Tiles are flipped by user interaction or on a regular time interval. In this blog, we will see how you can Flip C1Tile in code based on your requirement. The two scenario's which we would discuss are: 1. Change the Tile Content 2. Update the Content Template Tile Content You can easily change the Tile content using the Content property of C1Tile. When the Tile is not frozen, changing the Content property will force animation itself. So, there is no need to call any additional methods for animation. If you do need any animation then you can set the IsFrozen property to False before updating tile content and then set it back to True. Here is the code which you can use:

private void Tile2_Change(object sender, RoutedEventArgs e)  
{  
  int age;  
  Int32.TryParse(txtAge.Text, out age);  
  if (age > 18 )  
  {  
    tile.Content =  
      "You are an Adult !";  
  }  
  else  
  {  
  tile.Content =  
    "You are still a Kid !";  
  }  
  //tile.IsFrozen = true;  
}  

Update Content Template Sometimes, you don't want to change the content instead you want to change the whole content template. In this case, you can use custom DataTemplateSelector. The template will look like:

<UserControl.Resources>  
        <local:ContentTemplateSelector x:Key="contenttemplateSelector">  
            <local:ContentTemplateSelector.Resources>  
                <ResourceDictionary>  
                    <DataTemplate x:Key="ContentTemplate">  
                        <StackPanel >  
                            <Image Source="/SL_Tile;component/Images/Desert.jpg" />  
                            <TextBlock Text="{Binding}" />  
                        </StackPanel>  
                    </DataTemplate>  
                    <DataTemplate x:Key="BackContentTemplate">  
                        <StackPanel Background="Red" Margin="5">  
                            <TextBlock Text="Welcome" FontSize="18" />  
                        </StackPanel>  
                    </DataTemplate>  
                </ResourceDictionary>  
            </local:ContentTemplateSelector.Resources>  
        </local:ContentTemplateSelector>  
    </UserControl.Resources>  

In the code behind, you need to create the ContentTemplateSelector class which is inherited from C1DataTemplateSelector. Here is the class definition:

public class ContentTemplateSelector : C1.Silverlight.C1DataTemplateSelector  
{  
 public bool Back { get; set; }  
 public override DataTemplate SelectTemplate(object item, DependencyObject contain   er)  
 {  
  // select different content template depending on condition  
  return (Back ? base.Resources["BackContentTemplate"] : base.Resources["ContentTe    mplate"]) as DataTemplate;  
 }  
}  

And finally, on button click, you may update the template with the help of the following code:

private void FlipTile(object sender, RoutedEventArgs e)  
{  
 // enable animation  
 secondTile.IsFrozen = false;  
 // change condition in ContentTemplateSelector  
 \_templateSelector.Back = !\_templateSelector.Back;  
 // force animation  
 secondTile.UpdateTile();  
 // disable animation  
 secondTile.IsFrozen = true;  
 // if you don't want animations while content is not changed, set tile.IsFrozen    to true and only turn on it while you change content  
 // tile.IsFrozen = false;  
}

You can refer to the complete sample implementing the same.