WPF Navigator bar mainwindow mainpage subviews image button main frame navigate

//mainwindow.xaml
<Window x:Class="WpfApp23.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp23"
        mc:Ignorable="d"
        WindowStyle="None"
        WindowState="Maximized"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="30"/>
        </Style>
    </Window.Resources>
    <Window.Background>
        <ImageBrush ImageSource="../Images/10.jpg"/>
    </Window.Background>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <WrapPanel Grid.Column="0" Orientation="Vertical">
            <Button Content="Main" Command="{Binding NavigateCommand}" CommandParameter="0"/>
            <Button Content="1" Command="{Binding NavigateCommand}" CommandParameter="1"/>
            <Button Content="2" Command="{Binding NavigateCommand}" CommandParameter="2"/>
            <Button Content="3" Command="{Binding NavigateCommand}" CommandParameter="3"/>
            <Button Content="4" Command="{Binding NavigateCommand}" CommandParameter="4"/>
            <Button Content="5" Command="{Binding NavigateCommand}" CommandParameter="5"/>
            <Button Content="6" Command="{Binding NavigateCommand}" CommandParameter="6"/>
            <Button Content="7" Command="{Binding NavigateCommand}" CommandParameter="7"/>
            <Button Content="8" Command="{Binding NavigateCommand}" CommandParameter="8"/>
            <Button Content="9" Command="{Binding NavigateCommand}" CommandParameter="9"/>
        </WrapPanel>
        <Frame x:Name="mainFrame" Grid.Column="1" NavigationUIVisibility="Hidden" 
               JournalOwnership="OwnsJournal"/>
    </Grid>
</Window>


//cs
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using WpfApp23.SubViews;

namespace WpfApp23
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var mainPageView = new MainPage();
            mainFrame.Navigate(mainPageView);
            this.DataContext= MainVM.mainVM;
            MainVM.mainVM.mainFrame=mainFrame;

        }
    }

    public class MainVM : INotifyPropertyChanged
    {
        public Frame mainFrame;
        List<UserControl> subViews;
        public static MainVM mainVM { get; set; }
        static MainVM()
        {
            mainVM=new MainVM();
        }
        public MainVM()
        {
            InitSubViews();
        }

        private void InitSubViews()
        {
            subViews=new List<UserControl>();
            subViews.Add(new MainPage());
            subViews.Add(new SubView1());
            subViews.Add(new SubView2());
            subViews.Add(new SubView3());
            subViews.Add(new SubView4());
            subViews.Add(new SubView5());
            subViews.Add(new SubView6());
            subViews.Add(new SubView7());
            subViews.Add(new SubView8());
            subViews.Add(new SubView9());
        }

        public event PropertyChangedEventHandler? PropertyChanged;
        private void OnPropertyChanged([CallerMemberName] string propName = "")
        {
            var handler = PropertyChanged;
            if (handler!=null)
            {
                handler?.Invoke(this, new PropertyChangedEventArgs(propName));
            }
        }

        private DelCommand navigateCommand;
        public DelCommand NavigateCommand
        {
            get
            {
                if (navigateCommand==null)
                {
                    navigateCommand=new DelCommand(NavigateCommandExecuted);
                }
                return navigateCommand;
            }
        }

        private void NavigateCommandExecuted(object? obj)
        {
            int idx = 0;
            if(Int32.TryParse(obj?.ToString(), out idx))
            {
                mainFrame.Navigate(subViews[idx]);
            }
        }
    }


    public class DelCommand : ICommand
    {
        private Action<object?> execute;
        private Predicate<object?> canExecute;
        public DelCommand(Action<object?> executeValue, Predicate<object?> canExecuteValue = null)
        {
            execute=executeValue;
            canExecute=canExecuteValue;
        }

        public event EventHandler? CanExecuteChanged
        {
            add
            {
                CommandManager.RequerySuggested+=value;
            }
            remove
            {
                CommandManager.RequerySuggested -= value;
            }
        }

        public bool CanExecute(object? parameter)
        {
            return canExecute==null ? true : canExecute(parameter);
        }

        public void Execute(object? parameter)
        {
            execute(parameter);
        }
    }
}


//mainpage.xaml
<UserControl x:Class="WpfApp23.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp23"
             mc:Ignorable="d"             
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="100"/>
            <Setter Property="Margin" Value="20,20,20,20"/>
        </Style>

        <Style x:Key="ImageButtonStyle" TargetType="Button">
            <!--<Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="/YourApp;component/Images/button-bg.png"/>
                </Setter.Value>
            </Setter>-->
            <Setter Property="FontSize" Value="100"/>
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="Margin" Value="20,20,20,20"/>
            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border x:Name="mainBorder" Background="{TemplateBinding Background}"/>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <Border x:Name="hoverOverlay" Background="#20FFFFFF" Opacity="0"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="hoverOverlay" Property="Opacity" Value="1"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="mainBorder" Property="Opacity" Value="0.9"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="FontSize" Value="200"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="../Images/10.jpg"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Content="1" Command="{Binding NavigateCommand}" CommandParameter="1" 
        Grid.Row="0" Grid.Column="0" Click="Button_Click" Style="{StaticResource ImageButtonStyle}">
            <Button.Background>
                <ImageBrush ImageSource="../Images/1.jpg"/>
            </Button.Background>
        </Button>
        <Button Content="2" Command="{Binding NavigateCommand}" CommandParameter="2" 
        Grid.Row="0" Grid.Column="1" Click="Button_Click" Style="{StaticResource ImageButtonStyle}">
            <Button.Background>
                <ImageBrush ImageSource="../Images/2.jpg"/>
            </Button.Background>
        </Button>
        <Button Content="3" Command="{Binding NavigateCommand}" CommandParameter="3" 
        Grid.Row="0" Grid.Column="2" Style="{StaticResource ImageButtonStyle}">
            <Button.Background>
                <ImageBrush ImageSource="../Images/3.jpg"/>
            </Button.Background>
        </Button>
        <Button Content="4" Command="{Binding NavigateCommand}" CommandParameter="4" 
        Grid.Row="1" Grid.Column="0" Style="{StaticResource ImageButtonStyle}">
            <Button.Background>
                <ImageBrush ImageSource="../Images/4.jpg"/>
            </Button.Background>
        </Button>
        <Button Content="5" Command="{Binding NavigateCommand}" CommandParameter="5" 
        Grid.Row="1" Grid.Column="1" Style="{StaticResource ImageButtonStyle}">
            <Button.Background>
                <ImageBrush ImageSource="../Images/5.jpg"/>
            </Button.Background>
        </Button>
        <Button Content="6" Command="{Binding NavigateCommand}" CommandParameter="6" 
        Grid.Row="1" Grid.Column="2" Style="{StaticResource ImageButtonStyle}">
            <Button.Background>
                <ImageBrush ImageSource="../Images/6.jpg"/>
            </Button.Background>
        </Button>
        <Button Content="7" Command="{Binding NavigateCommand}" CommandParameter="7" 
        Grid.Row="2" Grid.Column="0" Style="{StaticResource ImageButtonStyle}">
            <Button.Background>
                <ImageBrush ImageSource="../Images/7.jpg"/>
            </Button.Background>
        </Button>
        <Button Content="8" Command="{Binding NavigateCommand}" CommandParameter="8" 
        Grid.Row="2" Grid.Column="1" Style="{StaticResource ImageButtonStyle}">
            <Button.Background>
                <ImageBrush ImageSource="../Images/8.jpg"/>
            </Button.Background>
        </Button>
        <Button Content="9" Command="{Binding NavigateCommand}" CommandParameter="9" 
        Grid.Row="2" Grid.Column="2" Style="{StaticResource ImageButtonStyle}">
            <Button.Background>
                <ImageBrush ImageSource="../Images/9.jpg"/>
            </Button.Background>
        </Button>
    </Grid>
</UserControl>


//mainpage.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp23
{
    /// <summary>
    /// Interaction logic for MainPage.xaml
    /// </summary>
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.DataContext= MainVM.mainVM;
            this.DataContextChanged+=MainPage_DataContextChanged;
        }

        private void MainPage_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
             
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.DataContext= MainVM.mainVM;
        }
    }
}



//Subview1.xaml
<UserControl x:Class="WpfApp23.SubViews.SubView1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp23.SubViews"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="../Images/1.jpg"/>
        </Grid.Background>
        <TextBlock Text="1" FontSize="200" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</UserControl>


//Subview1.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp23.SubViews
{
    /// <summary>
    /// Interaction logic for SubView1.xaml
    /// </summary>
    public partial class SubView1 : UserControl
    {
        public SubView1()
        {
            InitializeComponent();
        }
    }
}