根据导航参数在页面上显示不同的内容

Question

我想做一个食谱，我有一个食谱和一个类的约束我在一个页面中呈现它们。当我点击食谱时，我想导航到“食谱页面”，并根据我来自的链接，文本，列表等不同。

我已经完成了recipePage，它的工作原理只有当我点击spaggeti的第一个配方时，我已经自己提出了相同的数据，才有可能拥有一个页面并呈现不同的数据，如上所述？

这是XAML绑定我与spaggeti

<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)); 
     } 
    } 
} 

Answer 1

您可以参考“钻取在页面“场景中的官方Navigation menu (XAML) sample执行你自己的。

这里的关键是使用Frame.Navigate(TypeName, Object) method或Frame.Navigate(TypeName, Object, NavigationTransitionInfo) method而不是Frame.Navigate(TypeName) method。您可以发送SpaggetiRecipe或SpaggetiRecipe的属性，如spaggetiRecipe.RecipeId作为导航参数。例如：

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

或者

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

使用基本类型等spaggetiRecipe.RecipeId这里是更好，因为它使用GetNavigationState支持的参数序列，并且避免了保持于该参数的基准引起帧的导航堆栈过量存储器使用。欲了解更多信息，请参阅备注部分Frame.Navigate(TypeName, Object) method。

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

在官方示例中，导航参数是一个字符串，其本身用作数据。在您的Recipe页面中，您可以使用e.Parameter获取spaggetiRecipe.RecipeId并使用RecipeId获取要在文本，列表等中使用的数据。例如，您可以定义一个Recipe类来存储数据以及一个使用RecipeId作为参数的GetRecipe方法来初始化它。在XAML中，您可以像在“recipePage”中所做的那样绑定它。

的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，使用结合存在数据，如：

<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>