try shell flyout page + add some icons

pull/19/head
Alexandre Agostinho 2 years ago
parent d9bf7bf5f3
commit 52906e510d

@ -7,6 +7,7 @@
InitializeComponent(); InitializeComponent();
MainPage = new AppShell(); MainPage = new AppShell();
Application.Current.UserAppTheme = AppTheme.Light;
} }
} }
} }

@ -4,16 +4,60 @@
xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Vue" xmlns:local="clr-namespace:Vue"
Shell.FlyoutBehavior="Disabled"> FlyoutBackgroundColor="DarkGray"
Shell.FlyoutBehavior="Flyout">
<ShellContent <Shell.ItemTemplate>
Title="Home" <DataTemplate>
ContentTemplate="{DataTemplate local:Home}" <Grid ColumnDefinitions="20, *" Padding="10">
Route="MainPage" /> <Image Source="{Binding Icon}"/>
<Label Grid.Column="1" Text="{Binding Title}"
TextColor="White" FontAttributes="Bold"
Padding="20, 0"/>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
<Shell.FlyoutHeader>
<VerticalStackLayout>
<ImageButton Source="person_default.png"
BackgroundColor="{StaticResource Secondary}"
WidthRequest="100" HeightRequest="100"
CornerRadius="50" Margin="0, 20, 0, 0"
IsEnabled="False"/>
<Button Text="Connection" ImageSource="login_icon.png"
MaximumHeightRequest="20" Margin="15, 15, 15, 60"/>
</VerticalStackLayout>
</Shell.FlyoutHeader>
<FlyoutItem Title="Suggestions" Icon="assistant_icon.png">
<ShellContent
ContentTemplate="{DataTemplate local:Home}"
Route="Home"/>
</FlyoutItem>
<FlyoutItem Title="Entrées" Icon="flatware_icon.png">
<ShellContent
ContentTemplate="{DataTemplate local:Home}"
Route="Home"/>
</FlyoutItem>
<FlyoutItem Title="Plats" Icon="room_service_icon.png">
<ShellContent
ContentTemplate="{DataTemplate local:Home}"
Route="Home"/>
</FlyoutItem>
<FlyoutItem Title="Desserts" Icon="coffee_icon.png">
<ShellContent
ContentTemplate="{DataTemplate local:Home}"
Route="Home"/>
</FlyoutItem>
<Shell.FlyoutFooter>
<VerticalStackLayout>
<Button Text="Déconnexion" ImageSource="logout_icon.png"
MaximumHeightRequest="20" Margin="15"
IsVisible="False"/>
</VerticalStackLayout>
</Shell.FlyoutFooter>
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:Home}"
Route="MainPage" />
</Shell> </Shell>

@ -2,14 +2,15 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="Vue.Home"> x:Class="Vue.Home"
Title="Mon app trop géniale">
<toolkit:DockLayout <!--<toolkit:DockLayout
HorizontalSpacing="20"> HorizontalSpacing="20">-->
<!-- Aux menu --> <!-- Aux menu -->
<StackLayout toolkit:DockLayout.DockPosition="Left" <!--<StackLayout toolkit:DockLayout.DockPosition="Left"
WidthRequest="250" WidthRequest="250"
BackgroundColor="{StaticResource Tertiary}"> BackgroundColor="{StaticResource Tertiary}">
@ -35,7 +36,7 @@
<Button Text="Plats" Style="{StaticResource button1}"/> <Button Text="Plats" Style="{StaticResource button1}"/>
<Button Text="Desserts" Style="{StaticResource button1}"/> <Button Text="Desserts" Style="{StaticResource button1}"/>
</StackLayout> </StackLayout>-->
<!-- Master recipes --> <!-- Master recipes -->
<ScrollView> <ScrollView>
@ -44,7 +45,7 @@
FontSize="32" FontAttributes="Bold" Padding="15"/> FontSize="32" FontAttributes="Bold" Padding="15"/>
<FlexLayout toolkit:DockLayout.DockPosition="None" <FlexLayout toolkit:DockLayout.DockPosition="None"
Margin="0, 15, 15, 0" Margin="0, 15"
Wrap="Wrap" Wrap="Wrap"
JustifyContent="SpaceEvenly" JustifyContent="SpaceEvenly"
AlignItems="Center" AlignItems="Center"
@ -68,7 +69,7 @@
</StackLayout> </StackLayout>
</ScrollView> </ScrollView>
</toolkit:DockLayout> <!--</toolkit:DockLayout>-->
</ContentPage> </ContentPage>

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M480 1016 360 896H180q-24 0-42-18.5T120 836V236q0-24 18-42t42-18h600q23 0 41.5 18t18.5 42v600q0 23-18.5 41.5T780 896H600l-120 120ZM180 836h204l96 96 96-96h204V236H180v600Zm0-600v600-600Zm357 359 128-56-128-56-56-128-57 128-127 56 127 56 57 128 56-128Z"/></svg>

After

Width:  |  Height:  |  Size: 355 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M442 814q-115 0-198.5-81.5T160 539V276q0-24 18-42t42-18h529q54.271 0 92.636 37Q880 290 880 344t-38.364 91Q803.271 472 749 472h-25v67q0 112-83.5 193.5T442 814ZM220 412h444V276H220v136Zm222 342q91 0 156.5-63.5T664 539v-67H220v67q0 88 65.5 151.5T442 754Zm282-342h25q29 0 50-19.5t21-48.5q0-29-21-48.5T749 276h-25v136ZM160 936v-60h634v60H160Zm282-464Z"/></svg>

After

Width:  |  Height:  |  Size: 450 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M200 936V525q-33 0-56.5-23.5T120 445V239q0-9 7-16t16-7q9 0 16.5 7t7.5 16v142h40V239q0-9 7-16t16-7q9 0 16 7t7 16v142h40V239q0-9 7.5-16t16.5-7q9 0 16 7t7 16v206q0 33-23.5 56.5T260 525v411h-60Zm280 0V523q-41-23-62-62t-21-90q0-60 30.5-107.5T511 216q53 0 83.5 47.5T625 371q0 51-22 90t-63 62v413h-60Zm214 0V216q58 5 102 45.5T840 362v244h-86v330h-60Z"/></svg>

After

Width:  |  Height:  |  Size: 447 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M220 876h150V626h220v250h150V486L480 291 220 486v390Zm-60 60V456l320-240 320 240v480H530V686H430v250H160Zm320-353Z"/></svg>

After

Width:  |  Height:  |  Size: 218 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M149.825 776Q137 776 128.5 767.325q-8.5-8.676-8.5-21.5 0-12.825 8.675-21.325 8.676-8.5 21.5-8.5 12.825 0 21.325 8.675 8.5 8.676 8.5 21.5 0 12.825-8.675 21.325-8.676 8.5-21.5 8.5Zm0-170Q137 606 128.5 597.325q-8.5-8.676-8.5-21.5 0-12.825 8.675-21.325 8.676-8.5 21.5-8.5 12.825 0 21.325 8.675 8.5 8.676 8.5 21.5 0 12.825-8.675 21.325-8.676 8.5-21.5 8.5Zm0-170Q137 436 128.5 427.325q-8.5-8.676-8.5-21.5 0-12.825 8.675-21.325 8.676-8.5 21.5-8.5 12.825 0 21.325 8.675 8.5 8.676 8.5 21.5 0 12.825-8.675 21.325-8.676 8.5-21.5 8.5ZM290 776v-60h550v60H290Zm0-170v-60h550v60H290Zm0-170v-60h550v60H290Z"/></svg>

After

Width:  |  Height:  |  Size: 694 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M489 936v-60h291V276H489v-60h291q24 0 42 18t18 42v600q0 24-18 42t-42 18H489Zm-78-185-43-43 102-102H120v-60h348L366 444l43-43 176 176-174 174Z"/></svg>

After

Width:  |  Height:  |  Size: 245 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M180 936q-24 0-42-18t-18-42V276q0-24 18-42t42-18h291v60H180v600h291v60H180Zm486-185-43-43 102-102H375v-60h348L621 444l43-43 176 176-174 174Z"/></svg>

After

Width:  |  Height:  |  Size: 244 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M80 856v-60h800v60H80Zm30-120v-17q0-155 88.5-250T420 346v-30q0-26 17-43t43-17q26 0 43 17t17 43v30q133 28 221.5 123T850 719v17H110Zm63-60h614q-14-128-102.5-200.5T479 403q-117 0-204.5 72.5T173 676Zm307 0Z"/></svg>

After

Width:  |  Height:  |  Size: 306 B

@ -5,7 +5,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"> xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Color x:Key="Primary">#512BD4</Color> <Color x:Key="Primary">#512BD4</Color>
<Color x:Key="Secondary">#DFD8F7</Color> <Color x:Key="Secondary">#D9D9D9</Color>
<Color x:Key="Tertiary">#2B0B98</Color> <Color x:Key="Tertiary">#2B0B98</Color>
<Color x:Key="White">White</Color> <Color x:Key="White">White</Color>
<Color x:Key="Black">Black</Color> <Color x:Key="Black">Black</Color>

Loading…
Cancel
Save