如何以编程方式更改 ShellContent 图标？

Question

问题：

我需要从 JSON 文件中获得的列表中以编程方式更改 ShellContnet 图标，所有逻辑都已完成，但是当我打开弹出菜单时无法更改图标。

截图：

Answer 1

关于Shell Flyout 可以参考docs。我从文档中找到了三个解决方案：

1. 尝试将图标绑定到 ViewModel 属性。 ViewModel 应设置为 Shell 页面的绑定上下文。
2. 通过设置附加 属性 到 DataTemplate 的 Shell.ItemTemplate 自定义 FlyoutItem 的外观：

 <Shell.ItemTemplate>
 <DataTemplate>
 <Grid ColumnDefinitions="0.2*,0.8*">
 <Image Source="{Binding FlyoutIcon}"
   Margin="5" HeightRequest="45" />
  <Label Grid.Column="1" Text="{Binding Title}"
     FontAttributes="Italic"
   VerticalTextAlignment="Center" />
    </Grid>
    </DataTemplate>
   </Shell.ItemTemplate>

3. 通过将 Shell.FlyoutContent 可绑定 属性 设置为对象，用自己的内容替换弹出内容：

 <Shell.FlyoutContent>
<CollectionView BindingContext="{x:Reference
shell}"    IsGrouped="True" ItemsSource="{Binding FlyoutItems}"> 
<CollectionView.ItemTemplate> 
<DataTemplate>  
<Label Text="{Binding
Title}" TextColor="White" FontSize="18" /> 
</DataTemplate> 
</CollectionView.ItemTemplate>  
</CollectionView> 
</Shell.FlyoutContent>

Answer 2

第一步：将json数据转换成viewmodel。

您可以使用 Newtonsoft.Json 反序列化 json 数据并将值赋给视图模型。

第二步：用数据编程方式添加ShellContent。

假设你有 viewmodel ，它应该是一个 List ，例如 List<Model> Models .

foreach(var model in Models)
{
    ShellContent content = new ShellContent();
    content.Title = model.Title;
    content.FlyoutIcon = model.FlyoutIcon;
    content.Content = new MainPage();

    menu.Items.Add(content);   //menu is the name you defined on FlyoutItem in xaml
}