Make InPlaceTextEditor example more interesting using IEditableObject and MVVM x:Bind

Author: michael-hawker

components/Adorners/samples/Adorners.Samples.csproj

@@ -6,6 +6,10 @@
     <LangVersion>preview</LangVersion>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
+  </ItemGroup>
+
   <!-- Sets this up as a toolkit component's sample project -->
   <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
 </Project>

components/Adorners/samples/Adorners.md

@@ -52,11 +52,13 @@ The above examples highlights how adorners are sized and positioned directly ato
 
 ## Custom Adorner Example
 
-Adorners can be subclassed in order to encapsulate specific logic and/or styling for your scenario. For instance, you may want to create a custom Adorner that allows a user to edit a piece of text in place:
+Adorners can be subclassed in order to encapsulate specific logic and/or styling for your scenario.
+For instance, you may want to create a custom Adorner that allows a user to click and edit a piece of text in place.
+The following example uses `IEditableObject` to control the editing lifecycle coordinated with a typical MVVM pattern binding:
 
 > [!SAMPLE InPlaceTextEditorAdornerSample]
 
-Adorners are templated controls, but you can use a class-backed resource dictionary to better enable usage of x:Bind for easier creation.
+Adorners are template-based controls, but you can use a class-backed resource dictionary to better enable usage of x:Bind for easier creation and binding to the `AdornedElement`, as seen here.
 
 ## TODO: Resize Example
 

components/Adorners/samples/InPlaceTextEditor/InPlaceTextEditorAdornerSample.xaml

@@ -68,9 +68,12 @@
     </Page.Resources>
 
     <StackPanel Spacing="8">
-        <TextBlock Text="Editable Text:" />
+        <TextBlock Text="Click the editable text below to edit:" />
 
-        <TextBlock Text="Hello, World!">
+        <!-- We set the DataContext here for our Adorner to retrieve the IEditableObject reference -->
+        <!-- We use TwoWay binding to ensure the updates from the Adorner are reflected in the ViewModel -->
+        <TextBlock DataContext="{x:Bind ViewModel}"
+                   Text="{x:Bind ViewModel.MyText, Mode=TwoWay}">
             <ui:AdornerLayer.Xaml>
                 <!-- Style manually set here as local to example -->
                 <local:InPlaceTextEditorAdorner Style="{StaticResource DefaultInPlaceTextEditorAdornerStyle}"/>

components/Adorners/samples/InPlaceTextEditor/InPlaceTextEditorAdornerSample.xaml.cs

@@ -2,19 +2,66 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.WinUI;
 
 namespace AdornersExperiment.Samples.InPlaceTextEditor;
 
 [ToolkitSample(id: nameof(InPlaceTextEditorAdornerSample), "In place text editor Adorner", description: "A sample for showing how add a popup TextBox component via an Adorner of a TextBlock.")]
 public sealed partial class InPlaceTextEditorAdornerSample : Page
 {
+    public MyViewModel ViewModel { get; } = new();
+
     public InPlaceTextEditorAdornerSample()
     {
         this.InitializeComponent();
     }
 }
 
+/// <summary>
+/// ViewModel that shows using <see cref="IEditableObject"/> in conjunction with an Adorner.
+/// </summary>
+public partial class MyViewModel : ObservableObject, IEditableObject
+{
+    [ObservableProperty]
+    public partial string MyText { get; set; } = "Hello, World!";
+
+    bool _isEditing = false;
+    private string _backupText = string.Empty;
+
+    public void BeginEdit()
+    {
+        if (!_isEditing)
+        {
+            _backupText = MyText;
+            _isEditing = true;
+        }
+    }
+
+    public void CancelEdit()
+    {
+        if (_isEditing)
+        {
+            MyText = _backupText;
+            _isEditing = false;
+        }
+    }
+
+    public void EndEdit()
+    {
+        if (_isEditing)
+        {
+            _backupText = MyText;
+            _isEditing = false;
+        }
+    }
+}
+
+/// <summary>
+/// An Adorner that shows a popup TextBox for editing a TextBlock's text.
+/// If that TextBlock's DataContext implements <see cref="IEditableObject"/>,
+/// it will be used to manage the editing session.
+/// </summary>
 public sealed partial class InPlaceTextEditorAdorner : Adorner<TextBlock>
 {
     /// <summary>
@@ -30,9 +77,7 @@ public bool IsPopupOpen
     /// Identifies the <see cref="IsPopupOpen"/> dependency property.
     /// </summary>
     public static readonly DependencyProperty IsPopupOpenProperty =
-        DependencyProperty.Register("IsPopupOpen", typeof(bool), typeof(InPlaceTextEditorAdorner), new PropertyMetadata(false));
-
-    private string _originalText = string.Empty;
+        DependencyProperty.Register(nameof(IsPopupOpen), typeof(bool), typeof(InPlaceTextEditorAdorner), new PropertyMetadata(false));
 
     public InPlaceTextEditorAdorner()
     {
@@ -63,18 +108,28 @@ protected override void OnDetaching()
 
     private void AdornedElement_Tapped(object sender, TappedRoutedEventArgs e)
     {
-        _originalText = AdornedElement?.Text ?? string.Empty;
+        if (AdornedElement?.DataContext is IEditableObject editableObject)
+        {
+            editableObject.BeginEdit();
+        }
         IsPopupOpen = true;
     }
 
     public void ConfirmButton_Click(object sender, RoutedEventArgs e)
     {
+        if (AdornedElement?.DataContext is IEditableObject editableObject)
+        {
+            editableObject.EndEdit();
+        }
         IsPopupOpen = false;
     }
 
     public void CloseButton_Click(object sender, RoutedEventArgs e)
     {
-        AdornedElement?.Text = _originalText;
+        if (AdornedElement?.DataContext is IEditableObject editableObject)
+        {
+            editableObject.CancelEdit();
+        }
         IsPopupOpen = false;
     }
 }