Adding a close button to a custom control extending TileView

[Nate]

I have the following custom 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"
             xmlns:tileView="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
             xmlns:customcontrols="clr-namespace:CrmActivityTimer.Customcontrols"
             DataContext="{Binding RelativeSource={RelativeSource Self}}"
             mc:Ignorable="d" Height="525" Width="375" TileStateChanged="TimerTile_OnTileStateChanged" HeaderStyle="{StaticResource TimerTileHeaderStyle}">
    <telerik:RadTileViewItem.Resources>
    </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>
</telerik:RadTileViewItem>

I want to add a close button to the header, to the right of where the minimize and maximize buttons appear normally. I've googled for this problem and every solution I come across involves assigning a custom template to an unextended RadTileViewItem. I don't know how to convert these solutions for application to a custom control. I've tried multiple solutions from this website so far, but I can't get it to work.

[Pavel R. Pavlov]

Hi Nate,

You are right that you need to extract and edit the default control template of the RadTileViewItem to add the additional button. As reference you can use this article. I suggest following the approach described in the first section. In your particular case you need to customize the TileViewItemHeader control.

In order to apply the customized control template to your custom (derived) control, you need to create styles targeting your custom controls that are based on our styles. If you extract the control template from our Office2013 theme, your control will be styled with that theme. But please keep in mind that the default styles of our controls may be different in the different themes. This is why you will need pay extra attention to the theme that is applied to your controls and the custom styles applied to the derived controls. The styles should be extracted from the theme that is applied.

If this is done, you should be able to visualize the items correctly. For your convenience I prepared a sample project demonstrating the described approach. I added a button with x:Name attribute set to PART_CloseButton.

Please take a look at the project and let me know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik