HeaderStyle with Databinding

4 posts, 0 answers
  1. Chris
    Chris avatar
    23 posts
    Member since:
    Nov 2003

    Posted 02 Mar 2012 Link to this post

    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!
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 07 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Chris
    Chris avatar
    23 posts
    Member since:
    Nov 2003

    Posted 09 Apr 2012 Link to this post

    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>
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 12 Apr 2012 Link to this post

    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

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

Back to Top