Controls / RadTileView / How To

New to Telerik UI for WPF? Download free 30-day trial

Use RadFluidContentControl in RadTileView

This article will show you a step-by-step tutorial on how to use RadFluidContentControl in RadTileView to change the content of the RadTileViewItems depending on their state.

For the purpose of this example you will need a RadTileView populated with a collection of business objects. The structure of the business object is shown in the next code snippet:

public class MyViewModel : INotifyPropertyChanged 
{ 
 public MyViewModel() 
 { 
  this.SmallImage = new Uri("Images/SmallImage.png", UriKind.Relative); 
  this.Image = new Uri("Images/Image.png", UriKind.Relative); 
  this.LargeImage = new Uri("Images/LargeImage.png", UriKind.Relative); 
 } 
 public string Header { get; set; } 
 public Uri SmallImage { get; set; } 
 public Uri Image { get; set; } 
 public Uri LargeImage { get; set; } 
 private ContentState _contentState; 
 /// <summary> 
 ///     Gets or sets the name. 
 /// </summary> 
 public ContentState ContentState 
 { 
  get 
  { 
   return this._contentState; 
  } 
  set 
  { 
   if (this._contentState != value) 
   { 
    this._contentState= value; 
    OnPropertyChanged("ContentState"); 
   } 
  } 
 }    
 
 /// <summary> 
 ///     Event for INotifyPropertyChanged. 
 /// </summary> 
 public event PropertyChangedEventHandler PropertyChanged; 
 /// <summary> 
 ///     Raises the INotifyPropertyChanged event. 
 /// </summary> 
 /// <param name="propertyName">The property to be included in the INotifyPropertyChanged EventArgs.</param> 
 protected virtual void OnPropertyChanged(String propertyName) 
 { 
  if (PropertyChanged != null) 
  { 
   PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
  } 
 } 
 
} 
public enum ContentState 
{ 
 SmallContent = 1, 
 NormalContent = 0, 
 LargeContent = 2 
} 

Public Class MyViewModel 
Implements INotifyPropertyChanged 
 Public Sub New() 
  Me.SmallImage = New Uri("Images/SmallImage.png", UriKind.Relative) 
  Me.Image = New Uri("Images/Image.png", UriKind.Relative) 
  Me.LargeImage = New Uri("Images/LargeImage.png", UriKind.Relative) 
 End Sub 
 Public Property Header() As String 
 Public Property SmallImage() As Uri 
 Public Property Image() As Uri 
 Public Property LargeImage() As Uri 
 Private _contentState As ContentState 
 ''' <summary> ''' 
 '''     Gets or sets the name. ''' 
 ''' </summary> ''' 
 Public Property ContentState() As ContentState 
  Get 
   Return Me._contentState 
  End Get 
  Set(ByVal value As ContentState) 
   If Me._contentState <> value Then 
    Me._contentState = value 
    OnPropertyChanged("ContentState") 
   End If 
  End Set 
 End Property 
 ''' <summary> ''' 
 '''     Event for INotifyPropertyChanged. ''' 
 ''' </summary> ''' 
 Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged 
 ''' <summary> ''' 
 '''     Raises the INotifyPropertyChanged event. ''' 
 ''' </summary> ''' 
 ''' <param name="propertyName">The property to be included in the INotifyPropertyChanged EventArgs.</param>''' 
 Protected Overridable Sub OnPropertyChanged(ByVal propertyName As String) 
  RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName)) 
 End Sub 
End Class 
Public Enum ContentState 
 SmallContent = 1 
 NormalContent = 0 
 LargeContent = 2 
End Enum

The class has five properties:

  • Property Header which is of type string.
  • Properties SmallImage, Image and LargeImage - of type Uri.
  • Property ContentState which is of type ContentState.

Add a static method to the class which aims to create some mock-up data:

public static IList<object> GenerateItems() 
{ 
 var result = new ObservableCollection<object>(); 
 foreach (var num in Enumerable.Range(1, 12)) 
 { 
  result.Add(new MyViewModel() { Header = String.Format("Item {0}", num) }); 
 } 
 return result; 
} 

Public Shared Function GenerateItems() As IList(Of Object) 
 Dim result = New ObservableCollection(Of Object)() 
 For Each num In Enumerable.Range(1, 12) 
  result.Add(New MyViewModel() With {.Header = String.Format("Item {0}", num)}) 
 Next num 
 Return result 
End Function

Declare an ItemTemplate:

<DataTemplate x:Key="ItemTemplate"> 
    <TextBlock Text="{Binding Header}" /> 
</DataTemplate>
Declare a ContentTemplate: 

<DataTemplate x:Key="ContentTemplate"> 
    <telerik:RadFluidContentControl ContentChangeMode="Manual" 
            State="{Binding ContentState, Converter={StaticResource fluidContentStateConverter}}"> 
        <telerik:RadFluidContentControl.SmallContent> 
            <Image Source="{Binding SmallImage}" /> 
        </telerik:RadFluidContentControl.SmallContent> 
        <telerik:RadFluidContentControl.Content> 
            <Image Source="{Binding Image}" /> 
        </telerik:RadFluidContentControl.Content> 
        <telerik:RadFluidContentControl.LargeContent> 
            <Image Source="{Binding LargeImage}" /> 
        </telerik:RadFluidContentControl.LargeContent> 
    </telerik:RadFluidContentControl> 
</DataTemplate>
The State property of the RadFluidContentControl is databound to the ContentState business property, therefore a converter must be used: 

public class FluidContentStateConverter : IValueConverter 
{ 
 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
 { 
  var contentState = (ContentState)value; 
  switch (contentState) 
  { 
   case ContentState.SmallContent: 
    return FluidContentControlState.Small; 
   case ContentState.NormalContent: 
    return FluidContentControlState.Normal; 
   case ContentState.LargeContent: 
    return FluidContentControlState.Large; 
   default: 
    return FluidContentControlState.Normal; 
  } 
 } 
 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
 { 
  var fluidState = (FluidContentControlState)value; 
  switch (fluidState) 
  { 
   case FluidContentControlState.Small: 
    return ContentState.SmallContent; 
   case FluidContentControlState.Normal: 
    return ContentState.NormalContent; 
   case FluidContentControlState.Large: 
    return ContentState.LargeContent; 
   default: 
    return ContentState.NormalContent; 
  } 
 } 
} 

Public Class FluidContentStateConverter 
Implements IValueConverter 
 Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert 
  Dim contentState = CType(value, ContentState) 
  Select Case contentState 
   Case contentState.SmallContent 
    Return FluidContentControlState.Small 
   Case contentState.NormalContent 
    Return FluidContentControlState.Normal 
   Case contentState.LargeContent 
    Return FluidContentControlState.Large 
   Case Else 
    Return FluidContentControlState.Normal 
  End Select 
 End Function 
 Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack 
  Dim fluidState = CType(value, FluidContentControlState) 
  Select Case fluidState 
   Case FluidContentControlState.Small 
    Return ContentState.SmallContent 
   Case FluidContentControlState.Normal 
    Return ContentState.NormalContent 
   Case FluidContentControlState.Large 
    Return ContentState.LargeContent 
   Case Else 
    Return ContentState.NormalContent 
  End Select 
 End Function 
End Class

In order to change the content of each RadTileViewItem accordingly to its state, the RadTileViewItem's TileState property should be databound to the ContentState business property:

Using Style to databind the TileState property is a pretty simple action. For example, see the code snippet below. The only thing you should do is define a RadTileViewItem Style and apply it to the RadTileView:

<Style TargetType="telerik:RadTileViewItem" x:Key="ItemContainerStyle"> 
    <Setter Property="TileState" 
            Value="{Binding ContentState, Mode=TwoWay, Converter={StaticResource tileStateConverter}}" /> 
</Style> 
<telerik:RadTileView x:Name="radTileView" ItemContainerStyle="{StaticResource ItemContainerStyle}"> 
</telerik:RadTileView>

The definition of the TileStateConverter class is:

public class TileStateConverter : IValueConverter 
{ 
 #region IValueConverter Members 
 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
 { 
  var contentState = (ContentState)value; 
  switch (contentState) 
  { 
   case ContentState.SmallContent: 
    return TileViewItemState.Minimized; 
   case ContentState.NormalContent: 
    return TileViewItemState.Restored; 
   case ContentState.LargeContent: 
    return TileViewItemState.Maximized; 
   default: 
    return TileViewItemState.Restored; 
  } 
 } 
 
 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
 { 
  var tileState = (TileViewItemState)value; 
  switch (tileState) 
  { 
   case TileViewItemState.Minimized: 
    return ContentState.SmallContent; 
   case TileViewItemState.Restored: 
    return ContentState.NormalContent; 
   case TileViewItemState.Maximized: 
    return ContentState.LargeContent; 
   default: 
    return ContentState.NormalContent; 
  } 
 } 

Public Class TileStateConverter 
Implements IValueConverter 
 #Region "IValueConverter Members" 
 Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert 
  Dim contentState = CType(value, ContentState) 
  Select Case contentState 
   Case contentState.SmallContent 
    Return TileViewItemState.Minimized 
   Case contentState.NormalContent 
    Return TileViewItemState.Restored 
   Case contentState.LargeContent 
    Return TileViewItemState.Maximized 
   Case Else 
    Return TileViewItemState.Restored 
  End Select 
 End Function 
 Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack 
  Dim tileState = CType(value, TileViewItemState) 
  Select Case tileState 
   Case TileViewItemState.Minimized 
    Return ContentState.SmallContent 
   Case TileViewItemState.Restored 
    Return ContentState.NormalContent 
   Case TileViewItemState.Maximized 
    Return ContentState.LargeContent 
   Case Else 
    Return ContentState.NormalContent 
  End Select 
 End Function 
 #End Region 
End Class

Define the RadTileView:

<telerik:RadTileView x:Name="radTileView" ContentTemplate="{StaticResource ContentTemplate}" 
        ItemContainerStyle="{StaticResource ItemContainerStyle}" ItemTemplate="{StaticResource ItemTemplate}" 
        MinimizedColumnWidth="200" MinimizedItemsPosition="Right" MinimizedRowHeight="200" />

Populate the RadTileView ItemsSource collection using the MyViewModel.GenerateItems() method:

public partial class MainWindow : Window 
{ 
 public MainWindow() 
 { 
  InitializeComponent(); 
  this.radTileView.ItemsSource = MyViewModel.GenerateItems(); 
 } 
} 

Public Partial Class MainWindow 
    Inherits Window 
    Public Sub New() 
        InitializeComponent() 
 
        Me.radTileView.ItemsSource = MyViewModel.GenerateItems() 
    End Sub 
End Class

Here is the final XAML:

<Window.Resources> 
    <local:FluidContentStateConverter x:Key="fluidContentStateConverter" /> 
    <local:TileStateConverter x:Key="tileStateConverter" /> 
    <DataTemplate x:Key="ItemTemplate"> 
        <TextBlock Text="{Binding Header}" /> 
    </DataTemplate> 
    <DataTemplate x:Key="ContentTemplate"> 
        <telerik:RadFluidContentControl ContentChangeMode="Manual" 
                State="{Binding ContentState, Converter={StaticResource fluidContentStateConverter}}"> 
            <telerik:RadFluidContentControl.SmallContent> 
                <Image Source="{Binding SmallImage}" /> 
            </telerik:RadFluidContentControl.SmallContent> 
            <telerik:RadFluidContentControl.Content> 
                <Image Source="{Binding Image}" /> 
            </telerik:RadFluidContentControl.Content> 
            <telerik:RadFluidContentControl.LargeContent> 
                <Image Source="{Binding LargeImage}" /> 
            </telerik:RadFluidContentControl.LargeContent> 
        </telerik:RadFluidContentControl> 
    </DataTemplate> 
    <Style TargetType="telerik:RadTileViewItem" x:Key="ItemContainerStyle"> 
        <Setter Property="TileState" 
                Value="{Binding ContentState, Mode=TwoWay, Converter={StaticResource tileStateConverter}}" /> 
    </Style> 
</Window.Resources> 
<Grid> 
    <telerik:RadTileView x:Name="radTileView" ContentTemplate="{StaticResource ContentTemplate}" 
            ItemContainerStyle="{StaticResource ItemContainerStyle}" ItemTemplate="{StaticResource ItemTemplate}" 
            MinimizedColumnWidth="200" MinimizedItemsPosition="Right" MinimizedRowHeight="200" /> 
</Grid> 
</Window>

You can find a project demonstrating the described approach here.

In this article
Related articles
Not finding the help you need? Improve this article