RadMenu tab navigation issue

2 posts, 0 answers
  1. Krzysztof
    Krzysztof avatar
    14 posts
    Member since:
    Oct 2007

    Posted 10 Feb 2014 Link to this post

    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
  2. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 12 Feb 2014 Link to this post

    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

    Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top