根據導航參數在頁面上顯示不同的內容

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>