TileViewItem header background color with ItemSource and MVVM

3 posts, 0 answers
  1. Łukasz
    Łukasz avatar
    2 posts
    Member since:
    Jun 2011

    Posted 19 Apr 2012 Link to this post

    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
  2. Łukasz
    Łukasz avatar
    2 posts
    Member since:
    Jun 2011

    Posted 19 Apr 2012 Link to this post

    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
  3. DevCraft banner
  4. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 24 Apr 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top