chrispulman/crisscross

A Navigation Framework for ReactiveUI based projects

CrissCross

A Navigation Framework for ReactiveUI based projects

What is CrissCross?

CrissCross is a navigation framework for ReactiveUI based projects. It is designed to be used with ReactiveUI, but could be adapted to be used with any MVVM framework.

Why CrissCross?

CrissCross is designed to be a simple, lightweight, and easy to use navigation framework. It is designed to be used with ReactiveUI.

How do I use CrissCross?

Step 1: Install CrissCross

CrissCross is available on NuGet. You can install it using the NuGet Package Manager:

Install-Package CrissCross

or

Install-Package CrissCross.WPF

or

Install-Package CrissCross.XamForms

or

Install-Package CrissCross.MAUI

or

Install-Package CrissCross.Avalonia

or

Install-Package CrissCross.WinForms

Step 2: Create a ViewModel

Create a ViewModel that inherits from RxObject. This is the ViewModel that will be used for the MainWindow.

    public class MainWindowViewModel : RxObject
    {
        public MainWindowViewModel()
        {
            this.BuildComplete(() =>
            {
                // Do something when the IOC Container is built
            });

            // Setup the IOC Container
            Locator.CurrentMutable.RegisterConstant<MainViewModel>(new());
            Locator.CurrentMutable.Register<IViewFor<MainViewModel>>(() => new MainView());

            Locator.CurrentMutable.RegisterConstant<FirstViewModel>(new());
            Locator.CurrentMutable.Register<IViewFor<FirstViewModel>>(() => new FirstView());
            
            // Notify the application that the IOC Container that it is complete and ready to use.
            Locator.CurrentMutable.SetupComplete();
        }
    }

Step 3: Create a View

Create a View that inherits from NavigationWindow. This is the View that will be used for the MainWindow. add xmlns:rxNav="https://github.com/ChrisPulman/CrissCross" to the Window inherits in XAML. Change Window to rxNav:NavigationWindow in XAML. Add x:TypeArguments="local:MainWindowViewModel"

    public partial class MainWindow : NavigationWindow<MainWindowViewModel>
    {
        public MainWindow()
        {
            // Remember to set x:Name in XAML to "mainWindow"
            InitializeComponent();
            
            this.WhenActivated(disposables =>
            {
                // Do something when the View is activated

                // Configure the Navigation for the MainWindow
                NavBack.Command = ReactiveCommand.Create(() => this.NavigateBack(), CanNavigateBack).DisposeWith(d);
                
                // Navigate to the MainViewModel
                this.NavigateToView<MainViewModel>();
            });
        }
    }

Step 4: Create a ViewModel

Create a ViewModel that inherits from RxObject. This is the ViewModel that will be used for the MainView.

    public class MainViewModel : RxObject
    {
        public MainViewModel()
        {
            this.BuildComplete(() =>
            {
                // Do something when the IOC Container is built

                // Configure the Navigation for the MainViewModel using, you will pass the name of the Navigation Host Window that you want to navigate with.
                this.NavigateBack("mainWindow")
                this.CanNavigateBack("mainWindow")
                this.NavigateToView<FirstViewModel>("mainWindow")
            });
        }
    }

Step 5: Create a View

Create a View that inherits from ReactiveUserControl. This is the View that will be used for the MainView.

    public partial class MainView : ReactiveUserControl<MainViewModel>
    {
        public MainView()
        {
            InitializeComponent();

            this.WhenActivated(disposables =>
            {
                // Do something when the View is activated
            });
        }
    }

Step 6: For WPF Applications Configure Single Instance Application if required

If you want to prevent multiple instances of the application from running at the same time, you can use the Make.SingleInstance method.

    protected override void OnStartup(StartupEventArgs e)
    {
        // This will prevent multiple instances of the application from running at the same time.
        Make.SingleInstance("MyUniqueAppName ddd81fc8-9107-4e33-b848-cac4c3ec3d2a");
        base.OnStartup(e);
    }

Step 7: Run the application

Run the application and you should see the MainView.

Avalonia

Step 1: Install CrissCross

CrissCross is available on NuGet. You can install it using the NuGet Package Manager:

Install-Package CrissCross.Avalonia

Step 2: Create a ViewModel

Create a ViewModel that inherits from RxObject. This is the ViewModel that will be used for the MainWindow.

    public class MainWindowViewModel : RxObject
    {
        public MainWindowViewModel()
        {
            this.BuildComplete(() =>
            {
                // Do something when the IOC Container is built
            });

            // Setup the IOC Container
            Locator.CurrentMutable.RegisterConstant<MainViewModel>(new());
            Locator.CurrentMutable.Register<IViewFor<MainViewModel>>(() => new MainView());

            Locator.CurrentMutable.RegisterConstant<FirstViewModel>(new());
            Locator.CurrentMutable.Register<IViewFor<FirstViewModel>>(() => new FirstView());
            
            // Notify the application that the IOC Container that it is complete and ready to use.
            Locator.CurrentMutable.SetupComplete();
        }
    }

Step 3: Create a NavigationView

Create a View that inherits from NavigationWindow OR NavigationUserControl. This is the View that will be used for the MainWindow. add xmlns:rxNav="https://github.com/ChrisPulman/CrissCross" Change Window to rxNav:NavigationWindow in XAML. OR Change UserControl to rxNav:NavigationUserControl in XAML.

As Avalonia has two modes of operation you will need to select the correct mode for your application.

    public partial class MainWindow : NavigationWindow<MainWindowViewModel>
    {
        public MainWindow()
        {
            // Remember to set x:Name in XAML to "mainWindow"
            InitializeComponent();
            
            this.WhenActivated(disposables =>
            {
                // Do something when the View is activated

                // Configure the Navigation for the MainWindow
                NavBack.Command = ReactiveCommand.Create(() => this.NavigateBack(), CanNavigateBack).DisposeWith(d);
                
                // Navigate to the MainViewModel
                this.NavigateToView<MainViewModel>();
            });
        }
    }

Step 4: Create a ViewModel

Create a ViewModel that inherits from RxObject. This is the ViewModel that will be used for the MainView.

    public class MainViewModel : RxObject
    {
        public MainViewModel()
        {
            this.BuildComplete(() =>
            {
                // Do something when the IOC Container is built

                // Configure the Navigation for the MainViewModel using, you will pass the name of the Navigation Host Window that you want to navigate with.
                this.NavigateBack("mainWindow")
                this.CanNavigateBack("mainWindow")
                this.NavigateToView<FirstViewModel>("mainWindow")
            });
        }
    }

Step 5: Create a View

Create a View that inherits from ReactiveUserControl. This is the View that will be used for the MainView.

    public partial class MainView : ReactiveUserControl<MainViewModel>
    {
        public MainView()
        {
            InitializeComponent();

            this.WhenActivated(disposables =>
            {
                // Do something when the View is activated
            });
        }
    }

crisscross's Issues

WebView2Wpf init

Thanks because this project solved my problem!
But the question is I want to know when the WebView2 initialization is done
Can set _WebBrowser into public or implement EnsureCoreWebView2Async method and CoreWebView2InitializationCompleted event

Thanks！~~

https://learn.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.wpf.webview2?view=webview2-dotnet-1.0.2365.46

Problem with WebView2 overlayed button images displaying

First off....I can't thank you enough for making this repo available! I've been fighting this problem for months, getting any control to overlay the WebView2 control. Your code works great.

All of my buttons (for my project) are transparent, with a child image for what the button does. Images are PNG with transparency.

The images will not display at all unless I set Background="(any color excluding Transparent)".

This isn't a huge problem, as the button is still overlaid properly.

I've tried JPG and GIF, all do the same thing. Image is invisible until a background color is set.

Let's call it minor (cosmetic) :D

Project is a desktop WPF app with net6.0-windows running on W10Ent

Thanks again!