Markup.Declarative - Progress on Demos

[najak3d]

For anyone interested, here is the Dock Demo "MainView.axaml/.cs" class totally rewritten, AXAML-free, all using C# and the Markup.Declarative library:

using System;
using System.Collections.Generic;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using Dock.Avalonia;
using Avalonia.Markup.Declarative;
using SWI = System.Windows.Input;
using DockBase = Dock.Model.Avalonia.Core.DockBase;
using System.Linq.Expressions;
using ADC = Avalonia.Data.Converters;
using AD = Avalonia.Data;
using DAC = Dock.Avalonia.Controls;
using AHA = Avalonia.Layout.HorizontalAlignment;
using AVA = Avalonia.Layout.VerticalAlignment;

namespace Urholonia.Demo.Views
{
	public class GeMainView : UserControl
	{
		private ViewModels.GeMainWindowViewModel _vm;
		private GeMainWindow _win;
		private DockBase _dockBase;

		public GeMainView(GeMainWindow parentWin)
		{
			_win = parentWin;
			_vm = ViewModels.GeMainWindowViewModel.Instance;
			_dockBase = _vm.Layout as DockBase;
			InitializeComponent();
		}

		private void InitializeComponent()
		{
			this.Content = new Grid()
				.Name("MainGrid")
				.Rows("Auto,*,25").Cols("Auto,*")
				.Background(Avalonia.Media.Brushes.Transparent)
				.Children(
					_TopMenu(),
					_ToolBar(), 
					_MainDock(), 
					_BottomStatusPanel()
					);
		}

		private Menu _TopMenu()
		{
			return new Menu().VerticalAlignment(AVA.Top).Col(0).Row(0)
				.Items(
					new MenuItem() { Header = "_File" }
						.Items(new MenuItem() { Header = "_New Layout", Command = _vm.NewLayout }),
					new MenuItem() { Header = "_Window", DataContext = _vm.Layout }
						.Items(
							new MenuItem() { Header = "_Exit Windows", Command = _vm.Layout.ExitWindows },
							new Separator(),
							new MenuItem() { Header = "_Show Windows", Command = _vm.Layout.ShowWindows }
						),
					new MenuItem() { Header = "_Options" }
						.Items(
							_MenuCBToggle("Enable Drag", _win, DockProperties.IsDragEnabledProperty),
							new Separator(),
							_MenuCBToggle("Enable Drop", _win, DockProperties.IsDropEnabledProperty)
						)
				);
		}
		private Panel _ToolBar()
		{
			int tbCol = 0;
			TextBox navId = null;
			Button navBtn = null;
			ComboBox themesBox;

			Grid toolbarGrid = new Grid().Name("ToolBarGrid")
				.Cols("Auto,Auto,Auto,Auto,200,Auto,Auto")
				.HorizontalAlignment(AHA.Right)
				.Margin(4)
				.Children(
					_tbBtn("Back", _vm.Layout.GoBack, DockBase.CanGoBackProperty, ref tbCol),
					_tbBtn("Forward", _vm.Layout.GoForward, DockBase.CanGoForwardProperty, ref tbCol),
					_tbBtn("Dashboard", _vm.Layout.Navigate, null, ref tbCol, "Dashboard"),
					_tbBtn("Home", _vm.Layout.Navigate, null, ref tbCol, _dockBase.DefaultDockable),
					navId = _tbTxtBox("Id", "", "Dashboard", ref tbCol),
					navBtn = _tbBtn("Navigate", _vm.Layout.Navigate, null, ref tbCol, null),
					themesBox = _tbComboBox("Themes", ref tbCol, "Fluent Light", "Fluent Dark", "Default Light", "Default Dark")
				);

			navBtn.Bind(Button.CommandParameterProperty, navId.GetObservable<string>(TextBox.TextProperty));
			//BindControls("Navigate", Button.CommandParameterProperty, "Id", TextBox.TextProperty);

			themesBox.SelectionChanged += (x, y) =>
			{
				Application.Current.Styles[0] = themesBox.SelectedIndex switch
				{
					0 => GeApp.FluentLight,
					1 => GeApp.FluentDark,
					2 => GeApp.DefaultLight,
					3 => GeApp.DefaultDark,
					_ => throw new Exception("Not support theme.")
				};
			};
			return new Panel().Name("ToolBar").Row(0).Col(1).Children(toolbarGrid);
		}

		private DAC.DockControl _MainDock()
		{
			DAC.DockControl mainDock = new DAC.DockControl().Margin(4).Row(1).Col(0).ColSpan(2);
			mainDock.Bind(DAC.DockControl.LayoutProperty, new AD.Binding() { Source = _vm, Path = "Layout" });
			return mainDock;
		}

		private Panel _BottomStatusPanel()
		{
			TextBlock txtBlk = new TextBlock().Margin(4);
			//Dock.Model.Core.IDock docker = _dockBase.ActiveDockable as Dock.Model.Core.IDock;
			//var binding = new AD.Binding { Source = docker, Path = DockBase.FocusedDockableProperty.Name, FallbackValue = "" };
			var binding = new AD.Binding { Source = _dockBase, Path = "ActiveDockable.FocusedDockable", FallbackValue = "" };
			txtBlk.Bind(TextBlock.TextProperty, binding);

			return new Panel().Row(2).Col(0).ColSpan(2)
				.Children(txtBlk);
		}


		// ISSUE: Namescope doesn't contain any of my new Controls
		public void BindControls(string targetName, AvaloniaProperty targetProp, string srcName, AvaloniaProperty srcProp)
		{
			var targetC = this.FindControl<Button>(targetName);
			var srcC = this.FindControl<TextBox>(srcName);
			targetC.Bind(targetProp, srcC.GetObservable(srcProp));
		}

		private ComboBox _tbComboBox(string name, ref int col, params string[] items)
		{
			return new ComboBox().Name(name).Margin(4, 0, 0, 0).Padding(4).Col(col++)
				.Items(items).SelectedIndex(0);
		}

		private TextBox _tbTxtBox(string name, string text, string watermark, ref int col)
		{
			return new TextBox().Name(name).Text(text).Watermark(watermark).UseFloatingWatermark(true).MinHeight(0)
				.Margin(4, 0).Padding(4).VerticalAlignment(AVA.Stretch).VerticalContentAlignment(AVA.Center).Col(col++);
		}

		private Button _tbBtn(string text, SWI.ICommand cmd, AvaloniaProperty<bool> enableProp, ref int col, object cmdParam = null)
		{
			Button btn = new Button().Name(text).Content(text).Margin(0).Padding(4).VerticalAlignment(AVA.Stretch).VerticalContentAlignment(AVA.Center)
				.Command(cmd).CommandParameter(cmdParam).Col(col++);

			if (enableProp != null)
				btn.Bind(Button.IsEnabledProperty, _dockBase.GetObservable(enableProp));
				//btn.Bind(Button.IsEnabledProperty, new AD.Binding() { Source = _dockBase, Path = enableProp.Name }); // TEST: Converter = InverseBooleanConverter });

			return btn;
		}

		private MenuItem _MenuCBToggle(string text, Window win, AvaloniaProperty<bool> prop)
		{
			var item = new MenuItem() { Name = "OptionsInDragEnabled", Header = "Enable Drag", HorizontalAlignment = AHA.Right }
				.Icon(new CheckBox().BorderThickness(0).Width(32).Padding(0).IsHitTestVisible(false).IsChecked(win[!prop]));

			item.Click += (_, _) => { win.SetValue(prop, !(win.GetValue<bool>(prop))); };
			return item;
		}
	}
}

[FoggyFinder]

Can't say I like it but it looks interesting at least.

[robloo]

I also never understood the strong aversion some have to XAML. We started out code-only decades ago and then forms and finally XAML-type markup evolved as a nice abstraction layer that solves several problems (WYSIWYG forms designers -- a major advantage, separation of concerns on large teams, integration with tools like Blend, etc.)

Of course code-only solutions like Markup.Declarative allow one major advantages: C# directly with UI declarations. Anyway, everyone has their preference for one reason or another and I applaud the efforts. While I won't use it personally Markup.Declarative looks pretty cool and you have a great example!

[najak3d]

I prefer the immediate strong typing and no-nonsense immediate/accurate intellisense and "find-references" etc.. I realize Avalonia has more of this functionality working in Rider -- but we're not moving to Rider for that.

This Code Only works perfect in VS2022 and Visual code.

Plus you can insert the code directly into the composition for small handler/delegates (lambda expressions), while for AXAML the handler is found in another file, and so less direct.

Also if you want to establish a cheap/easy/clear template you can do so via a simple method call (and can have parameters) to add a series of controls with same template (defined in the code of that method). I get that there are (mysterious) ways to code this up in AXAML and via DataSource TemplateSelectors/etc... but isn't that easier to specify/debug/fix if it's in C#? We think so.

Plus MVU (vs MVVM), I believe, may work better with C#. (That's how it's done in MAUI Comet.)

[timahrentlov]

If someone that know how, were to combine https://github.com/dotnet/Comet with Avalonia UI - especially for WASM, iOS and Android - it would propel Avalonia to the top of the stack. This would in effect be a ".NET Flutter" offering. There's a reason Flutter, SwiftUI, Jetpack, etc are growing. An no major .NET offering is currently tapping into that.