Skip to content

Commit 545ef35

Browse files
gorbounoffgorbounoff
committed
replace drawer with flyout
1 parent 15a0ddb commit 545ef35

File tree

6 files changed

+45
-58
lines changed

6 files changed

+45
-58
lines changed

‎CS/DrawerViewExample/App.xaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
x:Class="DrawerViewExample.App"
66
windows:Application.ImageDirectory="Assets">
77
<Application.Resources>
8-
8+
<local:BoolToDrawerBehaviorConverter x:Key="boolToDrawerBehaviorConverter"/>
99
</Application.Resources>
1010
</Application>

‎CS/DrawerViewExample/DrawerViewExample.csproj

-4
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,6 @@
3232
<MauiFont Include="Resources\Fonts\*" />
3333
</ItemGroup>
3434

35-
<ItemGroup>
36-
<PackageReference Include="DevExpress.Maui.Navigation" Version="22.1.1-pre-*" />
37-
</ItemGroup>
38-
3935
<PropertyGroup>
4036
<UseInterpreter Condition="$(TargetFramework.Contains('-android'))">False</UseInterpreter>
4137
</PropertyGroup>

‎CS/DrawerViewExample/MainPage.xaml

+34-44
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,40 @@
1-
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
1+
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
22
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
33
x:Class="DrawerViewExample.MainPage"
44
xmlns:local="clr-namespace:DrawerViewExample"
5-
xmlns:dxn="clr-namespace:DevExpress.Maui.Navigation;assembly=DevExpress.Maui.Navigation"
5+
6+
FlyoutLayoutBehavior="{Binding IsLandscapeOriented, Source={x:Reference page},
7+
Converter={StaticResource boolToDrawerBehaviorConverter}}"
68
x:Name="page">
7-
<ContentPage.Resources>
8-
<local:BoolToDrawerBehaviorConverter x:Key="boolToDrawerBehaviorConverter"/>
9-
</ContentPage.Resources>
10-
<ContentPage.BindingContext>
9+
<FlyoutPage.BindingContext>
1110
<local:MainViewModel/>
12-
</ContentPage.BindingContext>
13-
<dxn:DrawerView x:Name="drawer"
14-
DrawerBehavior="{Binding IsLandscapeOriented, Source={x:Reference page},
15-
Converter={StaticResource boolToDrawerBehaviorConverter}}"
16-
DrawerWidth="180"
17-
DrawerShadowHeight="10"
18-
DrawerShadowRadius="40"
19-
DrawerShadowColor="#808080"
20-
ScrimColor="#80000000">
21-
<dxn:DrawerView.DrawerContent>
22-
<Grid HeightRequest="800">
23-
<ListView x:Name="carBrandList"
24-
ItemsSource="{Binding CarModelsByBrand}">
25-
<ListView.ItemTemplate>
26-
<DataTemplate>
27-
<ViewCell>
28-
<Label Padding="5" Text="{Binding BrandName}" />
29-
</ViewCell>
30-
</DataTemplate>
31-
</ListView.ItemTemplate>
32-
</ListView>
33-
</Grid>
34-
</dxn:DrawerView.DrawerContent>
35-
<dxn:DrawerView.MainContent>
36-
<Grid HeightRequest="800">
37-
<ListView BindingContext="{x:Reference carBrandList}"
38-
ItemsSource="{Binding SelectedItem.CarModels}">
39-
<ListView.ItemTemplate>
40-
<DataTemplate>
41-
<ViewCell>
42-
<Label Padding="5" Text="{Binding FullName}" />
43-
</ViewCell>
11+
</FlyoutPage.BindingContext>
12+
<FlyoutPage.Flyout>
13+
<ContentPage Title="About" IconImageSource="hamburger" WidthRequest="50">
14+
<CollectionView x:Name="carBrandList"
15+
ItemsSource="{Binding CarModelsByBrand}" SelectionMode="Single">
16+
<CollectionView.ItemTemplate>
17+
<DataTemplate>
18+
<Label Padding="5" Text="{Binding BrandName}" />
4419
</DataTemplate>
45-
</ListView.ItemTemplate>
46-
</ListView>
47-
</Grid>
48-
</dxn:DrawerView.MainContent>
49-
</dxn:DrawerView>
50-
</ContentPage>
20+
</CollectionView.ItemTemplate>
21+
</CollectionView>
22+
</ContentPage>
23+
</FlyoutPage.Flyout>
24+
<FlyoutPage.Detail>
25+
<NavigationPage WidthRequest="50">
26+
<x:Arguments>
27+
<ContentPage>
28+
<CollectionView BindingContext="{x:Reference carBrandList}"
29+
ItemsSource="{Binding SelectedItem.CarModels}">
30+
<CollectionView.ItemTemplate>
31+
<DataTemplate>
32+
<Label Padding="5" Text="{Binding FullName}" />
33+
</DataTemplate>
34+
</CollectionView.ItemTemplate>
35+
</CollectionView>
36+
</ContentPage>
37+
</x:Arguments>
38+
</NavigationPage>
39+
</FlyoutPage.Detail>
40+
</FlyoutPage>

‎CS/DrawerViewExample/MainPage.xaml.cs

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
using System;
22
using Microsoft.Maui.Controls;
3-
using DevExpress.Maui.Navigation;
43
using System.Globalization;
54

65
namespace DrawerViewExample {
7-
public partial class MainPage : ContentPage {
6+
public partial class MainPage : FlyoutPage {
87
const string IsLandscapeOrientedPropertyName = "IsLandscapeOriented";
98

109
public static readonly BindableProperty IsLandscapeOrientedProperty = BindableProperty.Create(
@@ -18,13 +17,16 @@ public bool IsLandscapeOriented {
1817
set => SetValue(IsLandscapeOrientedProperty, value);
1918
}
2019
public MainPage() {
21-
InitializeComponent();
22-
drawer.IsDrawerOpened = true;
20+
InitializeComponent();
2321
SizeChanged += OnSizeChanged;
22+
carBrandList.SelectionChanged += OnSelectionChanged;
2423
}
2524
protected void OnSizeChanged(object sender, EventArgs args) {
2625
IsLandscapeOriented = this.Width > this.Height;
2726
}
27+
void OnSelectionChanged(object sender, SelectionChangedEventArgs e) {
28+
IsPresented = false;
29+
}
2830

2931
protected override void OnAppearing() {
3032
base.OnAppearing();
@@ -34,9 +36,9 @@ protected override void OnAppearing() {
3436

3537
class BoolToDrawerBehaviorConverter : IValueConverter {
3638
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
37-
if (targetType != typeof(DrawerBehavior)) return null;
39+
if (targetType != typeof(FlyoutLayoutBehavior)) return null;
3840
bool boolValue = (bool)value;
39-
return boolValue ? DrawerBehavior.Split : DrawerBehavior.SlideOnTop;
41+
return boolValue ? FlyoutLayoutBehavior.Split : FlyoutLayoutBehavior.Popover;
4042
}
4143

4244
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {

‎CS/DrawerViewExample/MauiProgram.cs

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
using Microsoft.Maui;
22
using Microsoft.Maui.Hosting;
3-
using Microsoft.Maui.Controls.Hosting;
4-
using DevExpress.Maui;
3+
using Microsoft.Maui.Controls.Hosting;
54

65
namespace DrawerViewExample {
76
public static class MauiProgram {
87
public static MauiApp CreateMauiApp() {
98
var builder = MauiApp.CreateBuilder();
109
builder
1110
.UseMauiApp<App>()
12-
.UseDevExpress()
1311
.ConfigureFonts(fonts =>
1412
{
1513
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

‎CS/DrawerViewExample/Resources/Images/hamburger.svg

+1
Loading

0 commit comments

Comments
 (0)