如何将搜索功能添加到Windows应用商店模板拆分页面

时间:2017-08-09 21:54:09

标签: c# json xaml

我一直在研究如何将搜索功能集成到Windows应用商店应用拆分页面模板中,但我一直不幸。我正在尝试使用Windows 8 App Template设计配方应用程序,所有功能都与搜索功能分开。  我是这个领域的新手,对C#知之甚少,但我倾向于检索存储在名为SampleData.json的JSON文件中的数据,并在用户想要搜索我的Cookbook中的项目时执行搜索操作应用

SampleData.json代码

{"Groups":[
  {
    "UniqueId": "Group-1",
    "Title": "Coffee Drink",
    "Subtitle": "Coffee Drink Recipe",
    "ImagePath": "Assets/abey.jpg",
    "Description" : "Group Description: ",
    "Items":
    [
      {
        "UniqueId": "Group-1-Item-1",
        "Title": "White Chocolate Latte",
        "Subtitle": "Coffee Drink Category\n\nPreparation time 5 Minute  \nReady in 10 Minute  \nCooked in 5 Minute \nServing Size 4",
        "ImagePath": "Assets/abey.jpg",
        "Description" : "White Coffee Drink, the only Solution to your thirst",
        "Content" : "Ingredient\n\n1 1/2 cups milk\n\n1 tablespoon heavy cream\n\n1/8 teaspoon vanilla extract\n\n1 tablespoon white sugar\n\n1/2 cup brewed espresso\n\n1/4 cup white chocolate chips, chopped\n\nDirections:\n\n1. Combine the milk and cream in a saucepan, and whisk over high heat until hot and frothy. \n2. Remove from heat and stir in the vanilla and sugar. \n3.Whisk together hot espresso and white chocolate chips in a mug until smooth. \nPS: If you are making two, pour half into another mug. Top with the frothy hot milk and stir to blend in the flavoring. "
      },
      {
        "UniqueId": "Group-1-Item-2",
        "Title": "COCONUT OIL COFFEE",
        "Subtitle": "Coffee Drink Category\n\nPreparation time 5 Minute  \nReady in 5 Minute \nServing Size 2",
        "ImagePath": "Assets/COCONUT2.jpg",
        "Description" : "Coconut Item Description",
        "Content" : "Ingredient\n\n2 cups hot coffee\n\n2 tablespoons coconut oil\n\n2 tablespoons unsalted butter\n\nDirection:\n\n1. Blend coffee, coconut oil, and butter together in a blender until oil and butter are melted and coffee is frothy."
      },
      {
        "UniqueId": "Group-1-Item-3",
        "Title": "Pumpkin Spiced Latte",
        "Subtitle": "Coffee Drink Category\n\nPreparation time 15 Minute  \nReady in 20 Minute \nServing Size 3",
        "ImagePath": "Assets/Pumpkin2.jpg",
        "Description" : "Pumpkin Sliced Latte Item Description",
        "Content" : "Ingredient\n\n3 cups hot whole milk\n\n4 teaspoons white sugar\n\n1/2 teaspoon vanilla extract\n\n1/2 teaspoon pumpkin pie spice\n\n6 ounces double-strength brewed coffee\n\n3 tablespoons sweetened whipped cream\n\n3 pinches pumpkin pie spice\n\nDirection:\n\n1. Combine the hot milk, sugar, vanilla extract, and pumpkin pie spice in a blender; blend until frothy.\n\n2. Pour the mixture into 3 coffee mugs to about 2/3 full. \n\n3. Pour 2 ounces coffee into each mug and garnish each with whipped topping and pumpkin pie spice."
      },
      {
        "UniqueId": "Group-1-Item-4",
        "Title": "CUPPUCINNO COOLER",
        "Subtitle": "Coffee Drink Category\n\nPreparation time 5 Minute  \nReady in 5 Minute \nServing Size 4",
        "ImagePath": "Assets/cappuccino.jpg",
        "Description" : "Cuppucino Coffee Drink Description",
        "Content" : "Ingredient\n\n1 1/2 cups cold coffee\n\n1 1/2 cups chocolate ice cream\n\n1/4 cup chocolate syrup\n\nCrushed ice\n\n1 cup whipped cream.\n\n Direction:\n\n1. In a blender, combine coffee, ice cream and chocolate syrup. Blend until smooth. \n\n2. Pour over crushed ice and garnish with a dollop of whipped cream and serve."
      },
      {
        "UniqueId": "Group-1-Item-5",
        "Title": "Vietnamese Iced Coffee:",
        "Subtitle": "Coffee Drink Category\n\nPreparation time 5 Minute  \nReady in 10 Minute \nServing Size 4",
        "ImagePath": "Assets/vietnamese_iced.jpg",
        "Description" : "Item Description: ",
        "Content" : "Ingredient\n\n4 cups of water\n\n1/2 cup dark roast ground coffee beans\n\n1/2 cup sweetened condensed milk\n\n16 ice cubes\n\n Direction:\n\n1. Brew coffee with water using your preferred method to make brewed coffee, Spoon 2 tablespoons of sweetened condensed milk into each of 4 coffee cups. \n\n2. Pour 1 cup of fresh hot coffee into each cup, and stir to dissolve the milk.\n\n3. Serve guests cups of coffee, and give each one a tall glass with 4 ice cubes, and a long handled spoon.\n\n4. Guests pour hot coffee over the ice cubes and stir briskly with the long handled spoon, making an agreeable clatter with the ice cubes to chill the coffee."
      }
    ]
  },
  {
    "UniqueId": "Group-2",
    "Title": "Cocktail Recipe",
    "Subtitle": "Cocktail Drink Recipe",
    "ImagePath": "Assets/Shirley.jpg",
    "Description" : "Group Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante",
    "Items":
    [
      {
        "UniqueId": "Group-2-Item-1",
        "Title": "Shirley Temple",
        "Subtitle": "Cocktail Drink Category\n\nPreparation time 2 Minute  \nReady in 7 Minute \nServing Size 2",
        "ImagePath": "Assets/Shirley.jpg",
        "Description" : "Item Description:",
        "Content" : "Ingredient\n\n15ml grenadine syrup\n\n15ml freshly squeezed lime juice\n\n200ml chilled ginger\n\nMaraschino cocktail cherry and thin lime slice, to decorate\n\nIce cubes\n\n Direction:\n\n1. Place a few ice cubes in a tumbler, add the grenadine and lime juice. \n\n2. Top up with ginger ale, and garnish with the cocktail cherry and lime slice.\n\n3. Mix until smooth and serve in glass."
      },
      {
        "UniqueId": "Group-2-Item-2",
        "Title": "Lavenda Lemonade",
        "Subtitle": "Cocktail Drink Category\n\nPreparation time 10 Minute  \nReady in 30 Minute \nServing Size 8",
        "ImagePath": "Assets/Lavender.jpg",
        "Description" : "Item Description",
        "Content" : "Ingredient\n\n10g lavender heads\n\n250ml boiling water\n\n75g sugar\n\n600ml cold water (sparkling if you prefer)\n\nJuice of 3 small or 2 large ripe lemons, strained\n\nIce cubes\n\n Direction:\n\n1. Put the flower heads in a small pan and pour over the boiling water. Heat up again and simmer gently for two minutes. \n\n2. Take off the heat and leave to steep for ten minutes.\n\n3. Strain off the flowers, add sugar to the liquid and stir to dissolve it and add the cold water.\n\n4. Add the lemon juice and stir (the mix turns pink here), then serve in tall slim tumblers with a few ice cubes in them."
      },
      {
        "UniqueId": "Group-2-Item-3",
        "Title": "Ginger and Elder Flower Summer Cup",
        "Subtitle": "Cocktail Drink Category\n\nPreparation time 10 Minute  \nReady in 2h 15 Minute \nServing Size 20",
        "ImagePath": "Assets/Ginger.jpg",
        "Description": "Item Description:",
        "Content": "Ingredient\n\n25ml elderflower cordial\n\nSmall piece - about 2cms square - peeled root ginger\n\n20ml freshly squeezed lemon juice\n\n150ml cold sparkling water\n\nMint sprig and lemon slice\n\nCrushed ice\n\n Direction:\n\n1. Grate the ginger finely, adding all the bits and any gingery juices into a small bowl with the cordial and lemon juice.  \n\n2. Mix well and leave to infuse for a few minutes. Strain into a tumbler, then add crushed ice and top up with sparkling water.\n\n3. Garnish with the mint and a thin lemon slice and serve."
      },
      {
        "UniqueId": "Group-2-Item-4",
        "Title": "ST Kitts",
        "Subtitle": "Cocktail Drink Category\n\nPreparation time 10 Minute  \nReady in 1hr \nServing Size 5",
        "ImagePath": "Assets/STKITTS.jpg",
        "Description": "Item Description:",
        "Content": "Ingredient\n\n75ml pineapple juice\n\n25ml freshly squeezed lime juice\n\n15ml grenadine syrup\n\nCold ginger ale to top up\n\nLime slice\n\nLots of ice cubes\n\n Direction:\n\n1. Shake the juices and grenadine in a cocktail shaker over ice, and strain into an ice-filled glass.   \n\n2. Top up with ginger ale, the right amount to your taste, stir and garnish with a lime slice."
      },
      {
        "UniqueId": "Group-2-Item-5",
        "Title": "Pink Grape Fruit Cooler",
        "Subtitle": "Cocktail Drink Category\n\nPreparation time 5 Minute  \nReady in 15 Minute \nServing Size 10",
        "ImagePath": "Assets/MediumGray.png",
        "Description" : "Item Description:",
        "Content" : "Ingredient\n\n25ml elderflower cordial\n\nSmall piece - about 2cms square - peeled root ginger\n\n20ml freshly squeezed lemon juice\n\n80ml juice from a ripe pink grapefruit\n\nJuice of half a lemon\n\n40ml sugar syrup (made with equal parts sugar and water, heated until sugar is dissolved then cooled)\n\nCold sparkling or soda water\n\n2 mint sprigs\n\nCrushed ice \n\n Direction:\n\n1. Pour the sugar syrup into a tumbler and add one mint sprig, stirring and bruising it lightly.  \n\n2. Add the citrus juices and stir, then top right up with crushed ice and the sparkling or soda water.\n\n3. Garnish with the second mint sprig and serve."
      }
    ]
  },
  {
    "UniqueId": "Group-3",
    "Title": "Shakes",
    "Subtitle": "Shakes Drink Recipe",
    "ImagePath": "Assets/MediumGray.png",
    "Description" : "Group Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante",
    "Items":
    [
      {
        "UniqueId": "Group-3-Item-1",
        "Title": "Chocolate Mug Milkshake",
        "Subtitle": "Shakes Drink Category\n\nPreparation time 15 Minute  \nReady in 15 Minute \nServing Size 4",
        "ImagePath": "Assets/MediumGray.png",
        "Description" : "Item Description:",
        "Content" : "Ingredient\n\n4 cups chocolate ice cream\n\n2 cups milk \n\n1/4 cup brown sugar \n\n1/4 cup white sugar\n\n1/4 cup ground cinnamon\n\n Direction:\n\n1. In a blender, combine ice cream, milk, brown sugar, white sugar and cinnamon. Blend until smooth.  \n\n2. Pour into glasses and serve."
      },
      {
        "UniqueId": "Group-3-Item-2",
        "Title": "Filipino Avocado Milkshake",
        "Subtitle": "Shakes Drink Category\n\nPreparation time 5 Minute  \nReady in 5 Minute \nServing Size 2",
        "ImagePath": "Assets/MediumGray.png",
        "Description" : "Item Description",
        "Content" : "Ingredient\n\n1 avocado - peeled, pitted, and cubed \n\n5 cubes of ice \n\n3 tablespoons white sugar \n\n1 1/3 cups milk \n\n1 teaspoon fresh lemon or lime juice\n\n1 scoop vanilla ice cream \n\n Direction:\n\n1. Place avocado, ice, sugar, milk, lemon juice, and ice cream into a blender. Puree until smooth."
      },
      {
        "UniqueId": "Group-3-Item-3",
        "Title": "Thick Chocolate Shake",
        "Subtitle": "Shakes Drink Category\n\nPreparation time 5 Minute  \nReady in 10 Minute \nServing Size 2",
        "ImagePath": "Assets/LightGray.png",
        "Description" : "Item Description:",
        "Content" : "Ingredient\n\n2 cups vanilla ice cream\n\n1/2 cup whole milk\n\n1/4 cup powdered chocolate drink mix \n\n1 teaspoon powdered egg whites.\n\n Direction:\n\n1. In a blender, combine the ice cream, milk, chocolate drink mix and powdered egg whites. Cover, and blend until smooth.   \n\n2. You may need to stop and stir once or twice to get it evenly mixed. The shake will be very thick."
      },
      {
        "UniqueId": "Group-3-Item-4",
        "Title": "Vanilla Milkshake",
        "Subtitle": "Shakes Drink Category\n\nPreparation time 3 Minute  \nReady in 3 Minute \nServing Size 4",
        "ImagePath": "Assets/DarkGray.png",
        "Description" : "Item Description:",
        "Content" : "Ingredient\n\n2 cups vanilla ice cream\n\n1 cup whole milk \n\n1 teaspoon vanilla extract\n\n Direction:\n\n1. In a blender, combine ice cream, milk and vanilla extract. Blend until smooth.   \n\n2. Pour into glasses and serve."
      },
      {
        "UniqueId": "Group-3-Item-5",
        "Title": "Yummy Strawberry Shake",
        "Subtitle": "Shakes Drink Category\n\nPreparation time 10 Minute  \nReady in 10 Minute \nServing Size 1",
        "ImagePath": "Assets/LightGray.png",
        "Description" : "Item Description:",
        "Content" : "Ingredient\n\n4 cups strawberries, hulled \n\n2 cups ice cubes \n\n2 cups milk \n\n4 cups strawberry ice cream\n\n2 teaspoons white sugar.\n\n Direction:\n\n1. In a blender combine strawberries, ice, milk, ice cream and sugar. Blend until smooth."
      }
    ]
  }
  }
      }
    ]
  }
]
}

SampleDataSource.cs

public class SampleDataItem
    {
        public SampleDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content)
        {
            this.UniqueId = uniqueId;
            this.Title = title;
            this.Subtitle = subtitle;
            this.Description = description;
            this.ImagePath = imagePath;
            this.Content = content;
        }

        public string UniqueId { get; private set; }
        public string Title { get; private set; }
        public string Subtitle { get; private set; }
        public string Description { get; private set; }
        public string ImagePath { get; private set; }
        public string Content { get; private set; }

        public override string ToString()
        {
            return this.Title;
        }
    }

    /// <summary>
    /// Generic group data model.
    /// </summary>
    public class SampleDataGroup
    {
        public SampleDataGroup(String uniqueId, String title, String subtitle, String imagePath, String description)
        {
            this.UniqueId = uniqueId;
            this.Title = title;
            this.Subtitle = subtitle;
            this.Description = description;
            this.ImagePath = imagePath;
            this.Items = new ObservableCollection<SampleDataItem>();
        }

        public string UniqueId { get; private set; }
        public string Title { get; private set; }
        public string Subtitle { get; private set; }
        public string Description { get; private set; }
        public string ImagePath { get; private set; }
        public ObservableCollection<SampleDataItem> Items { get; private set; }

        public override string ToString()
        {
            return this.Title;
        }
    }

    /// <summary>
    /// Creates a collection of groups and items with content read from a static json file.
    /// 
    /// SampleDataSource initializes with data read from a static json file included in the 
    /// project.  This provides sample data at both design-time and run-time.
    /// </summary>
    public sealed class SampleDataSource
    {
        private static SampleDataSource _sampleDataSource = new SampleDataSource();

        private ObservableCollection<SampleDataGroup> _groups = new ObservableCollection<SampleDataGroup>();
        public ObservableCollection<SampleDataGroup> Groups
        {
            get { return this._groups; }
        }

        public static async Task<IEnumerable<SampleDataGroup>> GetGroupsAsync()
        {
            await _sampleDataSource.GetSampleDataAsync();

            return _sampleDataSource.Groups;
        }

        public static async Task<SampleDataGroup> GetGroupAsync(string uniqueId)
        {
            await _sampleDataSource.GetSampleDataAsync();
            // Simple linear search is acceptable for small data sets
            var matches = _sampleDataSource.Groups.Where((group) => group.UniqueId.Equals(uniqueId));
            if (matches.Count() == 1) return matches.First();
            return null;
        }

        public static async Task<SampleDataItem> GetItemAsync(string uniqueId)
        {
            await _sampleDataSource.GetSampleDataAsync();
            // Simple linear search is acceptable for small data sets
            var matches = _sampleDataSource.Groups.SelectMany(group => group.Items).Where((item) => item.UniqueId.Equals(uniqueId));
            if (matches.Count() == 1) return matches.First();
            return null;
        }

        private async Task GetSampleDataAsync()
        {
            if (this._groups.Count != 0)
                return;

            Uri dataUri = new Uri("ms-appx:///DataModel/SampleData.json");

            StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(dataUri);
            string jsonText = await FileIO.ReadTextAsync(file);
            JsonObject jsonObject = JsonObject.Parse(jsonText);
            JsonArray jsonArray = jsonObject["Groups"].GetArray();

            foreach (JsonValue groupValue in jsonArray)
            {
                JsonObject groupObject = groupValue.GetObject();
                SampleDataGroup group = new SampleDataGroup(groupObject["UniqueId"].GetString(),
                                                            groupObject["Title"].GetString(),
                                                            groupObject["Subtitle"].GetString(),
                                                            groupObject["ImagePath"].GetString(),
                                                            groupObject["Description"].GetString());

                foreach (JsonValue itemValue in groupObject["Items"].GetArray())
                {
                    JsonObject itemObject = itemValue.GetObject();
                    group.Items.Add(new SampleDataItem(itemObject["UniqueId"].GetString(),
                                                       itemObject["Title"].GetString(),
                                                       itemObject["Subtitle"].GetString(),
                                                       itemObject["ImagePath"].GetString(),
                                                       itemObject["Description"].GetString(),
                                                       itemObject["Content"].GetString()));
                }
                this.Groups.Add(group);
            }
        }
    }
}

我尝试从我的解决方案资源管理器创建一个名为searchresultpage的新项目,我在Xaml页面的网格视图中添加了一个单击事件ItemClicked = OnItemClick,我转到它的定义并添加了这段代码以启用它的导航     搜索结果XAML

<GridView
                    x:Name="resultsGridView"
                    AutomationProperties.AutomationId="ResultsGridView"
                    AutomationProperties.Name="Search Results"
                    TabIndex="1"
                    Grid.Row="1"
                    Margin="0,-238,0,0"
                    Padding="110,240,110,46"
                    SelectionMode="None"
                    IsSwipeEnabled="false"
                    ItemClick="OnItemClick"
                    IsItemClickEnabled="True"
                    ItemsSource="{Binding Source={StaticResource resultsViewSource}}">
                    <GridView.ItemContainerStyle>
                        <Style TargetType="Control">
                            <Setter Property="Height" Value="70"/>
                            <Setter Property="Margin" Value="0,0,38,8"/>
                        </Style>
                    </GridView.ItemContainerStyle>
                </GridView>    

OnItemClick事件

private void OnItemClick(object sender, ItemClickEventArgs e)
        {
            //Navigate  to the page showing the Recipe that was Clicked
            this.Frame.Navigate(typeof(SplitPage), ((SampleDataItem)e.ClickedItem).UniqueId);
    }

我继续搜索searchResultpage.xaml.cs,添加了一些代码块来列表结果,但是我的foreach循环组变量出错,错误是

Error   CS1579  foreach statement cannot operate on variables of type 'System.Threading.Tasks.Task<Squish.Data.SampleDataGroup>' because 'System.Threading.Tasks.Task<Squish.Data.SampleDataGroup>' does not contain a public definition for 'GetEnumerator'

SearchResultPage.xaml.cs

var groups = SampleDataSource.GetGroupAsync("Groups");
            string query = queryText.ToLower();
            var all = new List<SampleDataItem>();
            _results.Add("All", all);

            foreach (var group in **groups**)
            {
                var items = new List<SampleDataItem>();
                _results.Add(group.Title, items);

                    foreach(var item in group.Items)
                {
                    if(item.Title.ToLower().contains(query) || item.Directions.ToLower().Contains(query))
                        {
                        all.Add(item);
                        items.Add(item);
                        }
                }
                    filterList.Add(new Filter(group.Title, items.Count, false));
            }

您的贡献会有所帮助。 这是我的 SampleDataItem 方法

public static async Task<SampleDataItem> GetItemAsync(string uniqueId)
        {
            await _sampleDataSource.GetSampleDataAsync();
            // Simple linear search is acceptable for small data sets
            var matches = _sampleDataSource.Groups.SelectMany(group => group.Items).Where((item) => item.UniqueId.Equals(uniqueId));
            if (matches.Count() == 1) return matches.First();
            return null;
        }

0 个答案:

没有答案