How do I add a button to the header of a custom control which extends a Telerik RadTileViewItem?

Question

Here's my custom control which extends the Telerik RadTileViewItem control:

 <telerik:RadTileViewItem x:Class="CrmActivityTimer.Customcontrols.TimerTile"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
         DataContext="{Binding RelativeSource={RelativeSource Self}}"
         mc:Ignorable="d" Height="525" Width="375" TileStateChanged="TimerTile_OnTileStateChanged">
<telerik:RadTileViewItem.Resources>
    <Style x:Key="TimerTileHeaderStyle">

    </Style>
</telerik:RadTileViewItem.Resources>
<Grid>

    <TextBox Text="{Binding Timer.TimeElapsed}" Width="100px" Height="20px" Margin="102,17,155,437" IsReadOnly="True"/>
    <Button Height="20px" Width="20px" Margin="216,17,121,437" Click="PlayButton_OnClick">
        <Image Source="icons/Play.png" />
    </Button>
    <Button Height="20px" Width="20px" Margin="242,17,95,437" Click="PauseButton_OnClick">
        <Image Source="icons/Pause.png"  />
    </Button>
    <telerik:RadComboBox Name="CboKlant" HorizontalAlignment="Left" Margin="101,79,0,0" VerticalAlignment="Top" Width="230"
                         ItemsSource="{Binding Fields.Accounts}" DisplayMemberPath="Name" SelectedValuePath="AccountId" KeyboardNavigation.TabIndex="1"/>
    <telerik:RadComboBox Name="CboBetreft" HorizontalAlignment="Left" Margin="101,160,0,0" VerticalAlignment="Top" Width="230" KeyboardNavigation.TabIndex="4"
                         DisplayMemberPath="{Binding Fields.BetreftNameField}" SelectedValuePath="{Binding Fields.BetreftIdField}"/>

    <TextBox Name="TxtOnderwerp" HorizontalAlignment="Left" Height="23" Margin="102,50,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="230" KeyboardNavigation.TabIndex="0"/>
    <Label Content="Onderwerp" HorizontalAlignment="Left" Margin="10,50,0,0" VerticalAlignment="Top" Height="23" Width="87" Padding="0"/>
    <Label Content="Klant" HorizontalAlignment="Left" Margin="9,78,0,0" VerticalAlignment="Top" Height="23" Width="87" Padding="0"/>
    <Label Content="Betreft" HorizontalAlignment="Left" Margin="9,159,0,0" VerticalAlignment="Top" Height="23" Width="87" Padding="0"/>
    <telerik:RadComboBox x:Name="CboUser" HorizontalAlignment="Left" Margin="101,188,0,0" VerticalAlignment="Top" Width="230" KeyboardNavigation.TabIndex="5"
                         ItemsSource="{Binding Fields.Users}" DisplayMemberPath="FullName" SelectedValuePath="SystemUserId" SelectedValue="{Binding Fields.Currentuser}" />
    <Label Content="Gebruiker" HorizontalAlignment="Left" Margin="9,187,0,0" VerticalAlignment="Top" Height="23" Width="87" Padding="0"/>
    <telerik:RadComboBox x:Name="CboService" HorizontalAlignment="Left" Margin="101,216,0,0" VerticalAlignment="Top" Width="230" KeyboardNavigation.TabIndex="6"
                         ItemsSource="{Binding Fields.Services}" DisplayMemberPath="Name" SelectedValuePath="ServiceId"/>
    <Label Content="Service" HorizontalAlignment="Left" Margin="9,215,0,0" VerticalAlignment="Top" Height="23" Width="87" Padding="0"/>
    <Button HorizontalAlignment="Left" Height="35" Margin="296,10,0,0" VerticalAlignment="Top" Width="35" Click="BtnCreateActivity_OnClick">
        <Image Source="icons/Save.png" Width="35"/>
    </Button>
    <telerik:RadComboBox HorizontalAlignment="Left" Margin="101,106,0,0" VerticalAlignment="Top" Width="230" SelectionChanged="CboKoppelingsType_OnSelectionChanged" KeyboardNavigation.TabIndex="2">
        <telerik:RadComboBoxItem Content="Verkoopkans"/>
        <telerik:RadComboBoxItem Content="Job"/>
        <telerik:RadComboBoxItem Content="Ticket"/>
    </telerik:RadComboBox>
    <Label Content="Betreft is een..." HorizontalAlignment="Left" Margin="9,106,0,0" VerticalAlignment="Top" Width="87" Height="22" Padding="0"/>
    <Label Content="Project" HorizontalAlignment="Left" Margin="9,133,0,0" VerticalAlignment="Top" Width="88" Padding="0"/>
    <telerik:RadComboBox Name="CboProject"  HorizontalAlignment="Left" Margin="102,133,0,0" VerticalAlignment="Top" Width="229" KeyboardNavigation.TabIndex="3"
                          ItemsSource="{Binding Fields.Projects}" DisplayMemberPath="New_titel" SelectedValuePath="New_ProjectId" SelectionChanged="CboProject_SelectionChanged" />
    <TextBox Name="TxtVoorKlant" HorizontalAlignment="Left" Height="166" Margin="9,282,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="147"/>
    <TextBox Name="TxtVoorIntern" HorizontalAlignment="Left" Height="166" Margin="176,282,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="155"/>
    <Label Content="Voor de klant" HorizontalAlignment="Left" Margin="9,251,0,0" VerticalAlignment="Top" Width="87" Padding="0"/>
    <Label Content="Intern" HorizontalAlignment="Left" Margin="170,251,0,0" VerticalAlignment="Top" Width="87" Padding="0"/>
</Grid>

I'm trying to add a button to this control in the header to remove that instance of the control from the TileView. However, every tutorial on this matter involves a default RadTileViewItem with a custom header. I want to modify the header on an extension of that RadTileViewItem. I've tried using the example codes on http://www.telerik.com/forums/customize-radtileview, http://www.telerik.com/forums/header-template and others, but I either end up with my TimerTile control with all controls in place but without the custom header OR the TimerTile control with the custom header in place, but no other controls.

Does anyone know how I can do this? I've tried moving all my controls to the template itself, but I can't figure out how to do this, and I'm fairly sure it should be possible without too much of an issue.

Answer 1

The usual way to change the look of a control in WPF is to provide a new ControlTemplate for it, which defines the controls making up the desired look. However, in order to do this, you will need to locate the default RadTileViewItem ControlTemplate XAML from Telerik and start your custom ControlTemplate with that.

If you know how to write XAML, then it shouldn't be difficult to find what each part of the default ControlTemplate does and where to add your Button. Please take a read of the Control Authoring Overview page on MSDN for more information.