Another Binding issue with Win UI 3

Question

I have thinned down the program I am working on to the essential parts that are not working. It started with 'Template Studio for WinUI3'. When run, on the 'Page' marked "C" I have a ComboBox with two buttons. The intent is that when the selection is made on the ComboBox, the 'Content' of the Buttons changes to suit the selection. The part-code for debugging can be found at [https://github.com/handysharp/SCPR-DEBUG.git]

I am concerned for the [ObservableObject] in the CircleOfFifthsPage.xaml.cs file. I am not sure that is correct. Ideally I would like to have keyIndex in the ViewModel without the need to pass it to ChangeDegrees. Below are parts of the xaml, backign code, and Viewmodel for the page I am struggling with. What am I missing? Thank in advance.

CircleOfFifthsPage.xaml

        <canvas:CanvasControl x:Name="canvas1" Height="900"/>
        
        <StackPanel>
            <Border Margin="0,20">
                <StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="scaledegree1" Content="{x:Bind ViewModel.Note1, Mode=OneWay}" FontFamily="Bahnschrift" FontWeight="Light" FontSize="20" Width="80" Margin="0,0,20,0"/>
                        <TextBlock Text="I" FontFamily="Constantia" FontWeight="Light" FontSize="28" Width="30"/>
                        <TextBlock Text="TONIC" FontFamily="Segoe UI" FontWeight="Normal" FontSize="18" Margin="40,8,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="scaledegree2" Content="{x:Bind ViewModel.Note2, Mode=OneWay}" FontFamily="Bahnschrift" FontWeight="Light" FontSize="20" Width="80" Margin="0,0,20,0"/>
                        <TextBlock Text="ii" FontFamily="Constantia" FontWeight="Light" FontSize="28" Width="30"/>
                        <TextBlock Text="SUPERTONIC" FontFamily="Segoe UI" FontWeight="Normal" FontSize="18" Margin="40,8,0,0"/>
                    </StackPanel>
                </StackPanel>
            </Border>    
            <ComboBox PlaceholderText="Select Key" Name="keyComboBox" Grid.Column="1" Grid.Row="0" Background="LightBlue" FontFamily="Segoe UI" Width="180" FontSize="20" SelectionChanged="keyComboBox_SelectionChanged" Margin="0,20,0,0">
                <x:String>C   or   Am</x:String>
                <x:String>G   or   Em</x:String>
            </ComboBox>
        </StackPanel>

CircleOfFifthsPage.xaml.cs

type hereusing CommunityToolkit.Mvvm.ComponentModel;
using Microsoft.Graphics.Canvas.UI.Xaml;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using SCPR.ViewModels;

namespace SCPR.Views;

[ObservableObject]
public sealed partial class CircleOfFifthsPage : Page
{
    [ObservableProperty]
    private int keyIndex = 0;

    public CircleOfFifthsPage()
    {
        ViewModel = App.GetService<CircleOfFifthsViewModel>();
        this.InitializeComponent();
    }

    public CircleOfFifthsViewModel ViewModel { get; } = new();

    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
//        canvas1.Draw += DrawCofFOutline;  - REMOVED
    }

    private void keyComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        KeyIndex = keyComboBox.SelectedIndex;
        //        CircleOfFifthsViewModel.DrawCircleOfFifths(sender, e, keyIndex);  - REMOVED
        CircleOfFifthsViewModel.ChangeDegrees(KeyIndex);
    }
}

CircleOfFifthsViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using Microsoft.Graphics.Canvas.UI.Xaml;

namespace SCPR.ViewModels;

public partial class CircleOfFifthsViewModel : ObservableRecipient
{
    public static string[] Tonic = new string[] { "C", "G", "D", "A", "E", "B", "F#", "Db", "Ab", "Eb", "Bb", "F" };
    public static string[] Minor2 = new string[] { "Dm", "Am", "Em", "Bm", "F#m", "Dbm", "Abm", "Ebm", "Bbm", "Fm", "Cm", "Gm" };

    [ObservableProperty]
    private int keyIndex = 0;

    [ObservableProperty]
    private string note1 = "C";

    [ObservableProperty]
    private string note2 = "D";

    public CircleOfFifthsViewModel()
    {
    }

    public static void ChangeDegrees(int keyIndex)
    {
        var ViewModel = new CircleOfFifthsViewModel();
        ViewModel.Note1 = Tonic[keyIndex];
        ViewModel.Note2 = Minor2[keyIndex];
    }

    public static void DrawCircleOfFifths(CanvasControl sender, CanvasDrawEventArgs args, int keyIndex)
    {
// DRAW CIRCLE OF FIFTHS ON THE CANVAS - REMOVED
    }
}

Dave

I have worked on this, and stared at it for days.