This is a migrated thread and some comments may be shown as answers.

WPF Telerik RadMenu with no icons in the first level

2 Answers 166 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ernesto
Top achievements
Rank 1
Ernesto asked on 29 Jul 2016, 01:38 PM

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?

 

2 Answers, 1 is accepted

Sort by
0
Ernesto
Top achievements
Rank 1
answered on 01 Aug 2016, 08:29 AM

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>

 

0
Nasko
Telerik team
answered on 02 Aug 2016, 07:23 AM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
Menu
Asked by
Ernesto
Top achievements
Rank 1
Answers by
Ernesto
Top achievements
Rank 1
Nasko
Telerik team
Share this question
or