Change the RadTileViewItem Header Background

This article will show you how to change the Background of the RadTileViewItems' Header corresponding to the state of the item in an MVVM scenario.

The final result should look like this:

The Header of the RadTileViewItem is designed as a separate ContentControl and you can apply a custom style to it. In order to do this you have to add the following namespace into your application:

xmlns:tileView="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation" 

Next, you can define a custom style targeting the TileViewItemHeader control and bind its Background property to a property defined in your business model like this:

<Style x:Key="TileViewItemHeaderStyle" TargetType="tileView:TileViewItemHeader"> 
    <Setter Property="Foreground" Value="White"/> 
    <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTileViewItem}, Path=DataContext.HeaderColor, Mode=TwoWay}" /> 
</Style> 

The Foreground is changed just to make the text in the header easy to read.

Also, in order to visualize your items you can create one more Style targeting the RadTileViewItem. In that style you can bind the Header property to a property defined in your business model. By doing so you will be able to set the text of the header. You can use the following code:

<Style x:Key="TileViewItemCustomStyle" TargetType="telerik:RadTileViewItem"> 
    <Setter Property="Header" Value="{Binding Header}" /> 
</Style> 

In order to track the state of each RadTileViewItem you can define a property in your business model and bind it to the TileState property of the item. This can be done by adding one more Setter to the last Style and it will look like this:

<Style x:Key="TileViewItemCustomStyle" TargetType="telerik:RadTileViewItem"> 
    <Setter Property="TileState" Value="{Binding CurrentState, Mode=TwoWay}" /> 
    <Setter Property="Header" Value="{Binding Header}" /> 
</Style> 

To finalize the XAML code you can define the following RadTileView control:

<telerik:RadTileView HeaderStyle="{StaticResource TileViewItemHeaderStyle}" 
                     ItemContainerStyle="{StaticResource TileViewItemCustomStyle}" 
                     ItemsSource="{Binding Items}" /> 

Next step is to set up your business model. First you can create an ItemViewModel class which derives from Telerik's ViewModelBase. This class can expose properties that will hold the text of the Header, the color of the Background and the CurrentState of the item. Furthermore, the item has to know which color to apply to its header in each state. This is why the constructor of the item can receive three colors - one for each state. Also, this class can expose a private method which changes the color of the header and it will be called whenever the state of the corresponding item is changed. Below is the implementation of that class.

public class ItemViewModel : ViewModelBase 
{ 
    private readonly SolidColorBrush maximizedHeaderBackground; 
    private readonly SolidColorBrush minimizedHeaderBackground; 
    private readonly SolidColorBrush restoredHeaderBackground; 
    private SolidColorBrush headerColor; 
    private TileViewItemState currentState = TileViewItemState.Minimized; 
 
    public ItemViewModel(SolidColorBrush maximizedHeaderBackground, SolidColorBrush restoredHeaderBackground, SolidColorBrush minimizedHeaderBackground) 
    { 
        this.maximizedHeaderBackground = maximizedHeaderBackground; 
        this.restoredHeaderBackground = restoredHeaderBackground; 
        this.minimizedHeaderBackground = minimizedHeaderBackground; 
 
        this.SetColor(); 
    } 
 
    public string Header { get; set; } 
 
    public SolidColorBrush HeaderColor 
    { 
        get 
        { 
            return this.headerColor; 
        } 
        set 
        { 
            if (this.headerColor != value) 
            { 
                this.headerColor = value; 
                this.OnPropertyChanged("HeaderColor"); 
            } 
        } 
    } 
 
    public TileViewItemState CurrentState 
    { 
        get 
        { 
            return this.currentState; 
        } 
        set 
        { 
            if (this.currentState != value) 
            { 
                this.currentState = value; 
                this.OnPropertyChanged("CurrentState"); 
                this.SetColor(); 
            } 
        } 
    } 
 
    private void SetColor() 
    { 
        if (this.CurrentState == TileViewItemState.Maximized) 
        { 
            this.HeaderColor = this.maximizedHeaderBackground; 
        } 
        else if (this.CurrentState == TileViewItemState.Minimized) 
        { 
            this.HeaderColor = this.minimizedHeaderBackground; 
        } 
        else if (this.CurrentState == TileViewItemState.Restored) 
        { 
            this.HeaderColor = this.restoredHeaderBackground; 
        } 
    } 
} 

Public Class ItemViewModel 
    Inherits ViewModelBase 
    Private ReadOnly maximizedHeaderBackground As SolidColorBrush 
    Private ReadOnly minimizedHeaderBackground As SolidColorBrush 
    Private ReadOnly restoredHeaderBackground As SolidColorBrush 
    Private m_headerColor As SolidColorBrush 
    Private m_currentState As TileViewItemState = TileViewItemState.Minimized 
 
    Public Sub New(maximizedHeaderBackground As SolidColorBrush, restoredHeaderBackground As SolidColorBrush, minimizedHeaderBackground As SolidColorBrush) 
        Me.maximizedHeaderBackground = maximizedHeaderBackground 
        Me.restoredHeaderBackground = restoredHeaderBackground 
        Me.minimizedHeaderBackground = minimizedHeaderBackground 
 
        Me.SetColor() 
    End Sub 
 
    Public Property Header() As String 
        Get 
            Return m_Header 
        End Get 
        Set(value As String) 
            m_Header = Value 
        End Set 
    End Property 
    Private m_Header As String 
 
    Public Property HeaderColor() As SolidColorBrush 
        Get 
            Return Me.m_headerColor 
        End Get 
        Set(value As SolidColorBrush) 
            If Me.m_headerColor <> value Then 
                Me.m_headerColor = value 
                Me.OnPropertyChanged("HeaderColor") 
            End If 
        End Set 
    End Property 
 
    Public Property CurrentState() As TileViewItemState 
        Get 
            Return Me.m_currentState 
        End Get 
        Set(value As TileViewItemState) 
            If Me.m_currentState <> value Then 
                Me.m_currentState = value 
                Me.OnPropertyChanged("CurrentState") 
                Me.SetColor() 
            End If 
        End Set 
    End Property 
 
    Private Sub SetColor() 
        If Me.CurrentState = TileViewItemState.Maximized Then 
            Me.HeaderColor = Me.maximizedHeaderBackground 
        ElseIf Me.CurrentState = TileViewItemState.Minimized Then 
            Me.HeaderColor = Me.minimizedHeaderBackground 
        ElseIf Me.CurrentState = TileViewItemState.Restored Then 
            Me.HeaderColor = Me.restoredHeaderBackground 
        End If 
    End Sub 
End Class 

After your ItemViewModel is ready, you can define a collection of items. Create a MainViewModel class which exposes one property of type ObservableCollection and a private method which populates the collection. This can be done like this:

public class MainViewModel 
{ 
    public MainViewModel() 
    { 
        this.Items = new ObservableCollection<ItemViewModel>(); 
        this.GenerateItems(); 
    } 
 
    public ObservableCollection<ItemViewModel> Items { get; set; } 
 
    private void GenerateItems() 
    { 
        var blue = new SolidColorBrush(Colors.Blue); 
        var green = new SolidColorBrush(Colors.Green); 
        var purple = new SolidColorBrush(Colors.Purple); 
 
        this.Items.Add(new ItemViewModel(blue, green, purple) 
        { 
            Header = "Item 1", 
            CurrentState = TileViewItemState.Maximized, 
        }); 
        this.Items.Add(new ItemViewModel(blue, green, purple) 
        { 
            Header = "Item 2", 
        }); 
        this.Items.Add(new ItemViewModel(blue, green, purple) 
        { 
            Header = "Item 3", 
        }); 
        this.Items.Add(new ItemViewModel(blue, green, purple) 
        { 
            Header = "Item 4", 
        }); 
        this.Items.Add(new ItemViewModel(blue, green, purple) 
        { 
            Header = "Item 5", 
        }); 
    } 
} 

Public Class MainViewModel 
    Public Sub New() 
        Me.Items = New ObservableCollection(Of ItemViewModel)() 
        Me.GenerateItems() 
    End Sub 
 
    Public Property Items() As ObservableCollection(Of ItemViewModel) 
        Get 
            Return m_Items 
        End Get 
        Set(value As ObservableCollection(Of ItemViewModel)) 
            m_Items = Value 
        End Set 
    End Property 
    Private m_Items As ObservableCollection(Of ItemViewModel) 
 
    Private Sub GenerateItems() 
        Dim blue = New SolidColorBrush(Colors.Blue) 
        Dim green = New SolidColorBrush(Colors.Green) 
        Dim purple = New SolidColorBrush(Colors.Purple) 
 
        Me.Items.Add(New ItemViewModel(blue, green, purple) With { 
            .Header = "Item 1", 
            .CurrentState = TileViewItemState.Maximized 
        }) 
        Me.Items.Add(New ItemViewModel(blue, green, purple) With { 
            .Header = "Item 2" 
        }) 
        Me.Items.Add(New ItemViewModel(blue, green, purple) With { 
            .Header = "Item 3" 
        }) 
        Me.Items.Add(New ItemViewModel(blue, green, purple) With { 
            .Header = "Item 4" 
        }) 
        Me.Items.Add(New ItemViewModel(blue, green, purple) With { 
            .Header = "Item 5" 
        }) 
    End Sub 
End Class 

Finally, you can set the MainViewModel as DataContext of your application. This can be done just after the InitializeComponent() method like this:

this.DataContext = new MainViewModel(); 

Me.DataContext = New MainViewModel()