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="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">
<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"> <Style TargetType="ActivityIndicator">
<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" /> <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />

@ -5,179 +5,135 @@
Title="HomePage"> Title="HomePage">
<ScrollView> <ScrollView>
<StackLayout> <Grid RowDefinitions="Auto,Auto,Auto,*">
<Grid> <FlexLayout
<Grid.ColumnDefinitions> Grid.Row="0"
<ColumnDefinition Width="Auto" /> JustifyContent="SpaceBetween"
<ColumnDefinition Width="*" /> AlignItems="Center"
<ColumnDefinition Width="Auto" /> AlignContent="Center"
</Grid.ColumnDefinitions> Margin="20"
<Frame BackgroundColor="Pink" >
CornerRadius="5" <ImageButton Source="sort.svg"
HeightRequest="40" Padding="5"
WidthRequest="40" BackgroundColor="Pink"
Grid.Column="0" WidthRequest="65"
Margin="10"> HeightRequest="65"
<Image Source="../Ressources/AppIcon/sort.svg" CornerRadius="15"
HeightRequest="20" Margin="0,5,10,0">
WidthRequest="20" </ImageButton>
Aspect="AspectFit" <ImageButton Source="account.svg"
VerticalOptions="Center" Padding="5"
HorizontalOptions="Center"/> BackgroundColor="Transparent"
</Frame> WidthRequest="75"
<Image Source="../Ressources/AppIcon/account.svg" HeightRequest="75"
HeightRequest="40" CornerRadius="15"
WidthRequest="40" Margin="0,5,0,0">
Grid.Column="2" </ImageButton>
Margin="10"/> </FlexLayout>
<SearchBar Placeholder="Search here ..." <Grid
PlaceholderColor="Gray" ColumnDefinitions="*,Auto"
HeightRequest="40" Grid.Row="1"
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"/>
<BoxView BackgroundColor="LightBlue" Margin="20"
HeightRequest="120" >
WidthRequest="150" <Entry
Margin="0,0,10,10" Margin="5,10,5,5"
Grid.Row="2" Grid.Column="0"
Grid.Column="0"/> Placeholder="Search here..."
>
<BoxView BackgroundColor="LightBlue" </Entry>
HeightRequest="120" <ImageButton
WidthRequest="150" Grid.Column="1"
Margin="0,0,0,10" Source="syncalt.svg"
Grid.Row="2" Padding="5"
Grid.Column="1"/> BackgroundColor="Pink"
</Grid> WidthRequest="65"
</StackLayout> HeightRequest="65"
</ScrollView> CornerRadius="15"
<StackLayout Orientation="Horizontal" Margin="0,5,5,0">
Margin="10,20,10,10"> </ImageButton>
<Label Text="Recommended for you" </Grid>
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"/>
<BoxView BackgroundColor="LightBlue" <VerticalStackLayout
HeightRequest="120" Grid.Row="2">
WidthRequest="150"/> <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" </Label>
HeightRequest="120" <Label Text="Show All"
WidthRequest="150"/> 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" </Grid>
HeightRequest="120"
WidthRequest="150"/>
</Grid>
</StackLayout>
</ScrollView>
</StackLayout>
</ScrollView> </ScrollView>
</ContentPage> </ContentPage>
Loading…
Cancel
Save