WPF Telerik RadMenu with no icons in the first level

[Ernesto]

Hi,

I'm trying to create a telerik rad menu with all the items with icons. The xaml code I´m using is:

 

01.<UserControl.Resources>
02.        <ResourceDictionary>
03.            <ResourceDictionary.MergedDictionaries>
04.                <ResourceDictionary Source="pack://application:,,,/Resources;component/Themes/Generic.xaml"/>
05.            </ResourceDictionary.MergedDictionaries>
06.
07.
08.
09.            <Style x:Key="MultiColumnMenuItemStyle" TargetType="telerik:RadMenuGroupItem">
10.                <Setter Property="ItemsPanel">
11.                    <Setter.Value>
12.                        <ItemsPanelTemplate>
13.
14.                            <telerik:RadWrapPanel Orientation="Vertical" MaxHeight="300" />
15.                        </ItemsPanelTemplate>
16.                    </Setter.Value>
17.                </Setter>
18.            </Style>
19.
20.
21.            <HierarchicalDataTemplate x:Key="MenuItemTemplate" ItemsSource="{Binding Items}">
22.                <TextBlock Text="{Binding Text}" />
23.                <HierarchicalDataTemplate.ItemContainerStyle>
24.                    <Style TargetType="telerik:RadMenuItem">
25.                        <Setter Property="IconTemplate">
26.                            <Setter.Value>
27.                                <DataTemplate>
28.                                    <Image Source="{Binding}"
29.                                       MaxWidth="16"
30.                                       MaxHeight="16"
31.                                       MinWidth="16"
32.                                       MinHeight="16"
33.                                       Stretch="Fill"
34.                                       Opacity="0.8"
35.                                       HorizontalAlignment="Center"
36.                                       Margin="0 0 5 0" />
37.                                </DataTemplate>
38.                            </Setter.Value>
39.                        </Setter>
40.                        <Setter Property="Icon"  Value="{StaticResource Icon48MultiFolder}"></Setter>
41.                    </Style>
42.                </HierarchicalDataTemplate.ItemContainerStyle>
43.            </HierarchicalDataTemplate>
44.        </ResourceDictionary>
45.    </UserControl.Resources>
46.    <Grid>
47.        <telerik:RadMenu
48.            VerticalAlignment="Top"
49.            telerik:StyleManager.Theme="Windows8Touch">
50.
51.
52.            <telerik:RadMenuItem ItemContainerStyle="{StaticResource MultiColumnMenuItemStyle}" >
53.                <telerik:RadMenuItem.Icon>
54.                    <StackPanel Orientation="Horizontal">
55.                        <Image Source="{StaticResource Icon48Menu}" Opacity="0.8" Stretch="None"  />
56.                    </StackPanel>
57.                </telerik:RadMenuItem.Icon>
58.
59.                <telerik:RadMenuGroupItem ItemsSource="{Binding Items}"
60.                                          ItemTemplate="{StaticResource MenuItemTemplate}">
61.
62.                </telerik:RadMenuGroupItem>
63.            </telerik:RadMenuItem>
64.</telerik:RadMenu>
65.    </Grid>
66.</UserControl>

But in the menu result, the first level has not any icons. (You can see the image attached)

Any idea?

 

[Ernesto]

I found a solution modifying the MultiColumnMenuItemStyle style:

<Style x:Key="MultiColumnMenuItemStyle" TargetType="telerik:RadMenuGroupItem">

                <Setter Property="ItemContainerStyle">

                    <Setter.Value>

                        <Style TargetType="telerik:RadMenuItem">

                            <Setter Property="Icon" Value="{StaticResource Icon48MultiFolder}" />

                            <Setter Property="IconTemplate">

                                <Setter.Value>

                                    <DataTemplate>

                                        <Image Source="{Binding}"

                                       MaxWidth="16"

                                       MaxHeight="16"

                                       MinWidth="16"

                                       MinHeight="16"

                                       Stretch="Fill"

                                       Opacity="0.8"

                                       HorizontalAlignment="Center"

                                       Margin="0 0 5 0" />

                                    </DataTemplate>

                                </Setter.Value>

                            </Setter>

                        </Style>

                    </Setter.Value>                   

                </Setter>

                 

                <Setter Property="ItemsPanel">

                    <Setter.Value>

                        <ItemsPanelTemplate>

                            <!-- set different MaxHeight to control the size of the menu -->

                            <telerik:RadWrapPanel Orientation="Vertical" MaxHeight="300" />

                        </ItemsPanelTemplate>                       

                    </Setter.Value>

                </Setter>               

            </Style>

 

[Nasko]

Hi Ernesto,

We are glad to hear you were able to resolve your issue and thank you for providing your solution to the community. Indeed the modified Style of RadMenuGroupItem needs to have the Icon set in order to be applied as expected.

If you have any additional questions or concerns regarding Telerik controls, please let us know.

Regards,
Nasko
Telerik by Progress