[UWP Development] Adaptive using VisualStateManager ---- (Learning Notes 2020.3.11)

VisualStateManager is translated directly into Visual State Manager, such as Name, which controls the visual state of the current page control. Specifically, it controls the visual properties of the control such as color and location so that they can change under specific circumstances, such as by setting the MinWindowWidth property in the AdaptiveTrigger in VisualStateManager.The effect of changing the background color of the current page at different resolutions is as follows

The code to achieve the effect is as follows

<Page
    x:Class="Adaptive.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Adaptive"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Name="AllPage">
        <TextBlock Text="Welcome" Name="MessageTextBlock" />
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers >
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters >
                        <Setter Target="AllPage.Background" Value="Red"/>
                        <Setter Target="MessageTextBlock.FontSize" Value="35"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers >
                        <AdaptiveTrigger MinWindowWidth="600"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters >
                        <Setter Target="AllPage.Background" Value="Yellow"/>
                        <Setter Target="MessageTextBlock.FontSize" Value="50"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers >
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters >
                        <Setter Target="AllPage.Background" Value="Blue"/>
                        <Setter Target="MessageTextBlock.FontSize" Value="60"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>

From this example, we know that by setting the MinWindowWidth property, the application can change the background color when the application width changes. If the change is not the color, but the control position, does this achieve the adaptive layout function?Then, according to this idea, first divide the page into nine sections using a Grid layout, and then set the MinWindowWidth property so that the control changes at different resolutions. For example, when the width of the A control is less than 800, it is in the first block, but after 800, it is in the second block.The effect is as follows

The implementation code is as follows

<Page
    x:Class="The_Adaptive_App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:The_Adaptive_App"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Name="LayoutRoot">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGrounp">
                <VisualState x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="First.(Grid.Row)" Value="0"/>
                        <Setter Target="First.(Grid.Column)" Value="0"/>
                        <Setter Target="Second.(Grid.Row)" Value="0"/>
                        <Setter Target="Second.(Grid.Column)" Value="1"/>
                        <Setter Target="Third.(Grid.Row)" Value="0"/>
                        <Setter Target="Third.(Grid.Column)" Value="2"/>
                        <Setter Target="First.(Grid.ColumnSpan)" Value="1"/>
                        <Setter Target="Second.(Grid.ColumnSpan)" Value="1"/>
                        <Setter Target="Third.(Grid.ColumnSpan)" Value="1"/>
                        

                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="First.(Grid.Row)" Value="0"/>
                        <Setter Target="First.(Grid.Column)" Value="0"/>
                        <Setter Target="Second.(Grid.Row)" Value="1"/>
                        <Setter Target="Second.(Grid.Column)" Value="0"/>
                        <Setter Target="Third.(Grid.Row)" Value="2"/>
                        <Setter Target="Third.(Grid.Column)" Value="0"/>
                        <Setter Target="First.(Grid.ColumnSpan)" Value="3"/>
                        <Setter Target="Second.(Grid.ColumnSpan)" Value="3"/>
                        <Setter Target="Third.(Grid.ColumnSpan)" Value="3"/>

                    </VisualState.Setters>
                </VisualState>
                
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
  
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>
        <ScrollViewer Grid.Row="1">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="First" Margin="20,20,0,0">
                    <Image Source="Assets/Tibbles.jpg" HorizontalAlignment="Left"/>
                    <TextBlock>This is some information about Mr. Tibbles.</TextBlock>
                </StackPanel>
                <StackPanel x:Name="Second" Grid.Row="1" Margin="20,20,0,0">
                    <TextBlock TextWrapping="Wrap">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Cras id orci iaculis, aliquet nibh at, dictum lorem. Vivamus 
                        tempus tristique sollicitudin. Etiam interdum et lectus 
                        semper molestie. Phasellus lobortis felis quis risus posuere, 
                        id molestie mi sagittis. Cras odio leo, dictum vitae euismod et, 
                        lacinia non lectus. Integer quis massa velit. Ut at dui 
                        rutrum, venenatis dui a, pretium arcu. Nunc eu urna pulvinar, 
                        condimentum sapien non, consectetur turpis. Pellentesque dapibus, 
                        eros ac rutrum congue, quam dolor rhoncus nunc, ut sagittis nisl 
                        urna in ante. Sed nunc libero, aliquet at elit eget, vulputate 
                        ultrices leo. Aliquam vel sapien varius, blandit dui ac, 
                        fringilla metus. Lorem ipsum dolor sit amet, consectetur 
                        adipiscing elit. Fusce vehicula odio sit amet tortor lobortis 
                        sagittis. Nullam vestibulum tortor eget risus vulputate, at 
                        semper nunc pharetra. Nullam fringilla dapibus turpis non 
                        vehicula. Proin sollicitudin sapien enim, at interdum risus 
                        cursus quis.
                    </TextBlock>
                </StackPanel>
                <StackPanel x:Name="Third" Grid.Row="2" Margin="20,20,0,0">
                    <TextBlock TextWrapping="Wrap">
                        Nam sollicitudin justo quis consequat molestie. Etiam dictum 
                        sodales tellus, ut consectetur magna sodales in. Phasellus viverra 
                        volutpat porttitor. Pellentesque sed condimentum neque. In 
                        ultrices ex ac lacus tincidunt, eget euismod urna cursus. Donec tempor 
                        mauris leo, ac cursus nisl tempus a. Aliquam dignissim eleifend lorem a 
                        facilisis. Praesent tincidunt semper ante non ornare. Cras eleifend 
                        eros et tincidunt auctor. Duis lorem nunc, dictum dignissim est vitae, 
                        luctus dapibus lacus. Donec fringilla ipsum nec diam sagittis, 
                        nec suscipit metus maximus. Aliquam aliquam non ante tincidunt 
                        fringilla. Phasellus auctor, nisl non rutrum imperdiet, arcu
                        purus pretium libero, nec eleifend metus turpis vel ante. Phasellus 
                        sit amet rhoncus lectus.
                    </TextBlock>

                </StackPanel>
            </Grid>
        </ScrollViewer>
        
    </Grid>
</Page>

31 original articles published, 0 praised, 786 visits
Private letter follow

Tags: less

Posted on Tue, 10 Mar 2020 21:06:03 -0400 by tom2oo8