XAML / C # पर विंडोज 8.1 अनुप्रयोगों का विकास। भाग 3. टूलबार

विंडोज 8.1 अनुप्रयोगों में टूलबार बनाने के लिए डेवलपर को नई संभावनाएं प्रदान करता है। हम इन संभावनाओं पर विचार करेंगे और पिछले लेख से आवेदन के लिए एक नेविगेशन बार और एक एक्शन बार बनाएंगे।

अनुप्रयोगों में टूलबार (AppBar) को स्क्रीन के ऊपर और नीचे रखा जा सकता है। इसका एक क्लासिक उदाहरण विंडोज स्टोर हो सकता है।



ऊपरी नेविगेशन बार में श्रेणियों की एक सूची होती है और इसका उपयोग एप्लिकेशन को नेविगेट करने के लिए किया जाता है।
निचले फलक में ऐसी क्रियाएं होती हैं जो उस विशेष पृष्ठ या हाइलाइट की गई आइटम के लिए प्रासंगिक होती हैं।

हम सिद्धांत में तल्लीन नहीं करेंगे और आवेदन में केवल पैनल जोड़ने का प्रयास करेंगे।

एप्लिकेशन नेविगेशन बार (TopAppBar)

आसान नेविगेशन

आइए एक नेविगेशन बार बनाएं जो एप्लिकेशन स्क्रीन के शीर्ष पर स्थित होगा और इसमें दो बटन होंगे:

• मुख्य पृष्ठ पर लौटें;
• शॉपिंग कार्ट पर जाएं।

आइए कार्यान्वयन के लिए आगे बढ़ें:
1. Visual Studio 2012 में पिछले लेख से एप्लिकेशन खोलें या एक नया बनाएं।
2. सोल्यूशन एक्सप्लोरर में, हबपेज.एक्सएम्एल मुख्य स्क्रीन खोलें और पेज टैग के अंदर निम्न कोड जोड़ें:

<Page.TopAppBar> <AppBar> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> </Grid.ColumnDefinitions> <AppBarButton x:Name="HomeAppBarButton" Grid.Column="0" Icon="Home" Label=" " Click="HomeAppBarButton_Click" /> <AppBarButton x:Name="ShoppingCartAppBarButton" Grid.Column="1" Icon="Shop" Label="" Click="ShoppingCartAppBarButton_Click" /> </Grid> </AppBar> </Page.TopAppBar> 

हमारे पैनल में एक टेबल और दो AppBarButton बटन हैं। AppBarButton एक बटन वंशज है जो टूलबार के लिए बनाया गया है।
उदाहरण के लिए, इस बटन में एक चिह्न के रूप में चयन करने की क्षमता है, मानक सेट से एक सुंदर आइकन:



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

3. मुख्य स्क्रीन पर स्विच करने के लिए बटन के लिए HomeAppBarButton_Click इवेंट हैंडलर में निम्न कोड जोड़ें:

 private void HomeAppBarButton_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(HubPage)); } 

4. एप्लिकेशन लॉन्च करें।
5. उनके काम का परिणाम आप तस्वीर में देख सकते हैं।



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

• स्क्रीन पर कहीं भी राइट-क्लिक करें (यदि आप माउस का उपयोग करते हैं)।
• ऊपर से नीचे की ओर स्वाइप करें (यदि टच डिवाइस का उपयोग कर रहे हैं)।

अनुभाग नेविगेशन

वास्तव में, आपको केवल AppBarButton का उपयोग करने की आवश्यकता नहीं है और आप टूलबार पर किसी अन्य नियंत्रण का उपयोग कर सकते हैं।

अब हम पृष्ठ कोड को बदलेंगे और उत्पाद सूची के अनुभागों के माध्यम से नेविगेशन व्यवस्थित करेंगे।

आइए कार्यान्वयन के लिए आगे बढ़ें:
1. सॉल्यूशन एक्सप्लोरर में, हबपेज.एक्सएम्एल मुख्य स्क्रीन को खोलें और पेज की सामग्री को बदलें। TopAppBar टैग:

 <Page.TopAppBar> <AppBar> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="350" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" > <Grid Background="#3D3D3D" > <Grid.ColumnDefinitions> <ColumnDefinition Width="90" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <AppBarButton x:Name="HomeAppBarButton" Grid.Column="0" Icon="Home" Click="HomeAppBarButton_Click" Margin="0,15,0,0" /> <HyperlinkButton x:Name="CategoryButton" Grid.Column="1" Content=" " Click="HomeAppBarButton_Click" Foreground="White" /> </Grid> <GridView x:Name="NavigationGridView" ItemsSource="{Binding NavigationItems}" Background="#616161" BorderBrush="#3D3D3D" BorderThickness="0,1,0,0"> <GridView.ItemTemplate> <DataTemplate> <HyperlinkButton x:Name="NavigationItem" Content="{Binding Title}" Click="NavigationItem_Click" CommandParameter="{Binding UniqueId}" Margin="90,0,26,0" Foreground="White" /> </DataTemplate> </GridView.ItemTemplate> </GridView> </StackPanel> <AppBarButton x:Name="ShoppingCartAppBarButton" Grid.Column="1" Icon="Shop" Label="" Click="ShoppingCartAppBarButton_Click" HorizontalAlignment="Right" /> </Grid> </AppBar> </Page.TopAppBar> 

अब पृष्ठ में एक ग्रिड व्यू टेबल है जो डेटा स्रोत से लिंक प्रदर्शित करता है। डेटा स्रोत भरें और श्रेणी पृष्ठों पर नेविगेशन करें।

2. समाधान एक्सप्लोरर में, HubPage.xaml.cs फ़ाइल खोलें और उत्पाद कैटलॉग के अनुभागों को प्राप्त करने और डेटा स्रोत में भरने के लिए नेविगेशन को प्रारंभ करें Helper_LoadState विधि।

 private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e) { var sampleNavigation = await SampleDataSource.GetGroupsAsync(); this.DefaultViewModel["NavigationItems"] = sampleNavigation; //… } 

3. HubPage.xaml.cs फ़ाइल में , स्वचालित रूप से जनरेट किया गया नेवीगेशन Item_Click विधि खोजें और इसे निम्न कोड से बदलें:

 private void NavigationItem_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(SectionPage), (sender as HyperlinkButton).CommandParameter); } 

4. एप्लिकेशन लॉन्च करें और टूलबार खोलें।



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

एप्लिकेशन एक्शन बार (निचला एपबार)

अब हम एप्लिकेशन के लिए एक एक्शन बार जोड़ेंगे। यह स्क्रीन के नीचे स्थित होगा और इसमें कई बटन होंगे:

• कार्ट में जोड़ें;
• कचरे से निकालें;
• सेटिंग्स;
• पसंदीदा में जोड़ें;
• टाइल के लिए जकड़ना।

आइए कार्यान्वयन के लिए आगे बढ़ें:
1. सॉल्यूशन एक्सप्लोरर में, HubPage.xaml फ़ाइल खोलें।
2. पेज टैग के अंदर पेज के अंत में निम्नलिखित कोड जोड़ें:

 <Page.BottomAppBar > <CommandBar > <CommandBar.PrimaryCommands> <AppBarButton x:Name="AddAppBarButton" IsCompact="True" Label=" " Icon="Add" /> <AppBarButton x:Name="DeleteAppBarButton" IsCompact="True" Label="" Icon="Delete" /> <AppBarSeparator IsCompact="True" /> <AppBarButton x:Name="SettingAppBarButton" IsCompact="True" Label="" Icon="Setting" /> </CommandBar.PrimaryCommands> <CommandBar.SecondaryCommands> <AppBarToggleButton x:Name="FavoriteAppBarButton" IsCompact="True" Label="" Checked="FavoriteAppBarButton_Checked" Unchecked="FavoriteAppBarButton_Unchecked"> <AppBarToggleButton.Icon> <SymbolIcon Symbol="Favorite" /> </AppBarToggleButton.Icon> </AppBarToggleButton> <AppBarButton x:Name="PinAppBarButton" IsCompact="True" Label="  " Icon="Pin" /> </CommandBar.SecondaryCommands> </CommandBar> </Page.BottomAppBar> 

हम बटन जोड़ने के लिए कमांडर को कंटेनर के रूप में उपयोग करते हैं।

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

हम प्राथमिक कार्यों अनुभाग में महत्वपूर्ण कार्य जोड़ते हैं - उन्हें पैनल के दाईं ओर प्रदर्शित किया जाएगा।
द्वितीयक क्रियाएँ - द्वितीयकखंड अनुभाग में - उन्हें पैनल के बाएं भाग में प्रदर्शित किया जाएगा।

क्रियाओं को तार्किक रूप से AppBarSeparator delimiter द्वारा अलग किया जा सकता है ।

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

IsCompact संपत्ति, जिसे हमने सभी तत्वों के लिए निर्दिष्ट किया है, आपको अनावश्यक छिपाने की अनुमति देता है यदि यह स्क्रीन पर फिट नहीं होता है, उदाहरण के लिए, बटन लेबल कम रिज़ॉल्यूशन पर छिपाए जाएंगे।

3. एप्लिकेशन लॉन्च करें।
4. कहीं भी या किसी भी आइटम पर राइट-क्लिक करें।
शीर्ष नेविगेशन बार के अतिरिक्त, स्क्रीन पर क्रियाओं वाला एक पैनल दिखाई देगा।



5. विंडो को एप्लिकेशन के साथ कम करें और देखें कि पैनल कॉम्पैक्ट मोड में कैसे जाता है।



6. "पसंदीदा" बटन पर क्लिक करें और यह अपनी स्थिति को याद रखेगा।

निष्कर्ष

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

भविष्य के लेखों में, हम सरल उदाहरणों के साथ विंडोज 8.1 अनुप्रयोगों के विकास को समझना जारी रखेंगे।

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

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

AppBar नियंत्रण
AppBar के लिए मानक चिह्न सेट
क्विक स्टार्ट गाइड: एप्लीकेशन पैनल बटन जोड़ना