From 545ef35ba4a3e88b5aa7c6983a3cfd762dec7b67 Mon Sep 17 00:00:00 2001 From: gorbounoff <28042574+gorbounoff@users.noreply.github.com> Date: Tue, 24 May 2022 15:22:13 +0200 Subject: [PATCH 1/5] replace drawer with flyout --- CS/DrawerViewExample/App.xaml | 2 +- CS/DrawerViewExample/DrawerViewExample.csproj | 4 - CS/DrawerViewExample/MainPage.xaml | 78 ++++++++----------- CS/DrawerViewExample/MainPage.xaml.cs | 14 ++-- CS/DrawerViewExample/MauiProgram.cs | 4 +- .../Resources/Images/hamburger.svg | 1 + 6 files changed, 45 insertions(+), 58 deletions(-) create mode 100644 CS/DrawerViewExample/Resources/Images/hamburger.svg diff --git a/CS/DrawerViewExample/App.xaml b/CS/DrawerViewExample/App.xaml index d08221a..dd4d6c3 100644 --- a/CS/DrawerViewExample/App.xaml +++ b/CS/DrawerViewExample/App.xaml @@ -5,6 +5,6 @@ x:Class="DrawerViewExample.App" windows:Application.ImageDirectory="Assets"> - + diff --git a/CS/DrawerViewExample/DrawerViewExample.csproj b/CS/DrawerViewExample/DrawerViewExample.csproj index 0896337..6713c1e 100644 --- a/CS/DrawerViewExample/DrawerViewExample.csproj +++ b/CS/DrawerViewExample/DrawerViewExample.csproj @@ -32,10 +32,6 @@ - - - - False diff --git a/CS/DrawerViewExample/MainPage.xaml b/CS/DrawerViewExample/MainPage.xaml index ba7efc9..f9051e6 100644 --- a/CS/DrawerViewExample/MainPage.xaml +++ b/CS/DrawerViewExample/MainPage.xaml @@ -1,50 +1,40 @@ - - - - - + - - - - - - - - - - - - - - - - - - - - - + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + diff --git a/CS/DrawerViewExample/MainPage.xaml.cs b/CS/DrawerViewExample/MainPage.xaml.cs index b55e9e5..e1c0b71 100644 --- a/CS/DrawerViewExample/MainPage.xaml.cs +++ b/CS/DrawerViewExample/MainPage.xaml.cs @@ -1,10 +1,9 @@ using System; using Microsoft.Maui.Controls; -using DevExpress.Maui.Navigation; using System.Globalization; namespace DrawerViewExample { - public partial class MainPage : ContentPage { + public partial class MainPage : FlyoutPage { const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented"; public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create( @@ -18,13 +17,16 @@ public bool IsLandscapeOriented { set => SetValue(IsLandscapeOrientedProperty, value); } public MainPage() { - InitializeComponent(); - drawer.IsDrawerOpened = true; + InitializeComponent(); SizeChanged += OnSizeChanged; + carBrandList.SelectionChanged += OnSelectionChanged; } protected void OnSizeChanged(object sender, EventArgs args) { IsLandscapeOriented = this.Width > this.Height; } + void OnSelectionChanged(object sender, SelectionChangedEventArgs e) { + IsPresented = false; + } protected override void OnAppearing() { base.OnAppearing(); @@ -34,9 +36,9 @@ protected override void OnAppearing() { class BoolToDrawerBehaviorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { - if (targetType != typeof(DrawerBehavior)) return null; + if (targetType != typeof(FlyoutLayoutBehavior)) return null; bool boolValue = (bool)value; - return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop; + return boolValue ? FlyoutLayoutBehavior.Split : FlyoutLayoutBehavior.Popover; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { diff --git a/CS/DrawerViewExample/MauiProgram.cs b/CS/DrawerViewExample/MauiProgram.cs index 9d8922b..21a9cc9 100644 --- a/CS/DrawerViewExample/MauiProgram.cs +++ b/CS/DrawerViewExample/MauiProgram.cs @@ -1,7 +1,6 @@ using Microsoft.Maui; using Microsoft.Maui.Hosting; -using Microsoft.Maui.Controls.Hosting; -using DevExpress.Maui; +using Microsoft.Maui.Controls.Hosting; namespace DrawerViewExample { public static class MauiProgram { @@ -9,7 +8,6 @@ public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp() - .UseDevExpress() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); diff --git a/CS/DrawerViewExample/Resources/Images/hamburger.svg b/CS/DrawerViewExample/Resources/Images/hamburger.svg new file mode 100644 index 0000000..0429d34 --- /dev/null +++ b/CS/DrawerViewExample/Resources/Images/hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file From f39acec2d6294a4755dcb87590706f5788802ac8 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Tue, 24 May 2022 17:23:03 +0400 Subject: [PATCH 2/5] README auto update [skip ci] --- Readme.md | 729 +++++++++++++++++++++++++++--------------------------- 1 file changed, 364 insertions(+), 365 deletions(-) diff --git a/Readme.md b/Readme.md index d53e27c..21d8f25 100644 --- a/Readme.md +++ b/Readme.md @@ -1,365 +1,364 @@ - -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/391853119/22.1.1%2B) -[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1018580) -[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) - -# DevExpress Drawer View for .NET MAUI - -[DevExpress Mobile UI](https://www.devexpress.com/maui/) allows you to use a .NET cross-platform UI toolkit and C# to build native apps for iOS and Android. - -![DevExpress Mobile UI for .NET MAUI](./img/maui.png) - -The **DevExpress Mobile UI for Xamarin.Forms and .NET MAUI** is free of charge. To learn more about our offer and to reserve your copy, visit [Free DevExpress Mobile UI for Xamarin.Forms and .NET MAUI](https://www.devexpress.com/xamarin-free). - -## Requirements - -Please register the DevExpress NuGet Gallery in Visual Studio to restore the NuGet packages used in this solution. See the following topic for more information: [Get Started with DevExpress Mobile UI for .NET MAUI](https://docs.devexpress.com/MAUI/403249/get-started). - -## Documentation - -- [Data Grid](https://docs.devexpress.com/MAUI/403255/data-grid/data-grid) -- [Charts](https://docs.devexpress.com/MAUI/403300/charts/charts) -- [Data Form](https://docs.devexpress.com/MAUI/403640/data-form) -- [Navigation](https://docs.devexpress.com/MAUI/403297/navigation/index) -- [Data Editors](https://docs.devexpress.com/MAUI/403427/editors/index) -- [Collection View](https://docs.devexpress.com/MAUI/403324/collection-view/index) - -## More Examples - -* [Stocks App](https://github.com/DevExpress-Examples/maui-stocks-mini) -* [Data Grid](https://github.com/DevExpress-Examples/maui-data-grid-get-started) -* [Data Form](https://github.com/DevExpress-Examples/maui-data-form-get-started) -* [Data Editors](https://github.com/DevExpress-Examples/maui-editors-get-started) -* [Pie Chart](https://github.com/DevExpress-Examples/maui-pie-chart-get-started) -* [Scatter Chart](https://github.com/DevExpress-Examples/maui-scatter-chart-get-started) -* [Tab Page](https://github.com/DevExpress-Examples/maui-tab-page-get-started) -* [Tab View](https://github.com/DevExpress-Examples/maui-tab-view-get-started) -* [Drawer Page](https://github.com/DevExpress-Examples/maui-drawer-page-get-started) -* [Collection View](https://github.com/DevExpress-Examples/maui-collection-view-get-started) - -## What's in This Repository - -This example allows you to get started with the [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) component — use it to add a [navigation drawer](https://material.io/design/components/navigation-drawer.html) to your .NET MAUI application. - -![DevExpress Drawer View for .NET MAUI](./img/devexpress-maui-drawer-view.png) - -### Files to Look At - - -* [MauiProgram.cs](./CS/DrawerViewExample/MauiProgram.cs) -* [MainPage.xaml](./CS/DrawerViewExample/MainPage.xaml) -* [MainPage.xaml.cs](./CS/DrawerViewExample/MainPage.xaml.cs) -* [CarModel.cs](./CS/DrawerViewExample/CarModel.cs) -* [CarBrandViewModel.cs](./CS/DrawerViewExample/CarBrandViewModel.cs) -* [MainViewModel.cs](./CS/DrawerViewExample/MainViewModel.cs) - - -## How to Run This Application - -1. Install a [.NET MAUI development](https://docs.microsoft.com/en-gb/dotnet/maui/get-started/installation) environment and open the solution in Visual Studio 22 Preview. -2. Register the following NuGet feed in Visual Studio: `https://nuget.devexpress.com/free/api`. - If you are an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/), this MAUI preview will be available in your personal NuGet feed automatically. -4. Restore NuGet packages. -5. Run the application on an Android or iOS device or emulator. - -## How to Reproduce This Application - -The following step-by-step tutorial details how to reproduce this application. - -### Create a New MAUI Application and Add a Drawer View - -Create a new .NET MAUI solution in Visual Studio 22 Preview. Refer to the following Microsoft documentation for more information on how to get started with .NET MAUI: [.NET Multi-platform App UI](https://docs.microsoft.com/en-gb/dotnet/maui/). - -Register `https://nuget.devexpress.com/free/api` as a package source in Visual Studio, if you are not an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have not yet registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/). - -Install the **DevExpress.Maui.Navigation** package from your NuGet feed. - -In the *MauiProgram.cs* file, call the **UseDevExpress** method to register handlers for all DevExpress components: - -```cs -using Microsoft.Maui; -using Microsoft.Maui.Hosting; -using Microsoft.Maui.Controls.Hosting; -using DevExpress.Maui; - -namespace DrawerViewExample { - public static class MauiProgram { - public static MauiApp CreateMauiApp() { - var builder = MauiApp.CreateBuilder(); - builder - .UseMauiApp() - .UseDevExpress() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - }); - return builder.Build(); - } - } -} -``` - -In the *MainPage.xaml* file, use the *dxn* prefix to declare the **DevExpress.Maui.Navigation** namespace and add a [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) object to the main page: - -```xaml - - - -``` - -### Create Models and View Models -Add a **CarModel** class that specifies a data object in the application: - -```cs -namespace DrawerViewExample { - public class CarModel { - public string BrandName { get; } - public string ModelName { get; } - public string FullName => $"{BrandName} {ModelName}"; - - public CarModel(string brand, string model) { - this.BrandName = brand; - this.ModelName = model; - } - } -} -``` - -Create a **CarBrandViewModel** class that defines content for the drawer view: car make and corresponding models. The application will display brands in the drawer and matching models in the main content area: - -```cs -using System; -using System.Linq; -using System.ComponentModel; -using System.Collections.Generic; -using System.Runtime.CompilerServices; - -namespace DrawerViewExample { - public class CarBrandViewModel : INotifyPropertyChanged { - public string BrandName { get; } - public IReadOnlyList CarModels { get; } - - public event PropertyChangedEventHandler PropertyChanged; - - public CarBrandViewModel(string brandName, IEnumerable carModels) { - if (String.IsNullOrEmpty(brandName)) { - this.BrandName = String.Empty; - } - else { - this.BrandName = brandName; - } - if (carModels == null) { - this.CarModels = new List(); - } - else { - this.CarModels = carModels.ToList(); - } - } - private void RaisePropertyChanged([CallerMemberName] string caller = "") { - PropertyChangedEventHandler handler = PropertyChanged; - if (handler != null) { - handler.Invoke(this, new PropertyChangedEventArgs(caller)); - } - } - } -} -``` - -Create a **MainViewModel** class that defines content for the MainPage (models grouped by make/brand): - -```cs -using System.Linq; -using System.ComponentModel; -using System.Collections.Generic; -using System.Runtime.CompilerServices; - -namespace DrawerViewExample { - public class MainViewModel : INotifyPropertyChanged { - private static readonly IReadOnlyList allCarModels = new List { - new CarModel("Mercedes-Benz", "SL500 Roadster"), - new CarModel("Mercedes-Benz", "CLK55 AMG Cabriolet"), - new CarModel("Mercedes-Benz", "C230 Kompressor Sport Coupe"), - new CarModel("BMW", "530i"), - new CarModel("Rolls-Royce", "Corniche"), - new CarModel("Jaguar", "S-Type 3.0"), - new CarModel("Cadillac", "Seville"), - new CarModel("Cadillac", "DeVille"), - new CarModel("Lexus", "LS430"), - new CarModel("Lexus", "GS430"), - new CarModel("Ford", "Ranger FX-4"), - new CarModel("Dodge", "RAM 1500"), - new CarModel("GMC", "Siera Quadrasteer"), - new CarModel("Nissan", "Crew Cab SE"), - new CarModel("Toyota", "Tacoma S-Runner"), - }; - - public IReadOnlyList CarModelsByBrand { get; } - - public event PropertyChangedEventHandler PropertyChanged; - - public MainViewModel() { - List carBrandViewModels = new List(); - carBrandViewModels.Add(new CarBrandViewModel("All", allCarModels)); - - IEnumerable> groupedCarModels = - allCarModels.GroupBy(v => v.BrandName); - foreach (IGrouping carModelGroup in groupedCarModels) { - carBrandViewModels.Add(new CarBrandViewModel(carModelGroup.Key, carModelGroup)); - } - CarModelsByBrand = carBrandViewModels; - } - - private void RaisePropertyChanged([CallerMemberName] string caller = "") { - PropertyChangedEventHandler handler = PropertyChanged; - if (handler != null) { - handler.Invoke(this, new PropertyChangedEventArgs(caller)); - } - } - } -} -``` - -### Specify the Drawer View Content -In the *MainPage.xaml* file: -1. Set the **ContentPage.BindingContext** property to a **MainViewModel** object. -2. Set the [DrawerView.DrawerContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerContent) property to a grid with a **ListView** object. Bind the list’s **ItemsSource** property to the **CarModelsByBrand** property of the view model, and set up list items to display brand names. -3. Set the [DrawerView.MainContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.MainContent) property to a grid with a **ListView** object. Specify the list’s **ItemsSource** binding. The bound list should contain car models corresponding to the selected brand. - -```xaml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -### Define the Drawer Behavior - -Define drawer behavior depending on device or emulator orientation: -- Landscape orientation – the drawer is always visible. -- Portrait orientation – the drawer moves out over the main content area when a user swipes a screen from the left edge. - -Add the **IsLandscapeOriented** dependency property to the **MainPage** class: - -```cs -using System; -using Microsoft.Maui.Controls; -using DevExpress.Maui.Navigation; - -namespace DrawerViewExample { - public partial class MainPage : ContentPage { - const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented"; - - public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create( - IsLandscapeOrientedPropertyName, - typeof(bool), - typeof(MainPage), - defaultValue: false); - - public bool IsLandscapeOriented { - get => (bool)GetValue(IsLandscapeOrientedProperty); - set => SetValue(IsLandscapeOrientedProperty, value); - } - public MainPage() { - InitializeComponent(); - SizeChanged += OnSizeChanged; - } - protected void OnSizeChanged(object sender, EventArgs args) { - IsLandscapeOriented = this.Width > this.Height; - } - } -} -``` - -Implement a value converter that converts a Boolean value to a value of the **DrawerBehavior** enumeration: - -```cs -using System.Globalization; -// ... - -class BoolToDrawerBehaviorConverter : IValueConverter { - public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { - if (targetType != typeof(DrawerBehavior)) return null; - bool boolValue = (bool)value; - return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop; - } - - public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { - throw new NotImplementedException(); - } -} -``` - -Bind the [DrawerView.DrawerBehavior](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerBehavior) property to **IsLandscapeOriented**: - -```xaml - - - - - - - - - -``` - -### Customize the Drawer Appearance -Use the following properties to customize the drawer size, shadow, and scrim: - -```xaml - - - -``` - -The scrim does not affect a drawer view when drawer behavior is set to **Split**. + +[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1018580) +[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) + +# DevExpress Drawer View for .NET MAUI + +[DevExpress Mobile UI](https://www.devexpress.com/maui/) allows you to use a .NET cross-platform UI toolkit and C# to build native apps for iOS and Android. + +![DevExpress Mobile UI for .NET MAUI](./img/maui.png) + +The **DevExpress Mobile UI for Xamarin.Forms and .NET MAUI** is free of charge. To learn more about our offer and to reserve your copy, visit [Free DevExpress Mobile UI for Xamarin.Forms and .NET MAUI](https://www.devexpress.com/xamarin-free). + +## Requirements + +Please register the DevExpress NuGet Gallery in Visual Studio to restore the NuGet packages used in this solution. See the following topic for more information: [Get Started with DevExpress Mobile UI for .NET MAUI](https://docs.devexpress.com/MAUI/403249/get-started). + +## Documentation + +- [Data Grid](https://docs.devexpress.com/MAUI/403255/data-grid/data-grid) +- [Charts](https://docs.devexpress.com/MAUI/403300/charts/charts) +- [Data Form](https://docs.devexpress.com/MAUI/403640/data-form) +- [Navigation](https://docs.devexpress.com/MAUI/403297/navigation/index) +- [Data Editors](https://docs.devexpress.com/MAUI/403427/editors/index) +- [Collection View](https://docs.devexpress.com/MAUI/403324/collection-view/index) + +## More Examples + +* [Stocks App](https://github.com/DevExpress-Examples/maui-stocks-mini) +* [Data Grid](https://github.com/DevExpress-Examples/maui-data-grid-get-started) +* [Data Form](https://github.com/DevExpress-Examples/maui-data-form-get-started) +* [Data Editors](https://github.com/DevExpress-Examples/maui-editors-get-started) +* [Pie Chart](https://github.com/DevExpress-Examples/maui-pie-chart-get-started) +* [Scatter Chart](https://github.com/DevExpress-Examples/maui-scatter-chart-get-started) +* [Tab Page](https://github.com/DevExpress-Examples/maui-tab-page-get-started) +* [Tab View](https://github.com/DevExpress-Examples/maui-tab-view-get-started) +* [Drawer Page](https://github.com/DevExpress-Examples/maui-drawer-page-get-started) +* [Collection View](https://github.com/DevExpress-Examples/maui-collection-view-get-started) + +## What's in This Repository + +This example allows you to get started with the [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) component — use it to add a [navigation drawer](https://material.io/design/components/navigation-drawer.html) to your .NET MAUI application. + +![DevExpress Drawer View for .NET MAUI](./img/devexpress-maui-drawer-view.png) + +### Files to Look At + + +* [MauiProgram.cs](./CS/DrawerViewExample/MauiProgram.cs) +* [MainPage.xaml](./CS/DrawerViewExample/MainPage.xaml) +* [MainPage.xaml.cs](./CS/DrawerViewExample/MainPage.xaml.cs) +* [CarModel.cs](./CS/DrawerViewExample/CarModel.cs) +* [CarBrandViewModel.cs](./CS/DrawerViewExample/CarBrandViewModel.cs) +* [MainViewModel.cs](./CS/DrawerViewExample/MainViewModel.cs) + + +## How to Run This Application + +1. Install a [.NET MAUI development](https://docs.microsoft.com/en-gb/dotnet/maui/get-started/installation) environment and open the solution in Visual Studio 22 Preview. +2. Register the following NuGet feed in Visual Studio: `https://nuget.devexpress.com/free/api`. + If you are an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/), this MAUI preview will be available in your personal NuGet feed automatically. +4. Restore NuGet packages. +5. Run the application on an Android or iOS device or emulator. + +## How to Reproduce This Application + +The following step-by-step tutorial details how to reproduce this application. + +### Create a New MAUI Application and Add a Drawer View + +Create a new .NET MAUI solution in Visual Studio 22 Preview. Refer to the following Microsoft documentation for more information on how to get started with .NET MAUI: [.NET Multi-platform App UI](https://docs.microsoft.com/en-gb/dotnet/maui/). + +Register `https://nuget.devexpress.com/free/api` as a package source in Visual Studio, if you are not an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have not yet registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/). + +Install the **DevExpress.Maui.Navigation** package from your NuGet feed. + +In the *MauiProgram.cs* file, call the **UseDevExpress** method to register handlers for all DevExpress components: + +```cs +using Microsoft.Maui; +using Microsoft.Maui.Hosting; +using Microsoft.Maui.Controls.Hosting; +using DevExpress.Maui; + +namespace DrawerViewExample { + public static class MauiProgram { + public static MauiApp CreateMauiApp() { + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .UseDevExpress() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + return builder.Build(); + } + } +} +``` + +In the *MainPage.xaml* file, use the *dxn* prefix to declare the **DevExpress.Maui.Navigation** namespace and add a [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) object to the main page: + +```xaml + + + +``` + +### Create Models and View Models +Add a **CarModel** class that specifies a data object in the application: + +```cs +namespace DrawerViewExample { + public class CarModel { + public string BrandName { get; } + public string ModelName { get; } + public string FullName => $"{BrandName} {ModelName}"; + + public CarModel(string brand, string model) { + this.BrandName = brand; + this.ModelName = model; + } + } +} +``` + +Create a **CarBrandViewModel** class that defines content for the drawer view: car make and corresponding models. The application will display brands in the drawer and matching models in the main content area: + +```cs +using System; +using System.Linq; +using System.ComponentModel; +using System.Collections.Generic; +using System.Runtime.CompilerServices; + +namespace DrawerViewExample { + public class CarBrandViewModel : INotifyPropertyChanged { + public string BrandName { get; } + public IReadOnlyList CarModels { get; } + + public event PropertyChangedEventHandler PropertyChanged; + + public CarBrandViewModel(string brandName, IEnumerable carModels) { + if (String.IsNullOrEmpty(brandName)) { + this.BrandName = String.Empty; + } + else { + this.BrandName = brandName; + } + if (carModels == null) { + this.CarModels = new List(); + } + else { + this.CarModels = carModels.ToList(); + } + } + private void RaisePropertyChanged([CallerMemberName] string caller = "") { + PropertyChangedEventHandler handler = PropertyChanged; + if (handler != null) { + handler.Invoke(this, new PropertyChangedEventArgs(caller)); + } + } + } +} +``` + +Create a **MainViewModel** class that defines content for the MainPage (models grouped by make/brand): + +```cs +using System.Linq; +using System.ComponentModel; +using System.Collections.Generic; +using System.Runtime.CompilerServices; + +namespace DrawerViewExample { + public class MainViewModel : INotifyPropertyChanged { + private static readonly IReadOnlyList allCarModels = new List { + new CarModel("Mercedes-Benz", "SL500 Roadster"), + new CarModel("Mercedes-Benz", "CLK55 AMG Cabriolet"), + new CarModel("Mercedes-Benz", "C230 Kompressor Sport Coupe"), + new CarModel("BMW", "530i"), + new CarModel("Rolls-Royce", "Corniche"), + new CarModel("Jaguar", "S-Type 3.0"), + new CarModel("Cadillac", "Seville"), + new CarModel("Cadillac", "DeVille"), + new CarModel("Lexus", "LS430"), + new CarModel("Lexus", "GS430"), + new CarModel("Ford", "Ranger FX-4"), + new CarModel("Dodge", "RAM 1500"), + new CarModel("GMC", "Siera Quadrasteer"), + new CarModel("Nissan", "Crew Cab SE"), + new CarModel("Toyota", "Tacoma S-Runner"), + }; + + public IReadOnlyList CarModelsByBrand { get; } + + public event PropertyChangedEventHandler PropertyChanged; + + public MainViewModel() { + List carBrandViewModels = new List(); + carBrandViewModels.Add(new CarBrandViewModel("All", allCarModels)); + + IEnumerable> groupedCarModels = + allCarModels.GroupBy(v => v.BrandName); + foreach (IGrouping carModelGroup in groupedCarModels) { + carBrandViewModels.Add(new CarBrandViewModel(carModelGroup.Key, carModelGroup)); + } + CarModelsByBrand = carBrandViewModels; + } + + private void RaisePropertyChanged([CallerMemberName] string caller = "") { + PropertyChangedEventHandler handler = PropertyChanged; + if (handler != null) { + handler.Invoke(this, new PropertyChangedEventArgs(caller)); + } + } + } +} +``` + +### Specify the Drawer View Content +In the *MainPage.xaml* file: +1. Set the **ContentPage.BindingContext** property to a **MainViewModel** object. +2. Set the [DrawerView.DrawerContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerContent) property to a grid with a **ListView** object. Bind the list’s **ItemsSource** property to the **CarModelsByBrand** property of the view model, and set up list items to display brand names. +3. Set the [DrawerView.MainContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.MainContent) property to a grid with a **ListView** object. Specify the list’s **ItemsSource** binding. The bound list should contain car models corresponding to the selected brand. + +```xaml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +### Define the Drawer Behavior + +Define drawer behavior depending on device or emulator orientation: +- Landscape orientation – the drawer is always visible. +- Portrait orientation – the drawer moves out over the main content area when a user swipes a screen from the left edge. + +Add the **IsLandscapeOriented** dependency property to the **MainPage** class: + +```cs +using System; +using Microsoft.Maui.Controls; +using DevExpress.Maui.Navigation; + +namespace DrawerViewExample { + public partial class MainPage : ContentPage { + const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented"; + + public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create( + IsLandscapeOrientedPropertyName, + typeof(bool), + typeof(MainPage), + defaultValue: false); + + public bool IsLandscapeOriented { + get => (bool)GetValue(IsLandscapeOrientedProperty); + set => SetValue(IsLandscapeOrientedProperty, value); + } + public MainPage() { + InitializeComponent(); + SizeChanged += OnSizeChanged; + } + protected void OnSizeChanged(object sender, EventArgs args) { + IsLandscapeOriented = this.Width > this.Height; + } + } +} +``` + +Implement a value converter that converts a Boolean value to a value of the **DrawerBehavior** enumeration: + +```cs +using System.Globalization; +// ... + +class BoolToDrawerBehaviorConverter : IValueConverter { + public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { + if (targetType != typeof(DrawerBehavior)) return null; + bool boolValue = (bool)value; + return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop; + } + + public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { + throw new NotImplementedException(); + } +} +``` + +Bind the [DrawerView.DrawerBehavior](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerBehavior) property to **IsLandscapeOriented**: + +```xaml + + + + + + + + + +``` + +### Customize the Drawer Appearance +Use the following properties to customize the drawer size, shadow, and scrim: + +```xaml + + + +``` + +The scrim does not affect a drawer view when drawer behavior is set to **Split**. From c2be0669d19e5651104b0ae9cc91e99150b7ec1e Mon Sep 17 00:00:00 2001 From: gorbounoff <28042574+gorbounoff@users.noreply.github.com> Date: Tue, 24 May 2022 15:32:00 +0200 Subject: [PATCH 3/5] Revert "README auto update [skip ci]" This reverts commit f39acec2d6294a4755dcb87590706f5788802ac8. --- Readme.md | 729 +++++++++++++++++++++++++++--------------------------- 1 file changed, 365 insertions(+), 364 deletions(-) diff --git a/Readme.md b/Readme.md index 21d8f25..d53e27c 100644 --- a/Readme.md +++ b/Readme.md @@ -1,364 +1,365 @@ - -[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1018580) -[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) - -# DevExpress Drawer View for .NET MAUI - -[DevExpress Mobile UI](https://www.devexpress.com/maui/) allows you to use a .NET cross-platform UI toolkit and C# to build native apps for iOS and Android. - -![DevExpress Mobile UI for .NET MAUI](./img/maui.png) - -The **DevExpress Mobile UI for Xamarin.Forms and .NET MAUI** is free of charge. To learn more about our offer and to reserve your copy, visit [Free DevExpress Mobile UI for Xamarin.Forms and .NET MAUI](https://www.devexpress.com/xamarin-free). - -## Requirements - -Please register the DevExpress NuGet Gallery in Visual Studio to restore the NuGet packages used in this solution. See the following topic for more information: [Get Started with DevExpress Mobile UI for .NET MAUI](https://docs.devexpress.com/MAUI/403249/get-started). - -## Documentation - -- [Data Grid](https://docs.devexpress.com/MAUI/403255/data-grid/data-grid) -- [Charts](https://docs.devexpress.com/MAUI/403300/charts/charts) -- [Data Form](https://docs.devexpress.com/MAUI/403640/data-form) -- [Navigation](https://docs.devexpress.com/MAUI/403297/navigation/index) -- [Data Editors](https://docs.devexpress.com/MAUI/403427/editors/index) -- [Collection View](https://docs.devexpress.com/MAUI/403324/collection-view/index) - -## More Examples - -* [Stocks App](https://github.com/DevExpress-Examples/maui-stocks-mini) -* [Data Grid](https://github.com/DevExpress-Examples/maui-data-grid-get-started) -* [Data Form](https://github.com/DevExpress-Examples/maui-data-form-get-started) -* [Data Editors](https://github.com/DevExpress-Examples/maui-editors-get-started) -* [Pie Chart](https://github.com/DevExpress-Examples/maui-pie-chart-get-started) -* [Scatter Chart](https://github.com/DevExpress-Examples/maui-scatter-chart-get-started) -* [Tab Page](https://github.com/DevExpress-Examples/maui-tab-page-get-started) -* [Tab View](https://github.com/DevExpress-Examples/maui-tab-view-get-started) -* [Drawer Page](https://github.com/DevExpress-Examples/maui-drawer-page-get-started) -* [Collection View](https://github.com/DevExpress-Examples/maui-collection-view-get-started) - -## What's in This Repository - -This example allows you to get started with the [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) component — use it to add a [navigation drawer](https://material.io/design/components/navigation-drawer.html) to your .NET MAUI application. - -![DevExpress Drawer View for .NET MAUI](./img/devexpress-maui-drawer-view.png) - -### Files to Look At - - -* [MauiProgram.cs](./CS/DrawerViewExample/MauiProgram.cs) -* [MainPage.xaml](./CS/DrawerViewExample/MainPage.xaml) -* [MainPage.xaml.cs](./CS/DrawerViewExample/MainPage.xaml.cs) -* [CarModel.cs](./CS/DrawerViewExample/CarModel.cs) -* [CarBrandViewModel.cs](./CS/DrawerViewExample/CarBrandViewModel.cs) -* [MainViewModel.cs](./CS/DrawerViewExample/MainViewModel.cs) - - -## How to Run This Application - -1. Install a [.NET MAUI development](https://docs.microsoft.com/en-gb/dotnet/maui/get-started/installation) environment and open the solution in Visual Studio 22 Preview. -2. Register the following NuGet feed in Visual Studio: `https://nuget.devexpress.com/free/api`. - If you are an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/), this MAUI preview will be available in your personal NuGet feed automatically. -4. Restore NuGet packages. -5. Run the application on an Android or iOS device or emulator. - -## How to Reproduce This Application - -The following step-by-step tutorial details how to reproduce this application. - -### Create a New MAUI Application and Add a Drawer View - -Create a new .NET MAUI solution in Visual Studio 22 Preview. Refer to the following Microsoft documentation for more information on how to get started with .NET MAUI: [.NET Multi-platform App UI](https://docs.microsoft.com/en-gb/dotnet/maui/). - -Register `https://nuget.devexpress.com/free/api` as a package source in Visual Studio, if you are not an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have not yet registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/). - -Install the **DevExpress.Maui.Navigation** package from your NuGet feed. - -In the *MauiProgram.cs* file, call the **UseDevExpress** method to register handlers for all DevExpress components: - -```cs -using Microsoft.Maui; -using Microsoft.Maui.Hosting; -using Microsoft.Maui.Controls.Hosting; -using DevExpress.Maui; - -namespace DrawerViewExample { - public static class MauiProgram { - public static MauiApp CreateMauiApp() { - var builder = MauiApp.CreateBuilder(); - builder - .UseMauiApp() - .UseDevExpress() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - }); - return builder.Build(); - } - } -} -``` - -In the *MainPage.xaml* file, use the *dxn* prefix to declare the **DevExpress.Maui.Navigation** namespace and add a [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) object to the main page: - -```xaml - - - -``` - -### Create Models and View Models -Add a **CarModel** class that specifies a data object in the application: - -```cs -namespace DrawerViewExample { - public class CarModel { - public string BrandName { get; } - public string ModelName { get; } - public string FullName => $"{BrandName} {ModelName}"; - - public CarModel(string brand, string model) { - this.BrandName = brand; - this.ModelName = model; - } - } -} -``` - -Create a **CarBrandViewModel** class that defines content for the drawer view: car make and corresponding models. The application will display brands in the drawer and matching models in the main content area: - -```cs -using System; -using System.Linq; -using System.ComponentModel; -using System.Collections.Generic; -using System.Runtime.CompilerServices; - -namespace DrawerViewExample { - public class CarBrandViewModel : INotifyPropertyChanged { - public string BrandName { get; } - public IReadOnlyList CarModels { get; } - - public event PropertyChangedEventHandler PropertyChanged; - - public CarBrandViewModel(string brandName, IEnumerable carModels) { - if (String.IsNullOrEmpty(brandName)) { - this.BrandName = String.Empty; - } - else { - this.BrandName = brandName; - } - if (carModels == null) { - this.CarModels = new List(); - } - else { - this.CarModels = carModels.ToList(); - } - } - private void RaisePropertyChanged([CallerMemberName] string caller = "") { - PropertyChangedEventHandler handler = PropertyChanged; - if (handler != null) { - handler.Invoke(this, new PropertyChangedEventArgs(caller)); - } - } - } -} -``` - -Create a **MainViewModel** class that defines content for the MainPage (models grouped by make/brand): - -```cs -using System.Linq; -using System.ComponentModel; -using System.Collections.Generic; -using System.Runtime.CompilerServices; - -namespace DrawerViewExample { - public class MainViewModel : INotifyPropertyChanged { - private static readonly IReadOnlyList allCarModels = new List { - new CarModel("Mercedes-Benz", "SL500 Roadster"), - new CarModel("Mercedes-Benz", "CLK55 AMG Cabriolet"), - new CarModel("Mercedes-Benz", "C230 Kompressor Sport Coupe"), - new CarModel("BMW", "530i"), - new CarModel("Rolls-Royce", "Corniche"), - new CarModel("Jaguar", "S-Type 3.0"), - new CarModel("Cadillac", "Seville"), - new CarModel("Cadillac", "DeVille"), - new CarModel("Lexus", "LS430"), - new CarModel("Lexus", "GS430"), - new CarModel("Ford", "Ranger FX-4"), - new CarModel("Dodge", "RAM 1500"), - new CarModel("GMC", "Siera Quadrasteer"), - new CarModel("Nissan", "Crew Cab SE"), - new CarModel("Toyota", "Tacoma S-Runner"), - }; - - public IReadOnlyList CarModelsByBrand { get; } - - public event PropertyChangedEventHandler PropertyChanged; - - public MainViewModel() { - List carBrandViewModels = new List(); - carBrandViewModels.Add(new CarBrandViewModel("All", allCarModels)); - - IEnumerable> groupedCarModels = - allCarModels.GroupBy(v => v.BrandName); - foreach (IGrouping carModelGroup in groupedCarModels) { - carBrandViewModels.Add(new CarBrandViewModel(carModelGroup.Key, carModelGroup)); - } - CarModelsByBrand = carBrandViewModels; - } - - private void RaisePropertyChanged([CallerMemberName] string caller = "") { - PropertyChangedEventHandler handler = PropertyChanged; - if (handler != null) { - handler.Invoke(this, new PropertyChangedEventArgs(caller)); - } - } - } -} -``` - -### Specify the Drawer View Content -In the *MainPage.xaml* file: -1. Set the **ContentPage.BindingContext** property to a **MainViewModel** object. -2. Set the [DrawerView.DrawerContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerContent) property to a grid with a **ListView** object. Bind the list’s **ItemsSource** property to the **CarModelsByBrand** property of the view model, and set up list items to display brand names. -3. Set the [DrawerView.MainContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.MainContent) property to a grid with a **ListView** object. Specify the list’s **ItemsSource** binding. The bound list should contain car models corresponding to the selected brand. - -```xaml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -### Define the Drawer Behavior - -Define drawer behavior depending on device or emulator orientation: -- Landscape orientation – the drawer is always visible. -- Portrait orientation – the drawer moves out over the main content area when a user swipes a screen from the left edge. - -Add the **IsLandscapeOriented** dependency property to the **MainPage** class: - -```cs -using System; -using Microsoft.Maui.Controls; -using DevExpress.Maui.Navigation; - -namespace DrawerViewExample { - public partial class MainPage : ContentPage { - const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented"; - - public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create( - IsLandscapeOrientedPropertyName, - typeof(bool), - typeof(MainPage), - defaultValue: false); - - public bool IsLandscapeOriented { - get => (bool)GetValue(IsLandscapeOrientedProperty); - set => SetValue(IsLandscapeOrientedProperty, value); - } - public MainPage() { - InitializeComponent(); - SizeChanged += OnSizeChanged; - } - protected void OnSizeChanged(object sender, EventArgs args) { - IsLandscapeOriented = this.Width > this.Height; - } - } -} -``` - -Implement a value converter that converts a Boolean value to a value of the **DrawerBehavior** enumeration: - -```cs -using System.Globalization; -// ... - -class BoolToDrawerBehaviorConverter : IValueConverter { - public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { - if (targetType != typeof(DrawerBehavior)) return null; - bool boolValue = (bool)value; - return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop; - } - - public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { - throw new NotImplementedException(); - } -} -``` - -Bind the [DrawerView.DrawerBehavior](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerBehavior) property to **IsLandscapeOriented**: - -```xaml - - - - - - - - - -``` - -### Customize the Drawer Appearance -Use the following properties to customize the drawer size, shadow, and scrim: - -```xaml - - - -``` - -The scrim does not affect a drawer view when drawer behavior is set to **Split**. + +![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/391853119/22.1.1%2B) +[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1018580) +[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) + +# DevExpress Drawer View for .NET MAUI + +[DevExpress Mobile UI](https://www.devexpress.com/maui/) allows you to use a .NET cross-platform UI toolkit and C# to build native apps for iOS and Android. + +![DevExpress Mobile UI for .NET MAUI](./img/maui.png) + +The **DevExpress Mobile UI for Xamarin.Forms and .NET MAUI** is free of charge. To learn more about our offer and to reserve your copy, visit [Free DevExpress Mobile UI for Xamarin.Forms and .NET MAUI](https://www.devexpress.com/xamarin-free). + +## Requirements + +Please register the DevExpress NuGet Gallery in Visual Studio to restore the NuGet packages used in this solution. See the following topic for more information: [Get Started with DevExpress Mobile UI for .NET MAUI](https://docs.devexpress.com/MAUI/403249/get-started). + +## Documentation + +- [Data Grid](https://docs.devexpress.com/MAUI/403255/data-grid/data-grid) +- [Charts](https://docs.devexpress.com/MAUI/403300/charts/charts) +- [Data Form](https://docs.devexpress.com/MAUI/403640/data-form) +- [Navigation](https://docs.devexpress.com/MAUI/403297/navigation/index) +- [Data Editors](https://docs.devexpress.com/MAUI/403427/editors/index) +- [Collection View](https://docs.devexpress.com/MAUI/403324/collection-view/index) + +## More Examples + +* [Stocks App](https://github.com/DevExpress-Examples/maui-stocks-mini) +* [Data Grid](https://github.com/DevExpress-Examples/maui-data-grid-get-started) +* [Data Form](https://github.com/DevExpress-Examples/maui-data-form-get-started) +* [Data Editors](https://github.com/DevExpress-Examples/maui-editors-get-started) +* [Pie Chart](https://github.com/DevExpress-Examples/maui-pie-chart-get-started) +* [Scatter Chart](https://github.com/DevExpress-Examples/maui-scatter-chart-get-started) +* [Tab Page](https://github.com/DevExpress-Examples/maui-tab-page-get-started) +* [Tab View](https://github.com/DevExpress-Examples/maui-tab-view-get-started) +* [Drawer Page](https://github.com/DevExpress-Examples/maui-drawer-page-get-started) +* [Collection View](https://github.com/DevExpress-Examples/maui-collection-view-get-started) + +## What's in This Repository + +This example allows you to get started with the [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) component — use it to add a [navigation drawer](https://material.io/design/components/navigation-drawer.html) to your .NET MAUI application. + +![DevExpress Drawer View for .NET MAUI](./img/devexpress-maui-drawer-view.png) + +### Files to Look At + + +* [MauiProgram.cs](./CS/DrawerViewExample/MauiProgram.cs) +* [MainPage.xaml](./CS/DrawerViewExample/MainPage.xaml) +* [MainPage.xaml.cs](./CS/DrawerViewExample/MainPage.xaml.cs) +* [CarModel.cs](./CS/DrawerViewExample/CarModel.cs) +* [CarBrandViewModel.cs](./CS/DrawerViewExample/CarBrandViewModel.cs) +* [MainViewModel.cs](./CS/DrawerViewExample/MainViewModel.cs) + + +## How to Run This Application + +1. Install a [.NET MAUI development](https://docs.microsoft.com/en-gb/dotnet/maui/get-started/installation) environment and open the solution in Visual Studio 22 Preview. +2. Register the following NuGet feed in Visual Studio: `https://nuget.devexpress.com/free/api`. + If you are an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/), this MAUI preview will be available in your personal NuGet feed automatically. +4. Restore NuGet packages. +5. Run the application on an Android or iOS device or emulator. + +## How to Reproduce This Application + +The following step-by-step tutorial details how to reproduce this application. + +### Create a New MAUI Application and Add a Drawer View + +Create a new .NET MAUI solution in Visual Studio 22 Preview. Refer to the following Microsoft documentation for more information on how to get started with .NET MAUI: [.NET Multi-platform App UI](https://docs.microsoft.com/en-gb/dotnet/maui/). + +Register `https://nuget.devexpress.com/free/api` as a package source in Visual Studio, if you are not an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have not yet registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/). + +Install the **DevExpress.Maui.Navigation** package from your NuGet feed. + +In the *MauiProgram.cs* file, call the **UseDevExpress** method to register handlers for all DevExpress components: + +```cs +using Microsoft.Maui; +using Microsoft.Maui.Hosting; +using Microsoft.Maui.Controls.Hosting; +using DevExpress.Maui; + +namespace DrawerViewExample { + public static class MauiProgram { + public static MauiApp CreateMauiApp() { + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .UseDevExpress() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + return builder.Build(); + } + } +} +``` + +In the *MainPage.xaml* file, use the *dxn* prefix to declare the **DevExpress.Maui.Navigation** namespace and add a [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) object to the main page: + +```xaml + + + +``` + +### Create Models and View Models +Add a **CarModel** class that specifies a data object in the application: + +```cs +namespace DrawerViewExample { + public class CarModel { + public string BrandName { get; } + public string ModelName { get; } + public string FullName => $"{BrandName} {ModelName}"; + + public CarModel(string brand, string model) { + this.BrandName = brand; + this.ModelName = model; + } + } +} +``` + +Create a **CarBrandViewModel** class that defines content for the drawer view: car make and corresponding models. The application will display brands in the drawer and matching models in the main content area: + +```cs +using System; +using System.Linq; +using System.ComponentModel; +using System.Collections.Generic; +using System.Runtime.CompilerServices; + +namespace DrawerViewExample { + public class CarBrandViewModel : INotifyPropertyChanged { + public string BrandName { get; } + public IReadOnlyList CarModels { get; } + + public event PropertyChangedEventHandler PropertyChanged; + + public CarBrandViewModel(string brandName, IEnumerable carModels) { + if (String.IsNullOrEmpty(brandName)) { + this.BrandName = String.Empty; + } + else { + this.BrandName = brandName; + } + if (carModels == null) { + this.CarModels = new List(); + } + else { + this.CarModels = carModels.ToList(); + } + } + private void RaisePropertyChanged([CallerMemberName] string caller = "") { + PropertyChangedEventHandler handler = PropertyChanged; + if (handler != null) { + handler.Invoke(this, new PropertyChangedEventArgs(caller)); + } + } + } +} +``` + +Create a **MainViewModel** class that defines content for the MainPage (models grouped by make/brand): + +```cs +using System.Linq; +using System.ComponentModel; +using System.Collections.Generic; +using System.Runtime.CompilerServices; + +namespace DrawerViewExample { + public class MainViewModel : INotifyPropertyChanged { + private static readonly IReadOnlyList allCarModels = new List { + new CarModel("Mercedes-Benz", "SL500 Roadster"), + new CarModel("Mercedes-Benz", "CLK55 AMG Cabriolet"), + new CarModel("Mercedes-Benz", "C230 Kompressor Sport Coupe"), + new CarModel("BMW", "530i"), + new CarModel("Rolls-Royce", "Corniche"), + new CarModel("Jaguar", "S-Type 3.0"), + new CarModel("Cadillac", "Seville"), + new CarModel("Cadillac", "DeVille"), + new CarModel("Lexus", "LS430"), + new CarModel("Lexus", "GS430"), + new CarModel("Ford", "Ranger FX-4"), + new CarModel("Dodge", "RAM 1500"), + new CarModel("GMC", "Siera Quadrasteer"), + new CarModel("Nissan", "Crew Cab SE"), + new CarModel("Toyota", "Tacoma S-Runner"), + }; + + public IReadOnlyList CarModelsByBrand { get; } + + public event PropertyChangedEventHandler PropertyChanged; + + public MainViewModel() { + List carBrandViewModels = new List(); + carBrandViewModels.Add(new CarBrandViewModel("All", allCarModels)); + + IEnumerable> groupedCarModels = + allCarModels.GroupBy(v => v.BrandName); + foreach (IGrouping carModelGroup in groupedCarModels) { + carBrandViewModels.Add(new CarBrandViewModel(carModelGroup.Key, carModelGroup)); + } + CarModelsByBrand = carBrandViewModels; + } + + private void RaisePropertyChanged([CallerMemberName] string caller = "") { + PropertyChangedEventHandler handler = PropertyChanged; + if (handler != null) { + handler.Invoke(this, new PropertyChangedEventArgs(caller)); + } + } + } +} +``` + +### Specify the Drawer View Content +In the *MainPage.xaml* file: +1. Set the **ContentPage.BindingContext** property to a **MainViewModel** object. +2. Set the [DrawerView.DrawerContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerContent) property to a grid with a **ListView** object. Bind the list’s **ItemsSource** property to the **CarModelsByBrand** property of the view model, and set up list items to display brand names. +3. Set the [DrawerView.MainContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.MainContent) property to a grid with a **ListView** object. Specify the list’s **ItemsSource** binding. The bound list should contain car models corresponding to the selected brand. + +```xaml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +### Define the Drawer Behavior + +Define drawer behavior depending on device or emulator orientation: +- Landscape orientation – the drawer is always visible. +- Portrait orientation – the drawer moves out over the main content area when a user swipes a screen from the left edge. + +Add the **IsLandscapeOriented** dependency property to the **MainPage** class: + +```cs +using System; +using Microsoft.Maui.Controls; +using DevExpress.Maui.Navigation; + +namespace DrawerViewExample { + public partial class MainPage : ContentPage { + const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented"; + + public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create( + IsLandscapeOrientedPropertyName, + typeof(bool), + typeof(MainPage), + defaultValue: false); + + public bool IsLandscapeOriented { + get => (bool)GetValue(IsLandscapeOrientedProperty); + set => SetValue(IsLandscapeOrientedProperty, value); + } + public MainPage() { + InitializeComponent(); + SizeChanged += OnSizeChanged; + } + protected void OnSizeChanged(object sender, EventArgs args) { + IsLandscapeOriented = this.Width > this.Height; + } + } +} +``` + +Implement a value converter that converts a Boolean value to a value of the **DrawerBehavior** enumeration: + +```cs +using System.Globalization; +// ... + +class BoolToDrawerBehaviorConverter : IValueConverter { + public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { + if (targetType != typeof(DrawerBehavior)) return null; + bool boolValue = (bool)value; + return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop; + } + + public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { + throw new NotImplementedException(); + } +} +``` + +Bind the [DrawerView.DrawerBehavior](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerBehavior) property to **IsLandscapeOriented**: + +```xaml + + + + + + + + + +``` + +### Customize the Drawer Appearance +Use the following properties to customize the drawer size, shadow, and scrim: + +```xaml + + + +``` + +The scrim does not affect a drawer view when drawer behavior is set to **Split**. From 6a484efef0a82fea28263fe86fcc388ecea9b09b Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Tue, 24 May 2022 17:33:30 +0400 Subject: [PATCH 4/5] README auto update [skip ci] --- Readme.md | 729 +++++++++++++++++++++++++++--------------------------- 1 file changed, 364 insertions(+), 365 deletions(-) diff --git a/Readme.md b/Readme.md index d53e27c..21d8f25 100644 --- a/Readme.md +++ b/Readme.md @@ -1,365 +1,364 @@ - -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/391853119/22.1.1%2B) -[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1018580) -[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) - -# DevExpress Drawer View for .NET MAUI - -[DevExpress Mobile UI](https://www.devexpress.com/maui/) allows you to use a .NET cross-platform UI toolkit and C# to build native apps for iOS and Android. - -![DevExpress Mobile UI for .NET MAUI](./img/maui.png) - -The **DevExpress Mobile UI for Xamarin.Forms and .NET MAUI** is free of charge. To learn more about our offer and to reserve your copy, visit [Free DevExpress Mobile UI for Xamarin.Forms and .NET MAUI](https://www.devexpress.com/xamarin-free). - -## Requirements - -Please register the DevExpress NuGet Gallery in Visual Studio to restore the NuGet packages used in this solution. See the following topic for more information: [Get Started with DevExpress Mobile UI for .NET MAUI](https://docs.devexpress.com/MAUI/403249/get-started). - -## Documentation - -- [Data Grid](https://docs.devexpress.com/MAUI/403255/data-grid/data-grid) -- [Charts](https://docs.devexpress.com/MAUI/403300/charts/charts) -- [Data Form](https://docs.devexpress.com/MAUI/403640/data-form) -- [Navigation](https://docs.devexpress.com/MAUI/403297/navigation/index) -- [Data Editors](https://docs.devexpress.com/MAUI/403427/editors/index) -- [Collection View](https://docs.devexpress.com/MAUI/403324/collection-view/index) - -## More Examples - -* [Stocks App](https://github.com/DevExpress-Examples/maui-stocks-mini) -* [Data Grid](https://github.com/DevExpress-Examples/maui-data-grid-get-started) -* [Data Form](https://github.com/DevExpress-Examples/maui-data-form-get-started) -* [Data Editors](https://github.com/DevExpress-Examples/maui-editors-get-started) -* [Pie Chart](https://github.com/DevExpress-Examples/maui-pie-chart-get-started) -* [Scatter Chart](https://github.com/DevExpress-Examples/maui-scatter-chart-get-started) -* [Tab Page](https://github.com/DevExpress-Examples/maui-tab-page-get-started) -* [Tab View](https://github.com/DevExpress-Examples/maui-tab-view-get-started) -* [Drawer Page](https://github.com/DevExpress-Examples/maui-drawer-page-get-started) -* [Collection View](https://github.com/DevExpress-Examples/maui-collection-view-get-started) - -## What's in This Repository - -This example allows you to get started with the [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) component — use it to add a [navigation drawer](https://material.io/design/components/navigation-drawer.html) to your .NET MAUI application. - -![DevExpress Drawer View for .NET MAUI](./img/devexpress-maui-drawer-view.png) - -### Files to Look At - - -* [MauiProgram.cs](./CS/DrawerViewExample/MauiProgram.cs) -* [MainPage.xaml](./CS/DrawerViewExample/MainPage.xaml) -* [MainPage.xaml.cs](./CS/DrawerViewExample/MainPage.xaml.cs) -* [CarModel.cs](./CS/DrawerViewExample/CarModel.cs) -* [CarBrandViewModel.cs](./CS/DrawerViewExample/CarBrandViewModel.cs) -* [MainViewModel.cs](./CS/DrawerViewExample/MainViewModel.cs) - - -## How to Run This Application - -1. Install a [.NET MAUI development](https://docs.microsoft.com/en-gb/dotnet/maui/get-started/installation) environment and open the solution in Visual Studio 22 Preview. -2. Register the following NuGet feed in Visual Studio: `https://nuget.devexpress.com/free/api`. - If you are an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/), this MAUI preview will be available in your personal NuGet feed automatically. -4. Restore NuGet packages. -5. Run the application on an Android or iOS device or emulator. - -## How to Reproduce This Application - -The following step-by-step tutorial details how to reproduce this application. - -### Create a New MAUI Application and Add a Drawer View - -Create a new .NET MAUI solution in Visual Studio 22 Preview. Refer to the following Microsoft documentation for more information on how to get started with .NET MAUI: [.NET Multi-platform App UI](https://docs.microsoft.com/en-gb/dotnet/maui/). - -Register `https://nuget.devexpress.com/free/api` as a package source in Visual Studio, if you are not an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have not yet registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/). - -Install the **DevExpress.Maui.Navigation** package from your NuGet feed. - -In the *MauiProgram.cs* file, call the **UseDevExpress** method to register handlers for all DevExpress components: - -```cs -using Microsoft.Maui; -using Microsoft.Maui.Hosting; -using Microsoft.Maui.Controls.Hosting; -using DevExpress.Maui; - -namespace DrawerViewExample { - public static class MauiProgram { - public static MauiApp CreateMauiApp() { - var builder = MauiApp.CreateBuilder(); - builder - .UseMauiApp() - .UseDevExpress() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - }); - return builder.Build(); - } - } -} -``` - -In the *MainPage.xaml* file, use the *dxn* prefix to declare the **DevExpress.Maui.Navigation** namespace and add a [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) object to the main page: - -```xaml - - - -``` - -### Create Models and View Models -Add a **CarModel** class that specifies a data object in the application: - -```cs -namespace DrawerViewExample { - public class CarModel { - public string BrandName { get; } - public string ModelName { get; } - public string FullName => $"{BrandName} {ModelName}"; - - public CarModel(string brand, string model) { - this.BrandName = brand; - this.ModelName = model; - } - } -} -``` - -Create a **CarBrandViewModel** class that defines content for the drawer view: car make and corresponding models. The application will display brands in the drawer and matching models in the main content area: - -```cs -using System; -using System.Linq; -using System.ComponentModel; -using System.Collections.Generic; -using System.Runtime.CompilerServices; - -namespace DrawerViewExample { - public class CarBrandViewModel : INotifyPropertyChanged { - public string BrandName { get; } - public IReadOnlyList CarModels { get; } - - public event PropertyChangedEventHandler PropertyChanged; - - public CarBrandViewModel(string brandName, IEnumerable carModels) { - if (String.IsNullOrEmpty(brandName)) { - this.BrandName = String.Empty; - } - else { - this.BrandName = brandName; - } - if (carModels == null) { - this.CarModels = new List(); - } - else { - this.CarModels = carModels.ToList(); - } - } - private void RaisePropertyChanged([CallerMemberName] string caller = "") { - PropertyChangedEventHandler handler = PropertyChanged; - if (handler != null) { - handler.Invoke(this, new PropertyChangedEventArgs(caller)); - } - } - } -} -``` - -Create a **MainViewModel** class that defines content for the MainPage (models grouped by make/brand): - -```cs -using System.Linq; -using System.ComponentModel; -using System.Collections.Generic; -using System.Runtime.CompilerServices; - -namespace DrawerViewExample { - public class MainViewModel : INotifyPropertyChanged { - private static readonly IReadOnlyList allCarModels = new List { - new CarModel("Mercedes-Benz", "SL500 Roadster"), - new CarModel("Mercedes-Benz", "CLK55 AMG Cabriolet"), - new CarModel("Mercedes-Benz", "C230 Kompressor Sport Coupe"), - new CarModel("BMW", "530i"), - new CarModel("Rolls-Royce", "Corniche"), - new CarModel("Jaguar", "S-Type 3.0"), - new CarModel("Cadillac", "Seville"), - new CarModel("Cadillac", "DeVille"), - new CarModel("Lexus", "LS430"), - new CarModel("Lexus", "GS430"), - new CarModel("Ford", "Ranger FX-4"), - new CarModel("Dodge", "RAM 1500"), - new CarModel("GMC", "Siera Quadrasteer"), - new CarModel("Nissan", "Crew Cab SE"), - new CarModel("Toyota", "Tacoma S-Runner"), - }; - - public IReadOnlyList CarModelsByBrand { get; } - - public event PropertyChangedEventHandler PropertyChanged; - - public MainViewModel() { - List carBrandViewModels = new List(); - carBrandViewModels.Add(new CarBrandViewModel("All", allCarModels)); - - IEnumerable> groupedCarModels = - allCarModels.GroupBy(v => v.BrandName); - foreach (IGrouping carModelGroup in groupedCarModels) { - carBrandViewModels.Add(new CarBrandViewModel(carModelGroup.Key, carModelGroup)); - } - CarModelsByBrand = carBrandViewModels; - } - - private void RaisePropertyChanged([CallerMemberName] string caller = "") { - PropertyChangedEventHandler handler = PropertyChanged; - if (handler != null) { - handler.Invoke(this, new PropertyChangedEventArgs(caller)); - } - } - } -} -``` - -### Specify the Drawer View Content -In the *MainPage.xaml* file: -1. Set the **ContentPage.BindingContext** property to a **MainViewModel** object. -2. Set the [DrawerView.DrawerContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerContent) property to a grid with a **ListView** object. Bind the list’s **ItemsSource** property to the **CarModelsByBrand** property of the view model, and set up list items to display brand names. -3. Set the [DrawerView.MainContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.MainContent) property to a grid with a **ListView** object. Specify the list’s **ItemsSource** binding. The bound list should contain car models corresponding to the selected brand. - -```xaml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -### Define the Drawer Behavior - -Define drawer behavior depending on device or emulator orientation: -- Landscape orientation – the drawer is always visible. -- Portrait orientation – the drawer moves out over the main content area when a user swipes a screen from the left edge. - -Add the **IsLandscapeOriented** dependency property to the **MainPage** class: - -```cs -using System; -using Microsoft.Maui.Controls; -using DevExpress.Maui.Navigation; - -namespace DrawerViewExample { - public partial class MainPage : ContentPage { - const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented"; - - public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create( - IsLandscapeOrientedPropertyName, - typeof(bool), - typeof(MainPage), - defaultValue: false); - - public bool IsLandscapeOriented { - get => (bool)GetValue(IsLandscapeOrientedProperty); - set => SetValue(IsLandscapeOrientedProperty, value); - } - public MainPage() { - InitializeComponent(); - SizeChanged += OnSizeChanged; - } - protected void OnSizeChanged(object sender, EventArgs args) { - IsLandscapeOriented = this.Width > this.Height; - } - } -} -``` - -Implement a value converter that converts a Boolean value to a value of the **DrawerBehavior** enumeration: - -```cs -using System.Globalization; -// ... - -class BoolToDrawerBehaviorConverter : IValueConverter { - public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { - if (targetType != typeof(DrawerBehavior)) return null; - bool boolValue = (bool)value; - return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop; - } - - public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { - throw new NotImplementedException(); - } -} -``` - -Bind the [DrawerView.DrawerBehavior](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerBehavior) property to **IsLandscapeOriented**: - -```xaml - - - - - - - - - -``` - -### Customize the Drawer Appearance -Use the following properties to customize the drawer size, shadow, and scrim: - -```xaml - - - -``` - -The scrim does not affect a drawer view when drawer behavior is set to **Split**. + +[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1018580) +[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) + +# DevExpress Drawer View for .NET MAUI + +[DevExpress Mobile UI](https://www.devexpress.com/maui/) allows you to use a .NET cross-platform UI toolkit and C# to build native apps for iOS and Android. + +![DevExpress Mobile UI for .NET MAUI](./img/maui.png) + +The **DevExpress Mobile UI for Xamarin.Forms and .NET MAUI** is free of charge. To learn more about our offer and to reserve your copy, visit [Free DevExpress Mobile UI for Xamarin.Forms and .NET MAUI](https://www.devexpress.com/xamarin-free). + +## Requirements + +Please register the DevExpress NuGet Gallery in Visual Studio to restore the NuGet packages used in this solution. See the following topic for more information: [Get Started with DevExpress Mobile UI for .NET MAUI](https://docs.devexpress.com/MAUI/403249/get-started). + +## Documentation + +- [Data Grid](https://docs.devexpress.com/MAUI/403255/data-grid/data-grid) +- [Charts](https://docs.devexpress.com/MAUI/403300/charts/charts) +- [Data Form](https://docs.devexpress.com/MAUI/403640/data-form) +- [Navigation](https://docs.devexpress.com/MAUI/403297/navigation/index) +- [Data Editors](https://docs.devexpress.com/MAUI/403427/editors/index) +- [Collection View](https://docs.devexpress.com/MAUI/403324/collection-view/index) + +## More Examples + +* [Stocks App](https://github.com/DevExpress-Examples/maui-stocks-mini) +* [Data Grid](https://github.com/DevExpress-Examples/maui-data-grid-get-started) +* [Data Form](https://github.com/DevExpress-Examples/maui-data-form-get-started) +* [Data Editors](https://github.com/DevExpress-Examples/maui-editors-get-started) +* [Pie Chart](https://github.com/DevExpress-Examples/maui-pie-chart-get-started) +* [Scatter Chart](https://github.com/DevExpress-Examples/maui-scatter-chart-get-started) +* [Tab Page](https://github.com/DevExpress-Examples/maui-tab-page-get-started) +* [Tab View](https://github.com/DevExpress-Examples/maui-tab-view-get-started) +* [Drawer Page](https://github.com/DevExpress-Examples/maui-drawer-page-get-started) +* [Collection View](https://github.com/DevExpress-Examples/maui-collection-view-get-started) + +## What's in This Repository + +This example allows you to get started with the [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) component — use it to add a [navigation drawer](https://material.io/design/components/navigation-drawer.html) to your .NET MAUI application. + +![DevExpress Drawer View for .NET MAUI](./img/devexpress-maui-drawer-view.png) + +### Files to Look At + + +* [MauiProgram.cs](./CS/DrawerViewExample/MauiProgram.cs) +* [MainPage.xaml](./CS/DrawerViewExample/MainPage.xaml) +* [MainPage.xaml.cs](./CS/DrawerViewExample/MainPage.xaml.cs) +* [CarModel.cs](./CS/DrawerViewExample/CarModel.cs) +* [CarBrandViewModel.cs](./CS/DrawerViewExample/CarBrandViewModel.cs) +* [MainViewModel.cs](./CS/DrawerViewExample/MainViewModel.cs) + + +## How to Run This Application + +1. Install a [.NET MAUI development](https://docs.microsoft.com/en-gb/dotnet/maui/get-started/installation) environment and open the solution in Visual Studio 22 Preview. +2. Register the following NuGet feed in Visual Studio: `https://nuget.devexpress.com/free/api`. + If you are an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/), this MAUI preview will be available in your personal NuGet feed automatically. +4. Restore NuGet packages. +5. Run the application on an Android or iOS device or emulator. + +## How to Reproduce This Application + +The following step-by-step tutorial details how to reproduce this application. + +### Create a New MAUI Application and Add a Drawer View + +Create a new .NET MAUI solution in Visual Studio 22 Preview. Refer to the following Microsoft documentation for more information on how to get started with .NET MAUI: [.NET Multi-platform App UI](https://docs.microsoft.com/en-gb/dotnet/maui/). + +Register `https://nuget.devexpress.com/free/api` as a package source in Visual Studio, if you are not an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have not yet registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/). + +Install the **DevExpress.Maui.Navigation** package from your NuGet feed. + +In the *MauiProgram.cs* file, call the **UseDevExpress** method to register handlers for all DevExpress components: + +```cs +using Microsoft.Maui; +using Microsoft.Maui.Hosting; +using Microsoft.Maui.Controls.Hosting; +using DevExpress.Maui; + +namespace DrawerViewExample { + public static class MauiProgram { + public static MauiApp CreateMauiApp() { + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .UseDevExpress() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + return builder.Build(); + } + } +} +``` + +In the *MainPage.xaml* file, use the *dxn* prefix to declare the **DevExpress.Maui.Navigation** namespace and add a [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) object to the main page: + +```xaml + + + +``` + +### Create Models and View Models +Add a **CarModel** class that specifies a data object in the application: + +```cs +namespace DrawerViewExample { + public class CarModel { + public string BrandName { get; } + public string ModelName { get; } + public string FullName => $"{BrandName} {ModelName}"; + + public CarModel(string brand, string model) { + this.BrandName = brand; + this.ModelName = model; + } + } +} +``` + +Create a **CarBrandViewModel** class that defines content for the drawer view: car make and corresponding models. The application will display brands in the drawer and matching models in the main content area: + +```cs +using System; +using System.Linq; +using System.ComponentModel; +using System.Collections.Generic; +using System.Runtime.CompilerServices; + +namespace DrawerViewExample { + public class CarBrandViewModel : INotifyPropertyChanged { + public string BrandName { get; } + public IReadOnlyList CarModels { get; } + + public event PropertyChangedEventHandler PropertyChanged; + + public CarBrandViewModel(string brandName, IEnumerable carModels) { + if (String.IsNullOrEmpty(brandName)) { + this.BrandName = String.Empty; + } + else { + this.BrandName = brandName; + } + if (carModels == null) { + this.CarModels = new List(); + } + else { + this.CarModels = carModels.ToList(); + } + } + private void RaisePropertyChanged([CallerMemberName] string caller = "") { + PropertyChangedEventHandler handler = PropertyChanged; + if (handler != null) { + handler.Invoke(this, new PropertyChangedEventArgs(caller)); + } + } + } +} +``` + +Create a **MainViewModel** class that defines content for the MainPage (models grouped by make/brand): + +```cs +using System.Linq; +using System.ComponentModel; +using System.Collections.Generic; +using System.Runtime.CompilerServices; + +namespace DrawerViewExample { + public class MainViewModel : INotifyPropertyChanged { + private static readonly IReadOnlyList allCarModels = new List { + new CarModel("Mercedes-Benz", "SL500 Roadster"), + new CarModel("Mercedes-Benz", "CLK55 AMG Cabriolet"), + new CarModel("Mercedes-Benz", "C230 Kompressor Sport Coupe"), + new CarModel("BMW", "530i"), + new CarModel("Rolls-Royce", "Corniche"), + new CarModel("Jaguar", "S-Type 3.0"), + new CarModel("Cadillac", "Seville"), + new CarModel("Cadillac", "DeVille"), + new CarModel("Lexus", "LS430"), + new CarModel("Lexus", "GS430"), + new CarModel("Ford", "Ranger FX-4"), + new CarModel("Dodge", "RAM 1500"), + new CarModel("GMC", "Siera Quadrasteer"), + new CarModel("Nissan", "Crew Cab SE"), + new CarModel("Toyota", "Tacoma S-Runner"), + }; + + public IReadOnlyList CarModelsByBrand { get; } + + public event PropertyChangedEventHandler PropertyChanged; + + public MainViewModel() { + List carBrandViewModels = new List(); + carBrandViewModels.Add(new CarBrandViewModel("All", allCarModels)); + + IEnumerable> groupedCarModels = + allCarModels.GroupBy(v => v.BrandName); + foreach (IGrouping carModelGroup in groupedCarModels) { + carBrandViewModels.Add(new CarBrandViewModel(carModelGroup.Key, carModelGroup)); + } + CarModelsByBrand = carBrandViewModels; + } + + private void RaisePropertyChanged([CallerMemberName] string caller = "") { + PropertyChangedEventHandler handler = PropertyChanged; + if (handler != null) { + handler.Invoke(this, new PropertyChangedEventArgs(caller)); + } + } + } +} +``` + +### Specify the Drawer View Content +In the *MainPage.xaml* file: +1. Set the **ContentPage.BindingContext** property to a **MainViewModel** object. +2. Set the [DrawerView.DrawerContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerContent) property to a grid with a **ListView** object. Bind the list’s **ItemsSource** property to the **CarModelsByBrand** property of the view model, and set up list items to display brand names. +3. Set the [DrawerView.MainContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.MainContent) property to a grid with a **ListView** object. Specify the list’s **ItemsSource** binding. The bound list should contain car models corresponding to the selected brand. + +```xaml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +### Define the Drawer Behavior + +Define drawer behavior depending on device or emulator orientation: +- Landscape orientation – the drawer is always visible. +- Portrait orientation – the drawer moves out over the main content area when a user swipes a screen from the left edge. + +Add the **IsLandscapeOriented** dependency property to the **MainPage** class: + +```cs +using System; +using Microsoft.Maui.Controls; +using DevExpress.Maui.Navigation; + +namespace DrawerViewExample { + public partial class MainPage : ContentPage { + const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented"; + + public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create( + IsLandscapeOrientedPropertyName, + typeof(bool), + typeof(MainPage), + defaultValue: false); + + public bool IsLandscapeOriented { + get => (bool)GetValue(IsLandscapeOrientedProperty); + set => SetValue(IsLandscapeOrientedProperty, value); + } + public MainPage() { + InitializeComponent(); + SizeChanged += OnSizeChanged; + } + protected void OnSizeChanged(object sender, EventArgs args) { + IsLandscapeOriented = this.Width > this.Height; + } + } +} +``` + +Implement a value converter that converts a Boolean value to a value of the **DrawerBehavior** enumeration: + +```cs +using System.Globalization; +// ... + +class BoolToDrawerBehaviorConverter : IValueConverter { + public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { + if (targetType != typeof(DrawerBehavior)) return null; + bool boolValue = (bool)value; + return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop; + } + + public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { + throw new NotImplementedException(); + } +} +``` + +Bind the [DrawerView.DrawerBehavior](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerBehavior) property to **IsLandscapeOriented**: + +```xaml + + + + + + + + + +``` + +### Customize the Drawer Appearance +Use the following properties to customize the drawer size, shadow, and scrim: + +```xaml + + + +``` + +The scrim does not affect a drawer view when drawer behavior is set to **Split**. From b1df979ed71b2f26782d232e80e5a97c399301b4 Mon Sep 17 00:00:00 2001 From: gorbounoff <28042574+gorbounoff@users.noreply.github.com> Date: Wed, 25 May 2022 10:20:35 +0200 Subject: [PATCH 5/5] Revert "README auto update [skip ci]" This reverts commit 6a484efef0a82fea28263fe86fcc388ecea9b09b. --- Readme.md | 729 +++++++++++++++++++++++++++--------------------------- 1 file changed, 365 insertions(+), 364 deletions(-) diff --git a/Readme.md b/Readme.md index 21d8f25..d53e27c 100644 --- a/Readme.md +++ b/Readme.md @@ -1,364 +1,365 @@ - -[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1018580) -[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) - -# DevExpress Drawer View for .NET MAUI - -[DevExpress Mobile UI](https://www.devexpress.com/maui/) allows you to use a .NET cross-platform UI toolkit and C# to build native apps for iOS and Android. - -![DevExpress Mobile UI for .NET MAUI](./img/maui.png) - -The **DevExpress Mobile UI for Xamarin.Forms and .NET MAUI** is free of charge. To learn more about our offer and to reserve your copy, visit [Free DevExpress Mobile UI for Xamarin.Forms and .NET MAUI](https://www.devexpress.com/xamarin-free). - -## Requirements - -Please register the DevExpress NuGet Gallery in Visual Studio to restore the NuGet packages used in this solution. See the following topic for more information: [Get Started with DevExpress Mobile UI for .NET MAUI](https://docs.devexpress.com/MAUI/403249/get-started). - -## Documentation - -- [Data Grid](https://docs.devexpress.com/MAUI/403255/data-grid/data-grid) -- [Charts](https://docs.devexpress.com/MAUI/403300/charts/charts) -- [Data Form](https://docs.devexpress.com/MAUI/403640/data-form) -- [Navigation](https://docs.devexpress.com/MAUI/403297/navigation/index) -- [Data Editors](https://docs.devexpress.com/MAUI/403427/editors/index) -- [Collection View](https://docs.devexpress.com/MAUI/403324/collection-view/index) - -## More Examples - -* [Stocks App](https://github.com/DevExpress-Examples/maui-stocks-mini) -* [Data Grid](https://github.com/DevExpress-Examples/maui-data-grid-get-started) -* [Data Form](https://github.com/DevExpress-Examples/maui-data-form-get-started) -* [Data Editors](https://github.com/DevExpress-Examples/maui-editors-get-started) -* [Pie Chart](https://github.com/DevExpress-Examples/maui-pie-chart-get-started) -* [Scatter Chart](https://github.com/DevExpress-Examples/maui-scatter-chart-get-started) -* [Tab Page](https://github.com/DevExpress-Examples/maui-tab-page-get-started) -* [Tab View](https://github.com/DevExpress-Examples/maui-tab-view-get-started) -* [Drawer Page](https://github.com/DevExpress-Examples/maui-drawer-page-get-started) -* [Collection View](https://github.com/DevExpress-Examples/maui-collection-view-get-started) - -## What's in This Repository - -This example allows you to get started with the [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) component — use it to add a [navigation drawer](https://material.io/design/components/navigation-drawer.html) to your .NET MAUI application. - -![DevExpress Drawer View for .NET MAUI](./img/devexpress-maui-drawer-view.png) - -### Files to Look At - - -* [MauiProgram.cs](./CS/DrawerViewExample/MauiProgram.cs) -* [MainPage.xaml](./CS/DrawerViewExample/MainPage.xaml) -* [MainPage.xaml.cs](./CS/DrawerViewExample/MainPage.xaml.cs) -* [CarModel.cs](./CS/DrawerViewExample/CarModel.cs) -* [CarBrandViewModel.cs](./CS/DrawerViewExample/CarBrandViewModel.cs) -* [MainViewModel.cs](./CS/DrawerViewExample/MainViewModel.cs) - - -## How to Run This Application - -1. Install a [.NET MAUI development](https://docs.microsoft.com/en-gb/dotnet/maui/get-started/installation) environment and open the solution in Visual Studio 22 Preview. -2. Register the following NuGet feed in Visual Studio: `https://nuget.devexpress.com/free/api`. - If you are an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/), this MAUI preview will be available in your personal NuGet feed automatically. -4. Restore NuGet packages. -5. Run the application on an Android or iOS device or emulator. - -## How to Reproduce This Application - -The following step-by-step tutorial details how to reproduce this application. - -### Create a New MAUI Application and Add a Drawer View - -Create a new .NET MAUI solution in Visual Studio 22 Preview. Refer to the following Microsoft documentation for more information on how to get started with .NET MAUI: [.NET Multi-platform App UI](https://docs.microsoft.com/en-gb/dotnet/maui/). - -Register `https://nuget.devexpress.com/free/api` as a package source in Visual Studio, if you are not an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have not yet registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/). - -Install the **DevExpress.Maui.Navigation** package from your NuGet feed. - -In the *MauiProgram.cs* file, call the **UseDevExpress** method to register handlers for all DevExpress components: - -```cs -using Microsoft.Maui; -using Microsoft.Maui.Hosting; -using Microsoft.Maui.Controls.Hosting; -using DevExpress.Maui; - -namespace DrawerViewExample { - public static class MauiProgram { - public static MauiApp CreateMauiApp() { - var builder = MauiApp.CreateBuilder(); - builder - .UseMauiApp() - .UseDevExpress() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - }); - return builder.Build(); - } - } -} -``` - -In the *MainPage.xaml* file, use the *dxn* prefix to declare the **DevExpress.Maui.Navigation** namespace and add a [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) object to the main page: - -```xaml - - - -``` - -### Create Models and View Models -Add a **CarModel** class that specifies a data object in the application: - -```cs -namespace DrawerViewExample { - public class CarModel { - public string BrandName { get; } - public string ModelName { get; } - public string FullName => $"{BrandName} {ModelName}"; - - public CarModel(string brand, string model) { - this.BrandName = brand; - this.ModelName = model; - } - } -} -``` - -Create a **CarBrandViewModel** class that defines content for the drawer view: car make and corresponding models. The application will display brands in the drawer and matching models in the main content area: - -```cs -using System; -using System.Linq; -using System.ComponentModel; -using System.Collections.Generic; -using System.Runtime.CompilerServices; - -namespace DrawerViewExample { - public class CarBrandViewModel : INotifyPropertyChanged { - public string BrandName { get; } - public IReadOnlyList CarModels { get; } - - public event PropertyChangedEventHandler PropertyChanged; - - public CarBrandViewModel(string brandName, IEnumerable carModels) { - if (String.IsNullOrEmpty(brandName)) { - this.BrandName = String.Empty; - } - else { - this.BrandName = brandName; - } - if (carModels == null) { - this.CarModels = new List(); - } - else { - this.CarModels = carModels.ToList(); - } - } - private void RaisePropertyChanged([CallerMemberName] string caller = "") { - PropertyChangedEventHandler handler = PropertyChanged; - if (handler != null) { - handler.Invoke(this, new PropertyChangedEventArgs(caller)); - } - } - } -} -``` - -Create a **MainViewModel** class that defines content for the MainPage (models grouped by make/brand): - -```cs -using System.Linq; -using System.ComponentModel; -using System.Collections.Generic; -using System.Runtime.CompilerServices; - -namespace DrawerViewExample { - public class MainViewModel : INotifyPropertyChanged { - private static readonly IReadOnlyList allCarModels = new List { - new CarModel("Mercedes-Benz", "SL500 Roadster"), - new CarModel("Mercedes-Benz", "CLK55 AMG Cabriolet"), - new CarModel("Mercedes-Benz", "C230 Kompressor Sport Coupe"), - new CarModel("BMW", "530i"), - new CarModel("Rolls-Royce", "Corniche"), - new CarModel("Jaguar", "S-Type 3.0"), - new CarModel("Cadillac", "Seville"), - new CarModel("Cadillac", "DeVille"), - new CarModel("Lexus", "LS430"), - new CarModel("Lexus", "GS430"), - new CarModel("Ford", "Ranger FX-4"), - new CarModel("Dodge", "RAM 1500"), - new CarModel("GMC", "Siera Quadrasteer"), - new CarModel("Nissan", "Crew Cab SE"), - new CarModel("Toyota", "Tacoma S-Runner"), - }; - - public IReadOnlyList CarModelsByBrand { get; } - - public event PropertyChangedEventHandler PropertyChanged; - - public MainViewModel() { - List carBrandViewModels = new List(); - carBrandViewModels.Add(new CarBrandViewModel("All", allCarModels)); - - IEnumerable> groupedCarModels = - allCarModels.GroupBy(v => v.BrandName); - foreach (IGrouping carModelGroup in groupedCarModels) { - carBrandViewModels.Add(new CarBrandViewModel(carModelGroup.Key, carModelGroup)); - } - CarModelsByBrand = carBrandViewModels; - } - - private void RaisePropertyChanged([CallerMemberName] string caller = "") { - PropertyChangedEventHandler handler = PropertyChanged; - if (handler != null) { - handler.Invoke(this, new PropertyChangedEventArgs(caller)); - } - } - } -} -``` - -### Specify the Drawer View Content -In the *MainPage.xaml* file: -1. Set the **ContentPage.BindingContext** property to a **MainViewModel** object. -2. Set the [DrawerView.DrawerContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerContent) property to a grid with a **ListView** object. Bind the list’s **ItemsSource** property to the **CarModelsByBrand** property of the view model, and set up list items to display brand names. -3. Set the [DrawerView.MainContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.MainContent) property to a grid with a **ListView** object. Specify the list’s **ItemsSource** binding. The bound list should contain car models corresponding to the selected brand. - -```xaml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -### Define the Drawer Behavior - -Define drawer behavior depending on device or emulator orientation: -- Landscape orientation – the drawer is always visible. -- Portrait orientation – the drawer moves out over the main content area when a user swipes a screen from the left edge. - -Add the **IsLandscapeOriented** dependency property to the **MainPage** class: - -```cs -using System; -using Microsoft.Maui.Controls; -using DevExpress.Maui.Navigation; - -namespace DrawerViewExample { - public partial class MainPage : ContentPage { - const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented"; - - public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create( - IsLandscapeOrientedPropertyName, - typeof(bool), - typeof(MainPage), - defaultValue: false); - - public bool IsLandscapeOriented { - get => (bool)GetValue(IsLandscapeOrientedProperty); - set => SetValue(IsLandscapeOrientedProperty, value); - } - public MainPage() { - InitializeComponent(); - SizeChanged += OnSizeChanged; - } - protected void OnSizeChanged(object sender, EventArgs args) { - IsLandscapeOriented = this.Width > this.Height; - } - } -} -``` - -Implement a value converter that converts a Boolean value to a value of the **DrawerBehavior** enumeration: - -```cs -using System.Globalization; -// ... - -class BoolToDrawerBehaviorConverter : IValueConverter { - public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { - if (targetType != typeof(DrawerBehavior)) return null; - bool boolValue = (bool)value; - return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop; - } - - public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { - throw new NotImplementedException(); - } -} -``` - -Bind the [DrawerView.DrawerBehavior](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerBehavior) property to **IsLandscapeOriented**: - -```xaml - - - - - - - - - -``` - -### Customize the Drawer Appearance -Use the following properties to customize the drawer size, shadow, and scrim: - -```xaml - - - -``` - -The scrim does not affect a drawer view when drawer behavior is set to **Split**. + +![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/391853119/22.1.1%2B) +[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1018580) +[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) + +# DevExpress Drawer View for .NET MAUI + +[DevExpress Mobile UI](https://www.devexpress.com/maui/) allows you to use a .NET cross-platform UI toolkit and C# to build native apps for iOS and Android. + +![DevExpress Mobile UI for .NET MAUI](./img/maui.png) + +The **DevExpress Mobile UI for Xamarin.Forms and .NET MAUI** is free of charge. To learn more about our offer and to reserve your copy, visit [Free DevExpress Mobile UI for Xamarin.Forms and .NET MAUI](https://www.devexpress.com/xamarin-free). + +## Requirements + +Please register the DevExpress NuGet Gallery in Visual Studio to restore the NuGet packages used in this solution. See the following topic for more information: [Get Started with DevExpress Mobile UI for .NET MAUI](https://docs.devexpress.com/MAUI/403249/get-started). + +## Documentation + +- [Data Grid](https://docs.devexpress.com/MAUI/403255/data-grid/data-grid) +- [Charts](https://docs.devexpress.com/MAUI/403300/charts/charts) +- [Data Form](https://docs.devexpress.com/MAUI/403640/data-form) +- [Navigation](https://docs.devexpress.com/MAUI/403297/navigation/index) +- [Data Editors](https://docs.devexpress.com/MAUI/403427/editors/index) +- [Collection View](https://docs.devexpress.com/MAUI/403324/collection-view/index) + +## More Examples + +* [Stocks App](https://github.com/DevExpress-Examples/maui-stocks-mini) +* [Data Grid](https://github.com/DevExpress-Examples/maui-data-grid-get-started) +* [Data Form](https://github.com/DevExpress-Examples/maui-data-form-get-started) +* [Data Editors](https://github.com/DevExpress-Examples/maui-editors-get-started) +* [Pie Chart](https://github.com/DevExpress-Examples/maui-pie-chart-get-started) +* [Scatter Chart](https://github.com/DevExpress-Examples/maui-scatter-chart-get-started) +* [Tab Page](https://github.com/DevExpress-Examples/maui-tab-page-get-started) +* [Tab View](https://github.com/DevExpress-Examples/maui-tab-view-get-started) +* [Drawer Page](https://github.com/DevExpress-Examples/maui-drawer-page-get-started) +* [Collection View](https://github.com/DevExpress-Examples/maui-collection-view-get-started) + +## What's in This Repository + +This example allows you to get started with the [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) component — use it to add a [navigation drawer](https://material.io/design/components/navigation-drawer.html) to your .NET MAUI application. + +![DevExpress Drawer View for .NET MAUI](./img/devexpress-maui-drawer-view.png) + +### Files to Look At + + +* [MauiProgram.cs](./CS/DrawerViewExample/MauiProgram.cs) +* [MainPage.xaml](./CS/DrawerViewExample/MainPage.xaml) +* [MainPage.xaml.cs](./CS/DrawerViewExample/MainPage.xaml.cs) +* [CarModel.cs](./CS/DrawerViewExample/CarModel.cs) +* [CarBrandViewModel.cs](./CS/DrawerViewExample/CarBrandViewModel.cs) +* [MainViewModel.cs](./CS/DrawerViewExample/MainViewModel.cs) + + +## How to Run This Application + +1. Install a [.NET MAUI development](https://docs.microsoft.com/en-gb/dotnet/maui/get-started/installation) environment and open the solution in Visual Studio 22 Preview. +2. Register the following NuGet feed in Visual Studio: `https://nuget.devexpress.com/free/api`. + If you are an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/), this MAUI preview will be available in your personal NuGet feed automatically. +4. Restore NuGet packages. +5. Run the application on an Android or iOS device or emulator. + +## How to Reproduce This Application + +The following step-by-step tutorial details how to reproduce this application. + +### Create a New MAUI Application and Add a Drawer View + +Create a new .NET MAUI solution in Visual Studio 22 Preview. Refer to the following Microsoft documentation for more information on how to get started with .NET MAUI: [.NET Multi-platform App UI](https://docs.microsoft.com/en-gb/dotnet/maui/). + +Register `https://nuget.devexpress.com/free/api` as a package source in Visual Studio, if you are not an active DevExpress [Universal](https://www.devexpress.com/subscriptions/universal.xml) customer or have not yet registered our [free Xamarin UI controls](https://www.devexpress.com/xamarin/). + +Install the **DevExpress.Maui.Navigation** package from your NuGet feed. + +In the *MauiProgram.cs* file, call the **UseDevExpress** method to register handlers for all DevExpress components: + +```cs +using Microsoft.Maui; +using Microsoft.Maui.Hosting; +using Microsoft.Maui.Controls.Hosting; +using DevExpress.Maui; + +namespace DrawerViewExample { + public static class MauiProgram { + public static MauiApp CreateMauiApp() { + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .UseDevExpress() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + return builder.Build(); + } + } +} +``` + +In the *MainPage.xaml* file, use the *dxn* prefix to declare the **DevExpress.Maui.Navigation** namespace and add a [DrawerView](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView) object to the main page: + +```xaml + + + +``` + +### Create Models and View Models +Add a **CarModel** class that specifies a data object in the application: + +```cs +namespace DrawerViewExample { + public class CarModel { + public string BrandName { get; } + public string ModelName { get; } + public string FullName => $"{BrandName} {ModelName}"; + + public CarModel(string brand, string model) { + this.BrandName = brand; + this.ModelName = model; + } + } +} +``` + +Create a **CarBrandViewModel** class that defines content for the drawer view: car make and corresponding models. The application will display brands in the drawer and matching models in the main content area: + +```cs +using System; +using System.Linq; +using System.ComponentModel; +using System.Collections.Generic; +using System.Runtime.CompilerServices; + +namespace DrawerViewExample { + public class CarBrandViewModel : INotifyPropertyChanged { + public string BrandName { get; } + public IReadOnlyList CarModels { get; } + + public event PropertyChangedEventHandler PropertyChanged; + + public CarBrandViewModel(string brandName, IEnumerable carModels) { + if (String.IsNullOrEmpty(brandName)) { + this.BrandName = String.Empty; + } + else { + this.BrandName = brandName; + } + if (carModels == null) { + this.CarModels = new List(); + } + else { + this.CarModels = carModels.ToList(); + } + } + private void RaisePropertyChanged([CallerMemberName] string caller = "") { + PropertyChangedEventHandler handler = PropertyChanged; + if (handler != null) { + handler.Invoke(this, new PropertyChangedEventArgs(caller)); + } + } + } +} +``` + +Create a **MainViewModel** class that defines content for the MainPage (models grouped by make/brand): + +```cs +using System.Linq; +using System.ComponentModel; +using System.Collections.Generic; +using System.Runtime.CompilerServices; + +namespace DrawerViewExample { + public class MainViewModel : INotifyPropertyChanged { + private static readonly IReadOnlyList allCarModels = new List { + new CarModel("Mercedes-Benz", "SL500 Roadster"), + new CarModel("Mercedes-Benz", "CLK55 AMG Cabriolet"), + new CarModel("Mercedes-Benz", "C230 Kompressor Sport Coupe"), + new CarModel("BMW", "530i"), + new CarModel("Rolls-Royce", "Corniche"), + new CarModel("Jaguar", "S-Type 3.0"), + new CarModel("Cadillac", "Seville"), + new CarModel("Cadillac", "DeVille"), + new CarModel("Lexus", "LS430"), + new CarModel("Lexus", "GS430"), + new CarModel("Ford", "Ranger FX-4"), + new CarModel("Dodge", "RAM 1500"), + new CarModel("GMC", "Siera Quadrasteer"), + new CarModel("Nissan", "Crew Cab SE"), + new CarModel("Toyota", "Tacoma S-Runner"), + }; + + public IReadOnlyList CarModelsByBrand { get; } + + public event PropertyChangedEventHandler PropertyChanged; + + public MainViewModel() { + List carBrandViewModels = new List(); + carBrandViewModels.Add(new CarBrandViewModel("All", allCarModels)); + + IEnumerable> groupedCarModels = + allCarModels.GroupBy(v => v.BrandName); + foreach (IGrouping carModelGroup in groupedCarModels) { + carBrandViewModels.Add(new CarBrandViewModel(carModelGroup.Key, carModelGroup)); + } + CarModelsByBrand = carBrandViewModels; + } + + private void RaisePropertyChanged([CallerMemberName] string caller = "") { + PropertyChangedEventHandler handler = PropertyChanged; + if (handler != null) { + handler.Invoke(this, new PropertyChangedEventArgs(caller)); + } + } + } +} +``` + +### Specify the Drawer View Content +In the *MainPage.xaml* file: +1. Set the **ContentPage.BindingContext** property to a **MainViewModel** object. +2. Set the [DrawerView.DrawerContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerContent) property to a grid with a **ListView** object. Bind the list’s **ItemsSource** property to the **CarModelsByBrand** property of the view model, and set up list items to display brand names. +3. Set the [DrawerView.MainContent](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.MainContent) property to a grid with a **ListView** object. Specify the list’s **ItemsSource** binding. The bound list should contain car models corresponding to the selected brand. + +```xaml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +### Define the Drawer Behavior + +Define drawer behavior depending on device or emulator orientation: +- Landscape orientation – the drawer is always visible. +- Portrait orientation – the drawer moves out over the main content area when a user swipes a screen from the left edge. + +Add the **IsLandscapeOriented** dependency property to the **MainPage** class: + +```cs +using System; +using Microsoft.Maui.Controls; +using DevExpress.Maui.Navigation; + +namespace DrawerViewExample { + public partial class MainPage : ContentPage { + const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented"; + + public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create( + IsLandscapeOrientedPropertyName, + typeof(bool), + typeof(MainPage), + defaultValue: false); + + public bool IsLandscapeOriented { + get => (bool)GetValue(IsLandscapeOrientedProperty); + set => SetValue(IsLandscapeOrientedProperty, value); + } + public MainPage() { + InitializeComponent(); + SizeChanged += OnSizeChanged; + } + protected void OnSizeChanged(object sender, EventArgs args) { + IsLandscapeOriented = this.Width > this.Height; + } + } +} +``` + +Implement a value converter that converts a Boolean value to a value of the **DrawerBehavior** enumeration: + +```cs +using System.Globalization; +// ... + +class BoolToDrawerBehaviorConverter : IValueConverter { + public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { + if (targetType != typeof(DrawerBehavior)) return null; + bool boolValue = (bool)value; + return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop; + } + + public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { + throw new NotImplementedException(); + } +} +``` + +Bind the [DrawerView.DrawerBehavior](http://docs.devexpress.com/MAUI/DevExpress.Maui.Navigation.DrawerView.DrawerBehavior) property to **IsLandscapeOriented**: + +```xaml + + + + + + + + + +``` + +### Customize the Drawer Appearance +Use the following properties to customize the drawer size, shadow, and scrim: + +```xaml + + + +``` + +The scrim does not affect a drawer view when drawer behavior is set to **Split**.