2012-06-11 5 views
8

आइए कहें कि मेरे पास प्रत्येक पंक्ति के अंदर 2 पंक्तियों, 2 कॉलम और कई नियंत्रण वाले ग्रिड हैं।अभिविन्यास परिवर्तनों का पता लगाने और लेआउट बदलने के लिए कैसे?

जब एप्लिकेशन स्नैप मोड में बदला जाता है, तो मेरा मतलब है कि स्क्रीन का 1/3 मैं चाहता हूं कि एप्लिकेशन केवल एक कॉलम, 2 पंक्तियां हों और केवल कुछ नियंत्रण दिखाएं जो मैं तय करूंगा।

इसके लिए मेरे पास किस प्रकार का नियंत्रण है?

THX

उत्तर

8

आप XAML में VisualStateManager का उपयोग करना चाहिए एक पूर्ण XAML समाधान के लिए:

<Grid x:Name="LayoutRoot"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="OrientationStates"> 
      <VisualState x:Name="Full"/> 
      <VisualState x:Name="Fill"/> 
      <VisualState x:Name="Portrait"/> 
      <VisualState x:Name="Snapped"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid> 

प्रत्येक VisualState और अपने XAML में छिपाने/शो तत्वों के लिए स्टोरीबोर्ड बनाएँ। माइक्रोसॉफ्ट उदाहरण एक ही समाधान का उपयोग करते हैं।

-

अद्यतन

मैं शुद्ध खोज की है और उचित राज्यों पाया, एक उदाहरण के लिए इस लिंक के पीछे है: MSDN

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup x:Name="ApplicationViewStates"> 
     <VisualState x:Name="FullScreenLandscape"/> 
     <VisualState x:Name="Filled"/> 
     <VisualState x:Name="FullScreenPortrait"/> 
     <VisualState x:Name="Snapped"/> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups> 

राज्य ApplicationViewState enum को दर्शाते हैं। यहां तक ​​कि अधिक जानकारी here मिल सकती है।

+0

आप कृपया विस्तार से बताएं कर सकते हैं आपकी मदद के साथ, आपकी सहायता से मुझे यह लिंक मिल सकता है, http://www.markermetro.com/2011/11/technical/windows-8-metro-style-apps-layout-and-orientation-management-with- xaml /, तो इसका मतलब है कि मुझे प्रत्येक दृश्य स्थिति के लिए एक अलग लेआउट लिखना है, और राज्य के आधार पर सही नियंत्रण में प्रत्येक अभिविन्यास परिवर्तन पर डेटा को दोबारा जोड़ना है? –

+0

हां!यह वास्तव में सबसे अच्छा होगा, केवल xaml, समाधान afaik। आप कुछ चालाक स्टोरीबोर्ड के साथ अपने कुछ तत्वों का पुन: उपयोग कर सकते हैं, लेकिन आपको ज्यादातर अलग-अलग लेआउट बनाना होगा। यदि आप ऐसा करते हैं तो उन्हें अलग-अलग UserControls या Views में स्थानांतरित करना और उनको शामिल करना बुद्धिमान हो सकता है। – Kolky

+0

क्षमा करें, मैं थोड़ा संकीर्ण दिमाग था। माइक्रोसॉफ्ट ने एक बेस पेज क्लास बनाया जो इन विजुअलस्टेट्स का समर्थन करता है। मैंने अपनी पोस्ट को एक और अधिक उपयोग करने योग्य उदाहरण के साथ अपडेट किया ... – Kolky

8

DisplayProperties.OrientationChanged -Event पर एक नज़र डालें। जब यह आग लगती है तो आप अपने ग्रिड को संशोधित कर सकते हैं और अपने नियंत्रण को पुनर्व्यवस्थित कर सकते हैं।

9

इस घटना के लिए टिप्पणी अनुभाग पर विचार DisplayProperties.OrientationChanged घटना का उपयोग करना (के रूप में @Jan लालकृष्ण ने सुझाव दिया) किया जा वास्तव में क्या आप देख रहे हैं नहीं हो सकता है,:

घटना DisplayProperties.OrientationChanged केवल जब होता है प्रदर्शन या मॉनिटर परिवर्तनों का अभिविन्यास और जरूरी नहीं जब आपके ऐप का अभिविन्यास बदल जाता है। लेआउट उद्देश्यों के लिए अपने ऐप के अभिविन्यास को निर्धारित करने के लिए, ApplicationView.Value संपत्ति का उपयोग करें।

लेकिन ApplicationView.Value के बाद से शायद Windows 8.1 रिहाई एमएस ApplicationView.GetForCurrentView (उपयोग करने के लिए सुझाव है के बाद त्याग दिया हो जाएगा) बजाय:

ApplicationView स्थिर तरीकों विंडोज के बाद रिलीज के लिए या बदला जा सकता है अनुपलब्ध 8.1 पूर्वावलोकन। इसके बजाय, अनुप्रयोग दृश्य का उदाहरण प्राप्त करने के लिए ApplicationView.GetForCurrentView() का उपयोग करें।

अब के लिए

तो मैं कर लिया है कि कोड (गतिशील दृश्य का एक प्रकार है और न VisualStateManager के माध्यम से XAML में पहले से डिज़ाइन कर सकते हैं सब कुछ, दुर्भाग्य से) के साथ अंत:

public MainPage() 
{ 
    InitializeComponent(); 
    Window.Current.SizeChanged += (sender, args) => 
    { 
     ApplicationView currentView = ApplicationView.GetForCurrentView(); 

     if (currentView.Orientation == ApplicationViewOrientation.Landscape) 
     { 
      // when args.Size.Width > args.Size.Height 
     } 
     else if (currentView.Orientation == ApplicationViewOrientation.Portrait) 
     { 
      // when args.Size.Width < args.Size.Height 
     } 
    }; 
}