SimpleToolkit.SimpleShell
3.0.0
See the version list below for details.
dotnet add package SimpleToolkit.SimpleShell --version 3.0.0
NuGet\Install-Package SimpleToolkit.SimpleShell -Version 3.0.0
<PackageReference Include="SimpleToolkit.SimpleShell" Version="3.0.0" />
paket add SimpleToolkit.SimpleShell --version 3.0.0
#r "nuget: SimpleToolkit.SimpleShell, 3.0.0"
// Install SimpleToolkit.SimpleShell as a Cake Addin
#addin nuget:?package=SimpleToolkit.SimpleShell&version=3.0.0
// Install SimpleToolkit.SimpleShell as a Cake Tool
#tool nuget:?package=SimpleToolkit.SimpleShell&version=3.0.0
SimpleToolkit.SimpleShell
The SimpleToolkit.SimpleShell package provides you with a simplified implementation of .NET MAUI Shell
that lets you easily create a custom navigation experience in your .NET MAUI applications.
Getting Started
In order to use SimpleToolkit.SimpleShell, you need to call the UseSimpleShell()
extension method in your MauiProgram.cs
file:
builder.UseSimpleShell();
SimpleShell
SimpleShell
is a simplified implementation of .NET MAUI Shell
. All SimpleShell
is is just a container for your content with the ability to put the hosting area for pages wherever you want, giving you the flexibility to add custom tab bars, navigation bars, flyouts, etc. to your Shell
application while using great Shell
URI-based navigation.
Let's say we have four root pages - YellowPage
, GreenPage
, RedPage
and BluePage
- and one detail page - YellowDetailPage
. Shell with a simple app bar and tab bar can be defined like this:
<simpleShell:SimpleShell
x:Class="SimpleToolkit.SimpleShellSample.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:simpleShell="clr-namespace:SimpleToolkit.SimpleShell;assembly=SimpleToolkit.SimpleShell"
xmlns:pages="clr-namespace:SimpleToolkit.SimpleShellSample.Views.Pages"
x:Name="thisShell">
<Tab
Title="Yellow-Green"
Route="YellowGreenTab">
<ShellContent
Title="Yellow"
ContentTemplate="{DataTemplate pages:YellowPage}"
Route="YellowPage"/>
<ShellContent
Title="Green"
ContentTemplate="{DataTemplate pages:GreenPage}"
Route="GreenPage"/>
</Tab>
<Tab
Title="Red"
Route="RedTab">
<ShellContent
Title="Red"
ContentTemplate="{DataTemplate pages:RedPage}"
Route="RedPage"/>
</Tab>
<Tab
Title="Blue"
Route="BlueTab">
<ShellContent
Title="Blue"
ContentTemplate="{DataTemplate pages:BluePage}"
Route="BluePage"/>
</Tab>
<simpleShell:SimpleShell.RootPageContainer>
<Grid
RowDefinitions="*, 50">
<simpleShell:SimpleNavigationHost/>
<HorizontalStackLayout
x:Name="tabBar"
Grid.Row="1"
Margin="20,5"
HorizontalOptions="Center" Spacing="10"
BindableLayout.ItemsSource="{Binding ShellContents, Source={x:Reference thisShell}}">
<BindableLayout.ItemTemplate>
<DataTemplate
x:DataType="BaseShellItem">
<Button
Clicked="ShellItemButtonClicked"
Background="Black"
Text="{Binding Title}"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</HorizontalStackLayout>
</Grid>
</simpleShell:SimpleShell.RootPageContainer>
<simpleShell:SimpleShell.Content>
<Grid
RowDefinitions="50, *">
<Button
x:Name="backButton"
Clicked="BackButtonClicked"
Text="Back"
Margin="20,5"
HorizontalOptions="Start"
Background="Black"/>
<Label
Margin="20,5"
HorizontalOptions="Center" VerticalOptions="Center"
Text="{Binding CurrentShellContent.Title, Source={x:Reference thisShell}}"
FontAttributes="Bold" FontSize="18"/>
<simpleShell:SimpleNavigationHost
Grid.Row="1"/>
</Grid>
</simpleShell:SimpleShell.Content>
</simpleShell:SimpleShell>
As you can see, the logical navigation structure is defined with ShellContent
, Tab
, etc. as in normal .NET MAUI Shell
. However, visual structure is defined manually using the Content
or RootPageContainer
property. The hosting area for pages is represented by the SimpleNavigationHost
view.
SimpleShell provides you with some bindable properties that you can bind to when creating custom navigation controls:
CurrentPage
- the currently selectedPage
CurrentShellSection
- the currently selectedShellSection
(Tab
)CurrentShellContent
- the currently selectedShellContent
ShellSections
- read-only list of allShellSection
s in the shellShellContents
- read-only list of allShellContent
s in the shellRootPageContainer
- a view that will wrap all root pages (ShellContent
s)
The code behind of the XAML sample above:
public partial class AppShell : SimpleToolkit.SimpleShell.SimpleShell
{
public AppShell()
{
InitializeComponent();
Routing.RegisterRoute(nameof(YellowDetailPage), typeof(YellowDetailPage));
}
private async void ShellItemButtonClicked(object sender, EventArgs e)
{
var button = sender as Button;
var shellItem = button.BindingContext as BaseShellItem;
// Navigate to a new tab if it is not the current tab
if (!CurrentState.Location.OriginalString.Contains(shellItem.Route))
await GoToAsync($"///{shellItem.Route}", true);
}
private async void BackButtonClicked(object sender, EventArgs e)
{
await GoToAsync("..");
}
}
Navigation between pages works exactly the same as in .NET MAUI Shell
, just use the common Shell.Current.GoToAsync()
. Pages that are not part of the shell hierarchy can be registered using the Routing.RegisterRoute()
method.
Why not use SimpleShell
and use .NET MAUI Shell
instead
- .NET MAUI
Shell
offers a platform-specific appearance. - Platform-specific navigation controls that .NET MAUI
Shell
provides probably have better performance than controls composed of multiple .NET MAUI views. - A
SimpleShell
-based application may not have as good accessibility in some scenarios due to the lack of platform-specific navigation controls. .NET MAUIShell
should be accessible out of the box since it uses platform-specific controls. - Maybe I have implemented something wrong that has a negative impact on the performance, accessibility, or something like that.
See documentation for more information.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net7.0 is compatible. net7.0-android was computed. net7.0-android33.0 is compatible. net7.0-ios was computed. net7.0-ios16.1 is compatible. net7.0-maccatalyst was computed. net7.0-maccatalyst16.1 is compatible. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net7.0-windows10.0.19041 is compatible. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net7.0
- No dependencies.
-
net7.0-android33.0
- No dependencies.
-
net7.0-ios16.1
- No dependencies.
-
net7.0-maccatalyst16.1
- No dependencies.
-
net7.0-windows10.0.19041
- No dependencies.
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories (2)
Showing the top 2 popular GitHub repositories that depend on SimpleToolkit.SimpleShell:
Repository | Stars |
---|---|
RadekVyM/MarvelousMAUI
.NET MAUI clone of the Wonderous app - a visual showcase of eight wonders of the world.
|
|
RadekVyM/SimpleToolkit
SimpleToolkit is a .NET MAUI library of helpers and simple, fully customizable controls, such as SimpleShell - custom Shell implementation that allows you to create unique navigation experiences.
|
Version | Downloads | Last updated |
---|---|---|
4.1.0 | 1,222 | 2/1/2024 |
4.0.0 | 3,175 | 11/17/2023 |
3.0.1 | 2,938 | 7/22/2023 |
3.0.0 | 2,132 | 7/1/2023 |
2.1.1 | 954 | 4/29/2023 |
2.1.0 | 2,569 | 3/4/2023 |
2.0.1 | 1,195 | 2/3/2023 |
2.0.0 | 1,263 | 11/11/2022 |
1.1.0 | 935 | 10/24/2022 |
1.0.0 | 1,072 | 9/19/2022 |
1.0.0-preview2 | 654 | 9/9/2022 |
1.0.0-preview1 | 747 | 9/7/2022 |