Icons for NavigationItems in sfNavigationDrawer control?

[James]

How do I associate a png image resource with a NavigationItem element inside a sfNavigationDrawer control? All the examples I've seen use paths instead of images. Surely this is possible?

[Suganya Sethuraman]

Hi James,

Greetings from Syncfusion.

We have analyzed your requirement. We have added a png image source with SfNavigationItem inside the SfNavigationControl as a code snippet below.

Code snippet:

 

        <syncfusion:NavigationItem 

            Command="{Binding ClickCommand}" 

            CommandParameter="Inbox" 

            Header="Inbox"> 

            <syncfusion:NavigationItem.Icon> 

                <Image Source="Inbox.png"/> 

            </syncfusion:NavigationItem.Icon> 

        </syncfusion:NavigationItem> 

Please have the sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawerWPF1346022688

Please let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

[James]

Many thanks Suganya. That worked perfectly!

[Suganya Sethuraman]

Hi James,

Thanks for the update.

We are glad to know that the given solution works. Please let us know if you need any further assistance.

Regards,
Suganya Sethuraman. 

[James]

Hi Suganya,

Now that I have the png images loading from the XAML okay, how do I get the png files loading when I dynamically bind the items in the control?

Originally I had the png images loading fine from this code in the XAML:

<Image Source="/Resources/images/dashboard2.png" />

So I would like to locate the image in the same way if possible, but in code. I've followed the method described on this page - Hierarchical Data Binding section:

https://help.syncfusion.com/wpf/navigation-drawer/populating-data

I have the labels all set up and working fine, but I cannot work out how to load the Icon property in the Model object for my png file. Any ideas?

Many thanks!

James

[Sakthivel Palaniyappan]

Hi James,

Thanks for the update.

We have analyzed your query and we can achieve your requirement by binding the Source property of Image as like below code snippet.

XAML:

 

<syncfusion:NavigationItem.Icon> 

                    <Image Source="{Binding Image2}"/> 

                </syncfusion:NavigationItem.Icon> 

C#:

 

  private void Button_Click_1(object sender, RoutedEventArgs e) 

        { 

            viewModel.Image1= "/Images/image3.jpg"; 

            viewModel.Image2= "/Images/People_Circle8.png"; 

            viewModel.Image3= "/Images/SelectionImage.png"; 

        } 

We have prepared sample based on your requirement and please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawerWPF953271249.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P. 

[James]

Hi Sakthivel,

What I want to know is, as per the model definition in the example (https://help.syncfusion.com/wpf/navigation-drawer/populating-data), as show below...

...what do I need to set Icon to in order for the png image to show? When I attempt to set the Icon property as below...

...it doesn't show the image:

The resource is being found as when I change the name the application complains

Many thanks!

James

[Sakthivel Palaniyappan]

Hi James,

Thanks for the update.

We have analyzed your query and we can achieve your requirement as like below code snippet.

XAML:

 

Icon = new Image() 

{ 

    Source = new BitmapImage(new Uri(@"/NavigationDrawerWPF;component/Images/Avatar1.png", UriKind.Relative)) 

                }, 

We have modified the sample and please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawerWPF2108288747.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P. 

[James]

Many thanks for your help here. It works! :)

Kind regards,

James

[Ruba Shanmugam]

Hi James,

Thanks for the update. We are glad to hear, that the given solution works. Please let us know if you have any concerns.
Regards,
Ruba Shanmugam