WinRT के लिए मेट्रो शैली घटक का निर्माण और पंजीकरण

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

यह लेख एक सरल मेट्रो शैली घटक बनाने के लिए चरण-दर-चरण निर्देश प्रदान करता है, साथ ही WinRT परियोजनाओं में आगे के उपयोग के लिए इस तरह के पुस्तकालय को पंजीकृत करने की विशेषताएं प्रदान करता है।

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

सिस्टम आवश्यकताओं

यदि आपके पास विंडोज 8 के लिए अपना पहला कार्यक्रम लिखने का समय नहीं है, तो सुनिश्चित करें कि आपके विकास का वातावरण निम्नलिखित आवश्यकताओं को पूरा करता है:

• विकास ऑपरेटिंग सिस्टम विंडोज 8 में आयोजित किया जाना चाहिए । इस लेखन के समय, विंडोज 8 रिलीज पूर्वावलोकन चरण में उपलब्ध है और यहां डाउनलोड किया जा सकता है:
  http://windows.microsoft.com/ru-RU/windows-8/download
  
• विकास के लिए, आपको विजुअल स्टूडियो 2012 के विकास के वातावरण की आवश्यकता होगी , जो वर्तमान में रिलीज़ कैंडिडेट चरण में है और http://www.microsoft.com/visualstudio/11/en-us/downloads से डाउनलोड के लिए उपलब्ध है।
  यदि आप विजुअल स्टूडियो के पेशेवर संस्करण का उपयोग करने में असमर्थ हैं, तो आप हमेशा विंडोज 8 के लिए विजुअल स्टूडियो एक्सप्रेस 2012 को मुफ्त में स्थापित कर सकते हैं। इस लेख में, विजुअल स्टूडियो 2012 के पेशेवर संस्करण के इंटरफ़ेस के लिए सभी चरण प्रदान किए जाएंगे।
  

पुस्तकालय निर्माण

इसलिए, हमने विजुअल स्टूडियो 2012 लॉन्च किया और अपने पहले मेट्रो-शैली घटक को तैयार करने के लिए तैयार हैं।
ऐसा करने के लिए, क्लास लाइब्रेरी प्रकार (मेट्रो शैली ऐप्स) की एक नई परियोजना बनाएं और इसे MyCustomControls कहें :



नतीजतन, एक वर्ग के साथ एक खाली परियोजना बनाई जाएगी। चूंकि हमारे मामले में इस वर्ग की आवश्यकता नहीं है, इसलिए हम प्रोजेक्ट से Class1.cs फ़ाइल हटाते हैं:



फिर हमारे भविष्य के घटक के लिए एक रिक्त जोड़ें। ऐसा करने के लिए, नया आइटम जोड़ें संवाद में, एक नया टेम्पलेट चुनें - अस्थायी नियंत्रण - और इसे नाम दें MyCustomer :



इन कार्यों के बाद, परियोजना में दो नई फाइलें दिखाई देंगी:

• MyCustomControl.cs , हमारे घटक की परिभाषा को नियंत्रण से विरासत के रूप में युक्त करता है:
  
  

  namespace MyCustomControls { public sealed class MyCustomControl : Control { public MyCustomControl() { this.DefaultStyleKey = typeof(MyCustomControl); } } } 

  
  इसे नीचे दिए गए कोड से बदलें:
  
  

   namespace MyCustomControls { public sealed class MyCustomControl : Control { const double radius = 30; public static readonly DependencyProperty DataProperty = DependencyProperty.Register("Data", typeof(Geometry), typeof(MyCustomControl), new PropertyMetadata(null)); public Geometry Data { get { return (Geometry)GetValue(DataProperty); } set { SetValue(DataProperty, value); } } DispatcherTimer timer; double progress = 0.0; Size arrangeSize = new Size(0, 0); DateTime lastTime = DateTime.Now; public MyCustomControl() { this.DefaultStyleKey = typeof(MyCustomControl); timer = new DispatcherTimer(); timer.Tick += timer_Tick; timer.Interval = TimeSpan.FromMilliseconds(5); timer.Start(); } void timer_Tick(object sender, object e) { DateTime time = DateTime.Now; progress += 0.5 * (time - lastTime).TotalSeconds; lastTime = time; if (progress > 1) progress -= 1; Data = CreateGeometry(progress); } double CalcAngle(double progress) { double factor = 0.5 * Math.Cos(Math.PI * progress - Math.PI) + 0.5; return 2 * Math.PI * factor; } double CalcDistance(double angle) { return 0.3 * (Math.PI - Math.Abs(Math.PI - angle)); } Geometry CreateGeometry(double progress) { double angle = CalcAngle(progress); double distance = CalcDistance(angle); GeometryGroup newGeometry = new GeometryGroup() { FillRule = FillRule.Nonzero }; for (int i = 3; i > -4; i--) { Point location = new Point(0.5 * arrangeSize.Width + radius * Math.Cos(angle + i * distance - Math.PI / 2), 0.5 * arrangeSize.Height + radius * Math.Sin(angle + i * distance - Math.PI / 2)); newGeometry.Children.Add(new EllipseGeometry() { Center = location, RadiusX = 5, RadiusY = 5 }); } return newGeometry; } protected override Size MeasureOverride(Size availableSize) { base.MeasureOverride(availableSize); return new Size(!double.IsInfinity(availableSize.Width) ? availableSize.Width : 0, !double.IsInfinity(availableSize.Height) ? availableSize.Height : 0); } protected override Size ArrangeOverride(Size arrangeBounds) { arrangeSize = arrangeBounds; return base.ArrangeOverride(arrangeBounds); } } } 

  
  
• थीम्स \ Generic.xaml , उस शैली का विवरण कहां है जो हमारे नियंत्रण में डिफ़ॉल्ट रूप से लागू किया जाएगा। मार्कअप में पथ तत्व जोड़ें:
  
  

   <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:MyCustomControls"> <Style TargetType="local:MyCustomControl"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:MyCustomControl"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Path Fill="Aqua" Data="{Binding Path=Data, RelativeSource={RelativeSource TemplatedParent} }"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> 

फिर आप लिखित घटक के संचालन का त्वरित परीक्षण कर सकते हैं। ऐसा करने के लिए, ब्लैंक ऐप (XAML) प्रकार की एक और परियोजना जोड़ें:



अब इस परियोजना के लिए हमारी MyCustomControls विधानसभा में एक लिंक (प्रकार परियोजना संदर्भ) जोड़ें:



अगला, आपको नीचे दिखाए अनुसार MainPage.xaml फ़ाइल की सामग्री को बदलने की आवश्यकता है :

 <Page x:Class="App1.MainPage" IsTabStop="false" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:my="using:MyCustomControls" mc:Ignorable="d"> <Grid Background="White"> <my:MyCustomControl /> </Grid> </Page> 

फिर हम एप्लिकेशन 1 शुरू करेंगे:



अब हम अपनी परियोजना शुरू करते हैं और मेट्रो-शैली लोडिंग संकेतक देखते हैं - जिसका अर्थ है कि हमारा घटक चालू है!

एक्सटेंशन SDK बनाएं

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

सबसे पहले, अपनी हार्ड ड्राइव पर निम्न निर्देशिका संरचना बनाएं, जिसमें वह सब कुछ होगा जो आपको हमारे एसडीके के लिए चाहिए:

MySDK
- - 1.0
- - - - संदर्भ \ CommonConfiguration \ neutral \ MyCustomControls.dll
- - - - Redist \ CommonConfiguration \ neutral \ MyCustomControls.pri
- - - - Redist \ CommonConfiguration \ neutral \ MyCustomControls \ Themes \ generic.xaml
- - - - SDKManifest.xml

इस संरचना में, MySDK रूट फ़ोल्डर है जिसमें अन्य सभी SDK फाइलें हैं। इसका कोई भी नाम हो सकता है जो आपके SDK के नाम को दर्शाता हो। 1.0 आपके SDK का संस्करण है।

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

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

SDKManifest.xml फ़ाइल में निम्नलिखित सामग्री होनी चाहिए:

 <?xml version="1.0" encoding="utf-8" ?> <FileList DisplayName="My Custom Controls" ProductFamilyName="My Controls" MinVSVersion="11.0" MinToolsVersion="4.0" CopyRedistToSubDirectory="." AppliesTo="WindowsAppContainer+WindowsXAML+Managed"> <File Reference="MyCustomControls.dll"> <ContainsControls>True</ContainsControls> </File> </FileList> 

यह फ़ाइल उन सभी असेंबली का वर्णन करती है जो संदर्भ फ़ोल्डर में हैं। CopyRedistToSubDirectory पैरामीटर निर्दिष्ट करता है कि Redist फ़ोल्डर की फ़ाइलों को पैकेज की जड़ के सापेक्ष कॉपी किया जाएगा। हम इसे "" के रूप में सेट करते हैं। - इसका मतलब है कि सभी फाइलों को पैकेज की जड़ में कॉपी किया जाएगा।

रजिस्टर एक्सटेंशन एसडीके

अब आप निम्न तरीकों में से एक में अपना एसडीके रजिस्टर कर सकते हैं:

• "% ProgramFiles% \ Microsoft SDKs \ Windows \ v8.0 \ Extension SDKs" फ़ोल्डर में MySDK फ़ोल्डर की प्रतिलिपि बनाएँ
  
• रजिस्ट्री में एक कुंजी जोड़ें, जिसमें हमारे एसडीके का पथ होगा। मैं एक .reg फ़ाइल का उदाहरण दूंगा जो रजिस्ट्री में संबंधित डेटा जोड़ेगी:
  

   REGEDIT4 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\MySDK\1.0] @="C:\\Sources\\MySDK\\1.0" 

  
  

SDK बनाने और पंजीकृत होने के बाद, आप एक नया परीक्षण प्रोजेक्ट बना सकते हैं जैसे Blank App (XAML) ।

उसी समय, हम देखते हैं कि Windows-> एक्सटेंशन्स अनुभाग में MyCustomControls.dll का लिंक जोड़ते समय, MySDK दिखाई देगा।



यह जांचने के लिए कि क्या इस मामले में सब कुछ काम करता है, हम उसी तरह से MainPage.xaml फ़ाइल को संशोधित करते हैं, जैसा कि हमने पिछले परीक्षण उदाहरण में किया था, फिर हम परियोजना को इकट्ठा करते हैं और चलाते हैं - और हम कार्रवाई में अपना लोडिंग संकेतक देखते हैं!

उपयोगी लिंक

अपने एक्सटेंशन एसडीके बनाने के तरीके के बारे में अधिक जानकारी निम्नलिखित लिंक पर पाई जा सकती है:
http://msdn.microsoft.com/library/hh768146(v=VS.110).aspx

यदि आप WinRT के बारे में अधिक जानना चाहते हैं, तो यहां अन्य उपयोगी संसाधनों के लिंक दिए गए हैं:

• विंडोज 8 डेवलपमेंट सेंटर
  msdn.microsoft.com/ru-ru/windows
  
• विंडोज मेट्रो स्टाइल फ़ोरम
  social.msdn.microsoft.com/Forums/en-US/category/windowsapps
  
• विंडोज 8 मेट्रो शैली ऐप के नमूने
  code.msdn.microsoft.com/windowsapps
  
• WinExT सहित .NET प्लेटफ़ॉर्म के लिए DevExpress विज़ुअल घटकों का निर्माता है
  www.devexpress.com