Getting familiar with XAML Designer

When you open an XAML page, the Visual Studio 2017 editor opens it in two different views side-by-side within the same screen. These two views are named as Designer View and XAML View. In the designer view, you will be able to design your UI by drag, drop, resize, and so on and on the other side, the XAML view will allow you to write XAML codes directly to create the UI:

Check out the preceding screenshot to have a glimpse on how the Visual Studio loads the XAML page and provides you the option to change the view as follows:

1. Switch to design view: Double-clicking on this icon will change the view to full screen designer view, hiding the XAML editor
2. Swap panes: This will allow you to swap the views, left to right (vertical split) or up to down (horizontal split)
3. Switch to XAML view: If you double-click on this icon, it will change the view to full screen XAML view, hiding the designer
4. Vertical Split: When you do a vertical split, the designer view and the XAML editor view will set side by side (as shown in the preceding screenshot) left and right
5. Horizontal Split: When you do a horizontal split, the designer view and the XAML editor view will align top and bottom positions in a stack fashion