The Visual State Manager can be configured to change the properties of UI controls when aspects of the UI are triggered. This blog completes the SQLite UA app by resizing the command buttons when the app runs on a small screen such as a Windows 10 phone. In this case we need to trigger a change in button width when the screen width is reduced beyond a certain size. By trial and error I found for my Win 10 Lumia 930 phone in portrait mode the trigger is 640 pixels.

The code for this project has been added to the IOT Samples Codeplex project: https://iotsampler.codeplex.com/

Visual State Manger 101

A Visual State Manager has a number of Visual States.  Each state has an Adaptive Trigger and  one or more Setters.

The Visual State refers to the collection of UI elements impacted by a trigger.

An Adapter Trigger is the event or condition that can trigger the change to the UI elements in the Visual State. It defines when a state is applied.
The two Adaptive Triggers are MinWidowWidth and MinWindowHeight.
The state is entered if the value is anything above that value.
eg For the example below, the state is entered when the screen width for the containing element (in our case the grid) is 640 pixels or greater.
NOTE: The pixels are Effective Pixels.This means that you you don’t need to worry about scaling between devices. Don’t worry about DPI.
You get a consistent feel across all devices,

A Setter lists a UI property and the value to which it is set for the state in which it is encompassed..

Adaptive Triggers remove the need for code behind for UI state transitions. The state changes can be specified in XAML code instead.

In the XAML code that follows, the Adaptive Trigger and Setter are highlighted for a Visual State:

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="wideView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger  MinWindowWidth="640" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="button21.Width" Value="150"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="AnotherVS">
                    ,,,,
                </VisualState>
                <VisualState x:Name="YetAnotherVS">
                    ,,,,
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

More from Channel9: https://channel9.msdn.com/Series/Developers-Guide-to-Windows-10-Preview/09

• Create the project as per the second previous blog: Win 10 IoT- Universal App – SQLite Database- Part 2 “A Universal App”
• Add the functional code as the previous blog: .Win 10 IoT- Universal App – SQLite Database- Part 3 “UA Functional Code”
• Modify the XAML so the app will fit on a Win 10 phone as follows:

1. Add the following Visual State Manager settings to the <Grid> control in MainPage.xaml

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="narrowView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
		      ...
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="wideView">
                    <VisualState.Setters>
		       ...                   
                   </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

The first set of UI settings (to be placed in the first ,,, sequence) applies to the smaller screens and the second sequence applies to larger screens.

The width of the button is set to 200 for larger screens and to 100 for smaller screens.

2. Replace the first … sequence with the smaller width settings:

                        <Setter Target="button21.Width" Value="100"/>
                        <Setter Target="button22.Width" Value="100"/>
                        <Setter Target="button23.Width" Value="100"/>
                        <Setter Target="button41.Width" Value="100"/>
                        <Setter Target="button42.Width" Value="100"/>
                        <Setter Target="button43.Width" Value="100"/>
                        <Setter Target="button61.Width" Value="100"/>
                        <Setter Target="button62.Width" Value="100"/>
                        <Setter Target="button63.Width" Value="100"/>
                        <Setter Target="button71.Width" Value="100"/>
                        <Setter Target="button81.Width" Value="100"/>
                        <Setter Target="textBoxTableName.Width" Value="100"/>                     
                        <Setter Target="button82.Width" Value="100"/>
                        <Setter Target="button91.Width" Value="100"/>
                        <Setter Target="button92.Width" Value="100"/>
                        <Setter Target="button93.Width" Value="100"/>
                        <Setter Target="textBoxQueryBeginsWith.Width" Value="120"/>

3. And replace the second ... sequence with the larger width settings:

                        <Setter Target="button21.Width" Value="200"/>
                        <Setter Target="button22.Width" Value="200"/>
                        <Setter Target="button23.Width" Value="200"/>
                        <Setter Target="button41.Width" Value="200"/>
                        <Setter Target="button42.Width" Value="200"/>
                        <Setter Target="button43.Width" Value="200"/>
                        <Setter Target="button61.Width" Value="200"/>
                        <Setter Target="button62.Width" Value="200"/>
                        <Setter Target="button63.Width" Value="200"/>
                        <Setter Target="button71.Width" Value="200"/>
                        <Setter Target="button81.Width" Value="200"/>
                        <Setter Target="textBoxTableName.Width" Value="200"/>
                        <Setter Target="button82.Width" Value="200"/>
                        <Setter Target="button91.Width" Value="200"/>
                        <Setter Target="button92.Width" Value="200"/>
                        <Setter Target="button93.Width" Value="200"/>
                        <Setter Target="textBoxQueryBeginsWith.Width" Value="320"/> 

4. Build and test the app.

Enjoy

Large Screen on desktop

Smaller Screen on desktop.

The app on a Windows 10 phone (Lumia 930) in portrait mode.

The app on a Windows 10 phone (Lumia 930) in landscape mode.
PS It needs some vertical scrolling.

Please give feedback, especially if you can improve the code.