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, Jun 30 '17 at 14:23
Grid is not the name of my grid. I've been using "Container", so Container.HorizontalAlignment for example. — K.Devillier, Jun 30 '17 at 19:06
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, Jun 30 '17 at 19:06

score 0 · Accepted Answer · answered Jun 30 '17 at 22:04

0

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.

answered Jun 30 '17 at 22:04

Justin XL

38,763
7
88
133

I will try that, thank you. I remember now that the nesting is sometimes really strange. Would you have any idea why visual states are not working when the visualstatemanager is placed inside of a Pivot DataTemplate? I've done it with listviews with no problem, but it's acting funky in the pivot. – K.Devillier Jul 01 '17 at 22:54
You will need to wrap what's in your data template in a `UserControl`. Please see my answer [here](https://stackoverflow.com/questions/32088500/adaptivetrigger-and-datatemplate). – Justin XL Jul 01 '17 at 22:55
Ok, so I tried as you suggested and originally it threw an exception. I tried your second method and it seems to be working. The code that it auto writes is: `` – K.Devillier Jul 01 '17 at 23:31
I'll also try the UserControl, thanks for the advice! – K.Devillier Jul 01 '17 at 23:32
That's because the type of your control is not a `Grid` as you mentioned in your question. :) And Yes, `FrameworkElement` will work too. If you think this helps you, consider marking it as the answer. – Justin XL Jul 01 '17 at 23:34
I think there may have been miscommunication on my part, apologies. The control "Container" is a Grid, but either way you lead me to the answer so I am grateful. Can I use the method you described to also modify the width of ColumnDefinitions? I can't seem to find that option using the States/Object&Timeline tabs – K.Devillier Jul 01 '17 at 23:55
Hmm that's weird. Because if it's a Grid then it should just work as Grid inherits from FE. I also use this piece of code in my project. Regarding column definitions I believe it can be code generated too but I will need to test it out. Will let you know. – Justin XL Jul 02 '17 at 00:07
Hmm... Looks like you can change the column/row definitions on the Properties of the Blend Designer, but the value is not recorded in the timeline. So you will have to manually write it unfortunately. – Justin XL Jul 02 '17 at 03:03
Came across something strange. I tried to use the automatic method to modify the Horizontal/Verticle alignments just as I did in a test project. For whatever reason, when I go into the Grid's properties, it's not adding the Setter, but instead modifying the actual initial properties. When I tried to do it manually as I did before (which had worked), I get an exception stating that it can't find the property. – K.Devillier Jul 03 '17 at 13:49
I suspect this is a VS/ Blend bug. Maybe try restarting your VS/Blend. – Justin XL Jul 03 '17 at 13:51
1

Agreed, most likely a bug. If I find a definite fix to it, I will be sure to update this thread. Thank you again for your help. – K.Devillier Jul 03 '17 at 20:02

UWP Change Grid.HorizontalAlignment to stretch/left using VisualStateManager

1 Answers1