Implement MVVM for Color Schemes (#13179)

## Summary of the Pull Request
Implements the MVVM style for the Color Schemes editor

## PR Checklist
* [x] Closes #xxx
* [x] CLA signed. If not, go over [here](https://cla.opensource.microsoft.com/microsoft/Terminal) and sign the CLA
* [x] I work here

## Detailed Description of the Pull Request / Additional comments
Introduces:
- `ColorSchemesPageViewModel`: The view model responsible for the entire color schemes page. Handles what the current scheme is, adding/deleting/renaming schemes
- `ColorSchemeViewModel`: A view model class for individual color schemes

## Validation Steps Performed
Manually tested:
- Edit a color scheme
- Add new color scheme
- Rename a color scheme
- Delete a color scheme

src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp

@@ -0,0 +1,138 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#include "pch.h"
+#include "ColorSchemeViewModel.h"
+#include "ColorSchemeViewModel.g.cpp"
+
+#include <LibraryResources.h>
+#include "..\WinRTUtils\inc\Utils.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    ColorSchemeViewModel::ColorSchemeViewModel(const Model::ColorScheme scheme) :
+        _scheme{ scheme },
+        _NonBrightColorTable{ single_threaded_observable_vector<Editor::ColorTableEntry>() },
+        _BrightColorTable{ single_threaded_observable_vector<Editor::ColorTableEntry>() }
+    {
+        _Name = scheme.Name();
+
+        for (uint8_t i = 0; i < ColorTableSize; ++i)
+        {
+            til::color currentColor{ scheme.Table()[i] };
+            const auto& entry{ winrt::make<ColorTableEntry>(i, currentColor) };
+            entry.PropertyChanged({ get_weak(), &ColorSchemeViewModel::_ColorEntryChangedHandler });
+            if (i < ColorTableDivider)
+            {
+                _NonBrightColorTable.Append(entry);
+            }
+            else
+            {
+                _BrightColorTable.Append(entry);
+            }
+        }
+
+        _ForegroundColor = winrt::make<ColorTableEntry>(ForegroundColorTag, til::color(scheme.Foreground()));
+        _BackgroundColor = winrt::make<ColorTableEntry>(BackgroundColorTag, til::color(scheme.Background()));
+        _CursorColor = winrt::make<ColorTableEntry>(CursorColorTag, til::color(scheme.CursorColor()));
+        _SelectionBackgroundColor = winrt::make<ColorTableEntry>(SelectionBackgroundColorTag, til::color(scheme.SelectionBackground()));
+
+        _ForegroundColor.PropertyChanged({ get_weak(), &ColorSchemeViewModel::_ColorEntryChangedHandler });
+        _BackgroundColor.PropertyChanged({ get_weak(), &ColorSchemeViewModel::_ColorEntryChangedHandler });
+        _CursorColor.PropertyChanged({ get_weak(), &ColorSchemeViewModel::_ColorEntryChangedHandler });
+        _SelectionBackgroundColor.PropertyChanged({ get_weak(), &ColorSchemeViewModel::_ColorEntryChangedHandler });
+    }
+
+    winrt::hstring ColorSchemeViewModel::Name()
+    {
+        return _Name;
+    }
+
+    void ColorSchemeViewModel::Name(winrt::hstring newName)
+    {
+        _scheme.Name(newName);
+        _Name = newName;
+    }
+
+    void ColorSchemeViewModel::_ColorEntryChangedHandler(const IInspectable& sender, const PropertyChangedEventArgs& args)
+    {
+        if (const auto entry{ sender.try_as<ColorTableEntry>() })
+        {
+            if (args.PropertyName() == L"Color")
+            {
+                const til::color newColor{ entry->Color() };
+                if (const auto& tag{ entry->Tag() })
+                {
+                    if (const auto index{ tag.try_as<uint8_t>() })
+                    {
+                        _scheme.SetColorTableEntry(*index, newColor);
+                    }
+                    else if (const auto stringTag{ tag.try_as<hstring>() })
+                    {
+                        if (stringTag == ForegroundColorTag)
+                        {
+                            _scheme.Foreground(newColor);
+                        }
+                        else if (stringTag == BackgroundColorTag)
+                        {
+                            _scheme.Background(newColor);
+                        }
+                        else if (stringTag == CursorColorTag)
+                        {
+                            _scheme.CursorColor(newColor);
+                        }
+                        else if (stringTag == SelectionBackgroundColorTag)
+                        {
+                            _scheme.SelectionBackground(newColor);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Editor::ColorTableEntry ColorSchemeViewModel::ColorEntryAt(uint32_t index)
+    {
+        if (index < ColorTableDivider)
+        {
+            return _NonBrightColorTable.GetAt(index);
+        }
+        else
+        {
+            return _BrightColorTable.GetAt(index - ColorTableDivider);
+        }
+    }
+
+    ColorTableEntry::ColorTableEntry(uint8_t index, Windows::UI::Color color)
+    {
+        static const std::array<hstring, 16> TableColorNames = {
+            RS_(L"ColorScheme_Black/Text"),
+            RS_(L"ColorScheme_Red/Text"),
+            RS_(L"ColorScheme_Green/Text"),
+            RS_(L"ColorScheme_Yellow/Text"),
+            RS_(L"ColorScheme_Blue/Text"),
+            RS_(L"ColorScheme_Purple/Text"),
+            RS_(L"ColorScheme_Cyan/Text"),
+            RS_(L"ColorScheme_White/Text"),
+            RS_(L"ColorScheme_BrightBlack/Text"),
+            RS_(L"ColorScheme_BrightRed/Text"),
+            RS_(L"ColorScheme_BrightGreen/Text"),
+            RS_(L"ColorScheme_BrightYellow/Text"),
+            RS_(L"ColorScheme_BrightBlue/Text"),
+            RS_(L"ColorScheme_BrightPurple/Text"),
+            RS_(L"ColorScheme_BrightCyan/Text"),
+            RS_(L"ColorScheme_BrightWhite/Text")
+        };
+
+        Name(TableColorNames[index]);
+        Tag(winrt::box_value<uint8_t>(index));
+        Color(color);
+    }
+
+    ColorTableEntry::ColorTableEntry(std::wstring_view tag, Windows::UI::Color color)
+    {
+        Name(LocalizedNameForEnumName(L"ColorScheme_", tag, L"Text"));
+        Tag(winrt::box_value(tag));
+        Color(color);
+    }
+}

src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h

@@ -0,0 +1,67 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#pragma once
+
+#include "ColorSchemeViewModel.g.h"
+#include "Utils.h"
+#include "ViewModelHelpers.h"
+#include "ColorSchemes.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    inline static constexpr uint8_t ColorTableDivider{ 8 };
+    inline static constexpr uint8_t ColorTableSize{ 16 };
+
+    inline static constexpr std::wstring_view ForegroundColorTag{ L"Foreground" };
+    inline static constexpr std::wstring_view BackgroundColorTag{ L"Background" };
+    inline static constexpr std::wstring_view CursorColorTag{ L"CursorColor" };
+    inline static constexpr std::wstring_view SelectionBackgroundColorTag{ L"SelectionBackground" };
+
+    struct ColorSchemeViewModel : ColorSchemeViewModelT<ColorSchemeViewModel>, ViewModelHelper<ColorSchemeViewModel>
+    {
+    public:
+        ColorSchemeViewModel(const Model::ColorScheme scheme);
+
+        winrt::hstring Name();
+        void Name(winrt::hstring newName);
+
+        Editor::ColorTableEntry ColorEntryAt(uint32_t index);
+
+        WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
+
+        WINRT_PROPERTY(Windows::Foundation::Collections::IVector<Editor::ColorTableEntry>, NonBrightColorTable, nullptr);
+        WINRT_PROPERTY(Windows::Foundation::Collections::IVector<Editor::ColorTableEntry>, BrightColorTable, nullptr);
+
+        WINRT_OBSERVABLE_PROPERTY(Editor::ColorTableEntry, ForegroundColor, _PropertyChangedHandlers, nullptr);
+        WINRT_OBSERVABLE_PROPERTY(Editor::ColorTableEntry, BackgroundColor, _PropertyChangedHandlers, nullptr);
+        WINRT_OBSERVABLE_PROPERTY(Editor::ColorTableEntry, CursorColor, _PropertyChangedHandlers, nullptr);
+        WINRT_OBSERVABLE_PROPERTY(Editor::ColorTableEntry, SelectionBackgroundColor, _PropertyChangedHandlers, nullptr);
+
+    private:
+        winrt::hstring _Name;
+        Model::ColorScheme _scheme;
+
+        void _ColorEntryChangedHandler(const Windows::Foundation::IInspectable& sender, const Windows::UI::Xaml::Data::PropertyChangedEventArgs& args);
+    };
+
+    struct ColorTableEntry : ColorTableEntryT<ColorTableEntry>
+    {
+    public:
+        ColorTableEntry(uint8_t index, Windows::UI::Color color);
+        ColorTableEntry(std::wstring_view tag, Windows::UI::Color color);
+
+        WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
+        WINRT_OBSERVABLE_PROPERTY(Windows::UI::Color, Color, _PropertyChangedHandlers);
+        WINRT_OBSERVABLE_PROPERTY(winrt::hstring, Name, _PropertyChangedHandlers);
+        WINRT_OBSERVABLE_PROPERTY(IInspectable, Tag, _PropertyChangedHandlers);
+
+    private:
+        Windows::UI::Color _color;
+    };
+};
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation
+{
+    BASIC_FACTORY(ColorSchemeViewModel);
+}

src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import "ColorSchemes.idl";
+
+namespace Microsoft.Terminal.Settings.Editor
+{
+    runtimeclass ColorSchemeViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
+    {
+        ColorSchemeViewModel(Microsoft.Terminal.Settings.Model.ColorScheme scheme);
+
+        String Name;
+
+        // Terminal Colors
+        Windows.Foundation.Collections.IVector<ColorTableEntry> NonBrightColorTable;
+        Windows.Foundation.Collections.IVector<ColorTableEntry> BrightColorTable;
+
+        ColorTableEntry ColorEntryAt(UInt32 Index);
+
+        // System Colors
+        ColorTableEntry ForegroundColor;
+        ColorTableEntry BackgroundColor;
+        ColorTableEntry CursorColor;
+        ColorTableEntry SelectionBackgroundColor;
+    }
+
+    [default_interface] runtimeclass ColorTableEntry : Windows.UI.Xaml.Data.INotifyPropertyChanged
+    {
+        String Name { get; };
+        IInspectable Tag;
+        Windows.UI.Color Color;
+    }
+}

src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp

@@ -5,7 +5,6 @@
 #include "ColorSchemes.h"
 #include "ColorTableEntry.g.cpp"
 #include "ColorSchemes.g.cpp"
-#include "ColorSchemesPageNavigationState.g.cpp"
 
 #include <LibraryResources.h>
 
@@ -27,49 +26,7 @@ namespace winrt
 
 namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 {
-    // The first 8 entries of the color table are non-bright colors, whereas the rest are bright.
-    static constexpr uint8_t ColorTableDivider{ 8 };
-
-    static constexpr std::wstring_view ForegroundColorTag{ L"Foreground" };
-    static constexpr std::wstring_view BackgroundColorTag{ L"Background" };
-    static constexpr std::wstring_view CursorColorTag{ L"CursorColor" };
-    static constexpr std::wstring_view SelectionBackgroundColorTag{ L"SelectionBackground" };
-
-    static const std::array<hstring, 16> TableColorNames = {
-        RS_(L"ColorScheme_Black/Header"),
-        RS_(L"ColorScheme_Red/Header"),
-        RS_(L"ColorScheme_Green/Header"),
-        RS_(L"ColorScheme_Yellow/Header"),
-        RS_(L"ColorScheme_Blue/Header"),
-        RS_(L"ColorScheme_Purple/Header"),
-        RS_(L"ColorScheme_Cyan/Header"),
-        RS_(L"ColorScheme_White/Header"),
-        RS_(L"ColorScheme_BrightBlack/Header"),
-        RS_(L"ColorScheme_BrightRed/Header"),
-        RS_(L"ColorScheme_BrightGreen/Header"),
-        RS_(L"ColorScheme_BrightYellow/Header"),
-        RS_(L"ColorScheme_BrightBlue/Header"),
-        RS_(L"ColorScheme_BrightPurple/Header"),
-        RS_(L"ColorScheme_BrightCyan/Header"),
-        RS_(L"ColorScheme_BrightWhite/Header")
-    };
-
-    static const std::array<std::wstring, 9> InBoxSchemes = {
-        L"Campbell",
-        L"Campbell Powershell",
-        L"Vintage",
-        L"One Half Dark",
-        L"One Half Light",
-        L"Solarized Dark",
-        L"Solarized Light",
-        L"Tango Dark",
-        L"Tango Light"
-    };
-
-    ColorSchemes::ColorSchemes() :
-        _ColorSchemeList{ single_threaded_observable_vector<Model::ColorScheme>() },
-        _CurrentNonBrightColorTable{ single_threaded_observable_vector<Editor::ColorTableEntry>() },
-        _CurrentBrightColorTable{ single_threaded_observable_vector<Editor::ColorTableEntry>() }
+    ColorSchemes::ColorSchemes()
     {
         InitializeComponent();
 
@@ -91,217 +48,12 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
     void ColorSchemes::OnNavigatedTo(const NavigationEventArgs& e)
     {
-        _State = e.Parameter().as<Editor::ColorSchemesPageNavigationState>();
-        _UpdateColorSchemeList();
-
-        // Initialize our color table view model with 16 dummy colors
-        // so that on a ColorScheme selection change, we can loop through
-        // each ColorTableEntry and just change its color. Performing a
-        // clear and 16 appends doesn't seem to update the color pickers
-        // very accurately.
-        for (uint8_t i = 0; i < TableColorNames.size(); ++i)
-        {
-            const auto& entry{ winrt::make<ColorTableEntry>(i, Windows::UI::Color{ 0, 0, 0, 0 }) };
-            if (i < ColorTableDivider)
-            {
-                _CurrentNonBrightColorTable.Append(entry);
-            }
-            else
-            {
-                _CurrentBrightColorTable.Append(entry);
-            }
-        }
-        _CurrentForegroundColor = winrt::make<ColorTableEntry>(ForegroundColorTag, Windows::UI::Color{ 0, 0, 0, 0 });
-        _CurrentBackgroundColor = winrt::make<ColorTableEntry>(BackgroundColorTag, Windows::UI::Color{ 0, 0, 0, 0 });
-        _CurrentCursorColor = winrt::make<ColorTableEntry>(CursorColorTag, Windows::UI::Color{ 0, 0, 0, 0 });
-        _CurrentSelectionBackgroundColor = winrt::make<ColorTableEntry>(SelectionBackgroundColorTag, Windows::UI::Color{ 0, 0, 0, 0 });
-
-        // Try to look up the scheme that was navigated to. If we find it, immediately select it.
-        const std::wstring lastNameFromNav{ _State.LastSelectedScheme() };
-        const auto it = std::find_if(begin(_ColorSchemeList),
-                                     end(_ColorSchemeList),
-                                     [&lastNameFromNav](const auto& scheme) { return scheme.Name() == lastNameFromNav; });
-
-        if (it != end(_ColorSchemeList))
-        {
-            auto scheme = *it;
-            ColorSchemeComboBox().SelectedItem(scheme);
-        }
-
-        // populate color table grid
-        const auto colorLabelStyle{ Resources().Lookup(winrt::box_value(L"ColorLabelStyle")).as<Windows::UI::Xaml::Style>() };
-        const auto colorControlStyle{ Resources().Lookup(winrt::box_value(L"ColorControlStyle")).as<Windows::UI::Xaml::Style>() };
-        const auto colorTableEntryTemplate{ Resources().Lookup(winrt::box_value(L"ColorTableEntryTemplate")).as<DataTemplate>() };
-        auto setupColorControl = [colorTableEntryTemplate, colorControlStyle, colorTableGrid{ ColorTableGrid() }](const auto&& colorRef, const uint32_t& row, const uint32_t& col) {
-            ContentControl colorControl{};
-            colorControl.ContentTemplate(colorTableEntryTemplate);
-            colorControl.Style(colorControlStyle);
-
-            Data::Binding binding{};
-            binding.Source(colorRef);
-            binding.Mode(Data::BindingMode::TwoWay);
-            colorControl.SetBinding(ContentControl::ContentProperty(), binding);
-
-            colorTableGrid.Children().Append(colorControl);
-            Grid::SetRow(colorControl, row);
-            Grid::SetColumn(colorControl, col);
-        };
-        for (uint32_t row = 0; row < ColorTableGrid().RowDefinitions().Size(); ++row)
-        {
-            // color label
-            TextBlock label{};
-            label.Text(TableColorNames[row]);
-            label.Style(colorLabelStyle);
-            ColorTableGrid().Children().Append(label);
-            Grid::SetRow(label, row);
-            Grid::SetColumn(label, 0);
-
-            // regular color
-            setupColorControl(_CurrentNonBrightColorTable.GetAt(row), row, 1);
-
-            // bright color
-            setupColorControl(_CurrentBrightColorTable.GetAt(row), row, 2);
-        }
-    }
-
-    // Function Description:
-    // - Called when a different color scheme is selected. Updates our current
-    //   color scheme and updates our currently modifiable color table.
-    // Arguments:
-    // - args: The selection changed args that tells us what's the new color scheme selected.
-    // Return Value:
-    // - <none>
-    void ColorSchemes::ColorSchemeSelectionChanged(const IInspectable& /*sender*/,
-                                                   const SelectionChangedEventArgs& args)
-    {
-        //  Update the color scheme this page is modifying
-        const auto colorScheme{ args.AddedItems().GetAt(0).try_as<Model::ColorScheme>() };
-        CurrentColorScheme(colorScheme);
-        _UpdateColorTable(colorScheme);
-
-        _State.LastSelectedScheme(colorScheme.Name());
-
-        // Set the text disclaimer for the text box
-        hstring disclaimer{};
-        const std::wstring schemeName{ colorScheme.Name() };
-        if (std::find(std::begin(InBoxSchemes), std::end(InBoxSchemes), schemeName) != std::end(InBoxSchemes))
-        {
-            // load disclaimer for in-box profiles
-            disclaimer = RS_(L"ColorScheme_DeleteButtonDisclaimerInBox");
-        }
-        DeleteButtonDisclaimer().Text(disclaimer);
-
-        // Update the state of the page
-        _PropertyChangedHandlers(*this, Windows::UI::Xaml::Data::PropertyChangedEventArgs{ L"CanDeleteCurrentScheme" });
-        IsRenaming(false);
-    }
-
-    // Function Description:
-    // - Updates the list of all color schemes available to choose from.
-    // Arguments:
-    // - <none>
-    // Return Value:
-    // - <none>
-    void ColorSchemes::_UpdateColorSchemeList()
-    {
-        // Surprisingly, though this is called every time we navigate to the page,
-        // the list does not keep growing on each navigation.
-        const auto& colorSchemeMap{ _State.Settings().GlobalSettings().ColorSchemes() };
-        for (const auto& pair : colorSchemeMap)
-        {
-            _ColorSchemeList.Append(pair.Value());
-        }
-    }
-
-    // Function Description:
-    // - Called when a ColorPicker control has selected a new color. This is specifically
-    //   called by color pickers assigned to a color table entry. It takes the index
-    //   that's been stuffed in the Tag property of the color picker and uses it
-    //   to update the color table accordingly.
-    // Arguments:
-    // - sender: the color picker that raised this event.
-    // - args: the args that contains the new color that was picked.
-    // Return Value:
-    // - <none>
-    void ColorSchemes::ColorPickerChanged(const IInspectable& sender,
-                                          const MUX::Controls::ColorChangedEventArgs& args)
-    {
-        const til::color newColor{ args.NewColor() };
-        if (const auto& picker{ sender.try_as<MUX::Controls::ColorPicker>() })
-        {
-            if (const auto& tag{ picker.Tag() })
-            {
-                if (const auto index{ tag.try_as<uint8_t>() })
-                {
-                    CurrentColorScheme().SetColorTableEntry(*index, newColor);
-                    if (index < ColorTableDivider)
-                    {
-                        _CurrentNonBrightColorTable.GetAt(*index).Color(newColor);
-                    }
-                    else
-                    {
-                        _CurrentBrightColorTable.GetAt(*index - ColorTableDivider).Color(newColor);
-                    }
-                }
-                else if (const auto stringTag{ tag.try_as<hstring>() })
-                {
-                    if (stringTag == ForegroundColorTag)
-                    {
-                        CurrentColorScheme().Foreground(newColor);
-                        _CurrentForegroundColor.Color(newColor);
-                    }
-                    else if (stringTag == BackgroundColorTag)
-                    {
-                        CurrentColorScheme().Background(newColor);
-                        _CurrentBackgroundColor.Color(newColor);
-                    }
-                    else if (stringTag == CursorColorTag)
-                    {
-                        CurrentColorScheme().CursorColor(newColor);
-                        _CurrentCursorColor.Color(newColor);
-                    }
-                    else if (stringTag == SelectionBackgroundColorTag)
-                    {
-                        CurrentColorScheme().SelectionBackground(newColor);
-                        _CurrentSelectionBackgroundColor.Color(newColor);
-                    }
-                }
-            }
-        }
-    }
-
-    bool ColorSchemes::CanDeleteCurrentScheme() const
-    {
-        if (const auto& scheme{ CurrentColorScheme() })
-        {
-            // Only allow this color scheme to be deleted if it's not provided in-box
-            const std::wstring myName{ scheme.Name() };
-            return std::find(std::begin(InBoxSchemes), std::end(InBoxSchemes), myName) == std::end(InBoxSchemes);
-        }
-        return false;
+        _ViewModel = e.Parameter().as<Editor::ColorSchemesPageViewModel>();
     }
 
     void ColorSchemes::DeleteConfirmation_Click(const IInspectable& /*sender*/, const RoutedEventArgs& /*e*/)
     {
-        const auto schemeName{ CurrentColorScheme().Name() };
-        _State.Settings().GlobalSettings().RemoveColorScheme(schemeName);
-
-        // This ensures that the JSON is updated with "Campbell", because the color scheme was deleted
-        _State.Settings().UpdateColorSchemeReferences(schemeName, L"Campbell");
-
-        const auto removedSchemeIndex{ ColorSchemeComboBox().SelectedIndex() };
-        if (static_cast<uint32_t>(removedSchemeIndex) < _ColorSchemeList.Size() - 1)
-        {
-            // select same index
-            ColorSchemeComboBox().SelectedIndex(removedSchemeIndex + 1);
-        }
-        else
-        {
-            // select last color scheme (avoid out of bounds error)
-            ColorSchemeComboBox().SelectedIndex(removedSchemeIndex - 1);
-        }
-        _ColorSchemeList.RemoveAt(removedSchemeIndex);
-
+        _ViewModel.RequestDeleteCurrentScheme();
         DeleteButton().Flyout().Hide();
 
         // GH#11971, part 2. If we delete a scheme, and the next scheme we've
@@ -318,20 +70,6 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         ColorSchemeComboBox().Focus(FocusState::Programmatic);
     }
 
-    void ColorSchemes::AddNew_Click(const IInspectable& /*sender*/, const RoutedEventArgs& /*e*/)
-    {
-        // Give the new scheme a distinct name
-        const hstring schemeName{ fmt::format(L"Color Scheme {}", _State.Settings().GlobalSettings().ColorSchemes().Size() + 1) };
-        Model::ColorScheme scheme{ schemeName };
-
-        // Add the new color scheme
-        _State.Settings().GlobalSettings().AddColorScheme(scheme);
-
-        // Update current page
-        _ColorSchemeList.Append(scheme);
-        ColorSchemeComboBox().SelectedItem(scheme);
-    }
-
     // Function Description:
     // - Pre-populates/focuses the name TextBox, updates the UI
     // Arguments:
@@ -340,8 +78,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     // - <none>
     void ColorSchemes::Rename_Click(const IInspectable& /*sender*/, const RoutedEventArgs& /*e*/)
     {
-        NameBox().Text(CurrentColorScheme().Name());
-        IsRenaming(true);
+        NameBox().Text(_ViewModel.CurrentScheme().Name());
+        _ViewModel.RequestEnterRename();
         NameBox().Focus(FocusState::Programmatic);
         NameBox().SelectAll();
     }
@@ -354,7 +92,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
     void ColorSchemes::RenameCancel_Click(const IInspectable& /*sender*/, const RoutedEventArgs& /*e*/)
     {
-        IsRenaming(false);
+        _ViewModel.RequestExitRename(false, {});
         RenameErrorTip().IsOpen(false);
         RenameButton().Focus(FocusState::Programmatic);
     }
@@ -368,7 +106,6 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
         else if (e.OriginalKey() == winrt::Windows::System::VirtualKey::Escape)
         {
-            IsRenaming(false);
             RenameErrorTip().IsOpen(false);
             e.Handled(true);
         }
@@ -377,75 +114,25 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
     void ColorSchemes::_RenameCurrentScheme(hstring newName)
     {
-        // check if different name is already in use
-        const auto oldName{ CurrentColorScheme().Name() };
-        if (newName != oldName && _State.Settings().GlobalSettings().ColorSchemes().HasKey(newName))
+        if (_ViewModel.RequestExitRename(true, newName))
+        {
+            // update the UI
+            RenameErrorTip().IsOpen(false);
+
+            // The color scheme is renamed appropriately, but the ComboBox still shows the old name (until you open it)
+            // We need to manually force the ComboBox to refresh itself.
+            const auto selectedIndex{ ColorSchemeComboBox().SelectedIndex() };
+            ColorSchemeComboBox().SelectedIndex((selectedIndex + 1) % ViewModel().AllColorSchemes().Size());
+            ColorSchemeComboBox().SelectedIndex(selectedIndex);
+        }
+        else
         {
-            // open the error tip
             RenameErrorTip().Target(NameBox());
             RenameErrorTip().IsOpen(true);
 
             // focus the name box
             NameBox().Focus(FocusState::Programmatic);
             NameBox().SelectAll();
-            return;
         }
-
-        // update the settings model
-        CurrentColorScheme().Name(newName);
-        _State.Settings().GlobalSettings().RemoveColorScheme(oldName);
-        _State.Settings().GlobalSettings().AddColorScheme(CurrentColorScheme());
-        _State.Settings().UpdateColorSchemeReferences(oldName, newName);
-
-        // update the UI
-        RenameErrorTip().IsOpen(false);
-        CurrentColorScheme().Name(newName);
-        IsRenaming(false);
-
-        // The color scheme is renamed appropriately, but the ComboBox still shows the old name (until you open it)
-        // We need to manually force the ComboBox to refresh itself.
-        const auto selectedIndex{ ColorSchemeComboBox().SelectedIndex() };
-        ColorSchemeComboBox().SelectedIndex((selectedIndex + 1) % ColorSchemeList().Size());
-        ColorSchemeComboBox().SelectedIndex(selectedIndex);
-    }
-
-    // Function Description:
-    // - Updates the currently modifiable color table based on the given current color scheme.
-    // Arguments:
-    // - colorScheme: the color scheme to retrieve the color table from
-    // Return Value:
-    // - <none>
-    void ColorSchemes::_UpdateColorTable(const Model::ColorScheme& colorScheme)
-    {
-        for (uint8_t i = 0; i < TableColorNames.size(); ++i)
-        {
-            til::color currentColor{ colorScheme.Table()[i] };
-            if (i < ColorTableDivider)
-            {
-                _CurrentNonBrightColorTable.GetAt(i).Color(currentColor);
-            }
-            else
-            {
-                _CurrentBrightColorTable.GetAt(i - ColorTableDivider).Color(currentColor);
-            }
-        }
-        _CurrentForegroundColor.Color(til::color{ colorScheme.Foreground() });
-        _CurrentBackgroundColor.Color(til::color{ colorScheme.Background() });
-        _CurrentCursorColor.Color(til::color{ colorScheme.CursorColor() });
-        _CurrentSelectionBackgroundColor.Color(til::color{ colorScheme.SelectionBackground() });
-    }
-
-    ColorTableEntry::ColorTableEntry(uint8_t index, Windows::UI::Color color)
-    {
-        Name(TableColorNames[index]);
-        Tag(winrt::box_value<uint8_t>(index));
-        Color(color);
-    }
-
-    ColorTableEntry::ColorTableEntry(std::wstring_view tag, Windows::UI::Color color)
-    {
-        Name(LocalizedNameForEnumName(L"ColorScheme_", tag, L"Text"));
-        Tag(winrt::box_value(tag));
-        Color(color);
     }
 }

src/cascadia/TerminalSettingsEditor/ColorSchemes.h

@@ -5,69 +5,33 @@
 
 #include "ColorTableEntry.g.h"
 #include "ColorSchemes.g.h"
-#include "ColorSchemesPageNavigationState.g.h"
+#include "ColorSchemeViewModel.h"
+#include "ColorSchemesPageViewModel.h"
 #include "Utils.h"
 
 namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 {
-    struct ColorSchemesPageNavigationState : ColorSchemesPageNavigationStateT<ColorSchemesPageNavigationState>
-    {
-    public:
-        ColorSchemesPageNavigationState(const Model::CascadiaSettings& settings) :
-            _Settings{ settings } {}
-
-        WINRT_PROPERTY(Model::CascadiaSettings, Settings, nullptr);
-        WINRT_PROPERTY(winrt::hstring, LastSelectedScheme, L"");
-    };
-
     struct ColorSchemes : public HasScrollViewer<ColorSchemes>, ColorSchemesT<ColorSchemes>
     {
         ColorSchemes();
 
         void OnNavigatedTo(const winrt::Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
 
-        void ColorSchemeSelectionChanged(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::SelectionChangedEventArgs& args);
-        void ColorPickerChanged(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Microsoft::UI::Xaml::Controls::ColorChangedEventArgs& args);
-        void AddNew_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
-
         void Rename_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
         void RenameAccept_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
         void RenameCancel_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
         void NameBox_PreviewKeyDown(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Input::KeyRoutedEventArgs& e);
 
-        bool CanDeleteCurrentScheme() const;
         void DeleteConfirmation_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
 
-        WINRT_PROPERTY(Editor::ColorSchemesPageNavigationState, State, nullptr);
         WINRT_PROPERTY(Model::ColorScheme, CurrentColorScheme, nullptr);
-        WINRT_PROPERTY(Windows::Foundation::Collections::IVector<Editor::ColorTableEntry>, CurrentNonBrightColorTable, nullptr);
-        WINRT_PROPERTY(Windows::Foundation::Collections::IVector<Editor::ColorTableEntry>, CurrentBrightColorTable, nullptr);
-        WINRT_PROPERTY(Windows::Foundation::Collections::IObservableVector<Model::ColorScheme>, ColorSchemeList, nullptr);
+        WINRT_OBSERVABLE_PROPERTY(Editor::ColorSchemesPageViewModel, ViewModel, _PropertyChangedHandlers, nullptr);
 
         WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
-        WINRT_OBSERVABLE_PROPERTY(bool, IsRenaming, _PropertyChangedHandlers, nullptr);
-        WINRT_OBSERVABLE_PROPERTY(Editor::ColorTableEntry, CurrentForegroundColor, _PropertyChangedHandlers, nullptr);
-        WINRT_OBSERVABLE_PROPERTY(Editor::ColorTableEntry, CurrentBackgroundColor, _PropertyChangedHandlers, nullptr);
-        WINRT_OBSERVABLE_PROPERTY(Editor::ColorTableEntry, CurrentCursorColor, _PropertyChangedHandlers, nullptr);
-        WINRT_OBSERVABLE_PROPERTY(Editor::ColorTableEntry, CurrentSelectionBackgroundColor, _PropertyChangedHandlers, nullptr);
 
     private:
-        void _UpdateColorTable(const winrt::Microsoft::Terminal::Settings::Model::ColorScheme& colorScheme);
-        void _UpdateColorSchemeList();
         void _RenameCurrentScheme(hstring newName);
     };
-
-    struct ColorTableEntry : ColorTableEntryT<ColorTableEntry>
-    {
-    public:
-        ColorTableEntry(uint8_t index, Windows::UI::Color color);
-        ColorTableEntry(std::wstring_view tag, Windows::UI::Color color);
-
-        WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
-        WINRT_OBSERVABLE_PROPERTY(winrt::hstring, Name, _PropertyChangedHandlers);
-        WINRT_OBSERVABLE_PROPERTY(IInspectable, Tag, _PropertyChangedHandlers);
-        WINRT_OBSERVABLE_PROPERTY(Windows::UI::Color, Color, _PropertyChangedHandlers);
-    };
 }
 
 namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation

src/cascadia/TerminalSettingsEditor/ColorSchemes.idl

@@ -1,41 +1,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+import "ColorSchemeViewModel.idl";
+import "ColorSchemesPageViewModel.idl";
+
 namespace Microsoft.Terminal.Settings.Editor
 {
-
-    runtimeclass ColorSchemesPageNavigationState
-    {
-        Microsoft.Terminal.Settings.Model.CascadiaSettings Settings;
-        String LastSelectedScheme;
-    };
-
     [default_interface] runtimeclass ColorSchemes : Windows.UI.Xaml.Controls.Page, Windows.UI.Xaml.Data.INotifyPropertyChanged
     {
         ColorSchemes();
-        ColorSchemesPageNavigationState State { get; };
 
-        Boolean CanDeleteCurrentScheme { get; };
-        Boolean IsRenaming { get; };
-
-        // Terminal Colors
-        Windows.Foundation.Collections.IVector<ColorTableEntry> CurrentNonBrightColorTable { get; };
-        Windows.Foundation.Collections.IVector<ColorTableEntry> CurrentBrightColorTable { get; };
-
-        // System Colors
-        ColorTableEntry CurrentForegroundColor;
-        ColorTableEntry CurrentBackgroundColor;
-        ColorTableEntry CurrentCursorColor;
-        ColorTableEntry CurrentSelectionBackgroundColor;
-
-
-        Windows.Foundation.Collections.IObservableVector<Microsoft.Terminal.Settings.Model.ColorScheme> ColorSchemeList { get; };
-    }
-
-    [default_interface] runtimeclass ColorTableEntry : Windows.UI.Xaml.Data.INotifyPropertyChanged
-    {
-        String Name { get; };
-        IInspectable Tag;
-        Windows.UI.Color Color;
+        ColorSchemesPageViewModel ViewModel { get; };
     }
 }

src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml

@@ -63,9 +63,8 @@
                         ToolTipService.ToolTip="{x:Bind Name}">
                     <Button.Flyout>
                         <Flyout>
-                            <muxc:ColorPicker ColorChanged="ColorPickerChanged"
-                                              Tag="{x:Bind Tag, Mode=OneWay}"
-                                              Color="{x:Bind Color, Mode=OneWay}" />
+                            <muxc:ColorPicker Tag="{x:Bind Tag, Mode=OneWay}"
+                                              Color="{x:Bind Color, Mode=TwoWay}" />
                         </Flyout>
                     </Button.Flyout>
                 </Button>
@@ -88,15 +87,15 @@
                         Orientation="Horizontal">
 
                 <StackPanel Orientation="Horizontal"
-                            Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(IsRenaming), Mode=OneWay}">
+                            Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(ViewModel.InRenameMode), Mode=OneWay}">
                     <!--  Select a color scheme  -->
                     <ComboBox x:Name="ColorSchemeComboBox"
-                              ItemsSource="{x:Bind ColorSchemeList, Mode=OneWay}"
+                              ItemsSource="{x:Bind ViewModel.AllColorSchemes, Mode=OneWay}"
                               SelectedIndex="0"
-                              SelectionChanged="ColorSchemeSelectionChanged"
+                              SelectedItem="{x:Bind ViewModel.CurrentScheme, Mode=TwoWay}"
                               Style="{StaticResource ComboBoxSettingStyle}">
                         <ComboBox.ItemTemplate>
-                            <DataTemplate x:DataType="model:ColorScheme">
+                            <DataTemplate x:DataType="local:ColorSchemeViewModel">
                                 <TextBlock Text="{x:Bind Name, Mode=OneWay}" />
                             </DataTemplate>
                         </ComboBox.ItemTemplate>
@@ -107,7 +106,7 @@
                     <Button x:Name="RenameButton"
                             x:Uid="Rename"
                             Click="Rename_Click"
-                            IsEnabled="{x:Bind CanDeleteCurrentScheme, Mode=OneWay}"
+                            IsEnabled="{x:Bind ViewModel.CanDeleteCurrentScheme, Mode=OneWay}"
                             Style="{StaticResource SmallButtonStyle}">
                         <StackPanel Orientation="Horizontal">
                             <FontIcon FontSize="{StaticResource StandardIconSize}"
@@ -117,7 +116,7 @@
                 </StackPanel>
 
                 <StackPanel Orientation="Horizontal"
-                            Visibility="{x:Bind IsRenaming, Mode=OneWay}">
+                            Visibility="{x:Bind ViewModel.InRenameMode, Mode=OneWay}">
 
                     <!--  Shown when color scheme name is already in use  -->
                     <muxc:TeachingTip x:Name="RenameErrorTip"
@@ -152,7 +151,7 @@
 
                 <!--  Add new button  -->
                 <Button x:Name="AddNewButton"
-                        Click="AddNew_Click"
+                        Click="{x:Bind ViewModel.AddNew_Click}"
                         Style="{StaticResource BrowseButtonStyle}">
                     <StackPanel Orientation="Horizontal">
                         <FontIcon FontSize="{StaticResource StandardIconSize}"
@@ -192,6 +191,134 @@
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="Auto" />
                         </Grid.RowDefinitions>
+                        <TextBlock x:Uid="ColorScheme_Black"
+                                   Grid.Row="0"
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
+                        <ContentControl x:Name="NonBrightBlack"
+                                        Grid.Row="0"
+                                        Grid.Column="1"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(0), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <TextBlock x:Uid="ColorScheme_Red"
+                                   Grid.Row="1"
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
+                        <ContentControl x:Name="NonBrightRed"
+                                        Grid.Row="1"
+                                        Grid.Column="1"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(1), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <TextBlock x:Uid="ColorScheme_Green"
+                                   Grid.Row="2"
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
+                        <ContentControl x:Name="NonBrightGreen"
+                                        Grid.Row="2"
+                                        Grid.Column="1"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(2), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <TextBlock x:Uid="ColorScheme_Yellow"
+                                   Grid.Row="3"
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
+                        <ContentControl x:Name="NonBrightYellow"
+                                        Grid.Row="3"
+                                        Grid.Column="1"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(3), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <TextBlock x:Uid="ColorScheme_Blue"
+                                   Grid.Row="4"
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
+                        <ContentControl x:Name="NonBrightBlue"
+                                        Grid.Row="4"
+                                        Grid.Column="1"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(4), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <TextBlock x:Uid="ColorScheme_Purple"
+                                   Grid.Row="5"
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
+                        <ContentControl x:Name="NonBrightPurple"
+                                        Grid.Row="5"
+                                        Grid.Column="1"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(5), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <TextBlock x:Uid="ColorScheme_Cyan"
+                                   Grid.Row="6"
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
+                        <ContentControl x:Name="NonBrightCyan"
+                                        Grid.Row="6"
+                                        Grid.Column="1"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(6), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <TextBlock x:Uid="ColorScheme_White"
+                                   Grid.Row="7"
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
+                        <ContentControl x:Name="NonBrightWhite"
+                                        Grid.Row="7"
+                                        Grid.Column="1"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(7), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <ContentControl x:Name="BrightBlack"
+                                        Grid.Row="0"
+                                        Grid.Column="2"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(8), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <ContentControl x:Name="BrightRed"
+                                        Grid.Row="1"
+                                        Grid.Column="2"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(9), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <ContentControl x:Name="BrightGreen"
+                                        Grid.Row="2"
+                                        Grid.Column="2"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(10), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <ContentControl x:Name="BrightYellow"
+                                        Grid.Row="3"
+                                        Grid.Column="2"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(11), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <ContentControl x:Name="BrightBlue"
+                                        Grid.Row="4"
+                                        Grid.Column="2"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(12), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <ContentControl x:Name="BrightPurple"
+                                        Grid.Row="5"
+                                        Grid.Column="2"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(13), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <ContentControl x:Name="BrightCyan"
+                                        Grid.Row="6"
+                                        Grid.Column="2"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(14), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
+                        <ContentControl x:Name="BrightWhite"
+                                        Grid.Row="7"
+                                        Grid.Column="2"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ColorEntryAt(15), Mode=OneWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
                     </Grid>
                 </StackPanel>
 
@@ -221,7 +348,7 @@
                         <ContentControl x:Name="ForegroundButton"
                                         Grid.Row="0"
                                         Grid.Column="1"
-                                        Content="{x:Bind CurrentForegroundColor, Mode=TwoWay}"
+                                        Content="{x:Bind ViewModel.CurrentScheme.ForegroundColor, Mode=OneWay}"
                                         ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                         Style="{StaticResource ColorControlStyle}" />
 
@@ -233,7 +360,7 @@
                         <ContentControl x:Name="BackgroundButton"
                                         Grid.Row="1"
                                         Grid.Column="1"
-                                        Content="{x:Bind CurrentBackgroundColor, Mode=TwoWay}"
+                                        Content="{x:Bind ViewModel.CurrentScheme.BackgroundColor, Mode=OneWay}"
                                         ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                         Style="{StaticResource ColorControlStyle}" />
 
@@ -245,7 +372,7 @@
                         <ContentControl x:Name="CursorColorButton"
                                         Grid.Row="2"
                                         Grid.Column="1"
-                                        Content="{x:Bind CurrentCursorColor, Mode=TwoWay}"
+                                        Content="{x:Bind ViewModel.CurrentScheme.CursorColor, Mode=OneWay}"
                                         ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                         Style="{StaticResource ColorControlStyle}" />
 
@@ -257,7 +384,7 @@
                         <ContentControl x:Name="SelectionBackgroundButton"
                                         Grid.Row="3"
                                         Grid.Column="1"
-                                        Content="{x:Bind CurrentSelectionBackgroundColor, Mode=TwoWay}"
+                                        Content="{x:Bind ViewModel.CurrentScheme.SelectionBackgroundColor, Mode=OneWay}"
                                         ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                         Style="{StaticResource ColorControlStyle}" />
                     </Grid>
@@ -267,7 +394,7 @@
             <!--  Delete Button  -->
             <StackPanel Style="{StaticResource PivotStackStyle}">
                 <Button x:Name="DeleteButton"
-                        IsEnabled="{x:Bind CanDeleteCurrentScheme, Mode=OneWay}"
+                        IsEnabled="{x:Bind ViewModel.CanDeleteCurrentScheme, Mode=OneWay}"
                         Style="{StaticResource DeleteButtonStyle}">
                     <Button.Content>
                         <StackPanel Orientation="Horizontal">
@@ -287,9 +414,10 @@
                         </Flyout>
                     </Button.Flyout>
                 </Button>
-                <TextBlock x:Name="DeleteButtonDisclaimer"
+                <TextBlock x:Uid="ColorScheme_DeleteButtonDisclaimerInBox"
                            VerticalAlignment="Center"
-                           Style="{StaticResource DisclaimerStyle}" />
+                           Style="{StaticResource DisclaimerStyle}"
+                           Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(ViewModel.CanDeleteCurrentScheme), Mode=OneWay}" />
             </StackPanel>
         </StackPanel>
         <VisualStateManager.VisualStateGroups>

src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.cpp

@@ -0,0 +1,188 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#include "pch.h"
+#include "ColorSchemesPageViewModel.h"
+#include "ColorSchemesPageViewModel.g.cpp"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    inline static constexpr std::array<std::wstring_view, 9> InBoxSchemes = {
+        L"Campbell",
+        L"Campbell Powershell",
+        L"Vintage",
+        L"One Half Dark",
+        L"One Half Light",
+        L"Solarized Dark",
+        L"Solarized Light",
+        L"Tango Dark",
+        L"Tango Light"
+    };
+
+    ColorSchemesPageViewModel::ColorSchemesPageViewModel(const Model::CascadiaSettings& settings) :
+        _settings{ settings },
+        _viewModelToSchemeMap{ winrt::single_threaded_map<Editor::ColorSchemeViewModel, Model::ColorScheme>() }
+    {
+        _MakeColorSchemeVMsHelper();
+        CurrentScheme(_AllColorSchemes.GetAt(0));
+    }
+
+    void ColorSchemesPageViewModel::UpdateSettings(const Model::CascadiaSettings& settings)
+    {
+        _settings = settings;
+
+        // We want to re-initialize our AllColorSchemes list, but we want to make sure
+        // we still have the same CurrentScheme as before (if that scheme still exists)
+
+        // Store the name of the current scheme
+        const auto currentSchemeName = CurrentScheme().Name();
+
+        // Re-initialize the color scheme list
+        _MakeColorSchemeVMsHelper();
+
+        // Re-select the previously selected scheme if it exists
+        const auto it = _AllColorSchemes.First();
+        while (it.HasCurrent())
+        {
+            auto scheme = *it;
+            if (scheme.Name() == currentSchemeName)
+            {
+                CurrentScheme(scheme);
+                break;
+            }
+            it.MoveNext();
+        }
+        if (!it.HasCurrent())
+        {
+            // we didn't find the previously selected scheme, just select the first one
+            CurrentScheme(_AllColorSchemes.GetAt(0));
+        }
+    }
+
+    void ColorSchemesPageViewModel::CurrentScheme(const Editor::ColorSchemeViewModel& newSelectedScheme)
+    {
+        if (_CurrentScheme != newSelectedScheme)
+        {
+            _CurrentScheme = newSelectedScheme;
+            _PropertyChangedHandlers(*this, Windows::UI::Xaml::Data::PropertyChangedEventArgs{ L"CurrentScheme" });
+            _PropertyChangedHandlers(*this, Windows::UI::Xaml::Data::PropertyChangedEventArgs{ L"CanDeleteCurrentScheme" });
+        }
+    }
+
+    Editor::ColorSchemeViewModel ColorSchemesPageViewModel::CurrentScheme()
+    {
+        return _CurrentScheme;
+    }
+
+    void ColorSchemesPageViewModel::AddNew_Click(const IInspectable& /*sender*/, const winrt::Windows::UI::Xaml::RoutedEventArgs& /*e*/)
+    {
+        CurrentScheme(_AddNewScheme());
+    }
+
+    void ColorSchemesPageViewModel::_MakeColorSchemeVMsHelper()
+    {
+        std::vector<Editor::ColorSchemeViewModel> allColorSchemes;
+
+        const auto colorSchemeMap = _settings.GlobalSettings().ColorSchemes();
+        for (const auto& pair : colorSchemeMap)
+        {
+            const auto scheme = pair.Value();
+            Editor::ColorSchemeViewModel viewModel{ scheme };
+            allColorSchemes.emplace_back(viewModel);
+
+            // We will need access to the settings model object later, but we don't
+            // want to expose it on the color scheme VM, so we store the reference to it
+            // in our internal map
+            _viewModelToSchemeMap.Insert(viewModel, scheme);
+        }
+
+        _AllColorSchemes = single_threaded_observable_vector<Editor::ColorSchemeViewModel>(std::move(allColorSchemes));
+    }
+
+    void ColorSchemesPageViewModel::RequestEnterRename()
+    {
+        InRenameMode(true);
+    }
+
+    bool ColorSchemesPageViewModel::RequestExitRename(bool saveChanges, hstring newName)
+    {
+        InRenameMode(false);
+        if (saveChanges)
+        {
+            // check if different name is already in use
+            const auto oldName{ CurrentScheme().Name() };
+            if (newName != oldName && _settings.GlobalSettings().ColorSchemes().HasKey(newName))
+            {
+                return false;
+            }
+            else
+            {
+                // update the settings model
+                CurrentScheme().Name(newName);
+                _settings.GlobalSettings().RemoveColorScheme(oldName);
+                _settings.GlobalSettings().AddColorScheme(_viewModelToSchemeMap.Lookup(CurrentScheme()));
+                _settings.UpdateColorSchemeReferences(oldName, newName);
+                return true;
+            }
+        }
+        return false;
+    }
+
+    void ColorSchemesPageViewModel::RequestDeleteCurrentScheme()
+    {
+        const auto name{ CurrentScheme().Name() };
+        const auto size{ _AllColorSchemes.Size() };
+
+        for (uint32_t i = 0; i < size; ++i)
+        {
+            if (_AllColorSchemes.GetAt(i).Name() == name)
+            {
+                _viewModelToSchemeMap.Remove(_AllColorSchemes.GetAt(i));
+                _AllColorSchemes.RemoveAt(i);
+
+                if (i < _AllColorSchemes.Size())
+                {
+                    // select same index
+                    CurrentScheme(_AllColorSchemes.GetAt(i));
+                }
+                else
+                {
+                    // select last color scheme (avoid out of bounds error)
+                    CurrentScheme(_AllColorSchemes.GetAt(i - 1));
+                }
+                break;
+            }
+        }
+
+        // Delete scheme from settings model
+        _settings.GlobalSettings().RemoveColorScheme(name);
+
+        // This ensures that the JSON is updated with "Campbell", because the color scheme was deleted
+        _settings.UpdateColorSchemeReferences(name, L"Campbell");
+    }
+
+    Editor::ColorSchemeViewModel ColorSchemesPageViewModel::_AddNewScheme()
+    {
+        const hstring schemeName{ fmt::format(L"Color Scheme {}", _settings.GlobalSettings().ColorSchemes().Size() + 1) };
+        Model::ColorScheme scheme{ schemeName };
+
+        // Add the new color scheme
+        _settings.GlobalSettings().AddColorScheme(scheme);
+
+        // Construct the new color scheme VM
+        const Editor::ColorSchemeViewModel schemeVM{ scheme };
+        _AllColorSchemes.Append(schemeVM);
+        _viewModelToSchemeMap.Insert(schemeVM, scheme);
+        return schemeVM;
+    }
+
+    bool ColorSchemesPageViewModel::CanDeleteCurrentScheme() const
+    {
+        if (_CurrentScheme)
+        {
+            // Only allow this color scheme to be deleted if it's not provided in-box
+            return std::find(std::begin(InBoxSchemes), std::end(InBoxSchemes), _CurrentScheme.Name()) == std::end(InBoxSchemes);
+        }
+        return false;
+    }
+}

src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.h

@@ -0,0 +1,49 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#pragma once
+
+#include "ColorSchemesPageViewModel.g.h"
+#include "ColorSchemeViewModel.h"
+#include "Utils.h"
+#include "ViewModelHelpers.h"
+#include "ColorSchemes.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    struct ColorSchemesPageViewModel : ColorSchemesPageViewModelT<ColorSchemesPageViewModel>, ViewModelHelper<ColorSchemesPageViewModel>
+    {
+    public:
+        ColorSchemesPageViewModel(const Model::CascadiaSettings& settings);
+        void UpdateSettings(const Model::CascadiaSettings& settings);
+
+        void CurrentScheme(const Editor::ColorSchemeViewModel& newSelectedScheme);
+        Editor::ColorSchemeViewModel CurrentScheme();
+
+        void AddNew_Click(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& e);
+
+        void RequestEnterRename();
+        bool RequestExitRename(bool saveChanges, winrt::hstring newName);
+        void RequestDeleteCurrentScheme();
+
+        bool CanDeleteCurrentScheme() const;
+
+        WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
+
+        WINRT_OBSERVABLE_PROPERTY(bool, InRenameMode, _PropertyChangedHandlers, false);
+        WINRT_OBSERVABLE_PROPERTY(Windows::Foundation::Collections::IObservableVector<Editor::ColorSchemeViewModel>, AllColorSchemes, _PropertyChangedHandlers, nullptr);
+
+    private:
+        Editor::ColorSchemeViewModel _CurrentScheme{ nullptr };
+        Model::CascadiaSettings _settings;
+        Windows::Foundation::Collections::IMap<Editor::ColorSchemeViewModel, Model::ColorScheme> _viewModelToSchemeMap;
+
+        void _MakeColorSchemeVMsHelper();
+        Editor::ColorSchemeViewModel _AddNewScheme();
+    };
+};
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation
+{
+    BASIC_FACTORY(ColorSchemesPageViewModel);
+}

src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.idl

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import "ColorSchemeViewModel.idl";
+
+namespace Microsoft.Terminal.Settings.Editor
+{
+    runtimeclass ColorSchemesPageViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
+    {
+        ColorSchemesPageViewModel(Microsoft.Terminal.Settings.Model.CascadiaSettings settings);
+        void UpdateSettings(Microsoft.Terminal.Settings.Model.CascadiaSettings settings);
+
+        void AddNew_Click(IInspectable sender, Windows.UI.Xaml.RoutedEventArgs e);
+
+        void RequestEnterRename();
+        Boolean RequestExitRename(Boolean saveChanges, String newName);
+        void RequestDeleteCurrentScheme();
+
+        ColorSchemeViewModel CurrentScheme;
+        Boolean CanDeleteCurrentScheme { get; };
+        Boolean InRenameMode { get; };
+        Windows.Foundation.Collections.IObservableVector<ColorSchemeViewModel> AllColorSchemes { get; };
+    }
+}

src/cascadia/TerminalSettingsEditor/MainPage.cpp

@@ -58,7 +58,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         _InitializeProfilesList();
 
-        _colorSchemesNavState = winrt::make<ColorSchemesPageNavigationState>(_settingsClone);
+        _colorSchemesPageVM = winrt::make<ColorSchemesPageViewModel>(_settingsClone);
 
         Automation::AutomationProperties::SetHelpText(SaveButton(), RS_(L"Settings_SaveSettingsButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip"));
         Automation::AutomationProperties::SetHelpText(ResetButton(), RS_(L"Settings_ResetSettingsButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip"));
@@ -130,7 +130,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         // Repopulate profile-related menu items
         _InitializeProfilesList();
         // Update the Nav State with the new version of the settings
-        _colorSchemesNavState.Settings(_settingsClone);
+        _colorSchemesPageVM.UpdateSettings(_settingsClone);
+
         // We'll update the profile in the _profilesNavState whenever we actually navigate to one
 
         // now that the menuItems are repopulated,
@@ -389,7 +390,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
         else if (clickedItemTag == colorSchemesTag)
         {
-            contentFrame().Navigate(xaml_typename<Editor::ColorSchemes>(), _colorSchemesNavState);
+            contentFrame().Navigate(xaml_typename<Editor::ColorSchemes>(), _colorSchemesPageVM);
             const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_ColorSchemes/Content"), BreadcrumbSubPage::None);
             _breadcrumbs.Append(crumb);
         }

src/cascadia/TerminalSettingsEditor/MainPage.h

@@ -65,7 +65,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void _Navigate(hstring clickedItemTag, BreadcrumbSubPage subPage);
         void _Navigate(const Editor::ProfileViewModel& profile, BreadcrumbSubPage subPage, const bool focusDeleteButton = false);
 
-        winrt::Microsoft::Terminal::Settings::Editor::ColorSchemesPageNavigationState _colorSchemesNavState{ nullptr };
+        winrt::Microsoft::Terminal::Settings::Editor::ColorSchemesPageViewModel _colorSchemesPageVM{ nullptr };
 
         Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _profileViewModelChangedRevoker;
     };

src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj

@@ -81,6 +81,14 @@
       <DependentUpon>ProfileViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
     </ClInclude>
+    <ClInclude Include="ColorSchemeViewModel.h">
+      <DependentUpon>ColorSchemeViewModel.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
+    <ClInclude Include="ColorSchemesPageViewModel.h">
+      <DependentUpon>ColorSchemesPageViewModel.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="RenderingViewModel.h">
       <DependentUpon>RenderingViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
@@ -209,6 +217,14 @@
       <DependentUpon>ProfileViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
     </ClCompile>
+    <ClCompile Include="ColorSchemeViewModel.cpp">
+      <DependentUpon>ColorSchemeViewModel.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
+    <ClCompile Include="ColorSchemesPageViewModel.cpp">
+      <DependentUpon>ColorSchemesPageViewModel.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
     <ClCompile Include="RenderingViewModel.cpp">
       <DependentUpon>RenderingViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
@@ -295,6 +311,8 @@
       <SubType>Code</SubType>
     </Midl>
     <Midl Include="ProfileViewModel.idl" />
+    <Midl Include="ColorSchemeViewModel.idl" />
+    <Midl Include="ColorSchemesPageViewModel.idl" />
     <Midl Include="RenderingViewModel.idl" />
     <Midl Include="InteractionViewModel.idl" />
     <Midl Include="GlobalAppearanceViewModel.idl" />

src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters

@@ -18,6 +18,8 @@
   </ItemGroup>
   <ItemGroup>
     <Midl Include="ProfileViewModel.idl" />
+    <Midl Include="ColorSchemeViewModel.idl" />
+    <Midl Include="ColorSchemesPageViewModel.idl" />
     <Midl Include="RenderingViewModel.idl" />
     <Midl Include="InteractionViewModel.idl" />
     <Midl Include="GlobalAppearanceViewModel.idl" />

src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw

@@ -139,43 +139,43 @@
     <value>Background</value>
     <comment>This is the header for a control that lets the user select the background color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_Black.Header" xml:space="preserve">
+  <data name="ColorScheme_Black.Text" xml:space="preserve">
     <value>Black</value>
     <comment>This is the header for a control that lets the user select the black color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_Blue.Header" xml:space="preserve">
+  <data name="ColorScheme_Blue.Text" xml:space="preserve">
     <value>Blue</value>
     <comment>This is the header for a control that lets the user select the blue color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_BrightBlack.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightBlack.Text" xml:space="preserve">
     <value>Bright black</value>
     <comment>This is the header for a control that lets the user select the bright black color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_BrightBlue.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightBlue.Text" xml:space="preserve">
     <value>Bright blue</value>
     <comment>This is the header for a control that lets the user select the bright blue color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_BrightCyan.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightCyan.Text" xml:space="preserve">
     <value>Bright cyan</value>
     <comment>This is the header for a control that lets the user select the bright cyan color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_BrightGreen.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightGreen.Text" xml:space="preserve">
     <value>Bright green</value>
     <comment>This is the header for a control that lets the user select the bright green color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_BrightPurple.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightPurple.Text" xml:space="preserve">
     <value>Bright purple</value>
     <comment>This is the header for a control that lets the user select the bright purple color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_BrightRed.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightRed.Text" xml:space="preserve">
     <value>Bright red</value>
     <comment>This is the header for a control that lets the user select the bright red color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_BrightWhite.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightWhite.Text" xml:space="preserve">
     <value>Bright white</value>
     <comment>This is the header for a control that lets the user select the bright white color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_BrightYellow.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightYellow.Text" xml:space="preserve">
     <value>Bright yellow</value>
     <comment>This is the header for a control that lets the user select the bright yellow color for text displayed on the screen.</comment>
   </data>
@@ -183,7 +183,7 @@
     <value>Cursor color</value>
     <comment>This is the header for a control that lets the user select the text cursor's color displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_Cyan.Header" xml:space="preserve">
+  <data name="ColorScheme_Cyan.Text" xml:space="preserve">
     <value>Cyan</value>
     <comment>This is the header for a control that lets the user select the cyan color for text displayed on the screen.</comment>
   </data>
@@ -191,11 +191,11 @@
     <value>Foreground</value>
     <comment>This is the header for a control that lets the user select the foreground color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_Green.Header" xml:space="preserve">
+  <data name="ColorScheme_Green.Text" xml:space="preserve">
     <value>Green</value>
     <comment>This is the header for a control that lets the user select the green color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_Purple.Header" xml:space="preserve">
+  <data name="ColorScheme_Purple.Text" xml:space="preserve">
     <value>Purple</value>
     <comment>This is the header for a control that lets the user select the purple color for text displayed on the screen.</comment>
   </data>
@@ -203,15 +203,15 @@
     <value>Selection background</value>
     <comment>This is the header for a control that lets the user select the background color for selected text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_Red.Header" xml:space="preserve">
+  <data name="ColorScheme_Red.Text" xml:space="preserve">
     <value>Red</value>
     <comment>This is the header for a control that lets the user select the red color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_White.Header" xml:space="preserve">
+  <data name="ColorScheme_White.Text" xml:space="preserve">
     <value>White</value>
     <comment>This is the header for a control that lets the user select the white color for text displayed on the screen.</comment>
   </data>
-  <data name="ColorScheme_Yellow.Header" xml:space="preserve">
+  <data name="ColorScheme_Yellow.Text" xml:space="preserve">
     <value>Yellow</value>
     <comment>This is the header for a control that lets the user select the yellow color for text displayed on the screen.</comment>
   </data>
@@ -1221,7 +1221,7 @@
     <value>Rename</value>
     <comment>Text label for a button that can be used to begin the renaming process.</comment>
   </data>
-  <data name="ColorScheme_DeleteButtonDisclaimerInBox" xml:space="preserve">
+  <data name="ColorScheme_DeleteButtonDisclaimerInBox.Text" xml:space="preserve">
     <value>This color scheme cannot be deleted or renamed because it is included by default.</value>
     <comment>Disclaimer presented next to the delete button when it is disabled.</comment>
   </data>