Show a preview of the control in the SUI

src/cascadia/TerminalControl/TermControl.cpp

@@ -2331,6 +2331,11 @@ namespace winrt::Microsoft::Terminal::Control::implementation
         return _settings;
     }
 
+    void TermControl::Settings(IControlSettings newSettings)
+    {
+        _settings = newSettings;
+    }
+
     Windows::Foundation::IReference<winrt::Windows::UI::Color> TermControl::TabColor() noexcept
     {
         // NOTE TO FUTURE READERS: TabColor is down in the Core for the

src/cascadia/TerminalControl/TermControl.h

@@ -88,6 +88,7 @@ namespace winrt::Microsoft::Terminal::Control::implementation
         const Windows::UI::Xaml::Thickness GetPadding();
 
         IControlSettings Settings() const;
+        void Settings(IControlSettings newSettings);
 
         static Windows::Foundation::Size GetProposedDimensions(IControlSettings const& settings, const uint32_t dpi);
         static Windows::Foundation::Size GetProposedDimensions(const winrt::Windows::Foundation::Size& initialSizeInChars,

src/cascadia/TerminalControl/TermControl.idl

@@ -22,7 +22,7 @@ namespace Microsoft.Terminal.Control
 
         void UpdateSettings();
 
-        Microsoft.Terminal.Control.IControlSettings Settings { get; };
+        Microsoft.Terminal.Control.IControlSettings Settings;
         Microsoft.Terminal.Control.IControlAppearance UnfocusedAppearance;
 
         event FontSizeChangedEventArgs FontSizeChanged;

src/cascadia/TerminalSettingsEditor/MainPage.cpp

@@ -39,9 +39,9 @@ static const std::wstring_view globalAppearanceTag{ L"GlobalAppearance_Nav" };
 
 namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 {
-    static Editor::ProfileViewModel _viewModelForProfile(const Model::Profile& profile)
+    static Editor::ProfileViewModel _viewModelForProfile(const Model::Profile& profile, const Model::CascadiaSettings& appSettings)
     {
-        return winrt::make<implementation::ProfileViewModel>(profile);
+        return winrt::make<implementation::ProfileViewModel>(profile, appSettings);
     }
 
     MainPage::MainPage(const CascadiaSettings& settings) :
@@ -368,7 +368,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         // profile changes.
         for (const auto& profile : _settingsClone.AllProfiles())
         {
-            auto navItem = _CreateProfileNavViewItem(_viewModelForProfile(profile));
+            auto navItem = _CreateProfileNavViewItem(_viewModelForProfile(profile, _settingsClone));
             SettingsNav().MenuItems().Append(navItem);
         }
 
@@ -388,7 +388,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     void MainPage::_CreateAndNavigateToNewProfile(const uint32_t index, const Model::Profile& profile)
     {
         const auto newProfile{ profile ? profile : _settingsClone.CreateNewProfile() };
-        const auto profileViewModel{ _viewModelForProfile(newProfile) };
+        const auto profileViewModel{ _viewModelForProfile(newProfile, _settingsClone) };
         const auto navItem{ _CreateProfileNavViewItem(profileViewModel) };
         SettingsNav().MenuItems().InsertAt(index, navItem);
 

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

@@ -102,6 +102,7 @@
       <DependentUpon>SettingContainer.idl</DependentUpon>
     </ClInclude>
     <ClInclude Include="Utils.h" />
+    <ClInclude Include="PreviewConnection.h" />
   </ItemGroup>
   <!-- ========================= XAML files ======================== -->
   <ItemGroup>
@@ -208,6 +209,9 @@
       <DependentUpon>SettingContainer.idl</DependentUpon>
     </ClCompile>
     <ClCompile Include="Utils.cpp" />
+    <ClCompile Include="PreviewConnection.cpp">
+      <DependentUpon>PreviewConnection.h</DependentUpon>
+    </ClCompile>
   </ItemGroup>
   <!-- ========================= idl Files ======================== -->
   <ItemGroup>

src/cascadia/TerminalSettingsEditor/PreviewConnection.cpp

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#include "pch.h"
+#include "PreviewConnection.h"
+#include <LibraryResources.h>
+
+using namespace ::winrt::Microsoft::Terminal::TerminalConnection;
+using namespace ::winrt::Windows::Foundation;
+
+static constexpr std::wstring_view PreviewText{ L"Windows Terminal\r\nCopyright (c) Microsoft Corporation.\r\n\nC:\\Windows\\Terminal> " };
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    PreviewConnection::PreviewConnection() noexcept
+    {
+    }
+
+    void PreviewConnection::Start() noexcept
+    {
+        // First send a sequence to disable cursor blinking
+        _TerminalOutputHandlers(L"\x1b[?12l");
+        // Send the preview text
+        _TerminalOutputHandlers(PreviewText);
+    }
+
+    void PreviewConnection::WriteInput(hstring const& /*data*/)
+    {
+    }
+
+    void PreviewConnection::Resize(uint32_t /*rows*/, uint32_t /*columns*/) noexcept
+    {
+    }
+
+    void PreviewConnection::Close() noexcept
+    {
+    }
+}

src/cascadia/TerminalSettingsEditor/PreviewConnection.h

@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+//
+// Module Name:
+// - PreviewConnection.h
+//
+// Abstract:
+// - This class is used to initialize the preview TermControl in the Settings UI
+//
+// Author:
+// - Pankaj Bhojwani March-2021
+
+#pragma once
+
+#include <winrt/Microsoft.Terminal.TerminalConnection.h>
+#include "../../inc/cppwinrt_utils.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    class PreviewConnection : public winrt::implements<PreviewConnection, winrt::Microsoft::Terminal::TerminalConnection::ITerminalConnection>
+    {
+    public:
+        PreviewConnection() noexcept;
+
+        void Start() noexcept;
+        void WriteInput(hstring const& data);
+        void Resize(uint32_t rows, uint32_t columns) noexcept;
+        void Close() noexcept;
+
+        winrt::Microsoft::Terminal::TerminalConnection::ConnectionState State() const noexcept { return winrt::Microsoft::Terminal::TerminalConnection::ConnectionState::Connected; }
+
+        WINRT_CALLBACK(TerminalOutput, winrt::Microsoft::Terminal::TerminalConnection::TerminalOutputHandler);
+        TYPED_EVENT(StateChanged, winrt::Microsoft::Terminal::TerminalConnection::ITerminalConnection, IInspectable);
+    };
+}

src/cascadia/TerminalSettingsEditor/Profiles.cpp

@@ -3,6 +3,7 @@
 
 #include "pch.h"
 #include "Profiles.h"
+#include "PreviewConnection.h"
 #include "Profiles.g.cpp"
 #include "EnumEntry.h"
 
@@ -85,9 +86,10 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     Windows::Foundation::Collections::IObservableVector<Editor::Font> ProfileViewModel::_MonospaceFontList{ nullptr };
     Windows::Foundation::Collections::IObservableVector<Editor::Font> ProfileViewModel::_FontList{ nullptr };
 
-    ProfileViewModel::ProfileViewModel(const Model::Profile& profile) :
+    ProfileViewModel::ProfileViewModel(const Model::Profile& profile, const Model::CascadiaSettings& appSettings) :
         _profile{ profile },
-        _ShowAllFonts{ false }
+        _ShowAllFonts{ false },
+        _appSettings{ appSettings }
     {
         // Add a property changed handler to our own property changed event.
         // This propagates changes from the settings model to anybody listening to our
@@ -147,6 +149,11 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
     }
 
+    Model::TerminalSettings ProfileViewModel::TermSettings() const
+    {
+        return Model::TerminalSettings::CreateWithProfileByID(_appSettings, _profile.Guid(), nullptr).DefaultSettings();
+    }
+
     // Method Description:
     // - Updates the lists of fonts and sorts them alphabetically
     void ProfileViewModel::UpdateFontList() noexcept
@@ -428,7 +435,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     }
 
     Profiles::Profiles() :
-        _ColorSchemeList{ single_threaded_observable_vector<ColorScheme>() }
+        _ColorSchemeList{ single_threaded_observable_vector<ColorScheme>() },
+        _previewControl{ Control::TermControl(Model::TerminalSettings{}, make<PreviewConnection>()) }
     {
         InitializeComponent();
 
@@ -472,6 +480,10 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Automation::AutomationProperties::SetFullDescription(ShowAllFontsCheckbox(), unbox_value<hstring>(showAllFontsCheckboxTooltip));
 
         Automation::AutomationProperties::SetName(DeleteButton(), RS_(L"Profile_DeleteButton/Text"));
+
+        _previewControl.IsEnabled(false);
+        _previewControl.AllowFocusWhenDisabled(false);
+        ControlPreview().Child(_previewControl);
     }
 
     IInspectable Profiles::CurrentFontFace() const
@@ -596,10 +608,20 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             {
                 _UpdateBIAlignmentControl(static_cast<int32_t>(_State.Profile().BackgroundImageAlignment()));
             }
+            _previewControl.Settings(_State.Profile().TermSettings());
+            _previewControl.UpdateSettings();
         });
 
         // Navigate to the pivot in the provided navigation state
         ProfilesPivot().SelectedIndex(static_cast<int>(_State.LastActivePivot()));
+
+        _previewControl.Settings(_State.Profile().TermSettings());
+        // There is a possibility that the control has not fully initialized yet,
+        // so wait for it to initialize before updating the settings (so we know
+        // that the renderer is set up)
+        _previewControl.Initialized([&](auto&& /*s*/, auto&& /*e*/) {
+            _previewControl.UpdateSettings();
+        });
     }
 
     void Profiles::OnNavigatedFrom(const NavigationEventArgs& /*e*/)

src/cascadia/TerminalSettingsEditor/Profiles.h

@@ -37,7 +37,9 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     struct ProfileViewModel : ProfileViewModelT<ProfileViewModel>, ViewModelHelper<ProfileViewModel>
     {
     public:
-        ProfileViewModel(const Model::Profile& profile);
+        ProfileViewModel(const Model::Profile& profile, const Model::CascadiaSettings& settings);
+
+        Model::TerminalSettings TermSettings() const;
 
         // background image
         bool UseDesktopBGImage();
@@ -110,6 +112,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         static Windows::Foundation::Collections::IObservableVector<Editor::Font> _FontList;
 
         static Editor::Font _GetFont(com_ptr<IDWriteLocalizedStrings> localizedFamilyNames);
+
+        Model::CascadiaSettings _appSettings;
     };
 
     struct DeleteProfileEventArgs :
@@ -207,6 +211,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Editor::EnumEntry _CustomFontWeight{ nullptr };
         std::array<Windows::UI::Xaml::Controls::Primitives::ToggleButton, 9> _BIAlignmentButtons;
         Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _ViewModelChangedRevoker;
+
+        Microsoft::Terminal::Control::TermControl _previewControl;
     };
 };
 

src/cascadia/TerminalSettingsEditor/Profiles.idl

@@ -22,6 +22,7 @@ namespace Microsoft.Terminal.Settings.Editor
     {
         Windows.Foundation.Collections.IObservableVector<Font> CompleteFontList { get; };
         Windows.Foundation.Collections.IObservableVector<Font> MonospaceFontList { get; };
+        Microsoft.Terminal.Settings.Model.TerminalSettings TermSettings { get; };
 
         Boolean CanDeleteProfile { get; };
         Boolean UsingMonospaceFont { get; };

src/cascadia/TerminalSettingsEditor/Profiles.xaml

@@ -33,7 +33,6 @@
                 <TextBlock FontFamily="{x:Bind Name}"
                            Text="{x:Bind LocalizedName}" />
             </DataTemplate>
-
             <local:ColorToBrushConverter x:Key="ColorToBrushConverter" />
             <local:PercentageConverter x:Key="PercentageConverter" />
             <local:FontWeightConverter x:Key="FontWeightConverter" />
@@ -238,6 +237,13 @@
                 <ScrollViewer>
                     <StackPanel>
                         <StackPanel Style="{StaticResource PivotStackStyle}">
+                            <!--  Control Preview  -->
+                            <Border x:Name="ControlPreview"
+                                    Width="350"
+                                    Height="160"
+                                    BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
+                                    BorderThickness="1" />
+
                             <!--  Grouping: Text  -->
                             <TextBlock x:Uid="Profile_TextHeader"
                                        Style="{StaticResource SubtitleTextBlockStyle}" />