XAML / C # पर विंडोज 8.1 अनुप्रयोगों का विकास। भाग 5. पॉप-अप और पैनल

आज हम विंडोज 8.1 एप्लिकेशन में पॉप-अप, मेनू और पैनल के कार्यान्वयन पर ध्यान केंद्रित करेंगे।

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

विंडोज 8 में, XAML, डेवलपर्स ने पॉपअप नियंत्रण का उपयोग किया और स्वतंत्र रूप से इसके व्यवहार का वर्णन किया। अब इसके लिए सरल तंत्र हैं।

तो, फ्लाईआउट पॉप-अप पैनल ऐसी बुनियादी चीजों के पहले से ही लागू तर्क के साथ नियंत्रण का एक सेट है, जो विंडो को खोलना, और प्रसंस्करण की घटनाओं को बंद करता है।

पॉप-अप और पैनल का उपयोग करने के लिए मुख्य परिदृश्य:
1. सूचना, चेतावनी, पुष्टि ( फ्लाईआउट ) के लिए अनुरोध।
2. पॉप-अप संदर्भ मेनू ( MenuFlyout )।
3. एप्लिकेशन सेटिंग पैनल ( SettingsFlyout )।

अब आइए जानें कि इसे कैसे लागू किया जाए।

हम एक पॉप-अप विंडो लागू करते हैं

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

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

<Button Grid.Row="2" Content="" Margin="0,10,0,0" HorizontalAlignment="Right" > <Button.Flyout > <Flyout > <Grid Width="300"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock Text=" : " Grid.Column="0" /> <TextBlock Text="{Binding Title}" Grid.Column="1" TextWrapping="WrapWholeWords" /> <TextBlock Text=" : " Grid.Row="1" Grid.Column="0" TextWrapping="WrapWholeWords"/> <TextBox x:Name="valueTextBox" Grid.Row="1" Grid.Column="1" /> <TextBlock Text="1 999 ." Grid.Row="2" Grid.Column="1" FontWeight="Bold" /> <StackPanel Grid.Row="3" Grid.Column="1"> <Button x:Name="confirmPurchaseButton" Click="Button_Click" CommandParameter="{Binding UniqueId}"> </Button> </StackPanel> </Grid> </Flyout> </Button.Flyout> </Button> 

4. एप्लिकेशन लॉन्च करें।
जब आप Buy बटन पर क्लिक करेंगे, तो एक पॉप-अप विंडो खुलेगी।



इसके बाद, आप पॉप-अप विंडो की घटनाओं को संभाल सकते हैं और ऑब्जेक्ट की स्थिति के आधार पर कुछ क्रियाएं कर सकते हैं: ओपनिंग , ओपन , क्लोज्ड ।

हम एक पॉपअप मेनू लागू करते हैं

अब चलो एक पॉपअप मेनू जोड़ें। हम इसे नीचे टूलबार में लागू करते हैं, जो हमारे पास पहले से ही आवेदन में है ( भाग 3 देखें । टूलबार )।

1. सॉल्यूशन एक्सप्लोरर में, HubPage.xaml फ़ाइल खोलें।
2. Page.BottomAppBar और SettingAppBarButton खोजें। इसका कोड बदलें:

 <AppBarButton x:Name="SettingAppBarButton" IsCompact="True" Label="" Icon="Setting" > <AppBarButton.Flyout> <MenuFlyout > <MenuFlyoutItem x:Name="SettingAppBarButton1" Text=" " Click="SettingAppBarButton1_Click" /> <MenuFlyoutItem x:Name="SettingAppBarButton2" Text=" " Click="SettingAppBarButton2_Click" /> <MenuFlyoutItem x:Name="SettingAppBarButton3" Text="" Click="SettingAppBarButton3_Click" /> <MenuFlyoutSeparator/> <ToggleMenuFlyoutItem x:Name="SettingAppBarButton4" Text=" " Click="SettingAppBarButton4_Click" /> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> 

3. एप्लिकेशन लॉन्च करें।
4. नीचे टूलबार खोलें।
5. "सेटिंग" बटन पर क्लिक करें। एक पॉपअप मेनू दिखाई देगा।



हमने MenuFlyout नियंत्रण का उपयोग किया, जिसने एक पॉपअप मेनू बनाया।
हमें तीन साधारण MenuFlyoutItem मेनू आइटम मिले हैं , एक विभाजक और एक मेनू आइटम जिसमें दो राज्य हैं, ToggleMenuFlyoutItem चालू और बंद है।



उन सभी के लिए, आप आवश्यक कार्यक्षमता के साथ ईवेंट हैंडलर पर क्लिक कर सकते हैं।

हम सेटिंग्स पैनल को लागू करते हैं

Windows 8.1 ने एक नया SettingsFlyout नियंत्रण पेश किया, जो आपको Windows Store ऐप डेवलपर्स के लिए गाइड के अनुसार सेटिंग्स पैनल बनाने की अनुमति देता है।

प्रत्येक एप्लिकेशन में एक सेटिंग पैनल होता है और स्क्रीन के बाईं ओर दिखाई देता है। डिफ़ॉल्ट रूप से, पैनल इस तरह दिखता है:



आप अपने एप्लिकेशन के लिए आवश्यक सेटिंग्स जोड़कर इसे अनुकूलित कर सकते हैं। उदाहरण के लिए, हम सेटिंग्स में एक प्राधिकरण पृष्ठ जोड़ देंगे।

1. प्रोजेक्ट में एक नई फ़ाइल बनाएं ( जोड़ें / नई आइटम )।
2. फ़ाइल प्रकार सेटिंग फ्लाईआउट का चयन करें और नाम LoginSettingsFlyout.xaml निर्दिष्ट करें।



3. Solution Explorer में, LoginSettingsFlyout.xaml फ़ाइल खोलें। डिफ़ॉल्ट रूप से, पैनल इस तरह दिखेगा:



यदि आप XAML दृश्य को देखते हैं, तो आप देखेंगे कि इस नियंत्रण का उपयोग किसी अन्य नियंत्रण के लिए एक कंटेनर के रूप में किया जाता है और इसके निम्नलिखित विकल्प हैं:

IconSource - एक आइकन।
शीर्षक - पैनल का नाम।
HeaderBackground - पैनल हेडर का बैकग्राउंड कलर।
HeaderForeground - पैनल हेडर का फ़ॉन्ट रंग।

4. निम्नलिखित के साथ LoginSettingsFlyout.xaml फ़ाइल के लिए कोड बदलें:

 <SettingsFlyout x:Class="eShop.LoginSettingsFlyout" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:eShop" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" IconSource="Assets/SmallLogo.png" Title="" d:DesignWidth="346"> <StackPanel x:Name="FlyoutContent"> <TextBlock x:Name="PleaseSignInTextBlock" Text="   ." Style="{StaticResource TitleTextBlockStyle}" TextWrapping="Wrap" /> <TextBox x:Name="UserNameTextBox" Header="" HorizontalAlignment="Left" Margin="0,25,0,0" Width="250" /> <PasswordBox x:Name="PasswordBox" Header="" Width="250" Margin="0,25,0,0" HorizontalAlignment="Left" /> <CheckBox x:Name="SaveCredentialsCheckBox" Content=" " HorizontalAlignment="Left" Margin="0,20,0,0" /> <Button x:Name="SubmitButton" Content="" Click="SubmitButton_Click" Width="280" Margin="0,25,0,0" /> <TextBlock x:Name="ErrorTextBox" Margin="0,10,0,0" TextWrapping="Wrap" Foreground="Red" /> </StackPanel> </SettingsFlyout> 

5. OpenSettingsFlyout.xaml.cs खोलें।
6. SubmitButton_Click इवेंट हैंडलर का पता लगाएँ।
7. पैनल बंद करने के लिए कोड जोड़ें:

 private void SubmitButton_Click(object sender, RoutedEventArgs e) { //  //  this.Hide(); } 

यदि आप अभी एप्लिकेशन चलाते हैं, तो आप पाएंगे कि सेटिंग पैनल में हमारे प्राधिकरण पैनल के लिए कोई संक्रमण नहीं है।

8. App.xaml.cs फ़ाइल खोलें और मानक सेटिंग पैनल से हमारे पैनल में संक्रमण जोड़ने के लिए कोड जोड़ें:

 protected override void OnWindowCreated(WindowCreatedEventArgs args) { SettingsPane.GetForCurrentView().CommandsRequested += (s, e) => { SettingsCommand defaultsCommand = new SettingsCommand("login", "", (handler) => { LoginSettingsFlyout loginFlyout = new LoginSettingsFlyout(); loginFlyout.Show(); }); e.Request.ApplicationCommands.Add(defaultsCommand); }; base.OnWindowCreated(args); } 

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

9. एप्लिकेशन लॉन्च करें।
10. सेटिंग्स पैनल खोलें



11. "प्राधिकरण" सेटिंग पर क्लिक करें। आपको हमारे द्वारा जोड़ा गया एक पैनल दिखाई देगा।

निष्कर्ष

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

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

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

पॉपअप गाइड
आवेदन सेटिंग्स गाइड

इस साल मैं आपको अलविदा कहता हूं। मैं आपको खुश और उत्पादक छुट्टियों की कामना करता हूं।
नव वर्ष और क्रिसमस की शुभकामनाएँ!