Style Builder for UraniumUI

UraniumUI.sln

@@ -1,4 +1,3 @@
-
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.4.32804.182
@@ -33,6 +32,9 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "UraniumUI.Dialogs.Community
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "UraniumUI.Dialogs.Mopups", "src\UraniumUI.Dialogs.Mopups\UraniumUI.Dialogs.Mopups.csproj", "{3AD9C27A-3227-463A-81F4-8AA5FF4DB542}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "tools", "tools", "{6BE23582-8CCA-4D14-ADDD-5AC46E9EE2C7}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "UraniumUI.StyleBuilder", "tools\UraniumUI.StyleBuilder\UraniumUI.StyleBuilder\UraniumUI.StyleBuilder.csproj", "{E145C258-2D96-49ED-88DB-191DF1B32899}"
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "UraniumUI.Blurs", "src\UraniumUI.Blurs\UraniumUI.Blurs.csproj", "{D44173B6-CA42-4F97-BB3C-9F8CC62C4340}"
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "UraniumUI.WebComponents", "src\UraniumUI.WebComponents\UraniumUI.WebComponents.csproj", "{78F7207D-B804-499B-97F5-8EA1D0EA9DA2}"
@@ -97,6 +99,12 @@ Global
 		{3AD9C27A-3227-463A-81F4-8AA5FF4DB542}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{3AD9C27A-3227-463A-81F4-8AA5FF4DB542}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{3AD9C27A-3227-463A-81F4-8AA5FF4DB542}.Release|Any CPU.Build.0 = Release|Any CPU
+		{E145C258-2D96-49ED-88DB-191DF1B32899}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{E145C258-2D96-49ED-88DB-191DF1B32899}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{E145C258-2D96-49ED-88DB-191DF1B32899}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{E145C258-2D96-49ED-88DB-191DF1B32899}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{E145C258-2D96-49ED-88DB-191DF1B32899}.Release|Any CPU.Build.0 = Release|Any CPU
+		{E145C258-2D96-49ED-88DB-191DF1B32899}.Release|Any CPU.Deploy.0 = Release|Any CPU
 		{D44173B6-CA42-4F97-BB3C-9F8CC62C4340}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
 		{D44173B6-CA42-4F97-BB3C-9F8CC62C4340}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{D44173B6-CA42-4F97-BB3C-9F8CC62C4340}.Release|Any CPU.ActiveCfg = Release|Any CPU
@@ -129,6 +137,7 @@ Global
 		{67A0CB34-D871-47BB-A9E0-80CA328BA144} = {32493E5D-A757-4289-A168-DA0E8DDE9B29}
 		{C7CC898A-8047-4D39-A8DE-44A80E99445F} = {32493E5D-A757-4289-A168-DA0E8DDE9B29}
 		{3AD9C27A-3227-463A-81F4-8AA5FF4DB542} = {32493E5D-A757-4289-A168-DA0E8DDE9B29}
+		{E145C258-2D96-49ED-88DB-191DF1B32899} = {6BE23582-8CCA-4D14-ADDD-5AC46E9EE2C7}
 		{D44173B6-CA42-4F97-BB3C-9F8CC62C4340} = {32493E5D-A757-4289-A168-DA0E8DDE9B29}
 		{78F7207D-B804-499B-97F5-8EA1D0EA9DA2} = {32493E5D-A757-4289-A168-DA0E8DDE9B29}
 		{D146428B-5B37-4614-A6F4-2E9716E0CC08} = {32493E5D-A757-4289-A168-DA0E8DDE9B29}

demo/UraniumApp/Platforms/Windows/App.xaml.cs

@@ -20,5 +20,4 @@ public App()
 	}
 
 	protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
-}
-
+}

src/UraniumUI.Material/Resources/StyleResource.xaml

@@ -4,8 +4,8 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     xmlns:local="clr-namespace:UraniumUI.Material.Resources"
                     xmlns:views="clr-namespace:UraniumUI.Views;assembly=UraniumUI"
-                    xmlns:a="clr-namespace:UraniumUI.Material.Attachments"
-                    xmlns:c="clr-namespace:UraniumUI.Material.Controls"
+                    xmlns:a="clr-namespace:UraniumUI.Material.Attachments;assembly=UraniumUI.Material"
+                    xmlns:c="clr-namespace:UraniumUI.Material.Controls;assembly=UraniumUI.Material"
                     xmlns:t="clr-namespace:UraniumUI.Theming;assembly=UraniumUI"
                     xmlns:input="clr-namespace:InputKit.Shared.Controls;assembly=InputKit.Maui">
     <ResourceDictionary.MergedDictionaries>

tools/UraniumUI.StyleBuilder/UraniumUI.StyleBuilder/App.xaml

@@ -0,0 +1,23 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:UraniumUI.StyleBuilder"
+             xmlns:converters="clr-namespace:UraniumUI.StyleBuilder.Converters"
+             xmlns:material="clr-namespace:UraniumUI.Material.Resources;assembly=UraniumUI.Material"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+             x:Class="UraniumUI.StyleBuilder.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary x:Name="appColors" Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary x:Name="appStyles" Source="Resources/Styles/Styles.xaml" />
+                <material:StyleResource ColorsOverride="{x:Reference appColors}" />
+
+            </ResourceDictionary.MergedDictionaries>
+
+            <converters:ToSurfaceColorConverter x:Key="ToSurfaceColor" />
+            <converters:ColorHexConverter x:Key="ColorHexConverter" />
+            <toolkit:IsNullConverter x:Key="IsNullConverter" />
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

tools/UraniumUI.StyleBuilder/UraniumUI.StyleBuilder/App.xaml.cs

@@ -0,0 +1,12 @@
+using UraniumUI.Material.Resources;
+
+namespace UraniumUI.StyleBuilder;
+public partial class App : Application
+{
+    public App(AppShell mainPage)
+    {
+        InitializeComponent();
+
+        MainPage = mainPage;
+    }
+}

tools/UraniumUI.StyleBuilder/UraniumUI.StyleBuilder/AppShell.xaml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="UraniumUI.StyleBuilder.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:UraniumUI.StyleBuilder"
+    Shell.FlyoutBehavior="Disabled">
+
+    <ShellContent
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>

tools/UraniumUI.StyleBuilder/UraniumUI.StyleBuilder/AppShell.xaml.cs

@@ -0,0 +1,9 @@
+namespace UraniumUI.StyleBuilder;
+
+public partial class AppShell : Shell
+{
+    public AppShell()
+    {
+        InitializeComponent();
+    }
+}

tools/UraniumUI.StyleBuilder/UraniumUI.StyleBuilder/ColorPairEditorView.xaml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="UraniumUI.StyleBuilder.ColorPairEditorView"
+             xmlns:uranium="http://schemas.enisn-projects.io/dotnet/maui/uraniumui"
+             xmlns:material="http://schemas.enisn-projects.io/dotnet/maui/uraniumui/material">
+
+    <ContentView.Resources>
+        <ResourceDictionary>
+            <Style TargetType="uranium:StatefulContentView" Class="Square">
+                <Setter Property="HeightRequest" Value="200" />
+                <Setter Property="WidthRequest" Value="200" />
+            </Style>
+
+            <Style TargetType="uranium:StatefulContentView" Class="OnSquare">
+                <Setter Property="HeightRequest" Value="50" />
+                <Setter Property="WidthRequest" Value="200" />
+            </Style>
+
+            <Style TargetType="Label" Class="OnLabels">
+                <Setter Property="VerticalOptions" Value="End" />
+                <Setter Property="Margin" Value="10" />
+                <Setter Property="FontAttributes" Value="Bold" />
+                <Setter Property="FontSize" Value="16" />
+                <Setter Property="LineBreakMode" Value="TailTruncation" />
+            </Style>
+        </ResourceDictionary>
+    </ContentView.Resources>
+    <VerticalStackLayout>
+        <uranium:StatefulContentView x:Name="primarySquare" StyleClass="Square">
+            <Label x:Name="primaryLabel" />
+        </uranium:StatefulContentView>
+        <uranium:StatefulContentView x:Name="onSquare" StyleClass="OnSquare">
+            <Label x:Name="onLabel" StyleClass="OnLabels" />
+        </uranium:StatefulContentView>
+    </VerticalStackLayout>
+</ContentView>

tools/UraniumUI.StyleBuilder/UraniumUI.StyleBuilder/ColorPairEditorView.xaml.cs

@@ -0,0 +1,54 @@
+using System.Windows.Input;
+using UraniumUI.StyleBuilder.Converters;
+
+namespace UraniumUI.StyleBuilder;
+
+public partial class ColorPairEditorView : ContentView
+{
+    public ColorPairEditorView()
+    {
+        InitializeComponent();
+    }
+
+    public string EditingColorBinding { get => (string)GetValue(EditingColorBindingProperty); set => SetValue(EditingColorBindingProperty, value); }
+
+    public static readonly BindableProperty EditingColorBindingProperty = BindableProperty.Create(
+        nameof(EditingColorBinding),
+        typeof(string),
+        typeof(ColorPairEditorView),
+        defaultValue: string.Empty,
+        propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            if (bindable is ColorPairEditorView editor && newValue is string bindingPath)
+            {
+                var propertyName = bindingPath.Split('[', ']')[1];
+                editor.primarySquare.SetBinding(ContentView.BackgroundColorProperty, bindingPath);
+                editor.primarySquare.CommandParameter = bindingPath;
+                editor.primaryLabel.SetBinding(Label.TextColorProperty, bindingPath, converter: new ToSurfaceColorConverter());
+                editor.primaryLabel.Text = propertyName;
+
+                var onPropertyName = "On" + propertyName;
+                var onBindingPath = bindingPath.Replace(propertyName, onPropertyName);
+
+                editor.onSquare.SetBinding(ContentView.BackgroundColorProperty, bindingPath);
+                editor.onSquare.CommandParameter = onBindingPath;
+                editor.onLabel.SetBinding(Label.TextColorProperty, onBindingPath);
+                editor.onLabel.Text = onPropertyName;
+            }
+        });
+
+    public ICommand EditCommand { get => (ICommand)GetValue(EditCommandProperty); set => SetValue(EditCommandProperty, value); }
+    public static readonly BindableProperty EditCommandProperty = BindableProperty.Create(
+        nameof(EditCommand),
+        typeof(ICommand),
+        typeof(ColorPairEditorView),
+        defaultValue: null,
+        propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            if (bindable is ColorPairEditorView editor && newValue is ICommand command)
+            {
+                editor.primarySquare.TappedCommand = command;
+                editor.onSquare.TappedCommand = command;
+            }
+        });
+}

tools/UraniumUI.StyleBuilder/UraniumUI.StyleBuilder/Controls/ColorEditPopupPage.cs

@@ -0,0 +1,95 @@
+using Mopups.Pages;
+using Mopups.Services;
+using UraniumUI.Resources;
+
+namespace UraniumUI.StyleBuilder.Controls;
+public class ColorEditPopupPage : PopupPage
+{
+    public ColorEditPopupPage(object source, string bindingPath)
+    {
+        this.BindingContext = source;
+        this.BackgroundColor = Colors.Black.WithAlpha(0.6f);
+        this.WidthRequest = 500;
+        var grid = new Grid
+        {
+            ColumnDefinitions =
+            {
+                new ColumnDefinition(GridLength.Auto),
+                new ColumnDefinition(GridLength.Star),
+            },
+        };
+
+        var colorPreviewBox = new BoxView
+        {
+            HeightRequest = 200,
+            WidthRequest = 200,
+            HorizontalOptions = LayoutOptions.Center,
+            StyleClass = new[] { "Elevation1" }
+        };
+
+        colorPreviewBox.SetBinding(BoxView.ColorProperty, bindingPath);
+
+        var colorEditor = new ColorEditor
+        {
+            HorizontalOptions = LayoutOptions.Center,
+        };
+
+        colorEditor.SetBinding(ColorEditor.ColorProperty, bindingPath);
+
+        grid.Add(new VerticalStackLayout
+        {
+            Padding = 20,
+            Children =
+            {
+                colorPreviewBox,
+                colorEditor
+            }
+        });
+
+        var sliderColorPicker = new SliderColorPicker()
+        {
+            VerticalOptions = LayoutOptions.Center,
+        };
+
+        sliderColorPicker.SetBinding(SliderColorPicker.ColorProperty, bindingPath);
+
+        grid.Add(sliderColorPicker, column: 1);
+
+        var rootStackLayout = new VerticalStackLayout
+        {
+            Padding = 10,
+            Children =
+            {
+                new Label
+                {
+                    Text = bindingPath.Split('[', ']')[1],
+                    HorizontalOptions = LayoutOptions.Center,
+                },
+                new BoxView
+                {
+                    StyleClass = new []{ "Divider" }
+                },
+                grid,
+                new Button
+                {
+                    StyleClass = new []{ "TextButton" },
+                    Text = "OK",
+                    Command = new Command(() =>
+                    {
+                        MopupService.Instance.PopAsync();
+                    })
+                }
+            }
+        };
+
+        rootStackLayout.HorizontalOptions = LayoutOptions.Center;
+        rootStackLayout.VerticalOptions = LayoutOptions.Center;
+        rootStackLayout.WidthRequest = 560;
+        rootStackLayout.SetAppThemeColor(
+            StackLayout.BackgroundColorProperty,
+            ColorResource.GetColor("Surface"),
+            ColorResource.GetColor("SurfaceDark"));
+
+        this.Content = rootStackLayout;
+    }
+}

tools/UraniumUI.StyleBuilder/UraniumUI.StyleBuilder/Controls/ColorEditor.cs

@@ -0,0 +1,56 @@
+using DynamicData.Binding;
+using System.Reactive.Disposables;
+using System.Reactive.Linq;
+
+namespace UraniumUI.StyleBuilder.Controls;
+public class ColorEditor : Plainer.Maui.Controls.EntryView
+{
+    private CancellationTokenSource cts = new CancellationTokenSource();
+    public ColorEditor()
+    {
+        this.TextChanged += ColorEditor_TextChanged;
+    }
+
+    private void ColorEditor_TextChanged(object sender, TextChangedEventArgs e)
+    {
+        UpdateColorFromText();
+    }
+
+    public Color Color { get => (Color)GetValue(ColorProperty); set => SetValue(ColorProperty, value); }
+
+    public static readonly BindableProperty ColorProperty = BindableProperty.Create(
+        nameof(Color),
+        typeof(Color),
+        typeof(ColorEditor),
+        defaultValue: Colors.Transparent,
+        defaultBindingMode: BindingMode.TwoWay,
+        propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            if (bindable is ColorEditor colorEditor && newValue is Color newColor && oldValue != newValue)
+            {
+                colorEditor.UpdateTextFromColor();
+            }
+        });
+
+    protected void UpdateTextFromColor()
+    {
+        if (IsFocused)
+        {
+            return;
+        }
+
+        var newHex = Color.ToHex();
+        if (Text != newHex)
+        {
+            Text = newHex;
+        }
+    }
+
+    protected void UpdateColorFromText()
+    {
+        if (Color.TryParse(Text, out var color) && color != Color)
+        {
+            Color = color;
+        }
+    }
+}