RadTabControl Navigation Not Working with Custom TabItem Template

1 Answer 35 Views

TabControl

Anas asked on 18 Feb 2025, 10:19 AM

I'm experiencing an issue with RadTabControl where I cannot navigate between tabs after implementing a custom template for RadTabItem. When I remove the custom template, the navigation works fine, but as soon as I add the template back, I lose the ability to switch between tabs.
Below is my xaml code
<UserControl
x:Class="agent_ui.Views.SettingsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:agent_ui.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
d:DesignHeight="1450"
d:DesignWidth="800"
mc:Ignorable="d">

<UserControl.Resources>

<Style TargetType="telerik:RadButton">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="#ff6c1e" />
<Setter Property="Padding" Value="10,5" />
<Setter Property="Margin" Value="0,0,0,10" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MaxWidth" Value="160" />
</Style>

<Style TargetType="telerik:RadToggleButton">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="10,5" />
</Style>

<Style TargetType="telerik:RadTabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadTabControl">
<Grid Background="#1E1E1E">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>


<Border
Grid.Row="0"
MinHeight="45"
Background="#252525">
<TabPanel
x:Name="HeaderPanel"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1" />
</Border>


<Border
x:Name="ContentPanel"
Grid.Row="1"
Background="Transparent"
BorderThickness="0"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<ContentPresenter
x:Name="PART_SelectedContentHost"
Margin="2"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="telerik:RadListBox">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="#2E2F45" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
</Style>
<Style TargetType="telerik:RadTabItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="20,10" />
<Setter Property="MinHeight" Value="45" />
<Setter Property="Margin" Value="0" />
<Setter Property="Foreground" Value="#808080" />

<Setter Property="TopTemplate">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadTabItem">
<Grid>
<Border
x:Name="Border"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2" />
</Grid.RowDefinitions>

<ContentPresenter
x:Name="HeaderContentPresenter"
Grid.Row="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True" />

<Rectangle
x:Name="SelectionIndicator"
Grid.Row="1"
Height="2"
Fill="#ff6c1e"
Visibility="Collapsed" />
</Grid>
</Border>

<ContentPresenter
x:Name="PART_Content"
Margin="{TemplateBinding Padding}"
ContentSource="Content"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="Panel.ZIndex" Value="1" />
<Setter TargetName="SelectionIndicator" Property="Visibility" Value="Visible" />
<Setter Property="Background" Value="#2D2D2D" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#2D2D2D" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

<Setter Property="BottomTemplate">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadTabItem">

<Grid>
<Border
x:Name="Border"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Rectangle
x:Name="SelectionIndicator"
Grid.Row="0"
Height="2"
Fill="#ff6c1e"
Visibility="Collapsed" />

<ContentPresenter
x:Name="HeaderContentPresenter"
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True" />
</Grid>
</Border>
<ContentPresenter
x:Name="PART_Content"
Margin="{TemplateBinding Padding}"
ContentSource="Content"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="Panel.ZIndex" Value="1" />
<Setter TargetName="SelectionIndicator" Property="Visibility" Value="Visible" />
<Setter Property="Background" Value="#2D2D2D" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#2D2D2D" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Margin="4">
<Border
Background="Transparent"
BorderBrush="#2E2F45"
BorderThickness="0"
CornerRadius="5">
<telerik:RadTabControl>

<telerik:RadTabItem Header="Discovery Configuration">
<StackPanel Margin="20">
<TextBlock
Margin="0,0,0,20"
FontSize="18"
FontWeight="Bold"
Foreground="#ffffff"
Text="Add a new folder for discovery" />

<StackPanel Orientation="Horizontal">
<telerik:RadButton Command="{Binding SelectFolderClassificationCommand}">
<StackPanel Orientation="Horizontal ">
<telerik:RadGlyph FontSize="16" Glyph="" />
<TextBlock
Margin="5,0,0,0"
FontSize="18"
Text=" Select Folder" />
</StackPanel>
</telerik:RadButton>
<TextBlock
Margin="10,0,0,0"
VerticalAlignment="Center"
Background="Gray"
Text="{Binding FolderPath}" />
</StackPanel>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0">
<TextBlock
FontSize="18"
Foreground="#ffffff"
Text="Start Time" />
<telerik:RadDatePicker
Margin="0,0,0,20"
DisplayDate="{Binding DisplayTime}"
SelectedDate="{Binding StartTime}" />
</StackPanel>

<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock
FontSize="18"
Foreground="#ffffff"
Text="End Time" />
<telerik:RadDatePicker
DisplayDate="{Binding StartTime}"
IsEnabled="{Binding IsStartTimeSelected}"
SelectedDate="{Binding EndTime}" />
</StackPanel>
</Grid>

<TextBlock
Margin="0,0,0,10"
FontSize="18"
Foreground="#ffffff"
Text="Interval Time" />

<Border
BorderBrush="#2E2F45"
BorderThickness="1"
CornerRadius="5">
<Grid Margin="10,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<telerik:RadGlyph
Grid.Column="0"
Margin="0,0,10,0"
FontSize="20"
Foreground="#A7A3DC"
Glyph="" />

<telerik:RadWatermarkTextBox
Grid.Column="1"
Width="600"
Background="Transparent"
BorderThickness="0"
Text="{Binding IntervalTime, Mode=TwoWay}"
WatermarkContent="Enter time in Mins..." />
</Grid>
</Border>

<telerik:RadButton
MinWidth="140"
MaxWidth="200"
Command="{Binding SelectFolderClassificationCommandAdd}">
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph FontSize="16" Glyph="" />
<TextBlock
Margin="5,0,0,0"
FontSize="18"
Text=" Add Folder path" />
</StackPanel>
</telerik:RadButton>

<TextBlock Foreground="Red" Text="{Binding DiscoveryError}" />

<TextBlock
FontSize="16"
Foreground="#A7A3DC"
Text="Add Your Folder and click scan for Discover your sensitive data" />

<telerik:RadListBox MaxHeight="300" ItemsSource="{Binding FolderClassifications}">
<telerik:RadListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="210" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>

<telerik:RadButton
Grid.Column="0"
Command="{Binding RunClassification}"
Content="Scan"
FontSize="12" />

<telerik:RadGlyph
Grid.Column="1"
FontSize="16"
Glyph="" />

<TextBlock
Grid.Column="2"
Margin="5,0"
VerticalAlignment="Center"
FontSize="12"
Text="{Binding Source}" />

<TextBlock
Grid.Column="3"
VerticalAlignment="Center"
FontSize="12"
Foreground="{Binding ClassificationStatusColor}"
Text="{Binding ClassificationStatus}" />

<telerik:RadButton Grid.Column="4" Command="{Binding DeleteCommand}">
<telerik:RadGlyph FontSize="11" Glyph="" />
</telerik:RadButton>
</Grid>
</DataTemplate>
</telerik:RadListBox.ItemTemplate>
</telerik:RadListBox>
</StackPanel>
</telerik:RadTabItem>


<telerik:RadTabItem Header="Control (File Activity) Configuration">
<StackPanel Margin="20">
<StackPanel Orientation="Horizontal">
<telerik:RadButton Command="{Binding SelectFolderCommand}">
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph FontSize="16" Glyph="" />
<TextBlock
Margin="5,0,0,0"
FontSize="18"
Text=" Select Folder" />
</StackPanel>
</telerik:RadButton>
<TextBlock
Margin="10,0,0,0"
VerticalAlignment="Center"
Background="Gray"
Text="{Binding ControlFolderPath}" />
</StackPanel>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0">
<TextBlock
FontSize="18"
Foreground="#ffffff"
Text="Start Time" />
<telerik:RadDatePicker DisplayDate="{Binding DisplayTime}" SelectedDate="{Binding ControlStartTime}" />
</StackPanel>

<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock
FontSize="18"
Foreground="#ffffff"
Text="End Time" />
<telerik:RadDatePicker
DisplayDate="{Binding ControlStartTime}"
IsEnabled="{Binding IsControlStartTimeSelected}"
SelectedDate="{Binding ControlEndTime}" />
</StackPanel>
</Grid>

<telerik:RadButton
MinWidth="140"
MaxWidth="200"
Command="{Binding SelectFolderCommandAdd}">
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph FontSize="16" Glyph="" />
<TextBlock
Margin="5,0,0,0"
FontSize="18"
Text=" Add Folder path" />
</StackPanel>
</telerik:RadButton>

<TextBlock Foreground="Red" Text="{Binding ControlError}" />

<TextBlock
FontSize="16"
Foreground="#A7A3DC"
Text="Add Your Folder and click scan for Monitoring your data" />

<telerik:RadListBox MaxHeight="350" ItemsSource="{Binding FolderMonitors}">
<telerik:RadListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="210" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>

<telerik:RadToggleButton
Grid.Column="0"
Command="{Binding StartMonitoringCommand}"
Content="{Binding ButtonText}"
IsChecked="{Binding IsMonitoring}" />

<telerik:RadGlyph
Grid.Column="1"
FontSize="16"
Glyph="" />

<TextBlock
Grid.Column="2"
Margin="5,0"
VerticalAlignment="Center"
FontSize="12"
Text="{Binding FolderPath}" />

<TextBlock
Grid.Column="3"
VerticalAlignment="Center"
FontSize="12"
Foreground="{Binding MonitoringStatusColor}"
Text="{Binding MonitoringStatus}" />

<telerik:RadButton Grid.Column="4" Command="{Binding DeleteFolderMonitoringCommand}">
<telerik:RadGlyph FontSize="11" Glyph="" />
</telerik:RadButton>
</Grid>
</DataTemplate>
</telerik:RadListBox.ItemTemplate>
</telerik:RadListBox>
</StackPanel>
</telerik:RadTabItem>


<telerik:RadTabItem Header="Agent Info">
<StackPanel Margin="20">
<TextBlock
Margin="0,0,0,20"
FontSize="20"
Foreground="#ffffff"
Text="Agent Information" />


<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock
Width="120"
VerticalAlignment="Center"
FontSize="16"
Foreground="#A7A3DC"
Text="Client ID:" />
<telerik:RadWatermarkTextBox
Width="250"
Background="#2E2F45"
BorderThickness="0"
IsReadOnly="True"
Text="{Binding ClientId}" />
</StackPanel>


<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock
Width="120"
VerticalAlignment="Center"
FontSize="16"
Foreground="#A7A3DC"
Text="Client Secret:" />
<telerik:RadWatermarkTextBox
Width="250"
Background="#2E2F45"
BorderThickness="0"
IsReadOnly="True"
Text="{Binding ClientSecret}" />
</StackPanel>


<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock
Width="120"
VerticalAlignment="Center"
FontSize="16"
Foreground="#A7A3DC"
Text="Agent Group:" />
<telerik:RadWatermarkTextBox
Width="250"
Background="#2E2F45"
BorderThickness="0"
IsReadOnly="True"
Text="{Binding AgentGroup}" />
</StackPanel>


<TextBlock
Margin="0,20,0,10"
FontSize="18"
Foreground="#ffffff"
Text="Scan Configurations" />


<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock
Width="120"
VerticalAlignment="Center"
FontSize="16"
Foreground="#A7A3DC"
Text="Max Depth:" />
<telerik:RadWatermarkTextBox
Width="250"
Background="#2E2F45"
BorderThickness="0"
IsReadOnly="True"
Text="{Binding MaxDepth}" />
</StackPanel>


<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock
Width="120"
VerticalAlignment="Center"
FontSize="16"
Foreground="#A7A3DC"
Text="Files Per Folder:" />
<telerik:RadWatermarkTextBox
Width="250"
Background="#2E2F45"
BorderThickness="0"
IsReadOnly="True"
Text="{Binding MaxFilesPerFolder}" />
</StackPanel>


<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock
Width="120"
VerticalAlignment="Center"
FontSize="16"
Foreground="#A7A3DC"
Text="Files Per Scan:" />
<telerik:RadWatermarkTextBox
Width="250"
Background="#2E2F45"
BorderThickness="0"
IsReadOnly="True"
Text="{Binding TotalFilesPerScan}" />
</StackPanel>


<telerik:RadButton Command="{Binding CreateDumpCommand}">
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph FontSize="16" Glyph="" />
<TextBlock
Margin="5,0,0,0"
FontSize="18"
Text=" Create Dump" />
</StackPanel>
</telerik:RadButton>
</StackPanel>
</telerik:RadTabItem>
</telerik:RadTabControl>
</Border>
</Grid>
</UserControl>

1 Answer, 1 is accepted

answered on 21 Feb 2025, 07:50 AM

Hello Anas,

Thank you for the provided information.

Internally, the RadTabItem element retrieves the root Grid panel and it subscribes to several mouse events. This root Grid panel has an x:Name="wrapper" and it is used to retrieve it from the default ControlTemplate of the element.

With this in mind, in order for the selection to work correctly with the customized ControlTemplate, set the x:Name property of the root Grid panel to "wrapper" as shown below:

<ControlTemplate TargetType="telerik:RadTabItem">
    <Grid x:Name="wrapper">
        <Border
        x:Name="Border"
        Padding="{TemplateBinding Padding}"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="2" />
                </Grid.RowDefinitions>

                <ContentPresenter
                x:Name="HeaderContentPresenter"
                Grid.Row="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                ContentSource="Header"
                RecognizesAccessKey="True" />

                <Rectangle
                x:Name="SelectionIndicator"
                Grid.Row="1"
                Height="2"
                Fill="#ff6c1e"
                Visibility="Collapsed" />
            </Grid>
        </Border>
        <!--  Required parts for tab functionality  -->
        <ContentPresenter
        x:Name="PART_Content"
        Margin="{TemplateBinding Padding}"
        ContentSource="Content"
        Visibility="Collapsed" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Foreground" Value="#FFFFFF" />
            <Setter Property="Panel.ZIndex" Value="1" />
            <Setter TargetName="SelectionIndicator" Property="Visibility" Value="Visible" />
            <Setter Property="Background" Value="#2D2D2D" />
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#2D2D2D" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

With this being said, could you give this suggestion a try?

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.