Win10 development: responsive Layout-AdaptiveTrigger and responsive layout Development

Win10 development: responsive Layout-AdaptiveTrigger and responsive layout Development

 

Kids shoes that have been familiar with Windows 10 already know that the Universal app can run not only on PCs, but also on mobile or other platforms. This will inevitably bring about a problem: how to adapt the layout of different screens. Therefore, Microsoft provides a responsive layout to adapt the UI to different window sizes through triggers.

First, construct the UI. The xaml code is as follows:

        <StackPanel x:Name="contentPanel" Margin="8,32,0,0">            <TextBlock Text="Hello, world!" Margin="0,0,0,40"/>            <TextBlock Text="What's your name?"/>            <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">                <TextBox x:Name="nameInput" Width="280" HorizontalAlignment="Left"/>                <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>            </StackPanel>            <TextBlock x:Name="greetingOutput"/>        </StackPanel>

The UI looks like this:

Next, add the following code:

        <VisualStateManager.VisualStateGroups>            <VisualStateGroup>                <VisualState x:Name="pcState">                    <VisualState.StateTriggers>                        <AdaptiveTrigger MinWindowWidth="641" />                    </VisualState.StateTriggers>                </VisualState>                <VisualState x:Name="mobileState">                    <VisualState.StateTriggers>                        <AdaptiveTrigger MinWindowWidth="0" />                    </VisualState.StateTriggers>                    <VisualState.Setters>                        <Setter Target="inputPanel.Orientation" Value="Vertical"/>                        <Setter Target="inputButton.Margin" Value="0,4,0,0"/>                    </VisualState.Setters>                </VisualState>            </VisualStateGroup>        </VisualStateManager.VisualStateGroups>

The VisualState named pcState has an AdaptTrigger and sets its min1_wwidth attribute to 641. This status is applied when the window width is no less than the minimum value of 641 pixels. In this example, no Setter object is defined for this state, so it applies the layout property defined in XAML to the page content.

NamepcStateThe second VisualState has an AdaptTrigger, and its min1_wwidth attribute is set to 0. This status is applied when the window width is greater than 0 and less than 641 pixels. (When the value is equal to 641 pixels, the application pcState.) In this status, define some Setter objects to change the layout attributes of the controls in the UI.

Then we will see this effect.

When the window is greater than 0 and less than 641, the UI elements change, so that we can easily adapt different UIS to different screens.

Is it easy? :)