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

3 posts, 0 answers
  1. Valeriu
    Valeriu avatar
    21 posts
    Member since:
    Dec 2010

    Posted 15 Jun 2012 Link to this post

    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. Dani
    Admin
    Dani avatar
    848 posts

    Posted 18 Jun 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft banner
  4. Valeriu
    Valeriu avatar
    21 posts
    Member since:
    Dec 2010

    Posted 18 Jun 2012 Link to this post

    Thanks for confirming it and providing a workaround!

    Valeriu

Back to Top