हम XAML / C # पर विंडोज 8 एप्लिकेशन के विकास से निपटते हैं, एक सरल आरएसएस रीडर को लागू करते हैं। भाग २

हम एक सरल आरएसएस रीडर विकसित करना जारी रखते हैं। शुरुआत लेख में की गई थी XAML / C # पर विंडोज 8 एप्लिकेशन के विकास को समझना, एक सरल आरएसएस रीडर को लागू करना। भाग 1 , जहां हमने परियोजना बनाई, आरएसएस डेटा प्राप्त किया और इसे खूबसूरती से करना शुरू कर दिया। इस भाग में हम अपने पाठक के लिए सुंदरता और कार्यक्षमता जोड़ेंगे।

हम खूबसूरती से करना जारी रखते हैं

अब हमारे पास विभिन्न आकारों की सुंदर टाइलें हैं, और, यदि वांछित है, तो हम विभिन्न समूहों में टाइल कर सकते हैं। चलो करते हैं। हम स्टैस पावलोव के ब्लॉग को विभिन्न आकारों की टाइलों के साथ बनाते हैं, और सर्गेई पुगाचेव के ब्लॉग के लिए, हम इस तरह की विविधता के साथ उपयोगकर्ता को खराब नहीं करेंगे।

यह कैसे करना है? सब कुछ बहुत सरल है। तर्क जो टाइल्स के आकार को निर्धारित करता है, वह सभी VariableSizeGridView वर्ग के ReadyContainerForItemOverride फ़ंक्शन में लागू किया गया है, इसलिए आप संबंधित तर्क को वहां जोड़ सकते हैं।

समूहों के बीच अंतर करने के लिए, हम यूनिकआईडी का उपयोग करेंगे, एक समूह के लिए जो आरएसएस पर URL से मेल खाता है। निम्न कोड AddContainerForItemOverride फ़ंक्शन में जोड़ें:

int group = -1; if (dataItem.Group.UniqueId.Contains("stas")) { group = 1; } 

और अब हम फ़ंक्शन के व्यवहार को बदल देंगे, यह निर्भर करता है कि यह किस समूह के लिए काम करता है। एक शर्त जोड़ना।

 if (group > 0) { if (index == 2) { colVal = 2; rowVal = 4; } if (index == 5) { colVal = 4; rowVal = 4; } } 

यह कैसे काम करता है यह जांचने के लिए प्रोग्राम को चलाएं।


हमने खुद को और भी अधिक कठिन कार्य निर्धारित किया है। लेकिन क्या होगा अगर हमें प्रदर्शन के लिए विभिन्न डिस्प्ले टेम्प्लेट का उपयोग करने की आवश्यकता है? यह भी एक हल करने योग्य कार्य है। हमें फिर से अपने स्वयं के वर्ग को लागू करना होगा, जिसमें तर्क शामिल होंगे, लेकिन अब यह पहले से ही DataTemplateSelector से इनहेरिट हो जाएगा।

इसलिए, MyDataTemplateSelector नामक समाधान में एक नया वर्ग जोड़ें, इंगित करें कि यह DataTemplateSelector से विरासत में मिला है। उपयोग करने के लिए निर्देश जोड़ें:

 using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; 

और SelectTemplateCore फ़ंक्शन को फिर से परिभाषित करें। परिणाम निम्न होना चाहिए:

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace MyReader { class MyDataTemplateSelector : DataTemplateSelector { protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) { return base.SelectTemplateCore(item, container); } } } 

अब हमें XAML में उन टेम्प्लेट को परिभाषित करने की आवश्यकता है जिनसे हम चुनेंगे। ऐसा करने के लिए, GroupedItemsPage.xaml खोलें और उस पृष्ठ के संसाधनों पर जाएँ जहाँ हमने CustomItemTemplate टेम्प्लेट को परिभाषित किया है:

 <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}" Height="90" Margin="15,0,15,0" FontSize="30" /> </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}" Height="90" Margin="15,0,15,0" FontSize="30" /> </StackPanel> </Grid> </DataTemplate> 

आइए अपने MyDataTemplateSelector वर्ग पर वापस जाएं और कोड जोड़ें जो यह निर्धारित करता है कि किस समूह के किस तत्व का उपयोग करना है, यह निर्धारित करता है:

 using MyReader.Data; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace MyReader { class MyDataTemplateSelector : DataTemplateSelector { public DataTemplate Template1 { get; set; } public DataTemplate Template2 { get; set; } protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) { RSSDataItem dataItem = item as RSSDataItem; if (dataItem.Group.UniqueId.Contains("stas")) { return Template1; } else return Template2; } } } 

GroupedItemsPage.xaml पर वापस जाएं और उस पृष्ठ के संसाधनों पर जाएं जहां हमने टेम्प्लेट परिभाषित किए हैं और हमारे चयनकर्ता को प्रारंभ करें:

 <local:MyDataTemplateSelector x:Key="MyDataSelector" Template1="{StaticResource CustomItemTemplate}" Template2="{StaticResource CustomItemTemplate2}"/> 

और आइटम के लिए स्थानीय के लिए टेम्पलेट निर्दिष्ट करने के बजाय चयनकर्ता निर्दिष्ट करें: VariableSizeGridView:

 <local:VariableSizeGridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.RowSpan="2" Padding="116,137,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplateSelector="{StaticResource MyDataSelector}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> 

हम यह सुनिश्चित करने के लिए एप्लिकेशन लॉन्च करते हैं कि सब कुछ योजना के अनुसार काम करता है।


महान, सब कुछ योजना के अनुसार काम करता है, आप लाइव टाइल्स के साथ काम करने जा सकते हैं।

लेकिन, लाइव टाइल्स पर जाने से पहले, समूह में टाइल्स पर कैप्शन टेक्स्ट की शैली को बदल दें।

BasicTextStyle शैली के आधार पर, हमें अपनी आवश्यक शैलियों को बनाएं और उन्हें GroupedItemsPage.xaml पृष्ठ के संसाधनों में रखें:

 <Style x:Key="ExtendedTextStyle" TargetType="TextBlock" BasedOn="{StaticResource BasicTextStyle}"> <Setter Property="LineHeight" Value="40"/> <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/> <!-- Properly align text along its baseline --> <Setter Property="RenderTransform"> <Setter.Value> <TranslateTransform X="-1" Y="4"/> </Setter.Value> </Setter> </Style> <Style x:Key="ExtendedTitleTextStyle" TargetType="TextBlock" BasedOn="{StaticResource ExtendedTextStyle}"> <Setter Property="FontWeight" Value="SemiBold"/> </Style> 

और इस शैली को हमारे टेम्प्लेट में पाठ पर लागू करें:

 <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="90" Margin="15,0,15,0" FontSize="30" /> </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="90" Margin="15,0,15,0" FontSize="30" /> </StackPanel> </Grid> </DataTemplate> 

एप्लिकेशन लॉन्च करें और देखें कि समूहित तत्वों पर लेबल अब कैसे दिखते हैं।


सब कुछ बहुत बेहतर लग रहा है। यदि आप चाहें, तो आप वांछित प्रभाव को प्राप्त करने के लिए शैलियों के साथ खेल सकते हैं।

लाइव टाइल्स जोड़ें

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

चलिए RSSDataSource.cs फ़ाइल पर जाते हैं और RSSDataSource वर्ग में UpdateTile विधि जोड़ते हैं:

 public static void UpdateTile() { var news = RSSDataSource.AllGroups[0].Items.ToList(); var xml = new XmlDocument(); xml.LoadXml( string.Format( @"<?xml version=""1.0"" encoding=""utf-8"" ?> <tile> <visual branding=""none""> <binding template=""TileSquarePeekImageAndText03""> <image id=""1"" src=""ms-appx:///Assets/Logo.png"" alt=""alt text""/> <text id=""1"">{0}</text> <text id=""2"">{1}</text> <text id=""3"">{2}</text> <text id=""4"">{3}</text> </binding> <binding template=""TileWidePeekImageAndText02""> <image id=""1"" src=""ms-appx:///Assets/Habr_WideLogo.png"" alt=""alt text""/> <text id=""1"">{0}</text> <text id=""2"">{1}</text> <text id=""3"">{2}</text> <text id=""4"">{3}</text> </binding> </visual> </tile>", news.Count > 0 ? System.Net.WebUtility.HtmlEncode(news[0].Title) : "", news.Count > 1 ? System.Net.WebUtility.HtmlEncode(news[1].Title) : "", news.Count > 2 ? System.Net.WebUtility.HtmlEncode(news[2].Title) : "", news.Count > 3 ? System.Net.WebUtility.HtmlEncode(news[3].Title) : "")); TileUpdateManager.CreateTileUpdaterForApplication().Update(new TileNotification(xml)); } 

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

 using Windows.Data.Xml.Dom; using Windows.UI.Notifications; 

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

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

GroupedItemsPage.xaml.cs फ़ाइल में लोडस्टैट विधि पर जाएँ, इसमें Async जोड़ें, AddGroupForFeedAsync विधियों में और UpdateTile :: कॉल जोड़ें

 protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) { this.DefaultViewModel["Groups"] = RSSDataSource.AllGroups; await RSSDataSource.AddGroupForFeedAsync("http://blogs.msdn.com/b/stasus/rss.aspx"); RSSDataSource.UpdateTile(); RSSDataSource.AddGroupForFeedAsync("http://www.spugachev.com/feed"); } 

मैंने जानबूझकर प्रतीक्षा किए बिना एक कॉल को अलग रखा - बाद में - ध्यान दें कि जब आप एप्लिकेशन शुरू करते हैं तो यह कैसा दिखता है।

अब यह एप्लीकेशन में वाइडलोगो सपोर्ट को जोड़ने के लिए बना हुआ है। ऐसा करने के लिए, Habr_WideLogo.scale-100.png फ़ाइल को 310 के आकार के साथ 150 तक बनाएं, इसे प्रोजेक्ट के एसेट फ़ोल्डर में जोड़ें। इसके बाद, Package.appxmanifest फ़ाइल पर डबल-क्लिक करें, इसका विज़ुअल एडिटर खोलें और ऐप्लिकेशन में वाइडलोगो जोड़ें:


अब हम एप्लिकेशन लॉन्च करने के लिए पूरी तरह से तैयार हैं। इसे चलाएं, फिर इसे बंद करें। प्रारंभ स्क्रीन पर जाएं और सुनिश्चित करें कि लाइव टाइल्स काम करते हैं, दोनों वर्ग और आयताकार!

अनुबंध जोड़ने का समय आ गया है। शेयर अनुबंध के साथ शुरू करते हैं। हम एक डेटा स्रोत लागू करते हैं। हम आरएसएस पोस्ट पेज पर डेटा को फेंटेंगे, सिस्टम को अधिकतम संभव डेटा प्रदान करेंगे।

चलिए ItemDetailPage.xaml.cs पेज के कोड पर चलते हैं। सिस्टम को डेटा प्रदान करने के लिए, DataTransferManager के लिए DataRequested ईवेंट को हैंडल करना आवश्यक है। तो चलिए शुरू करते हैं।

शेयर अनुबंध जोड़ें

हम NavigateTo पृष्ठ में DataRequested ईवेंट हैंडलर को पंजीकृत करते हैं (और NavigateFrom में ईवेंट से अनसब्सक्राइब करते हैं), और हैंडलर को कार्यान्वित करते हैं जिसमें हम पोस्ट नाम और पाठ के साथ सिस्टम प्रदान करेंगे:

 protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); DataTransferManager.GetForCurrentView().DataRequested += Share_DataRequested; } protected override void OnNavigatedFrom(NavigationEventArgs e) { base.OnNavigatedFrom(e); DataTransferManager.GetForCurrentView().DataRequested -= Share_DataRequested; } private void Share_DataRequested(DataTransferManager sender, DataRequestedEventArgs args) { var selectedItem = (RSSDataItem)this.flipView.SelectedItem; args.Request.Data.Properties.Title = selectedItem.Title; args.Request.Data.Properties.Description = selectedItem.Content; args.Request.Data.SetText(selectedItem.Content); } 

एप्लिकेशन लॉन्च करें, पोस्ट पृष्ठ पर जाएं और सत्यापित करें कि एप्लिकेशन अब अन्य एप्लिकेशन को डेटा स्थानांतरित कर सकता है।


वास्तव में, हमें RSS फ़ीड में साझा करने के लिए बहुत अधिक डेटा मिलता है। यह एक पोस्ट, पोस्ट URI, आदि की तस्वीर है। मेरा सुझाव है कि आप स्वतंत्र रूप से फ़ीड जोड़ने की विधि के कोड को संशोधित करते हैं, साथ ही साथ संबंधित कक्षाएं, ताकि अधिक डेटा हो। अधिक डेटा - बहुत सारे अनुप्रयोगों के साथ आप साझा कर सकते हैं!

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

वर्तमान एप्लिकेशन कोड को एक छोटे लिंक: aka.ms/w8RSSp2 के माध्यम से स्काईड्राइव से डाउनलोड किया जा सकता है

युपीडी:
चक्र का भाग 1
चक्र का भाग 3