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

HTML / जावास्क्रिप्ट में WinRT- अनुप्रयोगों के विकास के लिए पोस्ट परिचय के बाद । एक टेम्प्लेट से डेटा एप्लिकेशन तक, आप पहले से ही जानते हैं कि HTML और जावास्क्रिप्ट का उपयोग करके विंडोज 8 के लिए आरएसएस रीडर कैसे विकसित किया जाए। यह उसी के बारे में करने का प्रयास करने का समय है, लेकिन XAML / C # का उपयोग करते हुए। यह पहला भाग है, लेकिन हम पहले से ही इसे खूबसूरती से करेंगे!

टेम्पलेट से एप्लिकेशन बनाना

चलो XAML / C # में विकास का चयन करते हुए, ग्रिड एप्लिकेशन टेम्पलेट के साथ विकास शुरू करें
फ़ाइल मेनू से, नया प्रोजेक्ट चुनें , फिर विज़ुअल सी # , फिर विंडोज स्टोर , नई परियोजना विंडो के मध्य भाग में , ग्रिड ऐप (एक्सएएमएल) नामक एक टेम्पलेट का चयन करें। नाम फ़ील्ड में एप्लिकेशन का नाम दर्ज करें, उदाहरण के लिए, MyReader, यदि आवश्यक हो, तो स्थान फ़ील्ड में वह फ़ोल्डर जिसमें एप्लिकेशन प्रोजेक्ट रखा जाएगा और ठीक पर क्लिक करें।

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

आप यह सुनिश्चित कर सकते हैं कि यह लगभग पूरी तरह कार्यात्मक अनुप्रयोग है:

• किसी भी एक ग्रे टाइल या समूह हेडर पर क्लिक करें;
• एप्लिकेशन के आंतरिक पृष्ठों पर बैक बटन का उपयोग करें;
• एप्लिकेशन को स्नैप किए गए मोड में डालें।

विज़ुअल स्टूडियो पर वापस लौटें और एप्लिकेशन को डीबग करना बंद करें ( Shift + F5 , एक लाल वर्ग या डिबग चुनें -> मेनू से डीबग करना बंद करें )।
हम अपने समाधान की मुख्य फाइलों से निपटेंगे:

• * .xaml - XAML भाषा में एप्लिकेशन पृष्ठ का मार्कअप।
• * .xaml.cs पृष्ठ की C # भाषा में कोड-पीछे की फ़ाइल है।
• App.xaml - XAML भाषा में एक विंडोज स्टोर एप्लिकेशन ऑब्जेक्ट का आरंभीकरण, कोई दृश्य प्रतिनिधित्व नहीं है और एक एप्लिकेशन पृष्ठ नहीं है।
• App.xaml.cs App.xaml के लिए C # कोड-पीछे फ़ाइल है। यह फ़ाइल एप्लिकेशन-स्तर की घटनाओं को लॉन्च करती है, जैसे लॉन्च, सक्रियण, खोज क्वेरी द्वारा सक्रियण और एप्लिकेशन को निष्क्रिय करना। इसके अलावा, App.xaml.cs में आप बिना किसी अपवाद के पकड़ सकते हैं और पृष्ठों के बीच नेविगेशन त्रुटियों को पकड़ सकते हैं।
• सामान्य फ़ोल्डर , StandardStyles.xaml फ़ाइल - ग्राफिक नियंत्रण के लिए शैली संसाधनों की एक फ़ाइल, App.xaml से जुड़ी है और इसकी शैलियाँ एप्लिकेशन के सभी पृष्ठों में उपलब्ध हैं।
• Package.appxmanifest एक एप्लिकेशन मेनिफ़ेस्ट है, एक XML फ़ाइल जिसमें विभिन्न एप्लिकेशन सेटिंग्स होती हैं। एक ग्राफिकल एडिटर है जो समाधान एक्सप्लोरर विंडो में फ़ाइल नाम Package.appxmanifest पर डबल-क्लिक करके खुलता है।
• AssemblyInfo.cs एक कॉन्फ़िगरेशन फ़ाइल है जो एप्लिकेशन के मुख्य असेंबली के कुछ मेटाडेटा को परिभाषित करती है।
• MyReader_TemporaryKey.pfx - उस निजी कुंजी के साथ क्रिप्टोग्राफ़िक प्रमाणपत्र जिसके साथ आवेदन पर हस्ताक्षर किए गए हैं।
• एसेट फ़ोल्डर, Logo.png, SmallLogo.png, StoreLogo.png फाइलें - आवेदन की बड़ी और छोटी टाइलों के लिए लोगो, साथ ही साथ सभी अनुप्रयोगों की सूची के लिए एक आइकन।
• SplashScreen.png - स्प्लैश स्क्रीन के लिए एक चित्र, जो एप्लिकेशन लोडिंग के दौरान प्रदर्शित होता है।

सामान्य फ़ोल्डर में, अनुप्रयोग में उपयोग किए जाने वाले सामान्य कोड के साथ फाइलें भी होती हैं, DataModel फ़ोल्डर में एप्लिकेशन डेटा मॉडल के साथ एक फाइल होती है - SampleDataSource.cs ।

प्रदर्शित करने के लिए डेटा बदलें

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

public SampleDataSource() 

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

दुनिया की एक पूरी तस्वीर बनाने के लिए, आप नमूना फ़ाइल का नाम बदलकर RSSDataSource.cs कर सकते हैं।

इस उदाहरण में डेटा वर्ग के साथ काम करने के लिए, हम इसे सरल बनाते हैं। ऐसा करने के लिए, RSSDataSource वर्ग के अगले टुकड़े को बदलें

 private static RSSDataSource _sampleDataSource = new RSSDataSource(); private ObservableCollection<RSSDataGroup> _allGroups = new ObservableCollection<RSSDataGroup>(); public ObservableCollection<RSSDataGroup> AllGroups { get { return this._allGroups; } } 

कोड अर्थ में समान है, धारणा को सरल बनाने और उदाहरण के आगे विकास।

 public static readonly ObservableCollection<RSSDataGroup> AllGroups = new ObservableCollection<RSSDataGroup>(); 

अंत में, अनावश्यक स्थानीय चर _sampleDataSource को वर्ग कोड से हटा दें।

इसलिए, हम वास्तविक डेटा जोड़ने के लिए तैयार हैं।

आइए एक सरल विधि जोड़ते हैं जो RSS या ATOM डेटा स्ट्रीम लेगा और इसे एप्लिकेशन इंटरफ़ेस में आगे के प्रदर्शन के लिए प्रस्तुत करेगा।

  public static async Task<bool> AddGroupForFeedAsync(string feedUrl) { string clearedContent = String.Empty; if (RSSDataSource.GetGroup(feedUrl) != null) return false; var feed = await new SyndicationClient().RetrieveFeedAsync(new Uri(feedUrl)); var feedGroup = new RSSDataGroup( uniqueId: feedUrl, title: feed.Title != null ? feed.Title.Text : null, subtitle: feed.Subtitle != null ? feed.Subtitle.Text : null, imagePath: feed.ImageUri != null ? feed.ImageUri.ToString() : null, description: null); foreach (var i in feed.Items) { string imagePath = null; if (i.Summary != null) clearedContent = Windows.Data.Html.HtmlUtilities.ConvertToText(i.Summary.Text); else if (i.Content != null) clearedContent = Windows.Data.Html.HtmlUtilities.ConvertToText(i.Content.Text); if (imagePath != null && feedGroup.Image == null) feedGroup.SetImage(imagePath); if (imagePath == null) imagePath = "ms-appx:///Assets/DarkGray.png"; feedGroup.Items.Add(new RSSDataItem( uniqueId: i.Id, title: i.Title.Text, subtitle: null, imagePath: imagePath, description: null, content: clearedContent, @group: feedGroup)); } AllGroups.Add(feedGroup); return true; } 

कोड काफी सरल है। SyndicationClient का उपयोग करके, हम RSS / ATOM से डेटा प्राप्त करते हैं और पार्स करते हैं, जिसके बाद हम एक समूह बनाते हैं और उसमें प्रविष्टियाँ जोड़ते हैं। रास्ते के साथ, हम HTML टैग की सामग्री को साफ करते हैं, बस इसे बेहतर दिखने के लिए, और एक तस्वीर के अलावा के लिए भी प्रदान करते हैं, जो हम बाद में करेंगे।

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

 using Windows.Web.Syndication; using System.Threading.Tasks; 

यह जाँचने के लिए कि यह कैसे काम करता है, GroupedItemsPage.xaml.cs फ़ाइल पर डबल-क्लिक करें और LoadState विधि पर जाएँ, जो डेटा को इनिशियलाइज़ करता है और नमूना डेटा समूह को RSSDataSource.llGroups के साथ बदल देता है, और अब अनावश्यक आरंभीकरण नमूनाDataGroups को भी हटा देता है। अब, लोडस्टैट कोड में एक पंक्ति शामिल है:

 protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) { this.DefaultViewModel["Groups"] = RSSDataSource.AllGroups; } 

अब, इसे काम करने के लिए, आपको किसी तरह के आरएसएस को जोड़ने की आवश्यकता है। हम नए सिरे से बनाए गए AddGroupForFeedAsync फ़ंक्शन का उपयोग करेंगे और LoadState फ़ंक्शन में दो लाइनें जोड़ेंगे:

 RSSDataSource.AddGroupForFeedAsync("http://blogs.msdn.com/b/stasus/rss.aspx"); RSSDataSource.AddGroupForFeedAsync("http://www.spugachev.com/feed"); 

हम प्रोजेक्ट इकट्ठा करते हैं और चलाते हैं।

हुर्रे - यह काम करता है!

लेकिन किसी तरह यह बहुत सुंदर नहीं है ... खैर, चलो इसे खूबसूरती से करें!

सुंदर बनाओ

शुरुआत करने वाली पहली चीज़ पोस्ट्स में और टाइलों में समूहबद्ध प्रदर्शन में चित्र हैं।
चलिए RSSDataSource.cs पर वापस जाते हैं और एक जादुई विधि जोड़ते हैं जो RSS पोस्ट से छवियाँ निकालता है:

 private static string GetImageFromPostContents(SyndicationItem item) { string text2search = ""; if (item.Content != null) text2search += item.Content.Text; if (item.Summary != null) text2search += item.Summary.Text; return Regex.Matches(text2search, @"(?<=<img\s+[^>]*?src=(?<q>['""]))(?<url>.+?)(?=\k<q>)", RegexOptions.IgnoreCase) .Cast<Match>() .Where(m => { Uri url; if (Uri.TryCreate(m.Groups[0].Value, UriKind.Absolute, out url)) { string ext = Path.GetExtension(url.AbsolutePath).ToLower(); if (ext == ".png" || ext == ".jpg" || ext == ".bmp") return true; } return false; }) .Select(m => m.Groups[0].Value) .FirstOrDefault(); } 

विधि में, हम पोस्ट के पाठ या उसके सारांश में चित्रों (एक्सटेंशन png, jpg और bmp के साथ) को खोजने के लिए नियमित अभिव्यक्ति का उपयोग कर रहे हैं।
निम्नलिखित निर्देशों का उपयोग करके ब्लॉक को जोड़ना याद रखें:

 using System.Text.RegularExpressions; using System.IO; 

अब AddGroupForFeedAsync विधि में सावधानी से छोड़े गए स्टब पर कॉल को इस विधि में जोड़ें। परिवर्तन

 string imagePath = null; 

पर

 string imagePath = GetImageFromPostContents(i); 

हम एप्लिकेशन को पुनर्निर्माण और चलाते हैं।

सब कुछ बहुत बेहतर हो गया है, लेकिन सभी विषयों को एक ही आकार की टाइलों के साथ क्यों दिखाया गया है? शायद आपको विंडोज स्टोर में करने की ज़रूरत है!

यह उन सभी की तुलना में थोड़ा अधिक कठिन काम है जो हमने पहले किए थे। लेकिन हम कठिनाइयों पर नहीं रुकते हैं!

इस तरह की कार्यक्षमता को लागू करने के लिए, हमें अपना स्वयं का वर्ग बनाना होगा, ग्रिड व्यू का उत्तराधिकारी। नाम के साथ प्रोजेक्ट में एक नई क्लास फ़ाइल जोड़ें: VariableSizeGridView.cs। नई फ़ाइल में, निर्देश का उपयोग ब्लॉक में जोड़ें:

 using Windows.UI.Xaml.Controls; 

, इंगित करें कि वर्ग GridView से इनहेरिट करता है और इसमें वर्ग विधि को ओवरराइड करता है: ReadyContainerForItemOverride। परिणाम कुछ इस तरह होना चाहिए:

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Windows.UI.Xaml.Controls; namespace MyReader { class VariableSizeGridView: GridView { protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item) { base.PrepareContainerForItemOverride(element, item); } } } 

दरअसल, ReadyContainerForItemOverride विधि उस तर्क को निर्धारित करेगी जिसके द्वारा विभिन्न आकारों की टाइलों को एक समूहीकृत दृश्य में प्रदर्शित किया जाएगा। अब आपको GroupedItemsPage.xaml फ़ाइल में मार्कअप तैयार करना होगा।

सबसे पहले, GridView को हमारी कक्षा - स्थानीय: VariableSizeGridView से बदलें। इसके बाद, ItemPanelTemplate में, हम VariableSizedWrapGrid गुणों को आइटम के आकार और शर्तों और स्तंभों की अधिकतम संख्या का संकेत देकर पूरक करते हैं, ताकि यह इस तरह दिखाई दे:

 <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" ItemWidth="200" ItemHeight="125" MaximumRowsOrColumns="9" /> 

पृष्ठ संसाधनों में अपना आइटम टेम्पलेट जोड़ें:

 <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> 

और हम इसे स्थानीय में मानक एक के बजाय आइटम टेम्पलेट के रूप में निर्दिष्ट करेंगे: 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}}" ItemTemplate="{StaticResource CustomItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> 

ऐप लॉन्च किया।

यह बहुत सुंदर नहीं लगेगा। लेकिन यह तब तक है जब तक हम अपने लॉजिक कोड को AddContainerForItemOverride में जोड़ लेते हैं।

तो, कोड जोड़ें:

 class VariableSizeGridView: GridView { private int rowVal; private int colVal; protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item) { RSSDataItem dataItem = item as RSSDataItem; int index = -1; if (dataItem != null) { index = dataItem.Group.Items.IndexOf(dataItem); } if (index == 1) { colVal = 2; rowVal = 4; } else { colVal = 2; rowVal = 2; } if (index == 2) { colVal = 2; rowVal = 4; } if (index == 5) { colVal = 4; rowVal = 4; } VariableSizedWrapGrid.SetRowSpan(element as UIElement, rowVal); VariableSizedWrapGrid.SetColumnSpan(element as UIElement, colVal); base.PrepareContainerForItemOverride(element, item); } 

जैसा कि आप देख सकते हैं, हम बस अपने हाथों से संकेत देते हैं कि किस टाइल को प्रदर्शित करना है, कैसे प्रदर्शित करना है।

इसे फिर से चलाएं।

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

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

UPD : हाँ, और हम शीर्षक को भी शैलीबद्ध करेंगे ताकि यह एक सामूहिक प्रदर्शन में टाइलों में मानवीय रूप से प्रकट हो, जैसा कि लेख की शुरुआत में स्क्रीनशॉट में है।

SkyDrive पर एक परियोजना के रूप में परिणामी आवेदन (छोटा लिंक): aka.ms/w8RSSp1

नया साल मुबारक हो!

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