How to set custom image for icon property in RadNavigationViewItem

1 Answer 207 Views
NavigationView (Hamburger Menu)
Naren
Top achievements
Rank 1
Naren asked on 11 May 2023, 10:52 AM

Hi team

I have created sample with RadNavigationView, below this i have added list of items and those has been bind using itemsource property.

ItemSource type has two property 1st name as NameDisplay with type string and 2 nd as Icon with type string

Create style like below

<Style TargetType="telerik:RadNavigationViewItem">
        <Setter Property="Content" Value="{Binding NameDisplay}" />
        <Setter Property="Icon">
            <Setter.Value>
                <Image Source="{Binding Icon}" Height="25" Width="25" MinWidth="20" MinHeight="20" />
            </Setter.Value>
        </Setter>
<Style>

Output Image

 

Why the 1st icon is now showing after the render.

 

This is the behavior? if yes

Is there any alternate way to use our custom png icon under RadNavigationViewItem? without using glyph icon

 

Thanks

Narendran S

1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 24 May 2023, 04:02 PM

Hello Naren,

To achieve this, you could utilize the IconTemplate property of the RadNavigationViewItem element as well. The path to the image could be bound to the Icon property, which will be the DataContext for the DataTemplate set for the IconTemplate property.

The following code snippet shows this suggestion's implementation:

<Style x:Key="RadNavigationViewItemStyle" TargetType="telerik:RadNavigationViewItem">
    <Setter Property="Content" Value="{Binding NameDisplay}"/>
    <Setter Property="Icon" Value="{Binding MyImagePath}"/>
    <Setter Property="IconTemplate">
        <Setter.Value>
            <DataTemplate>
                <Image Source="{Binding}" Width="20" Height="20"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

With the above suggestion and two sample .png files, the following result is present:

I have attached a sample project for you to test.

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
NavigationView (Hamburger Menu)
Asked by
Naren
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or