在 treenavigator 项目旁边添加一个 image/icon

Question

我有一个 syncfusion treenavigator 下拉菜单。我们的客户希望在树导航器的前 2 个向下钻取菜单中为每个项目添加一个图标。鉴于项目列表来自反序列化的 json 对象，我如何映射和注入图像而不将其添加到 json 文件中？我的同事建议在代码隐藏中创建一个项目模板，但我不确定该怎么做。

P.S。请不要搁置。如果你不能完全理解你需要问的问题，就很难提出问题。我会尽量回答任何说明。

谢谢！

Answer 1

请仅为要显示图像的项目在 ViewModel 中设置图像路径。您可以尝试使用以下代码：

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>

注意： Syncfusion.SfTreeNavigator.UWP 和 Syncfusion.SfSharedd.UWP 组件是必需的。

此致，

杰西

在 treenavigator 项目旁边添加一个 image/icon

Add an image/icon beside treenavigator items

c#

syncfusion

uwp

uwp-xaml