Adding a close button to a custom control extending TileView

2 posts, 0 answers
  1. Nate
    Nate avatar
    6 posts
    Member since:
    Apr 2013

    Posted 22 Apr 2014 Link to this post

    I have the following custom control:

    <telerik:RadTileViewItem x:Class="CrmActivityTimer.Customcontrols.TimerTile"
                 DataContext="{Binding RelativeSource={RelativeSource Self}}"
                 mc:Ignorable="d" Height="525" Width="375" TileStateChanged="TimerTile_OnTileStateChanged" HeaderStyle="{StaticResource TimerTileHeaderStyle}">
            <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 Height="20px" Width="20px" Margin="242,17,95,437" Click="PauseButton_OnClick">
                <Image Source="icons/Pause.png"  />
            <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"/>
            <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"/>
            <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"/>

    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.
  2. Pavel R. Pavlov
    Pavel R. Pavlov avatar
    1182 posts

    Posted 24 Apr 2014 Link to this post

    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.

    Pavel R. Pavlov
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top