तो नए साल की छुट्टियां खत्म हो गईं और यह एक साधारण आरएसएस रीडर के उदाहरण का उपयोग करके XAML / C # पर WinRT एप्लिकेशन लिखने के बारे में कहानी की निरंतरता के साथ वास करने वालों को खुश करने का समय था।
भाग 1 के इतिहास की शुरुआत (एक टेम्पलेट से एक आवेदन बनाना, आरएसएस डेटा को जोड़ना और प्राप्त करना, प्रारंभिक पृष्ठ पर विभिन्न आकारों की टाइलें) और
भाग 2 (विभिन्न समूहों में अलग-अलग टाइलें, टाइलों के लिए अलग-अलग टेम्पलेट, लाइव टाइल, शेयर अनुबंध)।
आंशिक रूप से स्वरूपित HTML प्रदर्शन
यदि आप उस परिणाम को देखते हैं जो हमें दूसरे भाग के बाद मिला है, तो हम देखते हैं कि हमने HTML प्रदर्शित करने के अलावा, सब कुछ सुंदर तरीके से किया। हम केवल RSS को टैग से HTML हटाते हैं और इसे टेक्स्ट के रूप में प्रदर्शित करते हैं। एक बुनियादी समाधान के रूप में - यह पूरी तरह से स्वीकार्य परिणाम है, हालांकि, मैं यहां "इसे सुंदर बनाना" चाहूंगा।
इस समस्या को हल करने के लिए, आप
atreides07 से उदाहरण समाधान का उपयोग कर सकते हैं, जिसे संक्षेप में
यहां पढ़ा जा सकता
है , और जो
NuGet के माध्यम से उपलब्ध है।
चलिए शुरू करते हैं। ऐसा करने के लिए, एप्लिकेशन को प्रोजेक्ट के साथ खोलें और लाइब्रेरी पैकेज मैनेजर, नूगेट के साथ एक लाइब्रेरी का उपयोग करके इसमें जोड़ें। मैं इस पैकेज प्रबंधक कंसोल के लिए इस्तेमाल किया,
आज्ञा कहाँ:
Install-Package WinRTExtensions
और पुस्तकालय स्थापित करने के लिए इंतजार कर रहा है:
अब, आपको इसे XAML फ़ाइल में जोड़ने की आवश्यकता है, जिस पृष्ठ पर HTML प्रदर्शित किया जाना चाहिए, वहाँ से स्तंभों से सरल पाठ के अंतर्निहित टूटने को हटा दें, और विधि से टैग से HTML सफाई को भी हटा दें: AddGroupForForAsync।
ItemDetailPage.xaml पृष्ठ पर जोड़ें:
<common:LayoutAwarePage x:Name="pageRoot" x:Class="MyReader.ItemDetailPage" 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:MyReader" xmlns:data="using:MyReader.Data" xmlns:common="using:MyReader.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ext="using:WinRTExtensions" mc:Ignorable="d">
हम कॉलम में पाठ टूटने को दूर करते हैं और एक्सटेंशन विकल्पों का उपयोग करते हैं ::
<RichTextBlock x:Name="richTextBlock" Width="560" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False" ext:RichTextBlockExtensions.HtmlContent="{Binding Content}"> <Paragraph> <Run FontSize="26.667" FontWeight="Light" Text="{Binding Title}"/> <LineBreak/> <LineBreak/> <Run FontWeight="Normal" Text="{Binding Subtitle}"/> </Paragraph> </RichTextBlock>
हम AddGroupForFeedAsync फ़ंक्शन में HTML टैग से RSS सामग्री की सफाई को हटा देते हैं:
if (i.Summary != null) clearedContent = i.Summary.Text; else if (i.Content != null) clearedContent = i.Content.Text;
अब आप देख सकते हैं और देख सकते हैं कि अब पोस्ट का प्रदर्शन कैसा दिखता है:
अभी भी खामियां हैं, लेकिन कुल मिलाकर यह काफी बेहतर है।
अनुकूलित टाइल प्रदर्शन
जब मेरे सहयोगियों ने मेरे द्वारा लिखे गए उदाहरण की समीक्षा की, तो उन्होंने मुझे धोखा दिया कि टैबलेट के लिए मानक रिज़ॉल्यूशन पर, एप्लिकेशन की प्रारंभिक स्क्रीन अक्षम रूप से उपयोग की जाती है - वहां बहुत कम समाचार टाइलें हैं। आइए इस दिशा में आगे बढ़ने की कोशिश करें, जिसे आप चाहें तो खुद को खत्म कर सकते हैं।
तो, आरंभ करने का सबसे सरल तरीका यह है कि तदनुसार आधार को बदलकर बेस टाइल के आकार को कम किया जाए।
GroupedItemsPage.xaml फ़ाइल में बेस टाइल का आकार 4 गुना कम करें:
<GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" ItemWidth="100" ItemHeight="62" MaximumRowsOrColumns="18" /> </ItemsPanelTemplate> </GroupStyle.Panel>
हम मूल टेम्पलेट बदलते हैं:
<DataTemplate x:Key="CustomItemTemplate"> <Grid HorizontalAlignment="Left"> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" VerticalAlignment="Bottom"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource ExtendedTitleTextStyle}" Height="45" Margin="15,0,15,0" FontSize="15" /> </StackPanel> </Grid> </DataTemplate> <DataTemplate x:Key="CustomItemTemplate2"> <Grid HorizontalAlignment="Right"> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" VerticalAlignment="Top"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource ExtendedTitleTextStyle}" Height="45" Margin="15,0,15,0" FontSize="15" /> </StackPanel> </Grid> </DataTemplate>
अब छोटे प्रस्तावों के साथ प्रारंभिक स्क्रीन पर, उदाहरण के लिए, 1366x768 के संकल्प के साथ, अधिक टाइल रखी जाती हैं:
यह एक अनुकूली डिजाइन बनाने में केवल पहला कदम है, लेकिन हमारे पास पहले से ही टेम्पलेट के रूप में सभी संभव उपकरण हैं, विभिन्न आकारों की कोशिकाओं के साथ तालिकाओं और सेल आकारों के तर्क का निर्धारण।
अनुबंध खोजें
एप्लिकेशन में खोज अनुबंध जोड़ने का समय आ गया है। यह करना काफी आसान है। परियोजना में खोज अनुबंध जैसे एक नया आइटम जोड़ना आवश्यक है:
यह एक खोज प्रदर्शन पृष्ठ जोड़ेगा, जिसे मैंने MySearchResultsPage.xaml कहा था।
यदि, कोई अनुबंध जोड़ने के बाद, आप एक एप्लिकेशन बनाते हैं और इसके लिए खोज करने का प्रयास करते हैं, तो यह पृष्ठ प्रदर्शित होगा। इसके अलावा, चूंकि हमने कोई डिस्प्ले लॉजिक नहीं जोड़ा है, इसलिए यह खाली होगा।
आइए अब उस तर्क को जोड़ते हैं जिसके द्वारा खोज होगी। सादगी के लिए, हम पहले से चल रहे एप्लिकेशन में खोज स्क्रिप्ट को परिष्कृत करेंगे, यह मानते हुए कि आरएसएस का डेटा एप्लिकेशन की मेमोरी में है।
सबसे पहले, MySearchResultsPage.xaml पेज से एप्लिकेशन नाम की अनावश्यक परिभाषा को हटा दें, हमने पहले ही इस चर को App.xaml में परिभाषित कर दिया है:
<Page.Resources> <CollectionViewSource x:Name="resultsViewSource" Source="{Binding Results}"/> <CollectionViewSource x:Name="filtersViewSource" Source="{Binding Filters}"/> <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/> </Page.Resources>
इसके बाद, हम फाइलर वर्ग को संशोधित करते हैं, जिसे MySearchResultsPage.xaml.cs में परिभाषित किया गया है, ताकि यह हमारे प्रकार की एक आइटम सूची लौटाए:
private sealed class Filter<T> : MyReader.Common.BindableBase { private String _name; private bool _active; private List<T> _results; public Filter(String name, IEnumerable<T> results, bool active = false) { this.Name = name; this.Active = active; this.Results = results.ToList(); } public List<T> Results { get { return _results; } set { if (this.SetProperty(ref _results, value)) this.OnPropertyChanged("Description"); } } public override String ToString() { return Description; } public String Name { get { return _name; } set { if (this.SetProperty(ref _name, value)) this.OnPropertyChanged("Description"); } } public int Count { get { return _results.Count; } } public bool Active { get { return _active; } set { this.SetProperty(ref _active, value); } } public String Description { get { return String.Format("{0} ({1})", _name, this.Count); } } }
का उपयोग कर ब्लॉक करने के लिए निर्देश जोड़ने के लिए मत भूलना:
using MyReader.Data;
अब आपको MySearchResultsPage.xaml.cs फ़ाइल के LoadState विधि में खोज तर्क को परिभाषित करने की आवश्यकता है:
var filterList = new List<Filter<RSSDataItem>>( from feed in RSSDataSource.AllGroups select new Filter<RSSDataItem>(feed.Title, feed.Items.Where(item => (item.Title != null && item.Title.Contains(queryText) || (item.Content != null && item.Content.Contains(queryText)))), false)); filterList.Insert(0, new Filter<RSSDataItem>("All", filterList.SelectMany(f => f.Results), true));
और Filter_SelectionChanged हैंडलर में, ऊपर दिए गए हमारे बदलावों के अनुसार फ़िल्टर कॉल को बदलें, और इस परिणाम को भी असाइन करें। DefaultViewModel ["परिणाम"]:
var selectedFilter = e.AddedItems.FirstOrDefault() as Filter<RSSDataItem>;
this.DefaultViewModel["Results"] = selectedFilter.Results;
यदि हम अब एप्लिकेशन लॉन्च करते हैं और खोज चमत्कार बटन का उपयोग करते हैं, तो हम निम्नलिखित देख सकते हैं:
खोज परिणाम चुनते समय, हम रिकॉर्ड के संबंधित पृष्ठ पर नहीं जाते हैं, क्योंकि हम इस घटना को संसाधित नहीं करते हैं। आइए इस कार्यक्षमता को जोड़ते हैं। ऐसा करने के लिए, ResultsGridView के लिए एक ItemClick इवेंट हैंडलर परिभाषित करें ::
<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" IsItemClickEnabled="True" ItemsSource="{Binding Source={StaticResource resultsViewSource}}" ItemTemplate="{StaticResource StandardSmallIcon300x70ItemTemplate}" ItemClick="resultsGridView_ItemClick">
और कोड में:
private void resultsGridView_ItemClick(object sender, ItemClickEventArgs e) { var itemId = ((RSSDataItem)e.ClickedItem).UniqueId; this.Frame.Navigate(typeof(ItemDetailPage), itemId); }
अब आप एप्लिकेशन को चला सकते हैं और सत्यापित कर सकते हैं कि सब कुछ उम्मीद के मुताबिक काम कर रहा है।
सेटिंग्स अनुबंध
हम एक कारण के लिए एक आवेदन लिखते हैं - हम इसे विंडोज स्टोर में प्रकाशित करना चाहते हैं। अगर हम इस बात को जोड़ते हैं कि हमारा एप्लिकेशन इंटरनेट पर जाता है और अनुप्रयोगों के प्रमाणन के लिए आवश्यकताओं को पढ़ता है, तो यह पता चलता है कि हमें सेटिंग्स संपर्क को लागू करने की आवश्यकता है जो किसी भी तरह गोपनीयता सेटिंग्स (गोपनीयता नीति) को इंगित करेगा।
एक उदाहरण के रूप में, मैं MSDN ब्लॉग्स की गोपनीयता नीति का उपयोग करूंगा। वास्तविक एप्लिकेशन बनाते समय, आपको उपयुक्त गोपनीयता नीतियों का उपयोग करना होगा।
केवल प्रारंभ पृष्ठ के लिए सेटिंग्स अनुबंध (सेटिंग्स) जोड़ें। ऐसा करने के लिए, OnNavigateTo और OnNavigateFrom विधियों को फिर से परिभाषित करें, रजिस्टर करें और सेटिंग्स के लिए हैंडलर को डीरजिस्टर करें:
protected override void OnNavigatedFrom(NavigationEventArgs e) { SettingsPane.GetForCurrentView().CommandsRequested -= Settings_CommandsRequested; base.OnNavigatedFrom(e); } protected override void OnNavigatedTo(NavigationEventArgs e) { SettingsPane.GetForCurrentView().CommandsRequested += Settings_CommandsRequested; base.OnNavigatedTo(e); }
अब Settings_CommandsRequested हैंडलर को परिभाषित करें:
private void Settings_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) { var viewPrivacyPage = new SettingsCommand("", "Privacy Statement", cmd => { Launcher.LaunchUriAsync(new Uri("http://go.microsoft.com/fwlink/?LinkId=248681", UriKind.Absolute)); }); args.Request.ApplicationCommands.Add(viewPrivacyPage); }
वह बहुत सरल है। हम गोपनीयता कथन नामक सेटिंग्स आइटम प्रदर्शित करते हैं और उस पर क्लिक करके, हम गोपनीयता नीति में MSDN ब्लॉग भेजते हैं।
यदि हम अब एप्लिकेशन लॉन्च करते हैं और सेटिंग्स चमत्कार पैनल में मुख्य पृष्ठ पर चयन करते हैं, तो हम निम्नलिखित देखेंगे:
अब हमारे पास वास्तव में एक उदाहरण एप्लिकेशन है, जो विंडोज स्टोर में प्रकाशन के लिए लगभग तैयार है।
एप्लिकेशन कोड स्काईड्राइव पर पोस्ट किया गया है और यह aka.ms/w8RSSp3 शॉर्ट लिंक पर उपलब्ध हैएप्लिकेशन डेटा लोड करने और एप्लिकेशन शुरू होने पर नेटवर्क स्थिति की जांच करने के लिए प्रसंस्करण की कमी है। अगले भाग में, हम यह पता लगाएंगे कि इस कार्यक्षमता को कैसे जोड़ा जाए, और हमारे आवेदन को और अधिक सामान्य बनाने का भी प्रयास करें।