Replace drawer with flyout

CS/DrawerViewExample/App.xaml

@@ -5,6 +5,6 @@
              x:Class="DrawerViewExample.App"
              windows:Application.ImageDirectory="Assets">
     <Application.Resources>
-
+        <local:BoolToDrawerBehaviorConverter x:Key="boolToDrawerBehaviorConverter"/>
     </Application.Resources>
 </Application>

CS/DrawerViewExample/DrawerViewExample.csproj

@@ -32,10 +32,6 @@
 		<MauiFont Include="Resources\Fonts\*" />
 	</ItemGroup>
 
-	<ItemGroup>
-		<PackageReference Include="DevExpress.Maui.Navigation" Version="22.1.1-pre-*" />
-	</ItemGroup>
-
 	<PropertyGroup>
 		<UseInterpreter Condition="$(TargetFramework.Contains('-android'))">False</UseInterpreter>
 	</PropertyGroup>

CS/DrawerViewExample/MainPage.xaml

@@ -1,50 +1,40 @@
-<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="DrawerViewExample.MainPage"
              xmlns:local="clr-namespace:DrawerViewExample"
-             xmlns:dxn="clr-namespace:DevExpress.Maui.Navigation;assembly=DevExpress.Maui.Navigation"
+
+             FlyoutLayoutBehavior="{Binding IsLandscapeOriented, Source={x:Reference page}, 
+                                    Converter={StaticResource boolToDrawerBehaviorConverter}}"
              x:Name="page">
-    <ContentPage.Resources>
-        <local:BoolToDrawerBehaviorConverter x:Key="boolToDrawerBehaviorConverter"/>
-    </ContentPage.Resources>
-    <ContentPage.BindingContext>
+    <FlyoutPage.BindingContext>
         <local:MainViewModel/>
-    </ContentPage.BindingContext>
-    <dxn:DrawerView x:Name="drawer"
-                    DrawerBehavior="{Binding IsLandscapeOriented, Source={x:Reference page}, 
-                                    Converter={StaticResource boolToDrawerBehaviorConverter}}"
-                    DrawerWidth="180"
-                    DrawerShadowHeight="10"
-                    DrawerShadowRadius="40"
-                    DrawerShadowColor="#808080"
-                    ScrimColor="#80000000">
-        <dxn:DrawerView.DrawerContent>
-            <Grid HeightRequest="800">
-                <ListView x:Name="carBrandList" 
-                            ItemsSource="{Binding CarModelsByBrand}">
-                    <ListView.ItemTemplate>
-                        <DataTemplate>
-                            <ViewCell>
-                                <Label Padding="5" Text="{Binding BrandName}" />
-                            </ViewCell>
-                        </DataTemplate>
-                    </ListView.ItemTemplate>
-                </ListView>
-            </Grid>
-        </dxn:DrawerView.DrawerContent>
-        <dxn:DrawerView.MainContent>
-            <Grid HeightRequest="800">
-                <ListView BindingContext="{x:Reference carBrandList}"
-                          ItemsSource="{Binding SelectedItem.CarModels}">
-                    <ListView.ItemTemplate>
-                        <DataTemplate>
-                            <ViewCell>
-                                <Label Padding="5" Text="{Binding FullName}" />
-                            </ViewCell>
+    </FlyoutPage.BindingContext>
+    <FlyoutPage.Flyout>
+        <ContentPage Title="About" IconImageSource="hamburger" WidthRequest="50">
+            <CollectionView x:Name="carBrandList" 
+                            ItemsSource="{Binding CarModelsByBrand}" SelectionMode="Single">
+                <CollectionView.ItemTemplate>
+                    <DataTemplate>
+                        <Label Padding="5" Text="{Binding BrandName}" />
                     </DataTemplate>
-                    </ListView.ItemTemplate>
-                </ListView>
-            </Grid>
-        </dxn:DrawerView.MainContent>
-    </dxn:DrawerView>
-</ContentPage>
+                </CollectionView.ItemTemplate>
+            </CollectionView>
+        </ContentPage>
+    </FlyoutPage.Flyout>
+    <FlyoutPage.Detail>
+        <NavigationPage WidthRequest="50">
+            <x:Arguments>
+                <ContentPage>
+                    <CollectionView BindingContext="{x:Reference carBrandList}"
+                                ItemsSource="{Binding SelectedItem.CarModels}">
+                        <CollectionView.ItemTemplate>
+                            <DataTemplate>
+                                <Label Padding="5" Text="{Binding FullName}" />
+                             </DataTemplate>
+                        </CollectionView.ItemTemplate>
+                    </CollectionView>
+                </ContentPage>
+            </x:Arguments>
+        </NavigationPage>
+    </FlyoutPage.Detail>
+</FlyoutPage>

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) {

CS/DrawerViewExample/MauiProgram.cs

@@ -1,15 +1,13 @@
 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 {
         public static MauiApp CreateMauiApp() {
             var builder = MauiApp.CreateBuilder();
             builder
                 .UseMauiApp<App>()
-                .UseDevExpress()
                 .ConfigureFonts(fonts =>
                 {
                     fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");