RadMenu tab navigation issue

[Krzysztof]

Dear Telerik Team!

I have problem setting tab navigation using rad menu control. I have a simple form with 3 textboxes and rad menu containing 2 items. When first textbox is focused and I press tab, the next textbox control gets focus and it works as expected. When last rad menu item gets focus and I press tab, the first rad menu item gets focus and focus never gets back to the first textbox. From now on only rad menu items get focused when the tab is pressed. Can you please help me to get it work correcty? Here is my xaml:

<Window.Resources>
        <Style x:Key="RadMenuItemBaseStyle" TargetType="telerikNavigation:RadMenuItem">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="{telerik:Windows8Resource ResourceKey=MainBrush}" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="FontSize" Value="{telerik:Windows8Resource ResourceKey=FontSize}" />
            <Setter Property="FontFamily" Value="{telerik:Windows8Resource ResourceKey=FontFamily}" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <!--<Setter Property="FocusVisualStyle" Value="{x:Null}" />-->
        </Style>
        <ControlTemplate TargetType="telerik:RadMenuItem" x:Key="LightMenuItemTemplate">
            <Border Name="border" BorderThickness="0"  BorderBrush="Gray"   CornerRadius="0" Background="{TemplateBinding Background}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="10"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock  Name="contentDescription"   Foreground="Gray"
                             Text="{TemplateBinding Header}" TextWrapping="Wrap" HorizontalAlignment="Center" Grid.Column="2"/>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="BorderBrush" Value="LightGray" />
                    <Setter TargetName="border" Property="BorderThickness" Value="0" />
                    <Setter Property="Opacity" Value="0.5" />
                </Trigger>
                <Trigger Property="IsFocused" Value="False">
                    <Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="border" Property="Opacity" Value="0.4" />
                    <Setter Property="Foreground" Value="Gray" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style x:Key="MenuItem" TargetType="telerik:RadMenuItem" BasedOn="{StaticResource RadMenuItemBaseStyle}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="Foreground">
                <Setter.Value>
                    <SolidColorBrush Opacity="0.05" Color="White"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Template" Value="{StaticResource LightMenuItemTemplate}"></Setter>
        </Style>
        <Style x:Key="RadMenuStyle" TargetType="telerikNavigation:RadMenu">
            <Setter Property="IconColumnWidth" Value="27" />
            <Setter Property="BorderBrush" Value="{telerik:Windows8Resource ResourceKey=BasicBrush}" />
            <Setter Property="Background" Value="{telerik:Windows8Resource ResourceKey=AccentBrush}" />
            <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey=MarkerBrush}" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Padding" Value="1 0" />
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate >
                        <themes:RadWrapPanel Orientation="{Binding Orientation, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerikNavigation:RadMenu}}}" IsAnimated="False" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikNavigation:RadMenu" >
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <ItemsPresenter Margin="{TemplateBinding Padding}"  />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="LightMenu" TargetType="telerik:RadMenu" BasedOn="{StaticResource RadMenuStyle}">
            <Setter Property="Background" Value="White"></Setter>
            <Setter Property="Foreground" Value="Gray"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0" TabIndex="0" Text="1" />
        <TextBox Grid.Row="1" TabIndex="1" Text="2" />
        <TextBox Grid.Row="2" TabIndex="2" Text="3" />
        <telerik:RadMenu Style="{DynamicResource LightMenu}" Grid.Row="3" FontStyle="Normal" Foreground="Azure" FontFamily="Arial" FlowDirection="RightToLeft" Height="30" HorizontalAlignment="Right" Margin="0,0,0,0" Name="radMenu" VerticalAlignment="Bottom" Width="400" >
            <telerik:RadMenuItem Style="{DynamicResource MenuItem}" Header="Cancel" x:Name="rmiCancel" VerticalAlignment="Top" TabIndex="4" />
            <telerik:RadMenuItem Style="{DynamicResource MenuItem}" Header="Yes" x:Name="rmiOK" VerticalAlignment="Top" TabIndex="3" />
        </telerik:RadMenu>
    </Grid>

Many thanks for any help and best regards
Krzysztof Kaźmierczak

[Kalin]

Hi Krzysztof,

The strange behavior is caused by the FlowDirection set to the Menu and TabIndexes set the MenuItems.

We strongly recommend you to avoid using different FlowDirections for your Window and RadMenu as this is affecting the navigation. Try replacing your RadMenu with the one below - it will achieve the same appearance as well as the correct tab navigation:

<telerik:RadMenu Style="{DynamicResource LightMenu}"
                 Grid.Row="3" FontStyle="Normal"
                 Foreground="Azure" FontFamily="Arial"
                 Height="30" HorizontalAlignment="Right"
                 Margin="0,0,0,0" Name="radMenu" VerticalAlignment="Bottom">
    <telerik:RadMenuItem Style="{DynamicResource MenuItem}"
                         Header="Yes" x:Name="rmiOK"
                         VerticalAlignment="Top" TabIndex="3" />
    <telerik:RadMenuItem Style="{DynamicResource MenuItem}"
                         Header="Cancel" x:Name="rmiCancel"
                         VerticalAlignment="Top" TabIndex="4" />
</telerik:RadMenu>

Hope this helps.

Regards,
Kalin
Telerik