Question

我有一个syncfusion treenavigator下拉菜单。我们的客户希望在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项旁边添加图像/图标

1 个答案: