Documentation
API Reference
Guides
Tutorials
Routing
ReactiveUI routing consists of an IScreen that contains current RoutingState, several IRoutableViewModels, and a platform-specific XAML control called RoutedViewHost.
RoutingState manages the view model navigation stack and allows view models to navigate to other view models. IScreen is the root of a navigation stack; despite the name, its views don't have to occupy the whole screen. RoutedViewHost monitors an instance of RoutingState, responding to any changes in the navigation stack by creating and embedding the appropriate view.Routing Example
Create a new empty project from Avalonia templates. To use those, clone the avalonia-dotnet-templates repository, install the templates and create a new project named
RoutingExample based on avalonia.app template. Install Avalonia.ReactiveUI package into the project.1
git clone https://github.com/AvaloniaUI/avalonia-dotnet-templates
2
dotnet new --install ./avalonia-dotnet-templates
3
dotnet new avalonia.app -o RoutingExample
4
cd ./RoutingExample
5
dotnet add package Avalonia.ReactiveUI
Copied!
FirstViewModel.cs
First, create routable view models and corresponding views. We derive routable view models from the
IRoutableViewModel interface from ReactiveUI namespace, and from ReactiveObject as well. ReactiveObject is the base class for view model classes, and it implements INotifyPropertyChanged.1
namespace RoutingExample
2
{
3
public class FirstViewModel : ReactiveObject, IRoutableViewModel
4
{
5
// Reference to IScreen that owns the routable view model.
6
public IScreen HostScreen { get; }
7
8
// Unique identifier for the routable view model.
9
public string UrlPathSegment { get; } = Guid.NewGuid().ToString().Substring(0, 5);
10
11
public FirstViewModel(IScreen screen) => HostScreen = screen;
12
}
13
}
Copied!
FirstView.xaml
1
<UserControl xmlns="https://github.com/avaloniaui"
2
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
x:Class="RoutingExample.FirstView">
4
<StackPanel HorizontalAlignment="Center"
5
VerticalAlignment="Center">
6
<TextBlock Text="Hi, I'm the first view!" />
7
<TextBlock Text="{Binding UrlPathSegment}" />
8
</StackPanel>
9
</UserControl>
Copied!
FirstView.xaml.cs
If we need to handle view model activation and deactivation, then we add a call to WhenActivated to the view. Generally, a rule of thumb is to always add WhenActivated to your views, see Activation docs for more info.
1
namespace RoutingExample
2
{
3
public class FirstView : ReactiveUserControl<FirstViewModel>
4
{
5
public FirstView()
6
{
7
this.WhenActivated(disposables => { });
8
AvaloniaXamlLoader.Load(this);
9
}
10
}
11
}
Copied!
MainWindowViewModel.cs
Then, create a view model implementing the
IScreen interface. It contains current RoutingState that manages the navigation stack. RoutingState also contains helper commands allowing you to navigate back and forward.Actually, you can use as many
IScreens as you need in your application. Despite the name, it doesn't have to occupy the whole screen. You can use nested routing, place IScreens side-by-side, etc.1
namespace RoutingExample
2
{
3
public class MainWindowViewModel : ReactiveObject, IScreen
4
{
5
// The Router associated with this Screen.
6
// Required by the IScreen interface.
7
public RoutingState Router { get; } = new RoutingState();
8
9
// The command that navigates a user to first view model.
10
public ReactiveCommand<Unit, IRoutableViewModel> GoNext { get; }
11
12
// The command that navigates a user back.
13
public ReactiveCommand<Unit, Unit> GoBack => Router.NavigateBack;
14
15
public MainWindowViewModel()
16
{
17
// Manage the routing state. Use the Router.Navigate.Execute
18
// command to navigate to different view models.
19
//
20
// Note, that the Navigate.Execute method accepts an instance
21
// of a view model, this allows you to pass parameters to
22
// your view models, or to reuse existing view models.
23
//
24
GoNext = ReactiveCommand.CreateFromObservable(
25
() => Router.Navigate.Execute(new FirstViewModel(this))
26
);
27
}
28
}
29
}
Copied!
MainWindow.xaml
Now we need to place the
RoutedViewHost XAML control to our main view. It will resolve and embedd appropriate views for the view models. Note, that you need to import rxui namespace for RoutedViewHost to work. Additionally, you can override animations that are played when RoutedViewHost changes a view — simply override RoutedViewHost.PageTransition property in XAML. To disabling the animations, simply set the RoutedViewHost.PageTransition property to {x:Null}.For latest builds from MyGet use
xmlns:rxui="https://reactiveui.net", for 0.8.0 release on NuGet use xmlns:rxui="clr-namespace:Avalonia;assembly=Avalonia.ReactiveUI" as in the example below.1
<Window xmlns="https://github.com/avaloniaui"
2
xmlns:rxui="clr-namespace:Avalonia.ReactiveUI;assembly=Avalonia.ReactiveUI"
3
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
7
x:Class="RoutingExample.MainWindow"
8
Title="RoutingExample">
9
<Grid>
10
<Grid.RowDefinitions>
11
<RowDefinition Height="*" />
12
<RowDefinition Height="Auto" />
13
</Grid.RowDefinitions>
14
<rxui:RoutedViewHost Grid.Row="0" Router="{Binding Router}">
15
<rxui:RoutedViewHost.DefaultContent>
16
<TextBlock Text="Default content"
17
HorizontalAlignment="Center"
18
VerticalAlignment="Center" />
19
</rxui:RoutedViewHost.DefaultContent>
20
</rxui:RoutedViewHost>
21
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="15">
22
<StackPanel.Styles>
23
<Style Selector="StackPanel > :is(Control)">
24
<Setter Property="Margin" Value="2"/>
25
</Style>
26
<Style Selector="StackPanel > TextBlock">
27
<Setter Property="VerticalAlignment" Value="Center"/>
28
</Style>
29
</StackPanel.Styles>
30
<Button Content="Go next" Command="{Binding GoNext}" />
31
<Button Content="Go back" Command="{Binding GoBack}" />
32
<TextBlock Text="{Binding Router.NavigationStack.Count}" />
33
</StackPanel>
34
</Grid>
35
</Window>
Copied!
MainWindow.xaml.cs
Here is the code-behind for main view declared above.
1
namespace RoutingExample
2
{
3
public class MainWindow : ReactiveWindow<MainWindowViewModel>
4
{
5
public MainWindow()
6
{
7
this.WhenActivated(disposables => { });
8
AvaloniaXamlLoader.Load(this);
9
}
10
}
11
}
Copied!
Finally, add
.UseReactiveUI() to your AppBuilder and initialize DataContext.1
namespace RoutingExample
2
{
3
public static class Program
4
{
5
public static void Main(string[] args)
6
{
7
BuildAvaloniaApp().Start<MainWindow>(
8
() => new MainWindowViewModel()
9
);
10
}
11
12
public static AppBuilder BuildAvaloniaApp()
13
{
14
// Router uses Splat.Locator to resolve views for
15
// view models, so we need to register our views.
16
//
17
Locator.CurrentMutable.Register(() => new FirstView(), typeof(IViewFor<FirstViewModel>));
18
19
return AppBuilder
20
.Configure<App>()
21
.UseReactiveUI()
22
.UsePlatformDetect()
23
.LogToDebug();
24
}
25
}
26
}
Copied!
Instead of registering views manually, you can use custom
IViewLocator implementation, or Locator.RegisterViewsForViewModels method which registers all IViewFor implementations from an assembly. See View Location for details.Now, you can run the app and see routing in action!
1
dotnet run --framework netcoreapp2.1
Copied!
Last modified 5d ago
Export as PDF
Copy link
Contents
Routing Example