在C#/ XAML中将数据发送到数据模板

时间:2015-10-19 16:18:45

标签: c# xaml uwp

请原谅我,如果我的问题需要进一步解释,因为我对编程很陌生。

我正在为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'。任何想法如何解决这一问题?我确定我做的事情很蠢。

1 个答案:

答案 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属性。