TileViewItem header background color with ItemSource and MVVM

[Łukasz]

Hi,
I found in forum how to change background color for TileViewItem header but I don't know in what moment I should do that when ItemsSource for TileView is creating dynamicly in ViewModel and one TileViewItem have DataContext as TileViewItemViewModel.

For understand basic of my thinking -> my code is like in your documentation -> http://www.telerik.com/help/silverlight/radtileview-howto-use-fluidcontentcontrol-in-tileview.html 

But in my case class MyViewModel have another one property (of course with implemented call OnPropertyChanged) called IsAlert.
In my scenario I want to change TileViewItem's background color header to red if that property is equal to True.

For know I checked if my styles for TileViewItem works using LayoutUpdated event (bad performance = wrong approach) and everything works fine.

var redControlTemplate = App.Current.Resources["RedTileViewItemTemplate"] as Style;
var greenControlTemplate = App.Current.Resources["GreenTileViewItemTemplate"] as Style;

foreach (MyViewModel item in tileView.Items)
{
    var tileViewItem = tileView.ItemContainerGenerator.ContainerFromItem(item) as RadTileViewItem;
    if (tileViewItem != null)
    {
        if (item.IsAlert)
        {
            tileViewItem.Style = redControlTemplate;
        }
        else
        {
            tileViewItem.Style = greenControlTemplate;
        }
    }
}

Have can I do that?

Best regards,
Lukas

[Łukasz]

It is funy but I found solution couple of minutes later after I created that thread :)
Using ContainerBinding it is clean and it works perfect with MVVM!

I think that would be very often used in MVVM scenario.

So in XAML ContainerBindingCollection  will looks like:

<telerik:ContainerBindingCollection x:Key="ContainerBindingCollection">
    <telerik:ContainerBinding
       Binding="{Binding ContentState, Mode=TwoWay,
         Converter={StaticResource tileStateConverter}}" PropertyName="TileState"/>
    <telerik:ContainerBinding
       Binding="{Binding IsAlert, Mode=TwoWay,
         Converter={StaticResource colorHeaderConverter}}" PropertyName="Style"/>
</telerik:ContainerBindingCollection>

then I have created Converter:

public class ColorHeaderConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var alertValue = (bool)value;
        if (alertValue)
        {
            return App.Current.Resources["RedTileViewItemTemplate"] as Style;
        }
        else
        {
            return App.Current.Resources["GreenTileViewItemTemplate"] as Style;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var headerStyle = (Style)value;
        if (headerStyle == App.Current.Resources["RedTileViewItemTemplate"] as Style)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

RedTileViewItemTemplate and GreenTileViewItemTemplate are Styles created using Expression Blend by making copy of TileViewItem.

That's it! Now you have colored header depending on property!

I made change in telerik's example for better understanding.
Example availabe at link:
ColorHeaderExample

[Zarko]

Hi Łukasz,
We're glad that you were able to find solution for the problem and if you need further assistance please feel free to ask.

Greetings,
Zarko
the Telerik team