XAML / C # पर विंडोज 8.1 अनुप्रयोगों का विकास। भाग 4. खोज

सामग्री के साथ काम करने वाले एप्लिकेशन के लिए महत्वपूर्ण और आवश्यक कार्यक्षमता में से एक सूचना पुनर्प्राप्ति है।

आज हम संभावनाओं को देखते हैं कि विंडोज 8.1 खोज के आयोजन के लिए अनुप्रयोगों के विंडोज स्टोर के डेवलपर को प्रदान करता है, साथ ही पिछले लेखों में विकसित " उत्पाद सूची " एप्लिकेशन में उत्पादों की खोज करने की क्षमता भी जोड़ता है।

विंडोज 8.1 ने एक नया नियंत्रण, सर्चबॉक्स सर्च बार पेश किया , जो आपके लिए एप्लिकेशन में खोजों को कार्यान्वित करना आसान बनाता है।

अब आप एप्लिकेशन पेज पर नियंत्रण जोड़ सकते हैं, इवेंट्स को प्रोसेस कर सकते हैं, लुक को कस्टमाइज़ कर सकते हैं और रेडी-मेड सर्च फंक्शनलिटी पा सकते हैं।
आप इस लेख में दिए गए निर्देशों का पालन करके ऐसा परिणाम प्राप्त कर सकते हैं।



हम खोज पैनल को एप्लिकेशन के मुख्य पृष्ठ पर रखेंगे और खोज परिणामों को देखने के लिए एक अलग पेज बनाएंगे।

एक आवेदन पृष्ठ पर एक खोज बार जोड़ना

हम सर्चबॉक्स नियंत्रण के आधार पर खोज पैनल को लागू करेंगे।
1. Visual Studio 2013 में प्रोजेक्ट खोलें।
2. सॉल्यूशन एक्सप्लोरर में, हबपेज.एक्सएम् फाइल खोलें।
3. एप्लिकेशन हेडर में खोज बार डालें, उदाहरण के लिए, नाम के साथ तालिका में।



खोज बार जोड़ने के लिए, निम्नलिखित कोड का उपयोग करें:

<SearchBox x:Uid="SearchBoxControl" PlaceholderText=" ..." QuerySubmitted="SearchBox_QuerySubmitted" SuggestionsRequested="SearchBox_SuggestionsRequested" FocusOnKeyboardInput="True" Width="300" Height="40" HorizontalAlignment="Right" Grid.Column="2" /> 

जहां:
प्लेसहोल्डर टेक्स्ट - टेक्स्ट को खाली टेक्स्ट फील्ड में दिखाया जाना है।
QuerySubmitted - एक खोज ईवेंट हैंडलर।
सुझाव - असम्बद्ध - खोज क्षेत्र में पात्रों को इनपुट करने के लिए ईवेंट हैंडलर। इस ईवेंट को संसाधित करने के बाद, आप उन संकेतों और ऑफ़र को प्रबंधित कर सकते हैं जो बटन पर क्लिक करने और खोज करने से पहले ही उपयोगकर्ता को प्रदर्शित किए जाएंगे। उसी समय, आप किसी भी डेटा स्रोतों के साथ काम कर सकते हैं, चाहे वह डेटाबेस हो, xml दस्तावेज़ , क्लाउड में वेब सेवा या आपके कंप्यूटर पर स्थानीय फ़ाइलें और फ़ोल्डर्स ।
FocusOnKeyboardInput - कीबोर्ड से वर्ण टाइप करते समय नियंत्रण के व्यवहार के लिए जिम्मेदार एक पैरामीटर। यदि यह सही है, तो कीबोर्ड से वर्ण दर्ज करते समय, कर्सर खोज क्षेत्र में चला जाता है।

4. सॉल्यूशन एक्सप्लोरर में, HubPage.xaml.cs फ़ाइल खोलें।
5. SearchBox_SuggestionsRequested विधि खोजें और इसे बदलें:

 private void SearchBox_SuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args) { string queryText = args.QueryText; if (!string.IsNullOrEmpty(queryText)) { Windows.ApplicationModel.Search.SearchSuggestionCollection suggestionCollection = args.Request.SearchSuggestionCollection; SampleDataGroup dataGroup = this.DefaultViewModel["Group1Items"] as SampleDataGroup; if (dataGroup != null) { IEnumerable<SampleDataItem> itemsResult = dataGroup.Items.Where(item => item.Title.StartsWith(queryText, StringComparison.CurrentCultureIgnoreCase)); foreach (SampleDataItem suggestion in itemsResult) { IRandomAccessStreamReference thumbnail = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///"+suggestion.ImagePath)); suggestionCollection.AppendResultSuggestion(suggestion.Title, suggestion.Description, string.Empty, thumbnail, string.Empty); } suggestionCollection.AppendSearchSeparator(string.Empty); IEnumerable<SampleDataItem> itemsQuery = dataGroup.Items.Where(item => item.Description.Contains(queryText)); foreach (SampleDataItem suggestion in itemsQuery) { suggestionCollection.AppendQuerySuggestion(suggestion.Title); } } } } 

इस पद्धति में, हम खोज फ़ील्ड में कीबोर्ड से वर्ण दर्ज करते समय ड्रॉप-डाउन संकेत की संभावना को लागू करते हैं। सबसे पहले, हम उन उपयोगकर्ता उत्पादों की पेशकश करते हैं, जिनका नाम दर्ज वर्णों के साथ शुरू होता है, स्पष्टता के लिए, इन उत्पादों के आइकन प्रदर्शित करते हैं, फिर एक विभाजक जोड़ते हैं और उन उत्पादों की पेशकश करते हैं जिनके विवरण में वर्ण हैं।

6. एप्लिकेशन लॉन्च करें। परिणाम नीचे चित्र में दिखाया गया है।



कुछ पाठ लिखना शुरू करने का प्रयास करें और कर्सर तुरंत खोज फ़ील्ड पर दिखाई देगा।
यदि आप उत्पाद के नाम के पहले कुछ अक्षर दर्ज करते हैं, उदाहरण के लिए, "हेडफ़ोन", तो आपको वाक्य के रूप में निर्दिष्ट वर्ण वाले शब्द दिखाई देंगे।

खोज परिणाम पृष्ठ बनाना

अब हम एक पेज बनाएंगे जिसमें खोज परिणाम होंगे। डेटा स्रोत के रूप में, हम अपने JSON फ़ाइल का उपयोग एप्लिकेशन उत्पादों की सूची के साथ करेंगे।
1. प्रोजेक्ट के लिए समाधान एक्सप्लोरर में, जोड़ें / नई आइटम का चयन करें
2. आइटम पृष्ठ पृष्ठ टेम्पलेट का चयन करें और SearchResult.xaml फ़ाइल बनाएँ।



3. पेज कोड बदलें। पृष्ठ खोज परिणामों के साथ एक शीर्षक और एक तालिका प्रदर्शित करेगा।

 <Page x:Name="pageRoot" x:Class="eShop.SearchResult" DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:eShop" xmlns:common="using:eShop.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </Grid.ChildrenTransitions> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!-- Horizontal scrolling grid --> <GridView x:Name="itemGridView" TabIndex="1" Grid.RowSpan="2" Padding="116,136,116,46" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" IsSwipeEnabled="False" > <GridView.ItemTemplate> <DataTemplate> <Grid Height="280" Width="310" Margin="5,10,5,10"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Height="150"> <Image Source="{Binding ImagePath}" Stretch="None" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel Grid.Row="1" Margin="0,10,0,0"> <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/> <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" /> </StackPanel> <Button Grid.Row="2" Content="" Margin="0,10,0,0" HorizontalAlignment="Right" /> </Grid> </DataTemplate> </GridView.ItemTemplate> </GridView> <!-- Back button and page title --> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="120"/> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top" AutomationProperties.Name="Back" AutomationProperties.AutomationId="BackButton" AutomationProperties.ItemType="Navigation Button"/> <TextBlock x:Name="pageTitle" Grid.Column="1" Text=" : " Style="{StaticResource HeaderTextBlockStyle}" VerticalAlignment="Bottom" Margin="0,0,30,40" IsHitTestVisible="false" TextWrapping="NoWrap" /> <TextBlock x:Name="resultNumber" Grid.Column="2" Text="{Binding TotalCount}" Style="{StaticResource HeaderTextBlockStyle}" VerticalAlignment="Bottom" Margin="0,0,0,40" IsHitTestVisible="false" /> <SearchBox x:Uid="SearchBoxControl" Grid.Column="3" PlaceholderText=" ..." QuerySubmitted="SearchBox_QuerySubmitted" SuggestionsRequested="SearchBox_SuggestionsRequested" FocusOnKeyboardInput="True" Width="300" Height="40" HorizontalAlignment="Right" /> </Grid> </Grid> </Page> 

4. SearchResult.xaml.cs फ़ाइल खोलें।
5. नेविगेशनHelper_LoadState विधि खोजें।
6. इसे बदलें:

 private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e) { string queryText = (String)e.NavigationParameter; var group = await SampleDataSource.GetGroupAsync("Group-1"); if (group != null) { IEnumerable<SampleDataItem> itemsResult = group.Items.Where(item => item.Title.StartsWith(queryText, StringComparison.CurrentCultureIgnoreCase)); this.DefaultViewModel["Items"] = itemsResult; this.DefaultViewModel["QueryText"] = queryText; this.DefaultViewModel["TotalCount"] = itemsResult.Count(); } } 

7. एप्लिकेशन लॉन्च करें और खोजें। परिणाम नीचे चित्र में दिखाया गया है।

रूप अनुकूलित करें

अंतिम स्पर्श। अब हम एप्लिकेशन के रंगों में खोज बार को स्टाइल कर रहे हैं।
डिफ़ॉल्ट शैलियाँ C: \ Program Files (x86) \ Windows Kits \ 8.1 \ Gen \ xrtl \ design फ़ोल्डर में जेनेरिक। Xaml फ़ाइल में पाई जा सकती हैं।
1. सॉल्यूशन एक्सप्लोरर में, App.xaml फाइल खोलें
2. शैलियों के निम्नलिखित सेट डालें:

 <!--    --> <SolidColorBrush x:Key="SearchBoxButtonBackgroundThemeBrush" Color="Gray" /> <!--   ,     (   ).   ,      --> <SolidColorBrush x:Key="SearchBoxButtonPointerOverBackgroundThemeBrush" Color="DarkGray" /> <!--      --> <SolidColorBrush x:Key="SearchBoxSeparatorSuggestionForegroundThemeBrush" Color="LightGray" /> <!--   --> <SolidColorBrush x:Key="SearchBoxForegroundThemeBrush" Color="DarkGray" /> <!--  ,      --> <SolidColorBrush x:Key="SearchBoxHitHighlightSelectedForegroundThemeBrush" Color="White" /> 

3. एप्लिकेशन लॉन्च करें। सर्च बार अपना स्वरूप बदल देगा।

निष्कर्ष

आज के लिए बस इतना ही। हमने खोजों को व्यवस्थित करने के लिए नए विंडोज 8.1 नियंत्रण के साथ मुलाकात की, और "उत्पाद कैटलॉग" एप्लिकेशन में उत्पादों को खोजने की क्षमता भी जोड़ी।

भविष्य के लेखों में, हम सरल उदाहरणों के साथ विंडोज 8.1 अनुप्रयोगों के विकास को समझना जारी रखेंगे।

आप लिंक पर स्काईड्राइव पर परिणामी आवेदन डाउनलोड कर सकते हैं: http://sdrv.ms/1kmQNMd

उपयोगी सामग्री

खोज गाइड
SearchBox