Add an image/icon beside treenavigator items

Question

I have a syncfusion treenavigator dropdown menu. Our client wants to add an icon per item in the first 2 drilldowned menus of the treenavigator. Given that the list of the items came from a deserialized json object, how do I map and inject the images without adding it in the json file? My colleague suggested to create an item template in code behind but I'm not sure how to do it.

P.S. Please do not put this on hold. It's hard to formulate a question if you can't fully understand what you need to ask. I'll try to answer any clarifications.

Thanks!

Answer 1

Please set the image paths in ViewModel only for the items you want to show images. You can try with the following code:

xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation"
xmlns:primitives="using:Syncfusion.UI.Xaml.Primitives"

  <navigation:SfTreeNavigator ItemsSource={Binding NavigatorItems}>
       <navigation:SfTreeNavigator.ItemTemplate>
           <primitives:HierarchicalDataTemplate ItemsSource="{Binding Models}"  x:Key="Template">
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding ImageSource}" Width="18" Height="18"/>
                        <TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>                   
                    </StackPanel>
                </DataTemplate>
                <primitives:HierarchicalDataTemplate.ItemTemplate>
                    <primitives:HierarchicalDataTemplate ItemsSource="{Binding Models}">
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <Image Source="{Binding ImageSource}" Width="18" Height="18"/>
                                <TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
                            </StackPanel>
                        </DataTemplate>
                        <primitives:HierarchicalDataTemplate.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <Image Source="{Binding ImageSource}" Width="18" Height="18"/>
                                    <TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
                                </StackPanel>
                            </DataTemplate>
                        </primitives:HierarchicalDataTemplate.ItemTemplate>
                    </primitives:HierarchicalDataTemplate>
                </primitives:HierarchicalDataTemplate.ItemTemplate>
            </primitives:HierarchicalDataTemplate>
       </navigation:SfTreeNavigator.ItemTemplate>

Note: Syncfusion.SfTreeNavigator.UWP and Syncfusion.SfSharedd.UWP assemblies are required.

Regards,

Jessie