RadTabControl Navigation Not Working with Custom TabItem Template

1 Answer 25 Views
TabControl
Anas
Top achievements
Rank 1
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>

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

                            <!--  Content Panel  -->
                            <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" />
            <!--  Set all directional templates to ensure proper functionality  -->
            <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>
                            <!--  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>
                </Setter.Value>
            </Setter>
            <!--  Copy the same template for other directions  -->
            <Setter Property="BottomTemplate">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadTabItem">
                        <!--  Same template as TopTemplate  -->
                        <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>
                <!--  Discovery Configuration Tab  -->
                <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="&#xe105;" />
                                    <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="&#xe113;" />

                                <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="&#xe105;" />
                                <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="&#xe8b7;" />

                                        <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="&#xe10a;" />
                                        </telerik:RadButton>
                                    </Grid>
                                </DataTemplate>
                            </telerik:RadListBox.ItemTemplate>
                        </telerik:RadListBox>
                    </StackPanel>
                </telerik:RadTabItem>

                <!--  Control Configuration Tab  -->
                <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="&#xe105;" />
                                    <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="&#xe105;" />
                                <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="&#xe8b7;" />

                                        <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="&#xe10a;" />
                                        </telerik:RadButton>
                                    </Grid>
                                </DataTemplate>
                            </telerik:RadListBox.ItemTemplate>
                        </telerik:RadListBox>
                    </StackPanel>
                </telerik:RadTabItem>

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

                        <!--  Client ID  -->
                        <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>

                        <!--  Client Secret  -->
                        <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>

                        <!--  Client Secret  -->
                        <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>


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

                        <!--  Max Depth  -->
                        <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>

                        <!--  Files Per Folder  -->
                        <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>

                        <!--  Files Per Scan  -->
                        <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>

                        <!--  Create Dump Button  -->
                        <telerik:RadButton Command="{Binding CreateDumpCommand}">
                            <StackPanel Orientation="Horizontal">
                                <telerik:RadGlyph FontSize="16" Glyph="&#xe105;" />
                                <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

Sort by
0
Stenly
Telerik team
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.

Tags
TabControl
Asked by
Anas
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or