Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reactivemarbles/crisscross
A Navigation Framework for ReactiveUI based projects
https://github.com/reactivemarbles/crisscross
avalonia maui reactiveui webview2 wpf xamarin
Last synced: 26 days ago
JSON representation
A Navigation Framework for ReactiveUI based projects
- Host: GitHub
- URL: https://github.com/reactivemarbles/crisscross
- Owner: reactivemarbles
- License: mit
- Created: 2021-06-28T17:51:20.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-01T22:40:01.000Z (about 1 month ago)
- Last Synced: 2024-10-10T22:21:03.698Z (26 days ago)
- Topics: avalonia, maui, reactiveui, webview2, wpf, xamarin
- Language: C#
- Homepage:
- Size: 14.4 MB
- Stars: 38
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CrissCross
A Navigation Framework for ReactiveUI based projects
[](https://github.com/ChrisPulman/CrissCross/actions/workflows/BuildOnly.yml)
## 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.
```c#
public class MainWindowViewModel : RxObject
{
public MainWindowViewModel()
{
this.BuildComplete(() =>
{
// Do something when the IOC Container is built
});
// Setup the IOC Container
Locator.CurrentMutable.RegisterConstant(new());
Locator.CurrentMutable.Register>(() => new MainView());
Locator.CurrentMutable.RegisterConstant(new());
Locator.CurrentMutable.Register>(() => 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/reactivemarbles/CrissCross" to the Window inherits in XAML.
Change Window to rxNav:NavigationWindow in XAML.
Add x:TypeArguments="local:MainWindowViewModel"
```c#
public partial class MainWindow : NavigationWindow
{
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();
});
}
}
```
### Step 4: Create a ViewModel
Create a ViewModel that inherits from `RxObject`. This is the ViewModel that will be used for the MainView.
```c#
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("mainWindow")
});
}
}
```
### Step 5: Create a View
Create a View that inherits from `ReactiveUserControl`. This is the View that will be used for the MainView.
```c#
public partial class MainView : ReactiveUserControl
{
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.
```c#
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.
```c#
public class MainWindowViewModel : RxObject
{
public MainWindowViewModel()
{
this.BuildComplete(() =>
{
// Do something when the IOC Container is built
});
// Setup the IOC Container
Locator.CurrentMutable.RegisterConstant(new());
Locator.CurrentMutable.Register>(() => new MainView());
Locator.CurrentMutable.RegisterConstant(new());
Locator.CurrentMutable.Register>(() => 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/reactivemarbles/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.
```c#
public partial class MainWindow : NavigationWindow
{
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();
});
}
}
```
### Step 4: Create a ViewModel
Create a ViewModel that inherits from `RxObject`. This is the ViewModel that will be used for the MainView.
```c#
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("mainWindow")
});
}
}
```
### Step 5: Create a View
Create a View that inherits from `ReactiveUserControl`. This is the View that will be used for the MainView.
```c#
public partial class MainView : ReactiveUserControl
{
public MainView()
{
InitializeComponent();
this.WhenActivated(disposables =>
{
// Do something when the View is activated
});
}
}
```
### CrissCross.WPF.Plot
CrissCross.WPF.Plot is a library that provides a simple way to plot data in WPF applications. It is designed to be used with CrissCross.
Adriana Segher came up with the initial concept of creating a Plot that could accept a Reactive data source.
This was then developed into a library that could be used with CrissCross Wpf.
The library is built on top of ScottPlot and provides a simple way to plot Reactive data in WPF applications.
The library is available on NuGet. You can install it using the NuGet Package Manager:
 
Install-Package CrissCross.WPF.Plot
### Current Features
- Plot data from a Reactive data source
- Plot data from a array of Reactive data source with multiple series (limited to 9 currently)
- Cursor tracking via a CrossHair
- Zooming and Panning
- Dragging a zoom area
- Visibility of plots
- Auto Scale / Manual Scale
- Enable / Disable interaction with the plot
- Multiple Y Axis
### Future Features
- More than 9 series
- Configuration of the Chart through a property dialog
- Axis configuration, Color Configuration, Scale Configuration, Line Configuration
- Multiple CrossHairs with differential analytics
- Multiple X Axis for XY Plots
- Select a plotalbe data from a large data source such as a Dynamic Data Source
### CrissCross.WPF.WebView2
CrissCross.WPF.Webview2 is a control for Wpf allowing the placement of other wpf controls on top of the WebView2.
The base Microsoft.Web.WebView2 library has a WebView2CompositionControl but this is only targeting net46 and does not work for net core.
In CrissCross.WPF.Webview2 we have created a WebView2Wpf control that has the majority of the features that the WebView2CompositionControl has working, however some use an underlying private layer which we don't have access to.
Further Documentation can be found here [microsoft.web.webview2.wpf](https://learn.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.wpf.webview2?view=webview2-dotnet-1.0.2646-prerelease)
The library is available on NuGet. You can install it using the NuGet Package Manager:
 
```c#
xmlns:webv="https://github.com/reactivemarbles/CrissCross"
<--! Add your Xaml here -->
// In Code behind set the Source to the Uri you wish to navigate to, this can be set in the Xaml too.
WebView2Wpf.Source = new System.Uri("https://www.reactiveui.net/");
```