Split View: Viewing the WPF Design Surface and XAML at the Same Time
The WPF Designer for Visual Studio supports a view called split view. Split view allows you to view both XAML markup and the visual designer at the same time. Changes made in the visual designer are immediately reflected in the XAML markup and vice-versa. This topic describes some of the ways you can use and configure split view.
Split View
Split view consists of two panes separated by a bar. One pane contains the Design view of the current window or user control. This pane supports the drag-and-drop style of application development that is familiar to Windows Forms programmers. The second pane contains the XAML view for the current window or user control. This XAML markup is fully editable and supports IntelliSense. You can directly edit XAML elements, add attributes, or add new elements by typing the appropriate markup in this pane.
The two panes of split view are synchronized so that changes you make in one pane are updated in the other. For example, if you drag a control from the Toolbox to Design view, the XAML is immediately updated to reflect the new element. Likewise, if a new element is added by typing the markup in XAML view, the visual representation will appear in Design view immediately, once the XAML is correctly formed.
.png "Split view")
Configuring Split View
Split view can be configured to suit your personal programming style and taste. The bar separating the two panes can be repositioned with the mouse to change the relative size of the two panes. The bar contains a few icons that allow you change the appearance of split view. Clicking the swap panes icon between the Design and XAML tabs switches the location of the panes. The three icons clustered together on the bar allow you to switch between vertical view, where the panes are displayed side-by-side, horizontal view, where the panes are stacked, and to collapse or expand the bottom pane. When one pane is collapsed you can switch between Design view and XAML view by clicking the appropriate tab on the bar. Double-clicking the bar has the same effect as clicking the collapse/expand icon. Double clicking the tabs makes that pane full view. Pane layout is saved with each document within the project.
See Also
Concepts
Navigating the Element Hierarchy of a WPF Document