new visualstate in [template10]

Question

How can I modify the criteria for the default visual states in template 10?

I would like to be able to distinguish between landscape mode on a phone versus a window on a PC or tablet.

NormalMinWidth is triggered by putting a phone in landscape mode. The issue is that the phone screen height in landscape mode is likely much less than a tablet or pc.

I would like to be able to have a different layout for NormalMinWidth on a phone versus a pc or tablet. For example I would like to add another visual state NormalMinWidthMinHeight that looks for a min screen height.

Any suggestions would be much appreciated.

Xie Steven Xie Steven · Accepted Answer · 2017-02-01T06:27:32

You would need to implement code which allows to change the state dynamically.

For example, if you are going to change the state based on current view's orientation. You need to implement event handler for OrientationChanged event and use GoToState method of VisualStateManager class.

Please refer to the following code sample for reference:

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveVisualStateGroup">

            <VisualState x:Name="VisualMinWidthHeight">
                <VisualState.Setters>
                    <Setter Target="stateTextBox.Text" Value="Visual Min Width Height" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="stateTextBox" Text="Current Visual State" />

DisplayInformation.GetForCurrentView().OrientationChanged += MainPage_OrientationChanged;

private void MainPage_OrientationChanged(DisplayInformation info, object args)
{
    Debug.WriteLine("orientation: " + info.CurrentOrientation);
    if (info.CurrentOrientation == DisplayOrientations.LandscapeFlipped || info.CurrentOrientation == DisplayOrientations.Landscape)
    {
        VisualStateManager.GoToState(this, "VisualMinWidthHeight", true);
    }
}

new visualstate in [template10]

1 Answers