[Solved] HeaderStyle with Databinding

[Chris]

First I have to say, I expect I'm missing something very simple, this just seems like too much of a need...

I have a RadTileView object in my XAML:

<telerik:RadTileView x:Name="contactCardTileView" MinimizedColumnWidth="200" MaxWidth="700" MaxHeight="300" MaxColumns="3" ItemsSource="{Binding TileItems}" >
    <telerik:RadTileView.HeaderStyle>
        <Style TargetType="TileView:TileViewItemHeader">
            <Setter Property="Background" Value="PaleGreen" />
        </Style>
    </telerik:RadTileView.HeaderStyle>
    <telerik:RadTileView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="../Assets/Images/GeneralContact.png" Height="25"  />
                <TextBlock Text="{Binding FullName}" Margin="5" VerticalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </telerik:RadTileView.ItemTemplate>

    <telerik:RadTileView.ContentTemplate>
        <DataTemplate>
            <my:ContactCard Margin="5,2"/>
        </DataTemplate>
    </telerik:RadTileView.ContentTemplate>
</telerik:RadTileView>

This all works very well.  But one of my requirements is to change the background color of the header based on a value in my ViewModel, basically the type of the contact.  So in my VM I have a property called TypeColor:

public Color TypeColor
{
    get { return _typeColor; }
    set
    {
        if (_typeColor == value)
            return;
        _typeColor = value;
        RaisePropertyChanged(() => TypeColor);
    }
}

The TypeColor is set when the object is added to the TileItems ObservableCollection.

Once I change the XAML to bind to the TypeColor property like this:

<telerik:RadTileView.HeaderStyle>
    <Style TargetType="TileView:TileViewItemHeader">
        <Setter Property="Background" Value="{Binding TypeColor}" />
    </Style>
</telerik:RadTileView.HeaderStyle>

It does not bind, and basically used the details color (based on my Theme).

PLEASE HELP!

[Petar Mladenov]

Hi Chris ,

 The type of the Background is Brush, not Color. This enables to you to set LinearGradientBrush for Background for example.
So you just have to replace the Color in your ViewModel with a brush, and instantiate it like so for instance:
VMCustomBrush = new SolidColorBrush(){Color = Colors.Blue};

Kind regards,
Petar Mladenov
the Telerik team

[Chris]

Thanks for the reply, I had to refocus on some other items so I'm just now getting back to this requirement.  Using a brush did the trick, BUT, I was not 100% accurate.  I actually want a gradient background, not a solid color.  I’m not sure, if I’m still doing something wrong, or if the GradientStop color value cannot be bound to, or if there is an issue with the RadTileView using binding for a gradient in the TileViewItemHeader.  Below is that I have (coupled with the original post):

public SolidColorBrush TypeBrush
{
    get { return new SolidColorBrush() { Color = TypeColor }; }
}

public Color TypeColor
{
    get { return _typeColor; }
    set
    {
        if (_typeColor == value)
            return;
        _typeColor = value;
        RaisePropertyChanged(() => TypeColor);
        RaisePropertyChanged(() => TypeBrush);
    }
}

So now I have this, I've tried both TypeBrush and TypeColor both do not show the gradient background, BUT if I do not try to bind the first gradient stop, and just supply the color direcetly in the markup it works as expected.  With binding I get the theme backgroud color not the gradient I want.

<Setter Property="Background">
    <Setter.Value>
        <LinearGradientBrush StartPoint="0.5,0.1" EndPoint="0.5,1">
            <GradientStop Color="{Binding TypeColor}" />
            <GradientStop Offset="1" Color="Transparent" />
        </LinearGradientBrush>
    </Setter.Value>
</Setter>

[Petar Mladenov]

Hi Chris,

Unfortunately, you can't bind the properties of a GradientStop as it isn't a FrameworkElement. 
So you have to bind the whole LinerGradientBrush:

public class DataItem
   {
       public string name { get; set; }
       public Brush BackGroundBrush{get;set;}
   }

private void PopulateData()
        {
            ObservableCollection<DataItem> coll = new ObservableCollection<DataItem>();
            for (int i = 0; i < 12; i++)
            {
                DataItem item = new DataItem(){name = "Item " + i};
                LinearGradientBrush brush = new LinearGradientBrush();
                brush.GradientStops.Add(new GradientStop(){Color = Colors.Blue});
                brush.GradientStops.Add(new GradientStop(){Color = Colors.Transparent, Offset = 1});
                item.BackGroundBrush = brush;
                coll.Add(item);
            }
            this.tileview.ItemsSource = coll;
        }

<Style x:Key="TileViewItemHeaderStyle1" TargetType="Telerik_Windows_Controls_TileView:TileViewItemHeader">
            <Setter Property="Background" Value="{Binding BackGroundBrush}"/>

<telerik:RadTileView x:Name="tileview" HeaderStyle="{StaticResource TileViewItemHeaderStyle1}"

You can find this realized in the attached sample. Kind regards,
Petar Mladenov
the Telerik team