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.

Answer 1

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.