add custom flyout + change some colors

pull/19/head
Alexandre Agostinho 2 years ago
parent 3c0b4ab9bd
commit 6c24aaddbd

@ -8,57 +8,9 @@
Shell.FlyoutBehavior="Disabled"
Shell.NavBarIsVisible="False">
<Shell.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="20, *" Padding="10">
<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
ContentTemplate="{DataTemplate local:Home}"
Route="Home"/>
</Shell>

@ -2,17 +2,22 @@
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Views"
x:Class="Views.ContainerWithHeader"
x:Class="Views.ContainerBase"
x:Name="root">
<Grid RowDefinitions="80, *"
ColumnDefinitions="200, *">
ColumnDefinitions="300, *">
<local:CustomHeader
Grid.Column="1"
MinimumHeightRequest="80"
VerticalOptions="StartAndExpand"/>
<local:CustomFlyout
Grid.RowSpan="2"
MinimumWidthRequest="300"
HorizontalOptions="StartAndExpand"/>
<ContentView
VerticalOptions="StartAndExpand"
Grid.Row="1" Grid.Column="1"

@ -1,14 +1,14 @@
namespace Views;
public partial class ContainerWithHeader : ContentView
public partial class ContainerBase : ContentView
{
public ContainerWithHeader()
public ContainerBase()
{
InitializeComponent();
}
public static BindableProperty MyContentProperty =
BindableProperty.Create("MyContent", typeof(View), typeof(ContainerWithHeader), new Grid());
BindableProperty.Create("MyContent", typeof(View), typeof(ContainerBase), new Grid());
public View MyContent
{

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Views.CustomFlyout"
BackgroundColor="{StaticResource Secondary}">
<Grid RowDefinitions="250, *, 100">
<VerticalStackLayout Grid.Row="0">
<!-- Header -->
<ImageButton Source="person_default.png"
BackgroundColor="{StaticResource Secondary}"
WidthRequest="100" HeightRequest="100"
CornerRadius="50" Margin="0, 30, 0, 10"
BorderWidth="5" BorderColor="Black"
IsEnabled="False"/>
<Button Text="Connection" ImageSource="login_icon.png"
MaximumHeightRequest="20" Margin="15, 15, 15, 0"
CornerRadius="5"/>
</VerticalStackLayout>
<VerticalStackLayout Grid.Row="1">
<!-- Research -->
<Button Text="Recherche" ImageSource="search_icon.png"
MaximumHeightRequest="20"
Style="{StaticResource button1}"/>
<Entry Text="Mots-clés" FontAttributes="Bold"
BackgroundColor="White" Margin="15, 10, 15, 40"/>
<!-- Direct research -->
<Button Text="Entrées" Style="{StaticResource button1}"/>
<Button Text="Plats" Style="{StaticResource button1}"/>
<Button Text="Desserts" Style="{StaticResource button1}"/>
</VerticalStackLayout>
<VerticalStackLayout Grid.Row="2">
<!-- Footer -->
<Button Text="Déconnection" ImageSource="logout_icon.png"
MaximumHeightRequest="20" Margin="15, 15, 15, 0"
IsVisible="True"
CornerRadius="5"/>
</VerticalStackLayout>
</Grid>
</ContentView>

@ -0,0 +1,9 @@
namespace Views;
public partial class CustomFlyout : ContentView
{
public CustomFlyout()
{
InitializeComponent();
}
}

@ -6,9 +6,10 @@
<Grid ColumnDefinitions="*">
<Label Text="Mon app trop géniale"
FontAttributes="Bold" FontSize="24" TextColor="White"
Margin="20, 0, 0, 0" VerticalOptions="Center" HorizontalOptions="Start"/>
<Label Text="Ma cuisine trop géniale"
FontAttributes="Bold" FontSize="30"
TextColor="Black" Margin="20, 10, 0, 0"
VerticalOptions="Start" HorizontalOptions="Start"/>
</Grid>

@ -5,13 +5,13 @@
xmlns:local="clr-namespace:Views"
x:Class="Views.Home">
<local:ContainerWithHeader>
<local:ContainerWithHeader.MyContent>
<local:ContainerBase>
<local:ContainerBase.MyContent>
<ScrollView>
<StackLayout>
<Label Text="Suggestions" TextColor="{StaticResource Secondary}"
FontSize="32" FontAttributes="Bold" Padding="15"/>
<Label Text="Suggestions" TextColor="Black"
FontSize="24" Padding="15"/>
<!-- Master recipes -->
<FlexLayout
@ -39,7 +39,7 @@
</StackLayout>
</ScrollView>
</local:ContainerWithHeader.MyContent>
</local:ContainerWithHeader>
</local:ContainerBase.MyContent>
</local:ContainerBase>
</ContentPage>

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M796 935 533 672q-30 26-69.959 40.5T378 727q-108.162 0-183.081-75Q120 577 120 471t75-181q75-75 181.5-75t181 75Q632 365 632 471.15 632 514 618 554q-14 40-42 75l264 262-44 44ZM377 667q81.25 0 138.125-57.5T572 471q0-81-56.875-138.5T377 275q-82.083 0-139.542 57.5Q180 390 180 471t57.458 138.5Q294.917 667 377 667Z"/></svg>

After

Width:  |  Height:  |  Size: 413 B

@ -4,9 +4,10 @@
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Color x:Key="Primary">#512BD4</Color>
<Color x:Key="Secondary">#D9D9D9</Color>
<Color x:Key="Tertiary">#2B0B98</Color>
<Color x:Key="Primary">#7d9e9f</Color>
<Color x:Key="Secondary">#e7caaf</Color>
<Color x:Key="Tertiary">#d9b08c</Color>
<Color x:Key="Secondary_var1">#d9b08c</Color>
<Color x:Key="White">White</Color>
<Color x:Key="Black">Black</Color>
<Color x:Key="Gray100">#E1E1E1</Color>

@ -7,7 +7,7 @@
<!-- Personal styles -->
<Style x:Key="boxView1" TargetType="BoxView">
<Setter Property="Color" Value="{StaticResource Secondary}"/>
<Setter Property="Color" Value="LightGray"/>
<Setter Property="WidthRequest" Value="300"/>
<Setter Property="HeightRequest" Value="200"/>
<Setter Property="CornerRadius" Value="10"/>
@ -15,10 +15,10 @@
</Style>
<Style x:Key="button1" TargetType="Button">
<Setter Property="TextColor" Value="{StaticResource Black}"/>
<Setter Property="BackgroundColor" Value="{StaticResource Secondary}"/>
<Setter Property="TextColor" Value="{StaticResource White}"/>
<Setter Property="BackgroundColor" Value="{StaticResource Tertiary}"/>
<Setter Property="CornerRadius" Value="5"/>
<Setter Property="Margin" Value="10, 15"/>
<Setter Property="Margin" Value="15, 5"/>
</Style>
<!-- Built-in styles -->

@ -54,13 +54,19 @@
</ItemGroup>
<ItemGroup>
<Compile Update="ContainerBase.xaml.cs">
<DependentUpon>ContainerBase.xaml</DependentUpon>
</Compile>
<Compile Update="CustomHeader.xaml.cs">
<DependentUpon>CustomHeader.xaml</DependentUpon>
</Compile>
</ItemGroup>
<ItemGroup>
<MauiXaml Update="ContainerWithHeader.xaml">
<MauiXaml Update="ContainerBase.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>
<MauiXaml Update="CustomFlyout.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>
<MauiXaml Update="CustomHeader.xaml">

Loading…
Cancel
Save