This is a migrated thread and some comments may be shown as answers.

[Solved] RadContextMenu in Metro theme - item's horizontal alignement (Q2 2012)

2 Answers 173 Views

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Valeriu asked on 15 Jun 2012, 08:51 AM

RadContextMenu-windows7.png

RadContextMenu-metro.png

Hello

See attached screenshots. In Metro theme horizontal alignment isn't respected.

The code for RadContextMenu:

<telerik:RadContextMenu cal:Action.TargetWithoutContext="{Binding ElementName=Items, Path=DataContext}"

MinWidth="230">

<telerik:RadMenuItem cal:Message.Attach="ClosePage($datacontext)"

Visibility="{Binding SupportClosing, Converter={StaticResource visibleIfTrue}}"

HorizontalContentAlignment="Stretch">

<telerik:RadMenuItem.Header>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<TextBlock Text="Close tab" />

<TextBlock Text="(Ctrl+F4)"

Foreground="Gray"

Grid.Column="1" />

</Grid>

</telerik:RadMenuItem.Header>

</telerik:RadMenuItem>

I'd appreciate any hints on how to make horizontal alignment to stretch the content in Metro theme. If possible, without involving Blend & complete restyling.

Thanks

2 Answers, 1 is accepted

answered on 18 Jun 2012, 02:29 PM

Hello Valeriu,

Usually controls have an entirely different template for the Metro theme in particular. I tested the issue and I can confirm that the HorizontalContentAlignment of the SubMenuItemTemplate in Metro does not work as expected. This will be fixed as soon as possible. Meanwhile, you can use the following work-around. In App.xaml merge resources from the Metro theme assembly and override the SubmenuItemTemplateKey:

<Application.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="/Telerik.Windows.Themes.Metro;component/Themes/System.Windows.xaml" />

<ResourceDictionary Source="/Telerik.Windows.Themes.Metro;component/Themes/Telerik.Windows.Controls.xaml" />

<ResourceDictionary Source="/Telerik.Windows.Themes.Metro;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />

</ResourceDictionary.MergedDictionaries>

<telerik:MetroColors x:Key="MetroColors" />

<telerik:MetroTheme x:Key="Theme" />

<SolidColorBrush x:Key="MarkerBrush" Color="{Binding Path=Palette.MarkerColor, Source={StaticResource MetroColors}}" telerik:MetroColors.Color="BoundColor" />

<SolidColorBrush x:Key="BasicBrush" Color="{Binding Path=Palette.BasicColor, Source={StaticResource MetroColors}}" telerik:MetroColors.Color="BoundColor" />

<Thickness x:Key="MenuSubItemMargin">2</Thickness>

<Style TargetType="telerik:RadMenuItem" BasedOn="{StaticResource RadMenuItemStyle}">

<Setter Property="SubmenuItemTemplateKey">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadMenuItem">

<Grid x:Name="RootElement">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Highlighted">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighlightVisual"

Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="ContentGrid" To="0.3" Duration="0:0:0" />

</Storyboard>

</VisualState>

<VisualState x:Name="Normal" />

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Unfocused" />

<VisualState x:Name="Focused" />

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">

<VisualState x:Name="Checked">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Tick"

Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"

Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked" />

<VisualState x:Name="HideIcon">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"

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}" />

<Grid Margin="{StaticResource MenuSubItemMargin}">

<Border x:Name="HighlightVisual" Visibility="Collapsed" Background="{StaticResource BasicBrush}" />

<Grid x:Name="ContentGrid">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Grid Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Menu.IconColumnWidth}">

<Path x:Name="Tick" Grid.Column="0" Visibility="Collapsed" FlowDirection="LeftToRight"

VerticalAlignment="Center" HorizontalAlignment="Center"

Fill="{StaticResource MarkerBrush}"

Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" />

<ContentPresenter x:Name="Icon" Grid.Column="0" Margin="2" Content="{TemplateBinding Icon}" ContentTemplate="{TemplateBinding IconTemplate}" />

</Grid>

<ContentControl x:Name="Content" Grid.Column="1" FontSize="12" FontFamily="Segoe UI Semibold"

Margin="{TemplateBinding Padding}" Foreground="{StaticResource MarkerBrush}" Background="Red"

HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}"

>

</ContentControl>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

</Application.Resources>

Thank you for this feedback. I hope the above solution will work well in your case.

Greetings,
Dani
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>