VisualState AdaptiveTrigger MinWindowWidth=2160 doesn't work

Question

AdaptiveTrigger with MinWindowWidth=2160 doesn't seems to work. I need it to handle Microsoft Surface Pro 3 screen resolution (2160x1440).

Look at this simple code below:

<Page
    x:Class="TestUWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestUWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="2160" d:DesignHeight="1440">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="2160" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="brdMain.Background" Value="#bbbbbb"></Setter>
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="brdMain.Background" Value="#303030"></Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="brdMain">
            <TextBlock Text="Testing"></TextBlock>
        </Border>
    </Grid>
</Page>

You will see, the background colour is always black (#303030). Is there a maximum Width that VisualState can handle? Any idea?

Thanks

Answer 1

I think your sizing might be off. Have you tried any others?

According to the Official MSDN Screen Sizes and Layouts Documentation these are the sizes that you want to use

The reason you probably don't want the exact screen size is because what's stopping someone from adjusting it down a little or up a little?

Personally, for more complex layouts, I prefer to create separate views for each size. It gives me more control over the layout. Here's how I use it.

In a static application level class I have.

    public enum DeviceType
    {
        Desktop = 0,
        Phablet = 1,
        Mobile = 2
    }      

    public static DeviceType CurrentDevice
    {
        get
        {
            ApplicationView view = ApplicationView.GetForCurrentView();
            Rect rect = view.VisibleBounds;

            if (rect.Width >= 1024)
            {
                return DeviceType.Desktop;
            }
            else if (rect.Width >= 720)
            {
                return DeviceType.Phablet;
            }
            else
            {
                return DeviceType.Mobile;
            }
        }
    }

Then in my control I just access my static class in my Static Constructor. If I am a mobile device I load a mobile DefaultStyleKey. If I am desktop then I load a DesktopDefaultStyleKey.

    DeviceType device = ApplicationServices.CurrentDevice;

    switch (device)
    {
       case (DeviceType.Desktop):
            YoutubeVideosPresenter.Content = new YouTubeVideosLayoutDesktop();
            break;
       case (DeviceType.Mobile):
            YoutubeVideosPresenter.Content = new YouTubeVideosLayoutMobile();
            break;
     }         

Of course this is not very "adaptive" if someone manipulates the window width. You can easily get past this though by checking to see if the window width has changed and then your style can easily be switched out.

Answer 2

You have to remember that measurements in UWP are done in effective pixels (epx). See MSDN. Surface Pro 3, like other Surface tablets, has HiDPI display and a default scale factor greater than 1 which means that its effective pixel resolution is smaller than 2160x1440 even though that is its native resolution.

The SP3's default scale factor is 150%, resulting in an epx resolution of 1440x960. So even if you maximize your window, the window width is only at most 1440 epx, which means the MinWindowWidth="2160" state trigger will never fire on an SP3 with default settings.

If you want your state trigger to fire only on tablets with HiDPI displays and/or a certain native resolution, you will probably need to implement a custom state trigger that detects all of these conditions. How you do this is beyond the scope of this question.