[UWP] [C＃]如何在Windows应用商店模板拆分页面中添加搜索功能 [英] [UWP][C#]How to add a search feature to your Windows Store Template Split Page
本文介绍了[UWP] [C＃]如何在Windows应用商店模板拆分页面中添加搜索功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在研究如何将搜索功能集成到Windows应用商店应用拆分页面模板中，但我一直不幸。我正在尝试使用Windows 8应用程序模板设计一个配方应用程序，除搜索功能外，所有功能都已实现
。
我是这个领域的新手，对此知之甚少C＃，但我倾向于做什么 检索存储在名为SampleData.json的JSON文件中的数据，并在用户想要在我的Cookbook App中搜索项目时执行搜索操作。
I've been researching for ways one could possibly integrate a search feature into a Windows Store App Split page template, but I have been out of luck. I am trying to design a recipe application using Windows 8 App Template, All the features are into place
apart from the Search Feature.
I am new in this field with little knowledge of C#, but what I tend to do is retrieve the data which are stored in a JSON File called SampleData.json and perform a search action anytime a user wants to search for an item in my Cookbook App.
SampleData.json Code
{"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
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
I tried creating a new item called searchresultpage from my solution explorer, I added a click event ItemClicked=OnItemClick in the Grid View of the Xaml page, I went to it's definition and added this block of code to enable it's navigation Search Result 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);
}
I proceeded to the searchResultpage.xaml.cs added some block of codes to tabulate the result but am having an error in my foreach loop groups variable the error is
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
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 方法
Your contributions will be helpful. Here is my SampleDataItem Method
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;
}
推荐答案
嗨Dominic Victor，
Hi Dominic Victor,
它实际上是一个C＃问题，而不是具体的UWP问题。我不确定您是否熟悉异步编程，如果没有，我建议您首先从MSDN文档中了解这一点： https://docs.microsoft.com/en-us/windows/uwp/threading-async/asynchronous-programming-universal -windows-platform-apps
It’s actually a C# question, not a specific UWP question. I’m not sure if you’re familiar with asynchronous programming, if not, I suggest that you could first learn about this from the MSDN document: https://docs.microsoft.com/en-us/windows/uwp/threading-async/asynchronous-programming-universal-windows-platform-apps
然后，回到你的问题。如果您检查异常消息，则说" System.Threading.Tasks.Task< Squish.Data.SampleDataGroup>'不包含'GetEnumerator'的公共定义 " 。这意味着当您调用"SampleDataSource.GetGroupAsync（" Groups"）时返回的类型
是Task，而不是IEnumerable类型。
Then, back to your question. If you check the exception message, it said "System.Threading.Tasks.Task<Squish.Data.SampleDataGroup>' does not contain a public definition for 'GetEnumerator'". It meant that the returned type when you call "SampleDataSource.GetGroupAsync("Groups")" is Task, not IEnumerable type.
所以，问题出在这一行：
So, the issue was in this line:
var groups = SampleDataSource.GetGroupAsync("Groups");你调用的异步方法就像一般同步方法。这不对。你可以使用'await'，如下所示：
You called asynchronous method like the general synchronized method. It’s not correct. You could use ‘await’ like the following:
var groups = await SampleDataSource.GetGroupsAsync();最诚挚的问候，
Xavier Eoro
Xavier Eoro
这篇关于[UWP] [C＃]如何在Windows应用商店模板拆分页面中添加搜索功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
