uwp
अनुकूल यूआई

UI लेआउट को बदलने के लिए AdaptiveTrigger का उपयोग करें

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

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

<Border x:Name="item2"
        Background="Aquamarine"
        Width="50"
        Height="50">
    <TextBlock Text="Item 2"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<Border x:Name="item3"
        Background="LightCoral"
        Width="50"
        Height="50">
    <TextBlock Text="Item 3"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
</Border>

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>

        <VisualState x:Name="ultrawide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
                <Setter Target="item1.Width" Value="100" />
                <Setter Target="item1.Height" Value="100" />
                <Setter Target="item2.Width" Value="100" />
                <Setter Target="item2.Height" Value="100" />
                <Setter Target="item3.Width" Value="100" />
                <Setter Target="item3.Height" Value="100" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="wide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600" />
            </VisualState.StateTriggers>

            <VisualState.Setters>
                <Setter Target="mainPanel.Orientation" Value="Horizontal" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="narrow" />
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

जब विंडो का आकार बदला जाता है, तो सिस्टम AdaptiveTrigger से न्यूनतम चौड़ाई के साथ वर्तमान विंडो की चौड़ाई की तुलना करेगा। यदि वर्तमान चौड़ाई न्यूनतम चौड़ाई से अधिक या बराबर है, तो ट्रिगर सक्रिय हो जाएगा और संबंधित VisualState प्रदर्शित किया जा रहा है।

यहाँ विभिन्न राज्यों के लिए आउटपुट है

संकीर्ण

चौड़ा

ultrawide