♻️ refactor custom flyout with content binding

MCTG/Views/ContainerBase.xaml

@@ -13,10 +13,15 @@
             MinimumHeightRequest="80"
             VerticalOptions="StartAndExpand"/>
 
-        <local:CustomFlyout
+        <local:ContainerFlyout
             Grid.RowSpan="2"
             MinimumWidthRequest="300"
-            HorizontalOptions="StartAndExpand"/>
+            HorizontalOptions="StartAndExpand">
+            <local:ContainerFlyout.MyFlyoutContent>
+                <ContentView
+                    Content="{Binding MyFlyoutContent, Source={x:Reference root}}"/>
+            </local:ContainerFlyout.MyFlyoutContent>
+        </local:ContainerFlyout>
 
         <ContentView
             VerticalOptions="StartAndExpand"

MCTG/Views/ContainerBase.xaml.cs

@@ -7,7 +7,7 @@ public partial class ContainerBase : ContentView
 		InitializeComponent();
 	}
 
-	public static BindableProperty MyContentProperty =
+	public static readonly BindableProperty MyContentProperty =
 		BindableProperty.Create("MyContent", typeof(View), typeof(ContainerBase), new Grid());
 
 	public View MyContent
@@ -15,4 +15,13 @@ public partial class ContainerBase : ContentView
 		get => (View)GetValue(MyContentProperty);
 		set => SetValue(MyContentProperty, value);
 	}
+
+    public static readonly BindableProperty MyFlyoutContentProperty =
+        BindableProperty.Create("MyFlyoutContent", typeof(View), typeof(ContainerBase), new Grid());
+
+    public View MyFlyoutContent
+    {
+        get => (View)GetValue(MyFlyoutContentProperty);
+        set => SetValue(MyFlyoutContentProperty, value);
+    }
 }

MCTG/Views/ContainerFlyout.xaml

@@ -1,7 +1,9 @@
 <?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"
+             xmlns:local="clr-namespace:Views"
+             x:Class="Views.ContainerFlyout"
+             x:Name="fl"
              BackgroundColor="{StaticResource Secondary}">
 
     <Grid RowDefinitions="250, *, 100">
@@ -14,30 +16,21 @@
                          BorderWidth="5" BorderColor="Black"
                          IsEnabled="False"/>
             <Button Text="Connection" ImageSource="login_icon.png"
-                    MaximumHeightRequest="20" Margin="15, 15, 15, 0"
+                    Style="{StaticResource button2}"/>
-                    CornerRadius="5"/>
         </VerticalStackLayout>
 
-        <VerticalStackLayout Grid.Row="1">
+        <!-- Content -->
-            <!-- Research -->
+        <ContentView
-            <Button Text="Recherche" ImageSource="search_icon.png"
+            VerticalOptions="Fill"
-                    MaximumHeightRequest="20"
+            Grid.Row="1"
-                    Style="{StaticResource button1}"/>
+            Content="{Binding MyFlyoutContent, Source={x:Reference fl}}"/>
-            <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"
+                    Style="{StaticResource button2}"
-                    IsVisible="True"
+                    IsVisible="False"/>
-                    CornerRadius="5"/>
         </VerticalStackLayout>
     </Grid>
 

MCTG/Views/ContainerFlyout.xaml.cs

@@ -0,0 +1,18 @@
+namespace Views;
+
+public partial class ContainerFlyout : ContentView
+{
+	public ContainerFlyout()
+	{
+		InitializeComponent();
+	}
+
+    public static readonly BindableProperty MyFlyoutContentProperty =
+        BindableProperty.Create("MyFlyoutContent", typeof(View), typeof(ContainerFlyout), new Grid());
+
+    public View MyFlyoutContent
+    {
+        get => (View)GetValue(MyFlyoutContentProperty);
+        set => SetValue(MyFlyoutContentProperty, value);
+    }
+}

MCTG/Views/CustomFlyout.xaml.cs

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

MCTG/Views/CustomHeader.xaml

@@ -7,7 +7,7 @@
     <Grid ColumnDefinitions="*">
         
         <Label Text="Ma cuisine trop géniale"
-               FontAttributes="Bold" FontSize="30"
+               FontAttributes="Bold" FontSize="30" FontFamily="Forte"
                TextColor="Black" Margin="20, 10, 0, 0" 
                VerticalOptions="Start" HorizontalOptions="Start"/>
 

MCTG/Views/Home.xaml

@@ -6,14 +6,34 @@
              x:Class="Views.Home">
 
     <local:ContainerBase>
-        <local:ContainerBase.MyContent>
 
+        <!-- Flyout -->
+        <local:ContainerBase.MyFlyoutContent>
+            <VerticalStackLayout Grid.Row="1">
+                <!-- Research -->
+                <Button Text="Recherche" ImageSource="search_icon.png"
+                    MaximumHeightRequest="20"
+                    Style="{StaticResource button1}"/>
+                <Entry Text="Mots-clés" FontAttributes="Italic"
+                   BackgroundColor="White" Margin="15, 10, 15, 40"/>
+
+                <!-- Direct research -->
+                <Button Text="Entrées" ImageSource="flatware_icon.png"
+                    Style="{StaticResource button1}"/>
+                <Button Text="Plats" ImageSource="room_service_icon.png"
+                    Style="{StaticResource button1}"/>
+                <Button Text="Desserts" ImageSource="coffee_icon.png"
+                    Style="{StaticResource button1}"/>
+            </VerticalStackLayout>
+        </local:ContainerBase.MyFlyoutContent>
+
+        <!-- Master -->
+        <local:ContainerBase.MyContent>
             <ScrollView>
                 <StackLayout>
                     <Label Text="Suggestions" TextColor="Black"
                            FontSize="24" Padding="15"/>
 
-                    <!-- Master recipes -->
                     <FlexLayout
                             Margin="0, 15"
                             Wrap="Wrap"
@@ -38,8 +58,8 @@
                     </FlexLayout>
                 </StackLayout>
             </ScrollView>
-
         </local:ContainerBase.MyContent>
+        
     </local:ContainerBase>
 
 </ContentPage>

MCTG/Views/Resources/Styles/Colors.xaml

@@ -5,9 +5,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
     <Color x:Key="Primary">#7d9e9f</Color>
-    <Color x:Key="Secondary">#e7caaf</Color>
+    <Color x:Key="Secondary">#ffddbd</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>

MCTG/Views/Resources/Styles/Styles.xaml

@@ -15,9 +15,18 @@
     </Style>
 
     <Style x:Key="button1" TargetType="Button">
-        <Setter Property="TextColor" Value="{StaticResource White}"/>
+        <Setter Property="TextColor" Value="{StaticResource Black}"/>
         <Setter Property="BackgroundColor" Value="{StaticResource Tertiary}"/>
         <Setter Property="CornerRadius" Value="5"/>
+        <Setter Property="MaximumHeightRequest" Value="20"/>
+        <Setter Property="Margin" Value="15, 5"/>
+    </Style>
+
+    <Style x:Key="button2" TargetType="Button">
+        <Setter Property="TextColor" Value="{StaticResource White}"/>
+        <Setter Property="BackgroundColor" Value="{StaticResource Primary}"/>
+        <Setter Property="CornerRadius" Value="5"/>
+        <Setter Property="MaximumHeightRequest" Value="20"/>
         <Setter Property="Margin" Value="15, 5"/>
     </Style>
 

MCTG/Views/Views.csproj

@@ -48,6 +48,14 @@
 		<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <Compile Remove="CustomFlyout.xaml.cs" />
+	</ItemGroup>
+
+	<ItemGroup>
+	  <MauiXaml Remove="CustomFlyout.xaml" />
+	</ItemGroup>
+
 	<ItemGroup>
 		<PackageReference Include="CommunityToolkit.Maui" Version="5.0.0" />
 		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
@@ -66,7 +74,7 @@
 	  <MauiXaml Update="ContainerBase.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
-	  <MauiXaml Update="CustomFlyout.xaml">
+	  <MauiXaml Update="ContainerFlyout.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
 	  <MauiXaml Update="CustomHeader.xaml">