Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avaloniainside/shell
Reduces the complexity of mobile/desktop application development by providing the fundamental features that most applications require
https://github.com/avaloniainside/shell
animation avalonia avaloniaui lifecycle navigation navigationbar shell sidemenu
Last synced: 2 days ago
JSON representation
Reduces the complexity of mobile/desktop application development by providing the fundamental features that most applications require
- Host: GitHub
- URL: https://github.com/avaloniainside/shell
- Owner: AvaloniaInside
- License: mit
- Created: 2023-02-04T10:24:00.000Z (almost 2 years ago)
- Default Branch: develop
- Last Pushed: 2024-09-15T18:07:01.000Z (3 months ago)
- Last Synced: 2024-10-30T01:02:37.812Z (about 2 months ago)
- Topics: animation, avalonia, avaloniaui, lifecycle, navigation, navigationbar, shell, sidemenu
- Language: C#
- Homepage:
- Size: 7.33 MB
- Stars: 188
- Watchers: 6
- Forks: 11
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Shell
Avalonia Inside Shell reduces the complexity of mobile/desktop application development by providing the fundamental features that most applications require, including:
A single place to describe the visual hierarchy of an application.
A common navigation user experience.
A URI-based navigation scheme that permits navigation to any page in the application
We welcome feedback, suggestions, and contributions from anyone who is interested in this project. We appreciate your support and patience as we work towards releasing a stable version of this project.
## Screenshots
## Installation
To use AvaloniaInside.Shell in your Avalonia project, you can install the package via NuGet using the following command in the Package Manager Console:
```bash
dotnet add package AvaloniaInside.Shell --version 1.2.0
```
Alternatively, you can also install the package through Visual Studio's NuGet Package Manager.
Add dependencies to the Locator or call `Program.cs`
```csharp
public static AppBuilder BuildAvaloniaApp()
=> AppBuilder.Configure()
.UsePlatformDetect()
.LogToTrace()
.UseReactiveUI()
.UseShell();
```
Add default theme or add your custom theme to the App.axmal file
```xml
```
## Using Shell
#### Adding a ShellView
To use a ShellView in your application, you can add it to your XAML file like this:
```xml
```
#### Basic Usage Guide for Shell and Navigation
You can register navigation using the `Host` and `Route` elements. `Host` can be used to group pages under a common root, such as a `TabControl`. Here's an example:
```xml
```
And to navigate to a specific page, we can use the Navigator property of the ShellView, as follows:
```csharp
await MyShellView.Navigator.NavigateAsync("/main/home/confirmation", cancellationToken);
```
### NavigationBar
Each page that is currently on top of the navigation stack has access to the navigation bar's title and navigation item. In hierarchical hosts, the currently selected item in the host will be the one that has access to the navigation bar. For example, in the case of /home/pets/cat, the page associated with the cat would be able to modify the navigation bar. This can be done by setting the NavigationBar.Header and NavigationBar.Item properties, as shown in the code snippet below:
```xml
...
```
## ShellView content's support
`IItem` is the base interface for all items that can be added to the `ShellView`'s content. It has the following properties:
#### Route
`Route` is a type of `IItem` that represents a navigation route in the `ShellView`. It has a `Page` property that specifies the view associated with the route, as well as an optional `Type` property that specifies the navigation type, And `Path` is the property to register navigate.
#### Host
`Host` can be used to group pages under a common root, such as a `TabControl`.
It has a `Page` property that specifies the view associated with the host, as well as an optional `Default` property that specifies the default child route. as well as a `Children` property that specifies any child `Route` objects.
#### SideMenuItem
`SideMenuItem` is another type of item that can be used to display navigation options in the ShellView's side menu. It also inherits from `IItem` and has the following properties:
`Icon`: An icon to display next to the item's label in the side menu.
`Title`: The text label to display for the item in the side menu.
`Path`: The path of navigation.
## Example of Side Menu usage
```xml
...
```
In the code above side menu will contains 6 navigate route and will link selected item to the current route.