HomePage Corrigé (reste à changer les boutons en blanc, la searchBar et finir le FlexLayout pour les recommended for you, aussi remplacer les rectangle par les component recipes

pull/29/head
Leo TUAILLON 2 years ago
parent 0e944c4c89
commit 67eb8c9628

Before

Width:  |  Height:  |  Size: 896 B

After

Width:  |  Height:  |  Size: 896 B

Before

Width:  |  Height:  |  Size: 172 B

After

Width:  |  Height:  |  Size: 172 B

Before

Width:  |  Height:  |  Size: 232 B

After

Width:  |  Height:  |  Size: 232 B

@ -4,16 +4,6 @@
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Border
x:Key="UserInput"
Grid.Row="3"
StrokeShape="RoundRectangle 15"
Stroke="{StaticResource BackgroundSecondary}">
<Entry
TextColor="{StaticResource TextColorPrimary}"
PlaceholderColor="{StaticResource TextColorSecondary}"
BackgroundColor="{StaticResource BackgroundSecondary}"/>
</Border>
<Style TargetType="ActivityIndicator">
<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />

@ -5,179 +5,135 @@
Title="HomePage">
<ScrollView>
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Frame BackgroundColor="Pink"
CornerRadius="5"
HeightRequest="40"
WidthRequest="40"
Grid.Column="0"
Margin="10">
<Image Source="../Ressources/AppIcon/sort.svg"
HeightRequest="20"
WidthRequest="20"
Aspect="AspectFit"
VerticalOptions="Center"
HorizontalOptions="Center"/>
</Frame>
<Image Source="../Ressources/AppIcon/account.svg"
HeightRequest="40"
WidthRequest="40"
Grid.Column="2"
Margin="10"/>
<SearchBar Placeholder="Search here ..."
PlaceholderColor="Gray"
HeightRequest="40"
BackgroundColor="White"
TextColor="Black"
FontSize="14"
Grid.Column="1"
Margin="10,0,10,0"
VerticalOptions="Center"/>
<Frame BackgroundColor="Pink"
CornerRadius="5"
HeightRequest="40"
WidthRequest="40"
Grid.Column="1"
Margin="0,0,10,0"
HorizontalOptions="End">
<Image Source="../Ressources/AppIcon/syncalt.svg"
HeightRequest="20"
WidthRequest="20"
Aspect="AspectFit"
VerticalOptions="Center"
HorizontalOptions="Center"/>
</Frame>
</Grid>
<StackLayout Orientation="Horizontal"
Margin="10,20,10,10">
<Label Text="Popular recipe"
FontSize="18"
FontAttributes="Bold"
HorizontalOptions="StartAndExpand"/>
<Button Text="Show All"
BackgroundColor="Transparent"
TextColor="Pink"
FontSize="14"
FontAttributes="Bold"
HorizontalOptions="End"/>
</StackLayout>
<ScrollView Margin="10,0,10,10">
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Mettez ici le même composant recette que vous avez déjà créé -->
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"
Margin="0,0,10,10"
Grid.Row="0"
Grid.Column="0"/>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"
Margin="0,0,0,10"
Grid.Row="0"
Grid.Column="1"/>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"
Margin="0,0,10,10"
Grid.Row="1"
Grid.Column="0"/>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"
Margin="0,0,0,10"
Grid.Row="1"
Grid.Column="1"/>
<Grid RowDefinitions="Auto,Auto,Auto,*">
<FlexLayout
Grid.Row="0"
JustifyContent="SpaceBetween"
AlignItems="Center"
AlignContent="Center"
Margin="20"
>
<ImageButton Source="sort.svg"
Padding="5"
BackgroundColor="Pink"
WidthRequest="65"
HeightRequest="65"
CornerRadius="15"
Margin="0,5,10,0">
</ImageButton>
<ImageButton Source="account.svg"
Padding="5"
BackgroundColor="Transparent"
WidthRequest="75"
HeightRequest="75"
CornerRadius="15"
Margin="0,5,0,0">
</ImageButton>
</FlexLayout>
<Grid
ColumnDefinitions="*,Auto"
Grid.Row="1"
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"
Margin="0,0,10,10"
Grid.Row="2"
Grid.Column="0"/>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"
Margin="0,0,0,10"
Grid.Row="2"
Grid.Column="1"/>
</Grid>
</StackLayout>
</ScrollView>
<StackLayout Orientation="Horizontal"
Margin="10,20,10,10">
<Label Text="Recommended for you"
FontSize="18"
FontAttributes="Bold"
HorizontalOptions="StartAndExpand"/>
<Button Text="Show All"
BackgroundColor="Transparent"
TextColor="Pink"
FontSize="14"
FontAttributes="Bold"
HorizontalOptions="End"/>
</StackLayout>
<Label Text="Recommended for you"
Margin="10,20,0,0"
FontSize="Title"
FontAttributes="Bold"/>
<Button Text="Show all"
Margin="0,20,10,0"
FontAttributes="Bold"
FontSize="Medium"
TextColor="Gray"
BackgroundColor="White"
HorizontalOptions="End"/>
<ScrollView Margin="10,0,10,10">
<StackLayout>
<Grid ColumnSpacing="10"
RowSpacing="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,0,0,10"
RowDefinitions="2"
ColumnDefinitions="2">
<!-- Mettez ici le même composant recette que vous avez déjà créé -->
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"/>
Margin="20"
>
<Entry
Margin="5,10,5,5"
Grid.Column="0"
Placeholder="Search here..."
>
</Entry>
<ImageButton
Grid.Column="1"
Source="syncalt.svg"
Padding="5"
BackgroundColor="Pink"
WidthRequest="65"
HeightRequest="65"
CornerRadius="15"
Margin="0,5,5,0">
</ImageButton>
</Grid>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"/>
<VerticalStackLayout
Grid.Row="2">
<FlexLayout
JustifyContent="SpaceBetween"
AlignItems="Center"
AlignContent="Stretch"
Margin="20"
>
<Label Text="Popular recipe"
HeightRequest="30"
FontSize="Title"
FontAttributes="Bold"
Margin="5,0,0,0"
>
</Label>
<Label Text="Show All"
Margin="0,5,5,0"
HeightRequest="25"
TextColor="Grey"
>
</Label>
</FlexLayout>
<HorizontalStackLayout Spacing="10">
<Border StrokeShape="RoundRectangle 25">
<Rectangle HeightRequest="150" WidthRequest="150" BackgroundColor="Yellow">
</Rectangle>
</Border>
<Border StrokeShape="RoundRectangle 25">
<Rectangle HeightRequest="150" WidthRequest="150" BackgroundColor="Yellow">
</Rectangle>
</Border>
<Border StrokeShape="RoundRectangle 25">
<Rectangle HeightRequest="150" WidthRequest="150" BackgroundColor="Yellow">
</Rectangle>
</Border>
</HorizontalStackLayout>
</VerticalStackLayout>
<VerticalStackLayout
Grid.Row="3">
<FlexLayout
JustifyContent="SpaceBetween"
AlignItems="Center"
AlignContent="Stretch"
Margin="20,40,20,20"
>
<Label Text="Recommended for you"
HeightRequest="35"
FontSize="Title"
FontAttributes="Bold"
Margin="5,0,0,0"
>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"/>
</Label>
<Label Text="Show All"
Margin="0,5,5,0"
HeightRequest="25"
TextColor="Grey"
>
</Label>
</FlexLayout>
<FlexLayout>
<Border StrokeShape="RoundRectangle 25">
<Rectangle HeightRequest="150" WidthRequest="150" BackgroundColor="Yellow">
</Rectangle>
</Border>
<Border StrokeShape="RoundRectangle 25">
<Rectangle HeightRequest="150" WidthRequest="150" BackgroundColor="Yellow">
</Rectangle>
</Border>
<Border StrokeShape="RoundRectangle 25">
<Rectangle HeightRequest="150" WidthRequest="150" BackgroundColor="Yellow">
</Rectangle>
</Border>
</FlexLayout>
</VerticalStackLayout>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"/>
</Grid>
</StackLayout>
</ScrollView>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>
Loading…
Cancel
Save