Change IconColumnWidth on sub-menu?

6 posts, 0 answers
  1. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 05 Feb 2013 Link to this post

    Hi there,

    I've extracted and modified all the control templates for RadMenuItem using the Windows 8 theme as the original version.

    I've been able to re-style the SubMenuHeader and related pop-up, but I've hit a stumbling block - the parent context menu has IconColumWidth set to the standard value, so that icons are shown, however the items in the popup sub-menu do not have icons at all so the icon column should be collapsed.

    However, I can't see any way to set the icon column width on the popup independently of the parent menu, due to this XAML in the popup template:

    <Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-2">
        <Grid x:Name="PopupContentElement" Margin="3, 0">
            <telerikChromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}" />
                             
            <Border
                BorderThickness="1"
                BorderBrush="{StaticResource LightColorBrush}"
                Background="{StaticResource MainColorBrush}">
                                 
                <Grid>
                    <Grid Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Menu.IconColumnWidth}" HorizontalAlignment="Left">
                        <Rectangle Fill="{StaticResource MainColorBrush}" Margin="0, 0, 2, 0" />
                    </Grid>
                                     
                    <ItemsPresenter Margin="0, 1" />
                </Grid>
            </Border>
        </Grid>
    </Popup>

    The problem is that the grid width is binding to the icon column width on the parent menu, which is displaying icons, but I don't want this width on the sub-menu items.

    Is this a known problem? Do you have a workaround at the moment? I need to be able to control the icon column width independently at any level of the menu hierarchy.

    Thanks!

    Sam
  2. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 05 Feb 2013 Link to this post

    Sorry I made a mistake interpreting the template - I took out the grid with the width binding and the problem remained, because the ItemsPresenter fills that grid anyway.

    It's exactly the same issue though, within the SubMenuItem template - the icon column width binds to IconColumnWidth on the parent menu:

    ....
    <Grid Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Menu.IconColumnWidth}">
        <Path
            x:Name="Tick" Visibility="Collapsed" FlowDirection="LeftToRight"
            VerticalAlignment="Center" HorizontalAlignment="Center"
            Fill="{TemplateBinding Foreground}"
            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" Margin="2" Content="{TemplateBinding Icon}" ContentTemplate="{TemplateBinding IconTemplate}" />
    </Grid>
    ....

    So basically at any level of the hierarchy, you have to have the same icon column width, which doesn't work for our requirements, because there is actually only one RadMenu / RadContextMenu root, the rest is just a hierarchy of RadMenuItems with no property for setting the icon column width on child sub-menus.
  3. DevCraft banner
  4. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 06 Feb 2013 Link to this post

    Hi Sam,

    There isn't a default way to set IconColumnWidth to be different for each of the MenuItem groups. One idea is to use attached property and to bind it to the correct width properties in RadMenuItem's templates. We have implemented a simple project illustrating such behavior. When you set PopupIconColumnWidth attached property on RadMenuItem its first level children will use this value for IconColumnWidth. If you do not set a value, a default one (28) will be used.

    Please check the attachment and inform us if you have any problems or concerns.

    Greetings,
    Rosen Vladimirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 17 Jul 2013 Link to this post


    I've just got back to this issue, finally. 

    I tried the attached solution, but it doesn't work because there is no Parent property on RadMenuItem (maybe there used to be but there isn't now), so there is no way to bind to properties on the parent menu item. I found it a little awkward as well as it required me to touch every menu in the application.

    The solution I ended up using was to create a new SubMenuItem template that completely omits the grid element for the tick / icon columns, and then I just set that template as the SubmenuItemTemplateKey on the child menu items where I want to hide the column, either via ItemContainerStyle for dynamically generated items, or manually on declared items.

    Works quite well, and only requires changes where they are actually needed.
  6. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 18 Jul 2013 Link to this post

    Hello Sam,

    With our latest release we have introduced IconColumnWidth property for RadMenuItem. When you set it, the Icon area of the current RadMenuItem will be modified. Please note that this will change only the area where the Icon of the current RadMenuItem will be placed. Setting this property will not change the gray area for Icon (in Office_Black theme) - it will only be modified if you set RadContextMenu's IconColumnWidth property. That's why we've created a new menu item type - RadMenuGroupItem. By using it you are able to hide this gray area for specific submenu, while in the others it will be visible. After that you have to set IconColumnWidth property of all RadMenuItems inside RadMenuGroupItem to 0 and you will achieve the desired result with just a few lines of code.

    I'm sending you a new project demonstrating all of the above. Please check it and inform us if you have any problems or concerns.

    Regards,
    Rosen Vladimirov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  7. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 18 Jul 2013 Link to this post


    Hi Rosen,

    That's good news - I'll be sure to use this feature when we update to the current version of the Silverlight controls. Thanks for letting me know!

    Sam
Back to Top
DevCraft banner