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

[Valeriu]

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

[Dani]

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>
                                      <!-- NOTE: added a HorizontalContentAlignment-->
                                      <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>
                              </Grid>
                          </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

[Valeriu]

Thanks for confirming it and providing a workaround!

Valeriu