How do I let my controls snap to grid in the designer?

Question

I'm wondering, when I first created my app I was able to "stick" my views to grid columns and pane borders with the red indicator.

Red snapping indicator

But now it totally disappeared, tried to totally reset visual studio using this How do I truly reset every setting in Visual Studio 2012?.

But nothing revert back to this great tool, now I'm stuck, can't do anything responsive without that...

I tried to create a new blank page in my solution = not working
I tried to create another complete blank solution and snap red grid seems to works

Code that fails to snap:

<Page x:Name="StartPAge" NavigationCacheMode="Enabled"
    x:Class="WPStats.Start"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WPStats"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Transitions>
        <TransitionCollection>
            <EdgeUIThemeTransition Edge="Left" />
        </TransitionCollection>
    </Page.Transitions>
    <StackPanel HorizontalAlignment="Left" Height="977" VerticalAlignment="Top" Width="1513" Background="#FFCECECE" Margin="0,0,-13,0">
        <Button Click="ButtonNext_Click" Content="Homepage" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        <Rectangle Height="100" Margin="575,0,-0.36,0"/>
        <Button Click="Check_if_dataentered" Content="check data" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        <StackPanel>
            <TextBlock Text="What's your name?"/>
            <StackPanel Orientation="Horizontal" Margin="0,20,0,20">

                <TextBox x:Name="nameInput"
                     Header="Enter your website domain :" PlaceholderText="https://yourdomain.com"
                     Width="300" HorizontalAlignment="Left"/>

                <Button Content="Connect" Click="SendInputButton"/>
            </StackPanel>
            <TextBlock x:Name="greetingOutput"/>
            <Button x:Name="RESET" Content="RESET" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="RESET_Click"/>
        </StackPanel>

    </StackPanel>
</Page>

Hi of course : https://pastebin.com/HWabLsLN but like I said the "snap to grid" only works when I create another project so all the xaml in my current project don't work. Do you think that some nugget extension can cause that ? — RZ Wuronz, Nov 04 '17 at 01:02

score 0 · Answer 1 · answered Nov 04 '17 at 01:17

The answer is pretty simple if you look at the code that doesn't want to snap to the grid: you are no longer using a Grid, but a StackPanel. All controls within a StackPanel stack on top of each other (or horizontally if you change the direction).

Change the outer StackPanel to Grid and you'll see that you can snap your Homepage button again. Same goes for controls in the inner StackPanel: you'll be able to snap the complete StackPanel, if you want control per control: drop the inner StackPanel.

Bonus: Personally I write everything in XAML and look at the designer to see if it's placed correctly, this will result in cleaner XAML than dragging the items on the design surface. You might also loose part of the responsive nature of UWP when dragging on the design surface because some Margins being set. It's something you might not always want. Then you can correctly use the StackPanel for layout purposes or use Grid rows and columns and even make it responsive.

Bonus 2: If you want a really responsive UI, look at the RelativePanel control.

Thanks for you answer Bart but look I created an blank page with simple xaml https://i.imgur.com/brBtd6R.png while my left click hold on the view — RZ Wuronz, Nov 04 '17 at 01:35
I made you a movie with the very basic xaml layout https://i.gyazo.com/49cca6c71736fa413fb28b047089cb47.mp4 — RZ Wuronz, Nov 04 '17 at 01:40

score 0 · Accepted Answer · answered Nov 04 '17 at 03:01

0

Okay finally have the answer

I downgraded the target build to 15063 as suggested here and snaplines are now working fine

https://developercommunity.visualstudio.com/content/problem/132205/snaplines-not-showing.html

I hope it will helps !

answered Nov 04 '17 at 03:01

RZ Wuronz

11
1
3

How do I let my controls snap to grid in the designer?

2 Answers2