请原谅我,如果我的问题需要进一步解释,因为我对编程很陌生。
我正在为Windows 10创建一个简单的食谱应用。我想做的是能够从食谱列表(按类别排序)中点击食谱,这将使用户进入食谱模板页面。根据选择的配方,模板页面将填写与该配方相关的信息(准备时间,成分,方向等)。
我有一个类似于
的类文件 public class Recipes
{
public string Name { get; set; }
public string Image { get; set; }
public string PrepTime { get; set; }
public string Ingredients { get; set; }
public string Description { get; set; }
public string Instructions { get; set; }
public string Category { get; set; }
public bool MainCourse { get; set; }
public int RecipeNumber { get; set; }
}
public class RecipeManager
{
public static List<Recipes> GetRecipes()
{
var recipes = new List<Recipes>();
recipes.Add(new Recipes { Name = "Chicken Parmesan", Image = "Assets/Chicken-Parm-2.jpg", Category = "Main Course", MainCourse = true});
recipes.Add(new Recipes { Name = "Eggplant Parmesan", Image = "Assets/eggplantparm.jpg", Category = "Main Course", MainCourse = true });
recipes.Add(new Recipes { Name = "Cookies", Image = "Assets/cookies.jpg", Category = "Desserts"});
recipes.Add(new Recipes { Name = "Salad", Image = "Assets/salad.jpg", Category = "Salad" });
recipes.Add(new Recipes { Name = "Zuccinni Chips", Image = "Assets/appetizers.jpg", Category = "Appetizers" });
recipes.Add(new Recipes { Name = "Meat Dish", Image = "Assets/maincourse.jpg", Category = "Main Course" });
recipes.Add(new Recipes { Name = "Classic Red Sauce", Image = "Assets/sauces.jpg", Category = "Sauces" });
recipes.Add(new Recipes { Name = "Casserole", Image = "Assets/vegan.jpg", Category = "Vegan Recipes" });
return recipes;
}
}
我的类别页面如下所示:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<GridView ItemsSource="{x:Bind Recipes}" IsItemClickEnabled="True" ItemClick="GridView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Recipes">
<RelativePanel>
<Image Width="150" Source="{x:Bind Image}" Tapped="Image_Tapped" ></Image>
<TextBlock FontSize="16" Text="{x:Bind Name}" ></TextBlock>
</RelativePanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
使用它后面的代码(这可能看起来很奇怪,因为我正在尝试一些使其工作的东西):
public sealed partial class CategoryRecipes : Page
{
private List<Recipes> Recipes;
public CategoryRecipes()
{
this.InitializeComponent();
Recipes = RecipeManager.GetRecipes();
}
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
Frame.Navigate(typeof(RecipePage));
}
private void GridView_ItemClick(object sender, ItemClickEventArgs e)
{
var recipe = (Recipes)e.ClickedItem;
Frame.Navigate(typeof(RecipePage));
}
}
现在,Recipe模板页面看起来像这样(我将硬编码数据作为占位符放入,因此我可以找出布局):
<ScrollViewer VerticalScrollBarVisibility="Hidden">
<Frame>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" BorderBrush="{ThemeResource AppBarBorderThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Style="{ThemeResource NavButton}" Content="Intro" Click="Intro_click"/>
<Button Grid.Column="1" Style="{ThemeResource NavButton}" Content="Ingredients"/>
<Button Grid.Column="2" Style="{ThemeResource NavButton}" Content="Directions"/>
</Grid>
<StackPanel Name="RecipeImage" Grid.Row="1" Height="auto">
<Image Height="200" Source="Assets/cookies.jpg" Stretch="UniformToFill"></Image>
</StackPanel>
<StackPanel Name="RecipeStats" Grid.Row="2" Height="auto">
<Grid Height="50" Background="{ThemeResource AppBarBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="Prep Time:" Grid.Column="0" Margin="10,0,0,0" FontSize="15"></TextBlock>
<TextBlock Text="Cook Time:" Grid.Column="1" Margin="10,0,0,0" FontSize="15"></TextBlock>
<TextBlock Text="Serves:" Grid.Column="2" Margin="10,0,0,0" FontSize="15"></TextBlock>
<TextBlock Text="5 minutes" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="25 minutes" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="4 people" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>
</Grid>
</StackPanel>
<StackPanel Name="RecipeDescription" Grid.Row="3">
<TextBlock Margin="0,10,0,0" HorizontalAlignment="Center" Width="300" TextWrapping="Wrap" TextAlignment="Center" Style="{ThemeResource SubtitleTextBlockStyle}" FontSize="18"
Text="Description for the reciepe goes it. It will wrap around to multiple lines if it has to. Don't those cookies look so delicious? Everyone will want some"/>
</StackPanel>
<StackPanel Name="Ingredients" Grid.Row="4">
<TextBlock Text="Ingredients" Margin="10,10,0,10" Style="{ThemeResource SubheaderTextBlockStyle}">
</TextBlock>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto "></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Content="1/4" Style="{ThemeResource IngredientBox}" />
<TextBlock Text="cup extra-virgin olive oil" Style="{ThemeResource IngredientText}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Content="2 " Style="{ThemeResource IngredientBox}" />
<TextBlock Text="tablespoons lime juice" Style="{ThemeResource IngredientText}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Content="2/3" Style="{ThemeResource IngredientBox}" />
<TextBlock Text="cup finely chopped cilantro" Style="{ThemeResource IngredientText}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Content="1/4" Style="{ThemeResource IngredientBox}" />
<TextBlock Text="teaspoon salt" Style="{ThemeResource IngredientText}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Content="1/4" Style="{ThemeResource IngredientBox}" />
<TextBlock Text="teaspoon freshly ground pepper" Style="{ThemeResource IngredientText}" />
</StackPanel>
</StackPanel>
</Grid>
<StackPanel>
<TextBlock Margin="10,10,0,10" Style="{ThemeResource SubheaderTextBlockStyle}" Text="Directions"></TextBlock>
<Grid Name="RecipeDirections" Grid.Row="5" Margin="0,10,0,0">
<TextBlock Margin="10,0,10,00" TextWrapping="Wrap" Text="Preheat oven to 450 degrees F (230 degrees C). Butter a 2-quart casserole dish.
In a large saucepan, saute chopped onion in the butter. Stir in flour and cook for 1 minute. Add chicken broth and milk. Heat to boiling, stirring constantly. Reduce heat to medium and cook and stir for 2 minutes more. Season with salt and pepper. Add frozen peas and carrots and cooked chicken. Pour into prepared casserole dish.
In a medium bowl, mix together 2 cups flour, baking powder, and 3/4 teaspoon salt. Cut in shortening until mixture is crumbly. Stir in milk just until dough is moistened, then drop by spoonfuls onto chicken mixture.
Bake at 450 degrees F (230 degrees C) for 12 to 15 minutes, or until biscuits are golden brown, and cooked on the bottom. This tends to bubble over so I place a piece of aluminum foil under the pan to catch the drips." />
</Grid>
</StackPanel>
</StackPanel>
我现在非常迷失,不知道下一步该去哪儿。非常感谢您提供的任何指导。
更新:这可能是一个愚蠢的问题,但我添加了您的代码,然后将其添加到RecipePage中以调用配方的名称:
<GridView ItemsSource="{x:Bind Recipes}" Grid.Row="1">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Recipes">
<RelativePanel>
<TextBlock FontSize="16" Text="{x:Bind Name}" ></TextBlock>
</RelativePanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
我收到错误 - 无效的绑定路径'Recipes':在'RecipePage'类型上找不到属性'Recipes'。任何想法如何解决这一问题?我确定我做的事情很蠢。
答案 0 :(得分:0)
单击该项时,您只需将该配方发送到RecipePage:
var recipe = (Recipes)e.ClickedItem;
Frame.Navigate(typeof(RecipePage), recipe);
然后在RecipePage的OnNavigatedTo事件处理程序中获取此配方并将其设置为RecipePage的DataContext
。
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var recipe = e.Parameter as Recipes;
this.DataContext = recipe;
}
然后,您可以绑定到RecipePage上的任何Recipes属性。