more ui refactorin

Sledgemapper/Sledgemapper.cs

@@ -33,6 +33,7 @@ namespace Sledgemapper
         private Dictionary<string, SpriteFont> _fonts;
         private Session _sessionData;
         private AuthenticateResponse _authResponse;
+        private MainWidget _mainWidget;
 
         public Sledgemapper()
         {
@@ -53,122 +54,49 @@ namespace Sledgemapper
             base.Initialize();
         }
 
+        private void AddItemToToolGrid(Grid grid, EventHandler eventAction, string folder)
+        {
+            var tilesFolderContent = Content.LoadContentFolder<Texture2D>(folder);
+            var indexX = 0;
+            var indexY = 0;
+            foreach (var item in tilesFolderContent)
+            {
+                var tileButton = new ImageButton { Image = new TextureRegion(item.Value), GridColumn = indexY, GridRow = indexX, Id = item.Key, Width = 40, Height = 40 };
+                tileButton.Click += eventAction;
+                grid.Widgets.Add(tileButton);
+                indexY++;
+                if (indexY == 4)
+                {
+                    indexY = 0;
+                    indexX++;
+                }
+            }
+        }
+
         protected override void LoadContent()
         {
             _spriteBatch = new SpriteBatch(GraphicsDevice);
             MyraEnvironment.Game = this;
 
-            var mainPanel = new VerticalStackPanel();
+            _mainWidget = new MainWidget();
 
-            var menu = BuildMenu();
+            _mainWidget.MenuConnectSync.Selected += OnMenuConnectSyncSelected;
-            mainPanel.Widgets.Add(menu);
+            _mainWidget.MenuFileLoad.Selected += OnMenuFileLoadSelected;
+            _mainWidget.MenuFileSave.Selected += OnMenuFileSaveSelected;
+            _mainWidget.MenuConnectLogin.Selected += OnMenuConnectLoginSelected;
+            _mainWidget.MenuConnectNew.Selected += OnMenuConnectNewSelected;
+            _mainWidget.MenuConnectJoin.Selected += OnMenuConnectJoinSelected;
+            _mainWidget.MenuConnectNew.Enabled = false;
+            _mainWidget.MenuConnectJoin.Enabled = false;
+            _mainWidget.MenuConnectSync.Enabled = false;
 
-            var sidePanel = new VerticalStackPanel { Layout2d = new Layout2D("this.w=200;this.h=W.h"), Background = new SolidBrush(Color.DarkGray) };
+            AddItemToToolGrid(_mainWidget.GridTiles, OnTileButtonClicked, "tiles");
-
+            AddItemToToolGrid(_mainWidget.GridWalls, OnWallButtonClicked, "walls");
-            var tileScrollView = new ScrollViewer { Layout2d = new Layout2D("this.w=200;this.h=W.h/3") };
+            AddItemToToolGrid(_mainWidget.GridOverlays, OnOverlayButtonClicked, "overlays");
-            var tileGrid = new Grid { ColumnSpacing = 3, RowSpacing = 3, Layout2d = new Layout2D("this.w=200"), Background = new SolidBrush(Color.DarkGray) };
-            tileScrollView.Content = tileGrid;
-            sidePanel.Widgets.Add(tileScrollView);
-
-            var wallScrollView = new ScrollViewer { Layout2d = new Layout2D("this.w=200;this.h=W.h/3") };
-            var wallGrid = new Grid { ColumnSpacing = 3, RowSpacing = 3, Layout2d = new Layout2D("this.w=200"), Background = new SolidBrush(Color.DarkGray) };
-            wallScrollView.Content = wallGrid;
-            sidePanel.Widgets.Add(wallScrollView);
-
-            var overlayScrollView = new ScrollViewer { Layout2d = new Layout2D("this.w=200;this.h=W.h/3") };
-            var overlayGrid = new Grid { ColumnSpacing = 3, RowSpacing = 3, Layout2d = new Layout2D("this.w=200"), Background = new SolidBrush(Color.DarkGray) };
-            overlayScrollView.Content = overlayGrid;
-            sidePanel.Widgets.Add(overlayScrollView);
-
-            mainPanel.Widgets.Add(sidePanel);
-
-            var tilesFolderContent = Content.LoadContentFolder<Texture2D>("tiles");
-            var indexX = 0;
-            var indexY = 0;
-
-            foreach (var item in tilesFolderContent)
-            {
-                var tileButton = new ImageButton { Image = new TextureRegion(item.Value), GridColumn = indexY, GridRow = indexX, Id = item.Key, Width = 40, Height = 40 };
-                tileButton.Click += (s, e) =>
-                {
-                    _state._currentTileId = ((ImageButton)s).Id;
-
-                    ClearSelection(wallGrid);
-                    ClearSelection(tileGrid);
-                    ClearSelection(overlayGrid);
-
-                    ((ImageButton)s).Border = new SolidBrush(Color.Red);
-                    ((ImageButton)s).BorderThickness = new Myra.Graphics2D.Thickness(2);
-                    _state._insertMode = InsertMode.Tile;
-                };
-                tileGrid.Widgets.Add(tileButton);
-                indexY++;
-                if (indexY == 4)
-                {
-                    indexY = 0;
-                    indexX++;
-                }
-            }
-
-            var wallsFolderContent = Content.LoadContentFolder<Texture2D>("walls");
-            indexX = 0;
-            indexY = 0;
-
-            foreach (var item in wallsFolderContent)
-            {
-                var wallButton = new ImageButton { Image = new TextureRegion(item.Value), GridColumn = indexY, GridRow = indexX, Id = item.Key, Width = 40, Height = 40 };
-                wallButton.Click += (s, e) =>
-                {
-                    _state._currentWallId = ((ImageButton)s).Id;
-                    ClearSelection(wallGrid);
-                    ClearSelection(tileGrid);
-                    ClearSelection(overlayGrid);
-
-
-                    ((ImageButton)s).Border = new SolidBrush(Color.Red);
-                    ((ImageButton)s).BorderThickness = new Myra.Graphics2D.Thickness(2);
-                    _state._insertMode = InsertMode.Wall;
-
-                };
-                wallGrid.Widgets.Add(wallButton);
-                indexY++;
-                if (indexY == 4)
-                {
-                    indexY = 0;
-                    indexX++;
-                }
-            }
-
-            var overlayFolderContent = Content.LoadContentFolder<Texture2D>("overlays");
-            indexX = 0;
-            indexY = 0;
-
-            foreach (var item in overlayFolderContent)
-            {
-                var overlayButton = new ImageButton { Image = new TextureRegion(item.Value), GridColumn = indexY, GridRow = indexX, Id = item.Key, Width = 40, Height = 40 };
-                overlayButton.Click += (s, e) =>
-                {
-                    _state._currentOverlayId = ((ImageButton)s).Id;
-                    ClearSelection(wallGrid);
-                    ClearSelection(tileGrid);
-                    ClearSelection(overlayGrid);
-
-                    ((ImageButton)s).Border = new SolidBrush(Color.Red);
-                    ((ImageButton)s).BorderThickness = new Myra.Graphics2D.Thickness(2);
-                    _state._insertMode = InsertMode.Overlay;
-                };
-                overlayGrid.Widgets.Add(overlayButton);
-                indexY++;
-                if (indexY == 4)
-                {
-                    indexY = 0;
-                    indexX++;
-                }
-            }
 
             _fonts = Content.LoadContentFolder<SpriteFont>("fonts");
 
-            _desktop.Root = mainPanel;
+            _desktop.Root = _mainWidget;
         }
 
         protected override void Update(GameTime gameTime)
@@ -310,7 +238,7 @@ namespace Sledgemapper
             {
                 return;
             }
-            GraphicsDevice.Clear(Color.DarkGray);
+            GraphicsDevice.Clear(new Color(24,118,157));
 
             var visibleTilesX = GraphicsDevice.Viewport.Width / _state._tileSize + 1;
             var visibleTilesY = GraphicsDevice.Viewport.Height / _state._tileSize + 1;
@@ -324,7 +252,7 @@ namespace Sledgemapper
 
             if (string.IsNullOrWhiteSpace(_sessionData.SessionName))
             {
-                _spriteBatch.DrawRectangle(new Rectangle(_state._selectedTile.X * _state._tileSize, _state._selectedTile.Y * _state._tileSize, _state._tileSize - 1, _state._tileSize - 1), Color.Red, 2);
+                _spriteBatch.DrawRectangle(new Rectangle((_state._selectedTile.X * _state._tileSize)-2,(_state._selectedTile.Y * _state._tileSize)-2, _state._tileSize + 3, _state._tileSize + 3), Color.Red, 2);
             }
 
             DrawPlayers();
@@ -347,46 +275,6 @@ namespace Sledgemapper
             base.Draw(gameTime);
         }
 
-        private HorizontalMenu BuildMenu()
-        {
-            var menu = new HorizontalMenu();
-            var menuFile = new MenuItem("_file", "File");
-            var menuFileLoad = new MenuItem("_file_load", "Load");
-            var menuFileSave = new MenuItem("_file_save", "Save");
-            var menuConnect = new MenuItem("_connect", "Connect");
-            var menuConnectLogin = new MenuItem("_connect_login", "Login");
-            var menuConnectNew = new MenuItem("_connect_new", "New");
-            var menuConnectJoin = new MenuItem("_connect_join", "Join");
-            var menuConnectSync = new MenuItem("_connect_sync", "Sync");
-
-            menuConnectSync.Selected += OnMenuConnectSyncSelected;
-            menuFileLoad.Selected += OnMenuFileLoadSelected;
-            menuFileSave.Selected += OnMenuFileSaveSelected;
-            menuConnectLogin.Selected += OnMenuConnectLoginSelected;
-            menuConnectNew.Selected += OnMenuConnectNewSelected;
-            menuConnectJoin.Selected += OnMenuConnectJoinSelected;
-
-            menuConnect.Items.Add(menuConnectLogin);
-            menuConnect.Items.Add(menuConnectNew);
-            menuConnect.Items.Add(menuConnectJoin);
-            menuConnect.Items.Add(menuConnectSync);
-            menu.Items.Add(menuConnect);
-            menuFile.Items.Add(menuFileLoad);
-            menuFile.Items.Add(menuFileSave);
-            menu.Items.Add(menuFile);
-            menu.Items.Add(menuConnect);
-
-            return menu;
-        }
-
-        private void ClearSelection(Grid grid)
-        {
-            foreach (var widget in grid.Widgets)
-            {
-                widget.Border = null;
-            }
-        }
-
         private void DrawGrid(int visibleTilesX, int visibleTilesY)
         {
             for (var i = -1; i < visibleTilesX + 2; i++)
@@ -404,7 +292,7 @@ namespace Sledgemapper
                    posX1, posY1,
                     posX2,
                     posY2,
-                    Color.Black);
+                    Color.GhostWhite);
             }
 
             for (var i = -1; i < visibleTilesY + 2; i++)
@@ -421,7 +309,7 @@ namespace Sledgemapper
                 _spriteBatch.DrawLine(posX1, posY1,
                     posX2,
                     posY2,
-                Color.Black);
+                 Color.GhostWhite);
             }
         }
 
@@ -652,6 +540,9 @@ namespace Sledgemapper
 
             if (successful)
             {
+                _mainWidget.MenuConnectNew.Enabled = true;
+                _mainWidget.MenuConnectJoin.Enabled = true;
+                _mainWidget.MenuConnectSync.Enabled = true;
                 localWindow.Close();
             }
         }
@@ -717,10 +608,40 @@ namespace Sledgemapper
             }
             if (successful)
             {
+                _mainWidget.MenuConnectNew.Enabled = true;
+                _mainWidget.MenuConnectJoin.Enabled = true;
+                _mainWidget.MenuConnectSync.Enabled = true;
                 localWindow.Close();
             }
         }
 
+        private void OnOverlayButtonClicked(object sender, EventArgs e)
+        {
+            _state._currentOverlayId = ((ImageButton)sender).Id;
+            _mainWidget.ClearSelection();
+            ((ImageButton)sender).Border = new SolidBrush(Color.Red);
+            ((ImageButton)sender).BorderThickness = new Myra.Graphics2D.Thickness(2);
+            _state._insertMode = InsertMode.Overlay;
+        }
+
+        private void OnTileButtonClicked(object sender, EventArgs e)
+        {
+            _state._currentTileId = ((ImageButton)sender).Id;
+            _mainWidget.ClearSelection();
+            ((ImageButton)sender).Border = new SolidBrush(Color.Red);
+            ((ImageButton)sender).BorderThickness = new Myra.Graphics2D.Thickness(2);
+            _state._insertMode = InsertMode.Tile;
+        }
+
+        private void OnWallButtonClicked(object sender, EventArgs e)
+        {
+            _state._currentWallId = ((ImageButton)sender).Id;
+            _mainWidget.ClearSelection();
+            ((ImageButton)sender).Border = new SolidBrush(Color.Red);
+            ((ImageButton)sender).BorderThickness = new Myra.Graphics2D.Thickness(2);
+            _state._insertMode = InsertMode.Wall;
+        }
+
         private void OnMenuConnectJoinSelected(object sender, EventArgs e)
         {
             Window window = new Window
@@ -796,8 +717,6 @@ namespace Sledgemapper
             window.Content = content;
 
             window.ShowModal(_desktop);
-
-
         }
 
         private void OnMenuFileSaveSelected(object sender, EventArgs e)
@@ -858,15 +777,9 @@ namespace Sledgemapper
             var valid = !string.IsNullOrWhiteSpace(textBox.Text);
             if (!valid)
             {
-                textBox.Background = new SolidBrush(Color.Red);
+                textBox.Background = new SolidBrush(Color.PaleVioletRed);
             }
             return valid;
         }
     }
-
-    public enum TileAction
-    {
-        Add,
-        Delete
-    }
 }

Sledgemapper/TileAction.cs

@@ -0,0 +1,8 @@
+namespace Sledgemapper
+{
+    public enum TileAction
+    {
+        Add,
+        Delete
+    }
+}

Sledgemapper/UI/MainWidget.Custom.cs

@@ -0,0 +1,22 @@
+using Myra.Graphics2D.UI;
+
+namespace Sledgemapper.UI
+{
+	public partial class MainWidget
+	{
+		 public void ClearSelection()
+         {
+            ClearSelection(GridTiles);
+            ClearSelection(GridWalls);
+            ClearSelection(GridOverlays);
+         }
+
+        private void ClearSelection(Grid grid)
+        {
+            foreach (var widget in grid.Widgets)
+            {
+                widget.Border = null;
+            }
+        }
+	}
+}

Sledgemapper/UI/MainWidget.Generated.cs

@@ -0,0 +1,199 @@
+/* Generated by MyraPad at 10/11/2020 15:49:08 */
+using Myra.Graphics2D;
+using Myra.Graphics2D.TextureAtlases;
+using Myra.Graphics2D.UI;
+using Myra.Graphics2D.Brushes;
+
+#if !STRIDE
+using Microsoft.Xna.Framework;
+using Microsoft.Xna.Framework.Graphics;
+#else
+using Stride.Core.Mathematics;
+#endif
+
+namespace Sledgemapper.UI
+{
+	partial class MainWidget: VerticalStackPanel
+	{
+		private void BuildUI()
+		{
+			MenuFileLoad = new MenuItem();
+			MenuFileLoad.Text = "&Load";
+			MenuFileLoad.ShortcutText = "Ctrl+L";
+			MenuFileLoad.Id = "MenuFileLoad";
+
+			MenuFileSave = new MenuItem();
+			MenuFileSave.Text = "&Save";
+			MenuFileSave.ShortcutText = "Ctrl+S";
+			MenuFileSave.Id = "MenuFileSave";
+
+			var menuSeparator1 = new MenuSeparator();
+
+			MenuFileQuit = new MenuItem();
+			MenuFileQuit.Text = "&Quit";
+			MenuFileQuit.ShortcutText = "Ctrl+Q";
+			MenuFileQuit.Id = "MenuFileQuit";
+
+			MenuFile = new MenuItem();
+			MenuFile.Text = "&File";
+			MenuFile.Id = "MenuFile";
+			MenuFile.Items.Add(MenuFileLoad);
+			MenuFile.Items.Add(MenuFileSave);
+			MenuFile.Items.Add(menuSeparator1);
+			MenuFile.Items.Add(MenuFileQuit);
+
+			MenuConnectLogin = new MenuItem();
+			MenuConnectLogin.Text = "L&ogin";
+			MenuConnectLogin.ShortcutText = "Ctrl+O";
+			MenuConnectLogin.Id = "MenuConnectLogin";
+
+			var menuSeparator2 = new MenuSeparator();
+
+			MenuConnectNew = new MenuItem();
+			MenuConnectNew.Text = "&New";
+			MenuConnectNew.ShortcutText = "Ctrl+N";
+			MenuConnectNew.Id = "MenuConnectNew";
+
+			MenuConnectJoin = new MenuItem();
+			MenuConnectJoin.Text = "&Join";
+			MenuConnectJoin.ShortcutText = "Ctrl+J";
+			MenuConnectJoin.Id = "MenuConnectJoin";
+
+			MenuConnectSync = new MenuItem();
+			MenuConnectSync.Text = "S&ync";
+			MenuConnectSync.ShortcutText = "Ctrl+Y";
+			MenuConnectSync.Id = "MenuConnectSync";
+
+			var menuItem1 = new MenuItem();
+			menuItem1.Text = "&Connect";
+			menuItem1.Items.Add(MenuConnectLogin);
+			menuItem1.Items.Add(menuSeparator2);
+			menuItem1.Items.Add(MenuConnectNew);
+			menuItem1.Items.Add(MenuConnectJoin);
+			menuItem1.Items.Add(MenuConnectSync);
+
+			MenuHelpAbout = new MenuItem();
+			MenuHelpAbout.Text = "&About";
+			MenuHelpAbout.Id = "MenuHelpAbout";
+
+			var menuItem2 = new MenuItem();
+			menuItem2.Text = "&Help";
+			menuItem2.Items.Add(MenuHelpAbout);
+
+			_mainMenu = new HorizontalMenu();
+			_mainMenu.Id = "_mainMenu";
+			_mainMenu.Items.Add(MenuFile);
+			_mainMenu.Items.Add(menuItem1);
+			_mainMenu.Items.Add(menuItem2);
+
+			GridTiles = new Grid();
+			GridTiles.ColumnSpacing = 8;
+			GridTiles.RowSpacing = 8;
+			GridTiles.DefaultColumnProportion = new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Pixels,
+				Value = 40,
+			};
+			GridTiles.DefaultRowProportion = new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Pixels,
+				Value = 40,
+			};
+			GridTiles.Id = "GridTiles";
+
+			var scrollViewer1 = new ScrollViewer();
+			scrollViewer1.Content = GridTiles;
+
+			var verticalStackPanel1 = new VerticalStackPanel();
+			verticalStackPanel1.Proportions.Add(new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Fill,
+			});
+			verticalStackPanel1.Widgets.Add(scrollViewer1);
+
+			GridWalls = new Grid();
+			GridWalls.ColumnSpacing = 8;
+			GridWalls.RowSpacing = 8;
+			GridWalls.DefaultColumnProportion = new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Pixels,
+				Value = 40,
+			};
+			GridWalls.DefaultRowProportion = new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Pixels,
+				Value = 40,
+			};
+			GridWalls.Id = "GridWalls";
+
+			var scrollViewer2 = new ScrollViewer();
+			scrollViewer2.Content = GridWalls;
+
+			var verticalStackPanel2 = new VerticalStackPanel();
+			verticalStackPanel2.Proportions.Add(new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Fill,
+			});
+			verticalStackPanel2.Widgets.Add(scrollViewer2);
+
+			GridOverlays = new Grid();
+			GridOverlays.ColumnSpacing = 8;
+			GridOverlays.RowSpacing = 8;
+			GridOverlays.DefaultColumnProportion = new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Pixels,
+				Value = 40,
+			};
+			GridOverlays.DefaultRowProportion = new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Pixels,
+				Value = 40,
+			};
+			GridOverlays.Id = "GridOverlays";
+
+			var scrollViewer3 = new ScrollViewer();
+			scrollViewer3.Content = GridOverlays;
+
+			var verticalStackPanel3 = new VerticalStackPanel();
+			verticalStackPanel3.Proportions.Add(new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Fill,
+			});
+			verticalStackPanel3.Widgets.Add(scrollViewer3);
+
+			var verticalSplitPane1 = new VerticalSplitPane();
+			verticalSplitPane1.Width = 200;
+			verticalSplitPane1.Background = new SolidBrush("#666666FF");
+			verticalSplitPane1.Widgets.Add(verticalStackPanel1);
+			verticalSplitPane1.Widgets.Add(verticalStackPanel2);
+			verticalSplitPane1.Widgets.Add(verticalStackPanel3);
+
+			
+			Proportions.Add(new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Auto,
+			});
+			Proportions.Add(new Proportion
+			{
+				Type = Myra.Graphics2D.UI.ProportionType.Fill,
+			});
+			Widgets.Add(_mainMenu);
+			Widgets.Add(verticalSplitPane1);
+		}
+
+		
+		public MenuItem MenuFileLoad;
+		public MenuItem MenuFileSave;
+		public MenuItem MenuFileQuit;
+		public MenuItem MenuFile;
+		public MenuItem MenuConnectLogin;
+		public MenuItem MenuConnectNew;
+		public MenuItem MenuConnectJoin;
+		public MenuItem MenuConnectSync;
+		public MenuItem MenuHelpAbout;
+		public HorizontalMenu _mainMenu;
+		public Grid GridTiles;
+		public Grid GridWalls;
+		public Grid GridOverlays;
+	}
+}

Sledgemapper/UI/MainWidget.cs

@@ -0,0 +1,11 @@
+/* Generated by MyraPad at 10/11/2020 13:51:11 */
+namespace Sledgemapper.UI
+{
+	public partial class MainWidget
+	{
+		public MainWidget()
+		{
+			BuildUI();
+		}
+	}
+}

Sledgemapper/UI/mainwidget.xml

@@ -0,0 +1,62 @@
+<Project>
+  <Project.ExportOptions Namespace="Sledgemapper.UI" Class="MainWidget" OutputPath="C:\dev\Map\Sledgemapper\UI" />
+  <VerticalStackPanel>
+    <VerticalStackPanel.Proportions>
+      <Proportion Type="Auto" />
+      <Proportion Type="Fill" />
+    </VerticalStackPanel.Proportions>
+    <HorizontalMenu Id="_mainMenu">
+      <MenuItem Text="&amp;File" Id="MenuFile">
+        <MenuItem Text="&amp;Load" ShortcutText="Ctrl+L" Id="MenuFileLoad" />
+        <MenuItem Text="&amp;Save" ShortcutText="Ctrl+S" Id="MenuFileSave" />
+        <MenuSeparator />
+        <MenuItem Text="&amp;Quit" ShortcutText="Ctrl+Q" Id="MenuFileQuit" />
+      </MenuItem>
+      <MenuItem Text="&amp;Connect">
+        <MenuItem Text="L&amp;ogin" ShortcutText="Ctrl+O" Id="MenuConnectLogin" />
+        <MenuSeparator />
+        <MenuItem Text="&amp;New" ShortcutText="Ctrl+N" Id="MenuConnectNew" />
+        <MenuItem Text="&amp;Join" ShortcutText="Ctrl+J" Id="MenuConnectJoin" />
+        <MenuItem Text="S&amp;ync" ShortcutText="Ctrl+Y" Id="MenuConnectSync" />
+      </MenuItem>
+      <MenuItem Text="&amp;Help">
+        <MenuItem Text="&amp;About" Id="MenuHelpAbout" />
+      </MenuItem>
+    </HorizontalMenu>
+    <VerticalSplitPane Width="200" Background="#666666FF" >
+      <VerticalStackPanel>
+        <VerticalStackPanel.Proportions>
+          <Proportion Type="Fill" />
+        </VerticalStackPanel.Proportions>
+        <ScrollViewer>
+          <Grid ColumnSpacing="8" RowSpacing="8" Id="GridTiles">
+            <Grid.DefaultColumnProportion Type="Pixels" Value="40" />
+            <Grid.DefaultRowProportion Type="Pixels" Value="40" />
+          </Grid>
+        </ScrollViewer>
+      </VerticalStackPanel>
+      <VerticalStackPanel>
+        <VerticalStackPanel.Proportions>
+          <Proportion Type="Fill" />
+        </VerticalStackPanel.Proportions>
+        <ScrollViewer>
+          <Grid ColumnSpacing="8" RowSpacing="8" Id="GridWalls">
+            <Grid.DefaultColumnProportion Type="Pixels" Value="40" />
+            <Grid.DefaultRowProportion Type="Pixels" Value="40" />
+          </Grid>
+        </ScrollViewer>
+      </VerticalStackPanel>
+      <VerticalStackPanel>
+        <VerticalStackPanel.Proportions>
+          <Proportion Type="Fill" />
+        </VerticalStackPanel.Proportions>
+        <ScrollViewer>
+          <Grid ColumnSpacing="8" RowSpacing="8" Id="GridOverlays">
+            <Grid.DefaultColumnProportion Type="Pixels" Value="40" />
+            <Grid.DefaultRowProportion Type="Pixels" Value="40" />
+          </Grid>
+        </ScrollViewer>
+      </VerticalStackPanel>
+    </VerticalSplitPane>
+  </VerticalStackPanel>
+</Project>