set Tile view Item header at design time

3 posts, 0 answers
  1. Deepak Agarwal
    Deepak Agarwal avatar
    7 posts
    Member since:
    Apr 2010

    Posted 20 Jan 2011 Link to this post

    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">
                            <TextBlock Text="Confirmed Appointments" Style="{StaticResource HeaderTitle}" />
                            <telerik:RadFluidContentControl ContentChangeMode="Manual"
           State="{Binding ElementName=ConfirmedAppointmentsSeries, Path=TileState, Converter={StaticResource myConverter}, Mode=TwoWay}">
  2. Tomasz Izydorczyk
    Tomasz Izydorczyk avatar
    4 posts
    Member since:
    Nov 2009

    Posted 20 Jan 2011 Link to this post


    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" />
    to change background
    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.


  3. Tina Stancheva
    Tina Stancheva avatar
    3299 posts

    Posted 25 Jan 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Back to Top