Styling in WPF Tile View

Styling can be applied to both the TileViewControl and its items. The TileViewControl supports nine built-in styles that can be implemented at run time based on specified conditions.

Visual Styles

The TileViewControl has the following built-in styles:

  1. Office2007Blue
  2. Office2007Black
  3. Office2007Silver
  4. Office2010Blue
  5. Office2010Black
  6. Office2010Silver
  7. Blend
  8. Metro
  9. Transparent

These styles can be applied to the control using XAML and C#. The following code example illustrates how to apply Office2007Blue style to the TileViewControl.

<syncfusion:TileViewControl         syncfusion:SkinStorage.VisualStyle="Office2010Blue"        />
SkinStorage.SetVisualStyle(tileViewInstance, "Office2010Blue");

The following illustrations show the TileViewControl that is applied with different built-in styles.

C:/Users/boopeshkumart/Desktop/TileView_Themes/office2007Blue.png

C:/Users/boopeshkumart/Desktop/TileView_Themes/office2007silver.png

C:/Users/boopeshkumart/Desktop/TileView_Themes/office2007Black.png

C:/Users/boopeshkumart/Desktop/TileView_Themes/office2010Blue.png

C:/Users/boopeshkumart/Desktop/TileView_Themes/office2010silver.png

C:/Users/boopeshkumart/Desktop/TileView_Themes/office2010Black.png

C:/Users/boopeshkumart/Desktop/TileView_Themes/blend.png

C:/Users/boopeshkumart/Desktop/TileView_Themes/metro.png

C:/Users/boopeshkumart/Desktop/TileView_Themes/transparent.png

ItemContainerStyle

The ItemContainerStyle property of TileViewControl sets the style of TileViewItem. This style will be applied to all items available in the TileViewControl. The following example illustrates how to apply styles to the items.

  1. Create the style for TileViewControl.

         
    
      <Style TargetType="{x:Type syncfusion:TileViewItem}" x:Key="itemStyle">
    
             <Setter Property="Header" Value="{Binding XPath=@Name}"/>
    
             <Setter Property="ContentTemplate">
    
                 <Setter.Value>
    
    
    
                     <DataTemplate>
    
                         <Grid Margin="10">
    
                             <Grid.RowDefinitions>
    
                                 <RowDefinition Height="Auto"/>
    
                                 <RowDefinition Height="Auto"/>
    
                             </Grid.RowDefinitions>
    
                             <TextBlock Text="Description: " FontWeight="Bold"/>
    
                             <TextBlock Text="{Binding XPath=@Description}" FontFamily="Verdana" TextWrapping="Wrap" Margin="5,5,0,0"  Grid.Row="1"/>
    
                         </Grid>
    
                     </DataTemplate>
    
                 </Setter.Value>
    
             </Setter>
    
         </Style>
  2. Set the ItemContainerStyle of the TileViewControl as follows.

         
    
      <syncfusion:TileViewControl  ItemContainerStyle="{StaticResource itemStyle}" ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Book}"  >
    
    
    
    
    
         </syncfusion:TileViewControl>

This will generate the following TileViewControl.

ItemContainerStyleSelector

The ItemContainerStyleSelector property is used to choose the ItemContainerStyle at run time base on specific conditions. The following examples illustrate this.

  1. Create StyleSelector in the code.

       
           
    
          public class TileViewItemContainerStyleSelector : StyleSelector
    
             {
    
          
    
                  public override Style SelectStyle(object item, DependencyObject container)
    
                 {
    
    
    
                      Window window = Application.Current.MainWindow;
    
    
    
                      string bookname = (item as System.Xml.XmlElement).GetAttribute("Name").ToString().ToLower();
    
                      if (bookname.Contains("wpf"))
    
                     {
    
                      return ((Style)window.Resources["WpfBookStyle"]);
    
                     }
    
                      else
    
                     {
    
                      return ((Style)window.Resources["CsBookStyle"]);
    
                     }
    
    
    
                 }
    
             }
  2. Create the styles in the Window’s resource.

       
    
         <Style TargetType="{x:Type syncfusion:TileViewItem}" x:Key="CsBookStyle">
    
             <Setter Property="Header" Value="{Binding XPath=@Name}"/>
    
             <Setter Property="ContentTemplate">
    
                 <Setter.Value>
    
                     <DataTemplate>
    
                         <Grid Margin="10">
    
                             <Grid.RowDefinitions>
    
                                 <RowDefinition Height="Auto"/>
    
                                 <RowDefinition Height="Auto"/>
    
                             </Grid.RowDefinitions>
    
                             <TextBlock Text="Description: " FontWeight="Bold"/>
    
                             <TextBlock Text="{Binding XPath=@Description}" TextWrapping="Wrap" FontFamily="Courier New" Foreground="Green" Margin="5,5,0,0" Grid.Row="1"/>
    
                         </Grid>
    
                     </DataTemplate>
    
                 </Setter.Value>
    
             </Setter>
    
         </Style>
    
    
    
         <Style TargetType="{x:Type syncfusion:TileViewItem}" x:Key="WpfBookStyle">
    
             <Setter Property="Header" Value="{Binding XPath=@Name}"/>
    
             <Setter Property="ContentTemplate">
    
                 <Setter.Value>
    
    
    
                     <DataTemplate>
    
                         <Grid Margin="10">
    
                             <Grid.RowDefinitions>
    
                                 <RowDefinition Height="Auto"/>
    
                                 <RowDefinition Height="Auto"/>
    
                             </Grid.RowDefinitions>
    
                             <TextBlock Text="Description: " FontWeight="Bold"/>
    
                             <TextBlock Text="{Binding XPath=@Description}" FontFamily="Verdana" Foreground="Blue" TextWrapping="Wrap" Margin="5,5,0,0"  Grid.Row="1"/>
    
                         </Grid>
    
                     </DataTemplate>
    
                 </Setter.Value>
    
             </Setter>
    
         </Style>
  3. Define the Style selector in the Window’s resource.

        
    
      <local:TileViewItemContainerStyleSelector x:Key="tileViewStyleSelector"/>
  4. Set ItemContainerStyle for the TileViewControl.

         
    
       <syncfusion:TileViewControl  ItemContainerStyleSelector="{StaticResource tileViewStyleSelector}" ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Book}"  Margin="20" >
    
    
    
          </syncfusion:TileViewControl>

This will generate the following TileViewControl.