set Tile view Item header at design time

[Deepak Agarwal]

I am using Telerik Tile view control in my application, where I have placed a grid in it's content. I am also giving header to each tile view item by placing a text block in tile view item header. No I am trying to give a background and forground to tile view header at design time itself, but I am not able to do that.
Please review the image and suggest accordingly.
I am using XAML code.
<telerik:RadTileView x:Name="RadTileView1" Width="700" Height="570" MaxColumns="2">
                <telerik:RadTileViewItem  x:Name="ConfirmedAppointmentsSeries">
                    <telerik:RadTileViewItem.Header>
                        <TextBlock Text="Confirmed Appointments" Style="{StaticResource HeaderTitle}" />
                    </telerik:RadTileViewItem.Header>
                    <telerik:RadTileViewItem.Content>
                        <telerik:RadFluidContentControl ContentChangeMode="Manual"
       State="{Binding ElementName=ConfirmedAppointmentsSeries, Path=TileState, Converter={StaticResource myConverter}, Mode=TwoWay}">
                            <telerik:RadFluidContentControl.SmallContent>
                            </telerik:RadFluidContentControl.SmallContent>
                            <telerik:RadFluidContentControl.Content>
                            </telerik:RadFluidContentControl.Content>
                            <telerik:RadFluidContentControl.LargeContent>
                           </telerik:RadFluidContentControl.LargeContent>
                        </telerik:RadFluidContentControl>
                    </telerik:RadTileViewItem.Content>
                </telerik:RadTileViewItem>   
</telerik:RadTileView>

[Tomasz Izydorczyk]

Hi,

I had the same issue and what you have to do to reach your goals is to modify style for TileView (not for the header item you are putting in control declaration).

I've modified one of the telerik themes (OfficeBlue), it's a TileView.xaml, e.g. look for:

<LinearGradientBrush x:Key="TileView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="{StaticResource Color1}" />
        <GradientStop Color="{StaticResource Color2}" Offset="1" />
<LinearGradientBrush>
to change background
etc.
Your required style looks similar to the default one, so perhaps you have to change just the brushes and toggle button template.
I've attached screenshot with my modifications result.

Hope this will help.

Rgards,
TI

[Tina Stancheva]

Hi Deepak Agarwal,

What Tomasz suggested is the right approach at the moment. We have added in our to-do list a feature allowing easier customization of the TileViewItems header and you can vote for it here thus increasing its priority.

For now in order to change the header background in runtime, it is best to modify the default ControlTemplate of the RadTileViewItem in Blend following the approach described here. Then you can set the RadTileViewItem Template property in runtime. If there is no Template defined for an item, the default ControlTemplate will be applied.

As for the Foreground property, it is best to control the Foreground of the TextBlock defined inside the Header of the tile. You can access it through the TileViewItem Header property like so: (ConfirmedAppointmentsSeries.Header as TextBlock).Foreground.

Also, if you need to change the maximize/minimize button, you can edit the MaximizeToggleButton element defined in the RadTileViewItem ControlTemplate accordingly.

I prepared a sample project to get you started. I hope it helps. Still, please let us know if you need more info.

Best wishes,
Tina Stancheva
the Telerik team