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

9ceoxa92  于 2023-11-14  发布在  Shell
关注(0)|答案(2)|浏览(105)

(也在Microsoft论坛上发布了此问题)
类似于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>


可能不是最好的做法,但也是个办法。

quhf5bfb

quhf5bfb1#

我可以重现这个异常。查看截图:https://i.stack.imgur.com/RfuEZ.jpg

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://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-xaminals/

np8igboo

np8igboo2#

您可以直接在Page ViewModel中设置与路由命名相关的Parameter属性,而无需重写Shell中的OnNavigating方法:

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

    public SamplePageVM()
    {
        var route = Shell.Current.CurrentState.Location.OriginalString;
        Parameter = <set parameter related on route ...>;
    }
}

字符串

相关问题