Vertical alignment of InputGestureText in Office2016 Theme faulty

[Philipp]

Hi,

the vertical alignment of InputGestureText in Office2016 Theme is faulty. In VisualStudio2013 Theme everthing is fine.

How can i correct this?

Thanks!

[Dilyan Traykov]

Hello Philipp,

We are currently aware of this issue and you can follow the process of fixing it by following this item in our feedback portal.

For the time being, you should edit the control template of the RadMenuItem element and set it as the TopLevelHeaderTemplateKey, TopLevelItemTemplateKey, SubmenuHeaderTemplateKey or SubmenuItemTemplateKey depending on which elements you use.

Here's the modified version of the template for the Office2016 theme:

<ControlTemplate x:Key="CustomRadMenuItemTemplate" TargetType="telerik:RadMenuItem">
    <Grid x:Name="RootElement">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="RoleStates">
                <VisualState x:Name="TopLevelItem">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0 1 0 1</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="IconHost" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>-2 0 -7 0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="TopLevelHeader">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0 1 0 1</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="IconHost" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>-2 0 -7 0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="SubmenuItem"/>
                <VisualState x:Name="SubmenuHeader">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandIcon" Storyboard.TargetProperty="Visibility" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Separator"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="OrientationStates">
                <VisualState x:Name="Horizontal"/>
                <VisualState x:Name="Vertical">
                    <Storyboard>
                        <DoubleAnimation To="1" Duration="0:0:0" Storyboard.TargetName="PART_Popup" Storyboard.TargetProperty="HorizontalOffset"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ChildrenStates">
                <VisualState x:Name="HasChildren"/>
                <VisualState x:Name="NoChildren"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="HeaderStates">
                <VisualState x:Name="VisibleHeader"/>
                <VisualState x:Name="EmptyHeader">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Icon" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>5 3 4 3</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Visibility" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="InputGestureTextStates">
                <VisualState x:Name="EmptyInputGestureText"/>
                <VisualState x:Name="VisibleInputGestureText">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_InputGestureText" Storyboard.TargetProperty="Visibility" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="{telerik:Office2016Resource ResourceKey=CornerRadius}"/>
        <Grid x:Name="ContentGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Border x:Name="HighlightVisual"
            Grid.ColumnSpan="4"
            Opacity="0"
            SnapsToDevicePixels="True"
            Background="{telerik:Office2016Resource ResourceKey=AccentMouseOverBrush}"
            CornerRadius="{telerik:Office2016Resource ResourceKey=CornerRadius}"
            BorderThickness="1"
            BorderBrush="{telerik:Office2016Resource ResourceKey=AccentMouseOverBrush}"/>
            <Grid x:Name="IconHost" Width="{TemplateBinding IconColumnWidth}" Margin="-2 0 -1 0">
                <TextBlock x:Name="Tick"
                Visibility="Collapsed"
                FlowDirection="LeftToRight"
                Text="{StaticResource GlyphCheck}"
                VerticalAlignment="Center"
                FontStyle="Normal"
                FontWeight="Normal"
                FontFamily="{StaticResource TelerikWebUI}"
                FontSize="16"
                HorizontalAlignment="Center"
                Foreground="{telerik:Office2016Resource ResourceKey=IconBrush}"/>
                <ContentPresenter x:Name="Icon" Margin="3" Content="{TemplateBinding Icon}" ContentTemplate="{TemplateBinding IconTemplate}"/>
            </Grid>
            <ContentPresenter x:Name="Content"
            Grid.Column="1"
            Margin="{TemplateBinding Padding}"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
            RecognizesAccessKey="True"
            ContentSource="Header"/>
            <telerik:SharedSizeContentPresenter x:Name="PART_InputGestureText" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="2" Visibility="Collapsed" SharedSizeGroupWidth="IGTColumn" Margin="40 3 3 3" Content="{TemplateBinding InputGestureText}"/>
            <telerik:SharedSizeContentPresenter HorizontalAlignment="Right" SharedSizeGroupWidth="ExpandIconColumn" Grid.Column="3">
                <Grid x:Name="ExpandIcon" Margin="0 0 2 0" Visibility="Collapsed">
                    <TextBlock x:Name="ExpandIconRight"
                    Text="{StaticResource GlyphArrow60Right}"
                    VerticalAlignment="Center"
                    FontFamily="{StaticResource TelerikWebUI}"
                    FontSize="16"
                    FontWeight="Normal"
                    FontStyle="Normal"
                    Foreground="{telerik:Office2016Resource ResourceKey=IconBrush}"/>
                </Grid>
            </telerik:SharedSizeContentPresenter>
        </Grid>
        <Popup x:Name="PART_Popup" HorizontalOffset="0" VerticalOffset="1" IsOpen="{TemplateBinding IsSubmenuOpen}" Focusable="False" AllowsTransparency="True">
            <Grid Width="{TemplateBinding DropDownWidth}" Height="{TemplateBinding DropDownHeight}">
                <Grid x:Name="PopupContentElement">
                    <Border x:Name="PopupBorderVisual"
                    BorderThickness="1"
                    BorderBrush="{telerik:Office2016Resource ResourceKey=BasicBrush}"
                    Background="{telerik:Office2016Resource ResourceKey=MainBrush}"
                    CornerRadius="{telerik:Office2016Resource ResourceKey=CornerRadius}">
                        <Grid>
                            <ScrollViewer x:Name="PART_ScrollViewer" Style="{StaticResource MenuScrollViewer}" telerik:SharedSizeScope.IsSharedSizeScope="True">
                                <Grid>
                                    <ItemsPresenter/>
                                </Grid>
                            </ScrollViewer>
                        </Grid>
                    </Border>
                </Grid>
            </Grid>
        </Popup>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsHighlighted" Value="True">
            <Setter TargetName="HighlightVisual" Property="Visibility" Value="Visible"/>
            <Setter TargetName="HighlightVisual" Property="Opacity" Value="1"/>
            <Setter TargetName="ExpandIconRight" Property="Foreground" Value="{telerik:Office2016Resource ResourceKey=MarkerInvertedBrush}"/>
            <Setter TargetName="Content" Property="TextBlock.Foreground" Value="{telerik:Office2016Resource ResourceKey=MarkerInvertedBrush}"/>
            <Setter TargetName="Tick" Property="TextBlock.Foreground" Value="{telerik:Office2016Resource ResourceKey=MarkerInvertedBrush}"/>
            <Setter TargetName="Icon" Property="TextBlock.Foreground" Value="{telerik:Office2016Resource ResourceKey=MarkerInvertedBrush}"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Content" Property="Opacity" Value="{telerik:Office2016Resource ResourceKey=DisabledOpacity}"/>
            <Setter TargetName="ExpandIconRight" Property="Opacity" Value="{telerik:Office2016Resource ResourceKey=DisabledOpacity}"/>
            <Setter TargetName="Tick" Property="Opacity" Value="{telerik:Office2016Resource ResourceKey=DisabledOpacity}"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="Icon" Value="{x:Null}"/>
                <Condition Property="IconTemplate" Value="{x:Null}"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
            </MultiTrigger.Setters>
        </MultiTrigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter TargetName="Tick" Property="Visibility" Value="Visible"/>
            <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="IsSubmenuOpen" Value="True">
            <Setter TargetName="HighlightVisual" Property="Background" Value="{telerik:Office2016Resource ResourceKey=AccentPressedBrush}"/>
            <Setter TargetName="HighlightVisual" Property="BorderBrush" Value="{telerik:Office2016Resource ResourceKey=AccentPressedBrush}"/>
            <Setter TargetName="HighlightVisual" Property="Opacity" Value="1"/>
            <Setter TargetName="ExpandIconRight" Property="Foreground" Value="{telerik:Office2016Resource ResourceKey=MarkerInvertedBrush}"/>
            <Setter TargetName="Content" Property="TextBlock.Foreground" Value="{telerik:Office2016Resource ResourceKey=MarkerInvertedBrush}"/>
            <Setter TargetName="Icon" Property="TextBlock.Foreground" Value="{telerik:Office2016Resource ResourceKey=MarkerInvertedBrush}"/>
        </Trigger>
        <Trigger Property="FlowDirection" Value="RightToLeft">
            <Setter TargetName="ExpandIconRight" Property="Text" Value="{StaticResource GlyphArrow60Left}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="telerik:RadMenuItem" BasedOn="{StaticResource RadMenuItemStyle}">
    <Setter Property="SubmenuItemTemplateKey" Value="{StaticResource CustomRadMenuItemTemplate}" />
</Style>

I've marked the modification with a green foreground.

Do let me know if this works for you.

Regards,
Dilyan Traykov
Telerik by Progress

[Philipp]

Hello Dilyan,

thank you for your help! Everything is ok now.

Regards,
Philipp