Vertical alignment of InputGestureText in Office2016 Theme faulty

3 posts, 0 answers
  1. Philipp
    Philipp avatar
    11 posts
    Member since:
    Nov 2015

    Posted 10 May Link to this post

    Hi,

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

    How can i correct this?

    Thanks!

  2. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    601 posts

    Posted 12 May Link to this post

    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 TopLevelHeaderTemplateKeyTopLevelItemTemplateKeySubmenuHeaderTemplateKey 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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Philipp
    Philipp avatar
    11 posts
    Member since:
    Nov 2015

    Posted 12 May Link to this post

    Hello Dilyan,

    thank you for your help! Everything is ok now.

    Regards,
    Philipp

Back to Top