From 66e32cccbff3729a69176380c197a628b7691d4f Mon Sep 17 00:00:00 2001
From: Matheo HERSAN <mahersan>
Date: Wed, 3 May 2023 11:50:39 +0200
Subject: [PATCH] Addded dictionnary for ImageButton

---
 MangaMap/Resources/Styles/Styles.xaml |   5 ++
 MangaMap/Views/homePage.xaml          | 122 ++++++++++++--------------
 MangaMap/Views/listPage.xaml          |  24 ++---
 3 files changed, 74 insertions(+), 77 deletions(-)

diff --git a/MangaMap/Resources/Styles/Styles.xaml b/MangaMap/Resources/Styles/Styles.xaml
index 050b36c..8379488 100644
--- a/MangaMap/Resources/Styles/Styles.xaml
+++ b/MangaMap/Resources/Styles/Styles.xaml
@@ -402,4 +402,9 @@
         <Setter Property="SelectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
     </Style>
 
+    <Style TargetType="ImageButton" x:Key="ImageAnime">
+        <Setter Property="HeightRequest" Value="150" />
+        <Setter Property="WidthRequest" Value="150" />
+    </Style>
+
 </ResourceDictionary>
diff --git a/MangaMap/Views/homePage.xaml b/MangaMap/Views/homePage.xaml
index cbdfa04..3a2e598 100644
--- a/MangaMap/Views/homePage.xaml
+++ b/MangaMap/Views/homePage.xaml
@@ -26,104 +26,96 @@
                 Spacing="100"
                 HorizontalOptions="Center">
 
-                <Rectangle
-                        WidthRequest="150"
-                        HeightRequest="150"
-                        Fill="Red"
-                        />
 
-                <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Orange"/>
+                <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                    BackgroundColor="Red"
+                    />
+
+                <ImageButton
+                Style="{StaticResource ImageAnime}"
+                BackgroundColor="Orange"
+                    />
 
-                <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Blue"/>
+                <ImageButton
+                Style="{StaticResource ImageAnime}"
+                BackgroundColor="Blue"/>
 
-                <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Purple"/>
+                <ImageButton
+                Style="{StaticResource ImageAnime}"
+                BackgroundColor="Purple"/>
+                
             </HorizontalStackLayout>
             
             <HorizontalStackLayout
                 Spacing="100"
                 HorizontalOptions="Center">
 
-                <Rectangle
-                        WidthRequest="150"
-                        HeightRequest="150"
-                        Fill="Purple"
+                    <ImageButton
+                        Style="{StaticResource ImageAnime}"
+                        BackgroundColor="Purple"
                         />
 
-                <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Green"/>
+                    <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                    BackgroundColor="Green"/>
 
-                <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Gray"/>
+                    <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                    BackgroundColor="Gray"/>
 
-                <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Yellow"/>
+                    <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                    BackgroundColor="Yellow"/>
+                
             </HorizontalStackLayout>
 
                 <HorizontalStackLayout
                 Spacing="100"
                 HorizontalOptions="Center">
 
-                    <Rectangle
-                        WidthRequest="150"
-                        HeightRequest="150"
-                        Fill="Red"
+                    <ImageButton
+                        Style="{StaticResource ImageAnime}"
+                        BackgroundColor="Red"
                         />
 
-                    <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Orange"/>
+                    <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                    BackgroundColor="Orange"/>
 
-                    <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Blue"/>
+                    <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                    BackgroundColor="Blue"/>
 
-                    <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Purple"/>
+                    <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                    BackgroundColor="Purple"/>
+                    
+                    
                 </HorizontalStackLayout>
 
                 <HorizontalStackLayout
                 Spacing="100"
                 HorizontalOptions="Center">
 
-                    <Rectangle
-                        WidthRequest="150"
-                        HeightRequest="150"
-                        Fill="Purple"
+                    <ImageButton
+                        Style="{StaticResource ImageAnime}"
+                        BackgroundColor="Purple"
+                        />
+
+                    <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                        BackgroundColor="Red"
                         />
 
-                    <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Green"/>
+                    <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                    BackgroundColor="Gray"/>
 
-                    <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Gray"/>
+                    <ImageButton
+                    Style="{StaticResource ImageAnime}"
+                    BackgroundColor="Yellow"/>
 
-                    <Rectangle
-                    WidthRequest="150"
-                    HeightRequest="150"
-                    Fill="Yellow"/>
                 </HorizontalStackLayout>
             
             </VerticalStackLayout>
diff --git a/MangaMap/Views/listPage.xaml b/MangaMap/Views/listPage.xaml
index 14ba381..97e6ac1 100644
--- a/MangaMap/Views/listPage.xaml
+++ b/MangaMap/Views/listPage.xaml
@@ -43,14 +43,14 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
                                 </Grid>
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
-                                    <Rectangle Grid.Column="0" Fill="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
@@ -58,7 +58,7 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
@@ -66,7 +66,7 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
@@ -74,7 +74,7 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
@@ -82,7 +82,7 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
@@ -119,14 +119,14 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
                                 </Grid>
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
-                                    <Rectangle Grid.Column="0" Fill="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
@@ -134,7 +134,7 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
@@ -142,7 +142,7 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
@@ -150,7 +150,7 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
@@ -158,7 +158,7 @@
 
                                 <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
 
-                                    <Rectangle Grid.Column="0" Fill="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
+                                    <ImageButton Grid.Column="0" BackgroundColor="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                     <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                     <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                     <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>