将查询参数添加到 Xamarin Forms Shell 路由

如何解决将查询参数添加到 Xamarin Forms Shell 路由

（也在微软论坛上发布了这个问题）

类似于 How do I add a route query parameter to a ShellContent item in a Xamarin Forms app ，但该线程对我没有帮助。

我最近开始了一个新项目，并决定使用 Xamarin Forms Shell。

我有一个内容页面，它根据提供的查询参数表现出不同的行为。 有三个选项卡项将路由到同一内容页面，每个选项卡项提供不同的查询参数。

我不知道如何通过 AppShell.xaml 路由将此参数传递给我的内容页面视图模型。

请参阅下面我复制要求的示例代码。

在这个示例中，我想使用 xaml 路由中提供的查询参数设置内容页面标签。 使用下面的代码，我得到一个空引用异常。

AppShell.xaml：

<FlyoutItem Title="Sample">
     <Tab Title="Red">
         <ShellContent Route="SamplePage?Parameter=Red" ContentTemplate="{DataTemplate sample:SamplePage}" />
     </Tab>
     <Tab Title="Blue">
         <ShellContent Route="SamplePage?Parameter=Blue" ContentTemplate="{DataTemplate sample:SamplePage}" />
     </Tab>
     <Tab Title="Green">
         <ShellContent Route="SamplePage?Parameter=Green" ContentTemplate="{DataTemplate sample:SamplePage}" />
     </Tab>
 </FlyoutItem>

SamplePageVM：

[QueryProperty(nameof(Parameter),nameof(Parameter))]
public class SamplePageVM
{
    public string Parameter { get; set; }
}

SamplePage.xaml：

<ContentPage.Content>
     <Grid>
         <Label Text="{Binding Parameter}"/>
     </Grid>
 </ContentPage.Content>

任何帮助将不胜感激。 或者替代方法来解决这个问题。

非常感谢。

*编辑

以下是我目前的解决方法。

AppShell.xaml：

<FlyoutItem Title="Sample">
    <Tab Title="Red">
        <ShellContent Route="RedRoute" ContentTemplate="{DataTemplate sample:SamplePage}" />
    </Tab>
    <Tab Title="Blue">
        <ShellContent Route="BlueRoute" ContentTemplate="{DataTemplate sample:SamplePage}" />
    </Tab>
    <Tab Title="Green">
        <ShellContent Route="GreenRoute" ContentTemplate="{DataTemplate sample:SamplePage}" />
    </Tab>
</FlyoutItem>

AppShell.xaml.cs

protected override void OnNavigating(ShellNavigatingEventArgs args)
    {
        base.OnNavigating(args);

        if (args.Target.Location.OriginalString.ToLower().Contains("redroute"))
        {
            StaticHelper.Parameter = "Red";
        }
        else if (args.Target.Location.OriginalString.ToLower().Contains("blueroute"))
        {
            StaticHelper.Parameter = "Blue";
        }
        else if (args.Target.Location.OriginalString.ToLower().Contains("greenroute"))
        {
            StaticHelper.Parameter = "Green";
        }
    }

SamplePageVM：

public class SamplePageVM
{
    public string Parameter { get; set; }

    public SamplePageVM()
    {
        Parameter = StaticHelper.Parameter;
    }
}

SamplePage.xaml：

<ContentPage.Content>
    <Grid>
        <Label Text="{Binding Parameter}"/>
    </Grid>
</ContentPage.Content>

可能不是最佳实践，但确实如此。

解决方法

我可以重现这个异常。检查屏幕截图：https://imgur.com/HNmjewa

System.NullReferenceException: 'Object reference not set to an instance of an object.'

像下面这样更改 Route 将修复此异常。

<FlyoutItem Title="Sample">
    <Tab Title="Red">
        <ShellContent ContentTemplate="{DataTemplate sample:SamplePage}" Route="Red" />
    </Tab>
    <Tab Title="Blue">
        <ShellContent ContentTemplate="{DataTemplate sample:SamplePage}" Route="Blue" />
    </Tab>
    <Tab Title="Green">
        <ShellContent ContentTemplate="{DataTemplate sample:SamplePage}" Route="Green" />
    </Tab>
</FlyoutItem>

如果您想使用查询参数，请使用包含所有三个组件的 URI 调用 GoToAsync 方法，结构为：//route/page?queryParameters。

string monkeyName = (e.CurrentSelection.FirstOrDefault() as Animal).Name;
        // The following route works because route names are unique in this application.
        await Shell.Current.GoToAsync($"routename?Parameter={monkeyName}");
        //routename is the string of the Route in xaml or register the code: Routing.RegisterRoute
       

有关更多详细信息，您可以从下面的链接下载代码示例。 https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-xaminals/