UWP Change Grid.HorizontalAlignment to stretch/left using VisualStateManager

Question

I'm having trouble getting the visual state manager to correctly change the HorizontalAlignment/VerticleAlignment of the main grid of my application.

For screen sizes that would be used on phone, I want the HorizontalAlignment/ VerticleAlignment to stretch, with Height/Width set to Auto.

For Desktop it should be Left/Top with Height/Width set to a specific size. For whatever reason when I try to mess with the alignment it acts quirky and does not do what I want

Here is an example of what I have tried:

  <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="PhoneView">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Grid.HorizontalAlignment" Value="Stretch"/>
                    <Setter Target="Grid.VerticleAlignment" Value="Stretch"/>
                    <Setter Target="Grid.Height" Value="Auto"/>
                    <Setter Target="Grid.Width" Value="Auto"/>
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="DesktopSmall">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1920"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Grid.HorizontalAlignment" Value="Left"/>
                    <Setter Target="Grid.VerticleAlignment" Value="Top"/>
                    <Setter Target="Grid.Height" Value="1280"/>
                    <Setter Target="Grid.Width" Value="1920"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

Another issue is when I try to set the max resolution to 1920x1280, if I manually set the height/width of the Grid, the Windows TaskBar (the OS taskbar, not the applications app bar/command bar) cuts off part of my application. I don't want to set the alignments to stretch, because I'm trying to limit the real time stretching of the view.

Thanks! Let me know if more details are needed.

Is Grid is your name of your Grid? If yes then change it to a different name. If no then Use Grid name instead of Grid. — Vijay Nirmal
Grid is not the name of my grid. I've been using "Container", so Container.HorizontalAlignment for example. — K.Devillier
I used grid as a placeholder in this example only, so it would be clear that it was a grid I was using. — K.Devillier

Justin XL Justin XL · Accepted Answer · 2017-06-30T22:04:45

It should write like this -

<Setter Target="Container.(Grid.HorizontalAlignment)" Value="Left" />
<Setter Target="Container.(Grid.VerticalAlignment)" Value="Top" />

I have some tips here for creating visual state setters without writing a single line of code.

UWP Change Grid.HorizontalAlignment to stretch/left using VisualStateManager

1 Answers