ADD : Avancement vues (éléments cliquables, couleurs icons...)

LivreLand/LivreLand.csproj

@@ -49,6 +49,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
+		<PackageReference Include="CommunityToolkit.Maui" Version="5.3.0" />
 		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
 	</ItemGroup>
 

LivreLand/MauiProgram.cs

@@ -1,4 +1,5 @@
-using Microsoft.Extensions.Logging;
+using CommunityToolkit.Maui;
+using Microsoft.Extensions.Logging;
 
 namespace LivreLand;
 
@@ -9,6 +10,7 @@ public static class MauiProgram
 		var builder = MauiApp.CreateBuilder();
 		builder
 			.UseMauiApp<App>()
+			.UseMauiCommunityToolkit()
 			.ConfigureFonts(fonts =>
 			{
 				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

LivreLand/Resources/Styles/Colors.xaml

@@ -10,6 +10,8 @@
     <Color x:Key="HeaderGray">#f2f0f6</Color>
     <Color x:Key="HeaderSeparatorGray">#c9c9cb</Color>
 
+    <Color x:Key="PinkOrange">#fd0342</Color>
+    
     <Color x:Key="Primary">#512BD4</Color>
     <Color x:Key="Secondary">#DFD8F7</Color>
     <Color x:Key="Tertiary">#2B0B98</Color>

LivreLand/View/ContentViews/DetailsLivreButtonView.xaml

@@ -1,6 +1,7 @@
 <?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"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"             
              x:Class="LivreLand.View.ContentViews.DetailsLivreButtonView"
              x:Name="this">
     
@@ -15,7 +16,11 @@
         <Image Source="{Binding ButtonIcon}"
                MaximumHeightRequest="20"
                MaximumWidthRequest="20"
-               Grid.Column="0"/>
+               Grid.Column="0">
+            <Image.Behaviors>
+                <toolkit:IconTintColorBehavior TintColor="Red"/>
+            </Image.Behaviors>
+        </Image>
         <Label Text="{Binding ButtonTitle}"
                Style="{StaticResource DetailsButtonBody}"
                TextColor="Red"

LivreLand/View/ContentViews/HomeButtonView.xaml

@@ -1,6 +1,7 @@
 <?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"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              x:Class="LivreLand.View.ContentViews.HomeButtonView"
              x:Name="this">
 
@@ -19,7 +20,11 @@
         <Image Source="{Binding ButtonIcon}"
                MaximumHeightRequest="20"
                MaximumWidthRequest="20"
-               Grid.Column="0"/>
+               Grid.Column="0">
+            <Image.Behaviors>
+                <toolkit:IconTintColorBehavior TintColor="{Binding ButtonIconColor}"/>
+            </Image.Behaviors>
+        </Image>
         <Label Text="{Binding ButtonTitle}"
                VerticalOptions="Center"
                Style="{StaticResource HomeButtonText}"

LivreLand/View/ContentViews/HomeButtonView.xaml.cs

@@ -1,3 +1,5 @@
+using Microsoft.Maui.Graphics;
+
 namespace LivreLand.View.ContentViews;
 
 public partial class HomeButtonView : ContentView
@@ -23,6 +25,13 @@ public partial class HomeButtonView : ContentView
         set => SetValue(HomeButtonView.ButtonNumberProperty, value);
     }
 
+    public static readonly BindableProperty ButtonIconColorProperty = BindableProperty.Create(nameof(ButtonIconColor), typeof(Color), typeof(HomeButtonView));
+    public Color ButtonIconColor
+    {
+        get => (Color)GetValue(HomeButtonView.ButtonIconColorProperty);
+        set => SetValue(HomeButtonView.ButtonIconColorProperty, value);
+    }
+
     public static readonly BindableProperty ButtonCommandProperty = BindableProperty.Create(nameof(ButtonCommand), typeof(Command), typeof(HomeButtonView));
     public Command ButtonCommand
     {

LivreLand/View/ContentViews/PopupHomePlusButtonView.xaml

@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+<toolkit:Popup 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"
-             x:Class="LivreLand.View.ContentViews.PopupHomePlusButtonView">
+               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+               x:Class="LivreLand.View.ContentViews.PopupHomePlusButtonView">
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"/>
@@ -51,7 +52,11 @@
             <Label Text="Rechercher en ligne"
                    Grid.Column="0"/>
             <Image Source="magnifying_glass.png"
-                   Grid.Column="2"/>
+                   Grid.Column="2">
+                <Image.Behaviors>
+                    <toolkit:IconTintColorBehavior TintColor="Black"/>
+                </Image.Behaviors>
+            </Image>
         </Grid>
 
         <Grid Grid.Row="5">
@@ -65,4 +70,4 @@
                    Grid.Column="0"/>
         </Grid>
     </Grid>
-</ContentView>
+</toolkit:Popup>

LivreLand/View/ContentViews/PopupHomePlusButtonView.xaml.cs

@@ -1,6 +1,8 @@
+using CommunityToolkit.Maui.Views;
+
 namespace LivreLand.View.ContentViews;
 
-public partial class PopupHomePlusButtonView : ContentView
+public partial class PopupHomePlusButtonView : Popup
 {
 	public PopupHomePlusButtonView()
 	{

LivreLand/View/ContentViews/SeparatorBigCutStartView.xaml

@@ -6,9 +6,9 @@
         <BoxView Margin="40,0,0,0"
                  HeightRequest="1"  
                  HorizontalOptions="Fill">
-            <BoxView.BackgroundColor>
+            <BoxView.Color>
-                <AppThemeBinding Light="{DynamicResource Gray}" Dark="{StaticResource White}" />
+                <AppThemeBinding Light="{DynamicResource HeaderSeparatorGray}" Dark="{StaticResource White}" />
-            </BoxView.BackgroundColor>
+            </BoxView.Color>
         </BoxView>
     </Grid>
 </ContentView>

LivreLand/View/ContentViews/SeparatorCutStartView.xaml

@@ -6,9 +6,9 @@
         <BoxView Margin="10,0,0,0"
                  HeightRequest="1"  
                  HorizontalOptions="Fill">
-            <BoxView.BackgroundColor>
+            <BoxView.Color>
-                <AppThemeBinding Light="{DynamicResource Gray}" Dark="{StaticResource White}" />
+                <AppThemeBinding Light="{DynamicResource HeaderSeparatorGray}" Dark="{StaticResource White}" />
-            </BoxView.BackgroundColor>
+            </BoxView.Color>
         </BoxView>
     </Grid>
 </ContentView>

LivreLand/View/ContentViews/SeparatorEntireView.xaml

@@ -3,12 +3,11 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="LivreLand.View.ContentViews.SeparatorEntireView">
     <Grid>
-        <BoxView Color="{DynamicResource HeaderSeparatorGray}"  
+        <BoxView HeightRequest="1"  
-                 HeightRequest="1"  
                  HorizontalOptions="Fill">
-            <BoxView.BackgroundColor>
+            <BoxView.Color>
-                <AppThemeBinding Light="{DynamicResource Gray}" Dark="{StaticResource White}" />
+                <AppThemeBinding Light="{DynamicResource HeaderSeparatorGray}" Dark="{StaticResource White}" />
-            </BoxView.BackgroundColor>
+            </BoxView.Color>
         </BoxView>
     </Grid>
 </ContentView>

LivreLand/View/FiltrageAuteurView.xaml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              xmlns:view="clr-namespace:LivreLand.View"
              xmlns:contentView="clr-namespace:LivreLand.View.ContentViews"
              x:Class="LivreLand.View.FiltrageAuteurView"
@@ -35,7 +36,8 @@
                 <!--Alain Damasio-->
                 <contentView:HomeButtonView ButtonTitle="Alain Damasio"
                                             ButtonIcon="book_fill.png"
-                                            ButtonNumber="2"/>
+                                            ButtonNumber="2"
+                                            ButtonIconColor="{DynamicResource PinkOrange}"/>
 
                 <contentView:SeparatorBigCutStartView/>
             </VerticalStackLayout>

LivreLand/View/FiltrageDateView.xaml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              xmlns:view="clr-namespace:LivreLand.View"
              xmlns:contentView="clr-namespace:LivreLand.View.ContentViews"
              x:Class="LivreLand.View.FiltrageDateView"
@@ -34,7 +35,8 @@
                 <!--2022-->
                 <contentView:HomeButtonView ButtonTitle="2022"
                                             ButtonIcon="book_fill.png"
-                                            ButtonNumber="1"/>
+                                            ButtonNumber="1"
+                                            ButtonIconColor="{DynamicResource PinkOrange}"/>
 
                 <contentView:SeparatorBigCutStartView/>
             </VerticalStackLayout>

LivreLand/View/FiltrageNoteView.xaml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              xmlns:view="clr-namespace:LivreLand.View"
              xmlns:contentView="clr-namespace:LivreLand.View.ContentViews"
              x:Class="LivreLand.View.FiltrageNoteView"
@@ -35,7 +36,8 @@
                 <!--1 étoile-->
                 <contentView:HomeButtonView ButtonTitle="1 étoile"
                                             ButtonIcon="star_fill.png"
-                                            ButtonNumber="2"/>
+                                            ButtonNumber="2"
+                                            ButtonIconColor="{DynamicResource PinkOrange}"/>
 
                 <contentView:SeparatorBigCutStartView/>
             </VerticalStackLayout>

LivreLand/View/HeaderPage.xaml

@@ -1,6 +1,7 @@
 <?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"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              x:Class="LivreLand.View.HeaderPage"
              x:Name="this"
              BindingContext="{x:Reference this}"
@@ -12,7 +13,7 @@
                 <ColumnDefinition Width="auto"/>
                 <ColumnDefinition Width="*"/>
                 <ColumnDefinition Width="auto"/>
-                <ColumnDefinition Width="2"/>
+                <ColumnDefinition Width="10"/>
                 <ColumnDefinition Width="auto"/>
             </Grid.ColumnDefinitions>
 
@@ -31,27 +32,36 @@
                         Grid.Column="0"/>
                 <Label Text="{Binding HeaderBackButtonText}"
                        VerticalOptions="Center"
-                       TextColor="Red"
+                       TextColor="{DynamicResource PinkOrange}"
                        Style="{StaticResource HeaderTitle}"
                        Grid.Column="2"/>
                 <Grid.GestureRecognizers>
                     <TapGestureRecognizer Tapped="OnBackButtonTapped"/>
                 </Grid.GestureRecognizers>
             </Grid>
-            <Button VerticalOptions="Center"
+            <ImageButton VerticalOptions="Center"
-                    ImageSource="plus.png"
+                         Source="plus.png"
-                    BackgroundColor="Transparent"
+                         BackgroundColor="Transparent"
-                    MaximumHeightRequest="20"
+                         MaximumHeightRequest="20"
-                    MaximumWidthRequest="20"
+                         MaximumWidthRequest="20"
-                    IsVisible="{Binding HeaderPlusButtonVisible}"
+                         IsVisible="{Binding HeaderPlusButtonVisible}"
-                    Grid.Column="2"/>
+                         Clicked="OnPlusClicked"
-            <Button VerticalOptions="Center"
+                         Grid.Column="2">
-                    ImageSource="plus.png"
+                <ImageButton.Behaviors>
-                    BackgroundColor="Transparent"
+                    <toolkit:IconTintColorBehavior TintColor="{DynamicResource PinkOrange}"/>
-                    MaximumHeightRequest="20"
+                </ImageButton.Behaviors>
-                    MaximumWidthRequest="20"
+            </ImageButton>
-                    IsVisible="{Binding HeaderSwitchButtonVisible}"
+            <ImageButton VerticalOptions="Center"
-                    Grid.Column="4"/>
+                         Source="plus.png"
+                         BackgroundColor="Transparent"
+                         MaximumHeightRequest="20"
+                         MaximumWidthRequest="20"
+                         IsVisible="{Binding HeaderSwitchButtonVisible}"
+                         Grid.Column="4">
+                <ImageButton.Behaviors>
+                    <toolkit:IconTintColorBehavior TintColor="{DynamicResource PinkOrange}"/>
+                </ImageButton.Behaviors>
+            </ImageButton>
         </Grid>
 
         <Grid>

LivreLand/View/HeaderPage.xaml.cs

@@ -1,5 +1,7 @@
+using LivreLand.View.ContentViews;
 using Microsoft.Maui.ApplicationModel;
 using Microsoft.Maui.Graphics;
+using CommunityToolkit.Maui.Views;
 
 namespace LivreLand.View;
 
@@ -49,4 +51,10 @@ public partial class HeaderPage : ContentView
     {
         App.Current.MainPage.Navigation.PopAsync();
     }
+
+    public void OnPlusClicked(object sender, EventArgs e)
+    {
+        var plusPopup = new PopupHomePlusButtonView();
+        App.Current.MainPage.ShowPopup(plusPopup);
+    }
 }