TileViewHeaderItem background

[Andrew]

I saw this post: http://www.telerik.com/community/forums/wpf/tileview/tileview-item-header-background.aspx but it really seems overkill for such a simple property change. Is there a better(easier) way to just set the background bush for the header? For certain tiles that need to reflect a change I want to set the header background to a custom linear brush. I tried using a custom template but it only changed it for the text area and not the whole header item. I also tried the example attached in the other forum post but it didn't look correct, maybe cause we're using the metro theme?

Anyway, is there a solution I've overlooked?

Robert

[Kiril Stanoev]

Hi Robert,

To modify just the header background you don't have to edit the whole ControlTemplate. All you have to do is set the HeaderStyle property:

<Window x:Class="TileViewTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
        Title="Window1" Width="800" Height="500">
    <Window.Resources>
        <Style x:Key="TileViewItemHeaderStyle1" TargetType="{x:Type telerikNavigation:TileViewItemHeader}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="Yellow" Offset="0.0" />
                        <GradientStop Color="Red" Offset="0.25" />
                        <GradientStop Color="Blue" Offset="0.75" />
                        <GradientStop Color="LimeGreen" Offset="1.0" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <telerik:RadTileView x:Name="cardsTileView" HeaderStyle="{StaticResource TileViewItemHeaderStyle1}"
                MinimizedColumnWidth="200">
            <telerik:RadTileViewItem Header="Tile One" />
            <telerik:RadTileViewItem Header="Tile Two" />
            <telerik:RadTileViewItem Header="Tile Three" />
        </telerik:RadTileView>
    </Grid>
</Window>

Give it a try and let me know how it works for you.

All the best,
Kiril Stanoev
the Telerik team

[Andrew]

Still doesn't work. If I bind the ItemsSource then it uses the standard style however it I do exactly what you did and not use a bound ItemsSource then it changes the style.

Robert

[Zarko]

Hello,
Could you please send us some code snippets or a project that reproduces this issue because I wasn't able to recreate it? I've attached the sample project that I used for testing (in it the TileView's ItemsSource is bound) so you could take a look at it and tell us what you're doing differently. Also could you please tell us the exact version of your dlls and if you're using .Net 3.5 or .Net 4.0?
We are looking forward to hearing from you.

Greetings,
Zarko
the Telerik team

[Andrew]

Submitted a ticket (517653) with my test project.

Robert

[Dave Navarro]

Hello Kiril Stanoev,

Just a quick note to say thanks for the post!

Your solution works as advertised and I LOVE the colors!!!

Many thanks!

~ Dave

[Goran]

Hi,

what about style selector? I have a requirement to display different background for header based on item type.

Regards,
Goran

[Goran]

I have found the way around to use ItemContainerStyleSelector, and then in each RadTileViewItem style to set HeaderStyle. I hope I am not overlooking something simple.

Regards,
Goran

[Tina Stancheva]

Hello Goran,

The ItemContainerStyleSelector approach is the right way to go in your scenario. Let us know if you encounter any issues or if you have more questions.

Regards,
Tina Stancheva
the Telerik team