UWP-Win10- Working with Adaptive triggers

4 בAugust 2016

אין תגובות

One of the new features while developing for Universal Apps is Adaptive UI,
Having thinking of cross devices, we should never build a fixed UI, consider big PC Laptops, Tablets or even smartphone,
It is very easy actually, just register to main window size changed and manage the layout state according to current MainWindow size -*

First observe the next image:

image

in general this is a wide screen state.
Than observe that image:

image

In general it is a narrow state.
So, what we have here is a simple technic which required some practices to make the best from it,
The UI content is simple:

<RelativePanel>

        <ListBox  MinWidth="300" MaxWidth="600"  Name="list" >

            <ListBoxItem>Hello</ListBoxItem>

            <ListBoxItem>World</ListBoxItem>

            <ListBoxItem>Again</ListBoxItem>

         </ListBox>


     <Ellipse Fill="Green" Height="100" Width="100" Name="greenItem"

RelativePanel.AlignHorizontalCenterWithPanel=“True” />

</RelativePanel>


It’s a relative panel of Win10 with some list and Ellipse,
Now we want to manipulate its location according to Window available size.

Than,
In your root panel define as following:

<VisualStateManager.VisualStateGroups>

            <VisualStateGroup>

                <VisualState>

                    <VisualState.StateTriggers>

                        <AdaptiveTrigger MinWindowWidth="450" />

                    </VisualState.StateTriggers>

                    <VisualState.Setters>

                        <Setter Target="greenItem.(RelativePanel.Below)" Value="list"/>

                    </VisualState.Setters>

                </VisualState>


                <VisualState>

                    <VisualState.StateTriggers>

                        <AdaptiveTrigger MinWindowWidth="720" />

                    </VisualState.StateTriggers>

                    <VisualState.Setters>

                        <Setter Target="greenItem.(RelativePanel.RightOf)" Value="list"/>

                    </VisualState.Setters>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

We have here simple mechanism of manage states, Win10-UWP provide new trigger called AdaptiveTrigger who automatically register itself to mainWindow size and can manipulate almost anything on the UI  using Element Name.
So, the most important part is under the Setter there we repositioning elements.

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *