Change IconColumnWidth on sub-menu?

[Sam]

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

[Sam]

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.

[Rosen Vladimirov]

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

[Sam]

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.

[Rosen Vladimirov]

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

[Sam]

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