{"id":13592284,"url":"https://github.com/AvaloniaInside/Shell","last_synced_at":"2025-04-08T23:31:49.054Z","repository":{"id":143621343,"uuid":"597366500","full_name":"AvaloniaInside/Shell","owner":"AvaloniaInside","description":"Reduces the complexity of mobile/desktop application development by providing the fundamental features that most applications require","archived":false,"fork":false,"pushed_at":"2024-09-15T18:07:01.000Z","size":7685,"stargazers_count":188,"open_issues_count":6,"forks_count":11,"subscribers_count":6,"default_branch":"develop","last_synced_at":"2024-10-30T01:02:37.812Z","etag":null,"topics":["animation","avalonia","avaloniaui","lifecycle","navigation","navigationbar","shell","sidemenu"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AvaloniaInside.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-04T10:24:00.000Z","updated_at":"2024-10-28T06:56:19.000Z","dependencies_parsed_at":"2024-01-13T11:57:52.499Z","dependency_job_id":"4bb4278d-23b0-4652-ab93-203eac022fa8","html_url":"https://github.com/AvaloniaInside/Shell","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AvaloniaInside%2FShell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AvaloniaInside%2FShell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AvaloniaInside%2FShell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AvaloniaInside%2FShell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AvaloniaInside","download_url":"https://codeload.github.com/AvaloniaInside/Shell/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223223884,"owners_count":17109069,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","avalonia","avaloniaui","lifecycle","navigation","navigationbar","shell","sidemenu"],"created_at":"2024-08-01T16:01:07.657Z","updated_at":"2025-04-08T23:31:49.045Z","avatar_url":"https://github.com/AvaloniaInside.png","language":"C#","readme":"![image](https://github.com/AvaloniaInside/Shell/assets/956077/656b77bc-f7bf-4d24-96f4-00d201bb78e0)\n\n\u003ch1\u003e\u003cimg src=\"https://github.com/AvaloniaInside/Shell/assets/956077/6b34f130-0297-4530-ab0d-4074e92dae21\" width=\"86\" /\u003e Shell\u003c/h1\u003e\n\nAvalonia Inside Shell reduces the complexity of mobile/desktop application development by providing the fundamental features that most applications require, including:\n\n    A single place to describe the visual hierarchy of an application.\n    A common navigation user experience.\n    A URI-based navigation scheme that permits navigation to any page in the application\n\n\nWe 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.\n\n\n## Screenshots\n\n\u003cimg src=\"https://user-images.githubusercontent.com/956077/226295190-cbe81c7d-4054-4c07-9e5c-7ee7149c1468.png\" width=\"300\"/\u003e \u003cimg src=\"https://user-images.githubusercontent.com/956077/226295294-3d4f1f9e-941d-4248-b941-a0c35ca0533a.png\" width=\"300\"/\u003e\n\n## Installation\n\nTo use AvaloniaInside.Shell in your Avalonia project, you can install the package via NuGet using the following command in the Package Manager Console:\n\n```bash\ndotnet add package AvaloniaInside.Shell --version 1.3.0\n```\n\nAlternatively, you can also install the package through Visual Studio's NuGet Package Manager.\n\nAdd dependencies to the Locator or call `Program.cs`\n```csharp\npublic static AppBuilder BuildAvaloniaApp()\n\t=\u003e AppBuilder.Configure\u003cApp\u003e()\n\t\t.UsePlatformDetect()\n\t\t.LogToTrace()\n\t\t.UseReactiveUI()\n\t\t.UseShell();\n```\n\nAdd default theme or add your custom theme to the App.axmal file\n```xml\n\u003cStyleInclude Source=\"avares://AvaloniaInside.Shell/Default.axaml\"\u003e\u003c/StyleInclude\u003e\n```\n\n## Using Shell\n\n#### Adding a ShellView\nTo use a ShellView in your application, you can add it to your XAML file like this:\n```xml\n\u003cShellView\u003e\n  \u003c!-- Your application content goes here --\u003e\n\u003c/ShellView\u003e\n```\n\n#### Basic Usage Guide for Shell and Navigation\nYou 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:\n\n```xml\n\u003cShellView Name=\"MyShellView\"\u003e\n    \u003cHost Path=\"main\" Page=\"views:MainTabControl\"\u003e\n        \u003cRoute Path=\"home\" Page=\"views:HomePage\"\u003e\n            \u003cRoute Path=\"confirmation\" Page=\"views:SimpleDialog\" Type=\"Modal\"\u003e\u003c/Route\u003e\n        \u003c/Route\u003e\n        \u003cHost Path=\"pets\" Page=\"views:PetsTabControlView\" Default=\"cat\"\u003e\n            \u003cRoute Path=\"cat\" Page=\"views:CatView\"\u003e\u003c/Route\u003e\n            \u003cRoute Path=\"dog\" Page=\"views:DogView\"\u003e\u003c/Route\u003e\n        \u003c/Host\u003e\n        \u003cRoute Path=\"product\" Page=\"shopViews:ProductCatalogView\"\u003e\n            \u003cRoute Path=\"filter\" Page=\"shopViews:ProductCatalogFilterView\" Type=\"Modal\"\u003e\u003c/Route\u003e\n        \u003c/Route\u003e\n        \u003cRoute Path=\"setting\" Page=\"views:SettingView\"\u003e\n            \u003cRoute Path=\"profile\" Page=\"views:ProfileView\"\u003e\u003c/Route\u003e\n        \u003c/Route\u003e\n    \u003c/Host\u003e\n\u003c/ShellView\u003e\n```\n\nAnd to navigate to a specific page, we can use the Navigator property of the ShellView, as follows:\n\n```csharp\nawait MyShellView.Navigator.NavigateAsync(\"/main/home/confirmation\", cancellationToken);\n```\n\n### NavigationBar\n![image](https://user-images.githubusercontent.com/956077/227613963-9b1a10b5-c2b0-4dcb-ba43-cd72f3a27333.png)\n\nEach 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:\n\n```xml\n\u003cUserControl xmlns=\"https://github.com/avaloniaui\"\n             x:Class=\"ShellExample.Views.ShopViews.ProductCatalogView\"\n             NavigationBar.Header=\"Products\"\u003e\n\t\u003cNavigationBar.Item\u003e\n\t\t\u003cButton Content=\"Filter\" Command=\"{Binding FilterCommand}\"\u003e\u003c/Button\u003e\n\t\u003c/NavigationBar.Item\u003e\n ...\n\u003c/UserControl\u003e\n```\n\n\n## ShellView content's support\n\n`IItem` is the base interface for all items that can be added to the `ShellView`'s content. It has the following properties:\n\n#### Route\n\n`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.\n\n#### Host\n\n`Host` can be used to group pages under a common root, such as a `TabControl`.\nIt 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.\n\n#### SideMenuItem\n\n`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:\n\n`Icon`: An icon to display next to the item's label in the side menu.\n`Title`: The text label to display for the item in the side menu.\n`Path`: The path of navigation.\n\n## Example of Side Menu usage\n\n![side-menu](https://user-images.githubusercontent.com/956077/227538250-f5f86187-6c0f-46a0-803e-951b02abdccd.png)\n\n\n```xml\n\u003cUserControl xmlns=\"https://github.com/avaloniaui\" ...\u003e\n\n    \u003cShellView Name=\"ShellViewMain\" DefaultRoute=\"/main\"\u003e\n        \u003cHost Path=\"main\" Page=\"views:MainTabControl\"\u003e ... \u003c/Host\u003e\n\n        \u003c!-- Side Menu Header  --\u003e\n        \u003cShellView.SideMenuHeader\u003e\n\t\t\u003cwidgets:UserProfileWidgetView\u003e\u003c/widgets:UserProfileWidgetView\u003e\n\t\u003c/ShellView.SideMenuHeader\u003e\n\n        \u003c!-- SideMenuItems go here --\u003e\n        \u003cSideMenuItem Path=\"/main/home\" Title=\"Home\" Icon=\"/Assets/Icons/house-solid.png\"\u003e\u003c/SideMenuItem\u003e\n        \u003cSideMenuItem Path=\"/main/pets/cat\" Title=\"Cat\" Icon=\"/Assets/Icons/cat-solid.png\"\u003e\u003c/SideMenuItem\u003e\n        \u003cSideMenuItem Path=\"/main/pets/dog\" Title=\"Dog\" Icon=\"/Assets/Icons/dog-solid.png\"\u003e\u003c/SideMenuItem\u003e\n        \u003cSideMenuItem Path=\"/main/product\" Title=\"Products\" Icon=\"/Assets/Icons/tag-solid.png\"\u003e\u003c/SideMenuItem\u003e\n        \u003cSideMenuItem Path=\"/main/setting\" Title=\"Settings\" Icon=\"/Assets/Icons/user-solid.png\"\u003e\u003c/SideMenuItem\u003e\n        \u003cSideMenuItem Path=\"/second\" Title=\"Second Click\" Icon=\"/Assets/Icons/check-solid.png\"\u003e\u003c/SideMenuItem\u003e\n\n        \u003c!-- SideMenu Content --\u003e\n        \u003cShellView.SideMenuContents\u003e\n\t\t\u003cwidgets:WeatherView Margin=\"0, 20, 0, 0\" /\u003e\n\t\t\u003cwidgets:CalendarWidgetView Margin=\"0, 20, 0, 0\" /\u003e\n\t\u003c/ShellView.SideMenuContents\u003e\n\n        \u003c!-- SideMenu Footer --\u003e\n\t\u003cShellView.SideMenuFooter\u003e\n\t\t\u003cBorder Background=\"#11000000\" Height=\"25\"\u003e\n\t\t\t\u003cTextBlock Text=\"AvaloniaInside Shell 2023\"\n\t\t\t\t   FontWeight=\"Light\"\n\t\t\t\t   VerticalAlignment=\"Center\"\n\t\t\t\t   HorizontalAlignment=\"Center\"\u003e\n\t\t\t\u003c/TextBlock\u003e\n\t\t\u003c/Border\u003e\n\t\u003c/ShellView.SideMenuFooter\u003e\n    \u003c/ShellView\u003e\n\u003c/UserControl\u003e\n\n```\n\nIn the code above side menu will contains 6 navigate route and will link selected item to the current route.\n","funding_links":[],"categories":["C#","C\\#","Libraries \u0026 Extensions"],"sub_categories":["Generic"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAvaloniaInside%2FShell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAvaloniaInside%2FShell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAvaloniaInside%2FShell/lists"}