根据导航参数

时间:2015-12-21 14:35:33

标签: c# xaml uwp

我想制作一本食谱,我有一个带有食谱的课程,并且我会在页面中展示它们。当我点击食谱时,我想导航到"食谱页面"根据我来自的链接,文本,列表等会有所不同。

我已经完成了recipePage,只有当我点击我自己推出的相同数据的spaggeti的第一个配方时它是否有效,是否可以有一个页面并显示我上面说的不同数据?

这是我用spaggeti呈现食谱的XAML绑定部分

<Grid Margin="20,20,0,0">
    <GridView ItemsSource="{x:Bind Categories}" 
              IsItemClickEnabled="True" 
              ItemClick="GridView_ItemClick">
        <GridView.ItemTemplate >
            <DataTemplate x:DataType="data:SpaggetiRecipe">
                <Grid   Margin="30,30,30,30" MaxWidth="230"  MaxHeight="230" MinHeight="200" MinWidth="200">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Image Width="160" Height="160" Source="{x:Bind SpaggetiPhoto}" Grid.Row="0"/>
                    <TextBlock  Text="{x:Bind RecipeName}" Style="{StaticResource Texts}" TextWrapping="WrapWholeWords" Grid.Row="1" Foreground="DarkBlue" FontWeight="SemiBold"/>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

这是C#部分

private List<SpaggetiRecipe> Categories;

    public SpaggetiPage()
    {
        this.InitializeComponent();
        Categories = SpaggetiRecipeManager.GetSpaggetiRecipe();
    }

    private void GridView_ItemClick(object sender, ItemClickEventArgs e)
    {
        var spaggetiRecipe = (SpaggetiRecipe)e.ClickedItem;
        if (spaggetiRecipe.RecipeId == 1)
        {
            Frame.Navigate(typeof(Recipe));
        }
    }
}

1 个答案:

答案 0 :(得分:0)

您可以参考&#34;钻入页面&#34;官方Navigation menu (XAML) sample中实施自己的方案。

此处的关键点是使用Frame.Navigate(TypeName, Object) methodFrame.Navigate(TypeName, Object, NavigationTransitionInfo) method代替Frame.Navigate(TypeName) method。您可以发送SpaggetiRecipeSpaggetiRecipe的属性,例如spaggetiRecipe.RecipeId作为导航参数。例如:

Frame.Navigate(typeof(Recipe), spaggetiRecipe);

或者

Frame.Navigate(typeof(Recipe), spaggetiRecipe.RecipeId);

在这里使用类似spaggetiRecipe.RecipeId的基本类型更好,因为它支持使用GetNavigationState进行参数序列化,并避免因帧的导航堆栈持有对参数的引用而导致的过多内存使用。有关详情,请参阅Frame.Navigate(TypeName, Object) method中的备注部分。

然后在目标网页的OnNavigatedTo方法中,您可以使用e.Parameter获取导航参数,并使用它来获取需要在此页面中使用的数据。

在官方示例中,navigation参数是一个字符串,它本身用作数据。在Recipe页面中,您可以使用e.Parameter获取spaggetiRecipe.RecipeId并使用RecipeId获取要在文本,列表等中使用的数据。例如,您可以定义用于存储数据的Recipe类和使用GetRecipe作为参数初始化它的RecipeId方法。在XAML中,您可以像在&#34; recipePage&#34;中所做的那样绑定它。

Recipe类可能会喜欢:

public class Recipe
{
    public string RecipeName { get; set; }
    public List<T> RecipeList { get; set; }
    ...
}

GetRecipe方法可能会:

public Recipe GetRecipe(int id)
{
    Recipe recipe = new Recipe();
    //set the data based on the id, here I use switch for example, you may get data for database or some other please
    switch (id)
    {
        case 1:
            recipe =...;
            break;

        case 2:
             recipe =...;
            break;

        ...
    }
    return recipe;
}

在此之后,您可以使用GetRecipe获取不同的数据。

public Recipe RecipeData { get; set; }

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (e.Parameter is int)
    {
        RecipeData = GetRecipe((int)e.Parameter);
    }
    else
    {
        //Something Wrong
    }

    base.OnNavigatedTo(e);
}

然后在XAML中,使用bind来显示如下数据:

<StackPanel>
    <TextBlock Text="{x:Bind RecipeData.RecipeName}" />
    <ListView ItemsSource="{x:Bind RecipeData.RecipeList}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <!--DataTemplate to show RecipeData.RecipeList-->
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>