WPF Telerik RadMenu with no icons in the first level

3 posts, 0 answers
  1. Ernesto
    Ernesto avatar
    3 posts
    Member since:
    May 2014

    Posted 29 Jul Link to this post

    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. Ernesto
    Ernesto avatar
    3 posts
    Member since:
    May 2014

    Posted 01 Aug Link to this post

    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>

     

  3. UI for WPF is Visual Studio 2017 Ready
  4. Nasko
    Admin
    Nasko avatar
    587 posts

    Posted 02 Aug Link to this post

    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.
Back to Top