How to set custom image for icon property in RadNavigationViewItem

[Naren]

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

[Stenly]

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