You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ShopNCook/Views/HomePage.xaml

181 lines
7.1 KiB

<?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"
x:Class="ShoopNCook.Views.HomePage"
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"/>
<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"/>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"/>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"/>
<BoxView BackgroundColor="LightBlue"
HeightRequest="120"
WidthRequest="150"/>
</Grid>
</StackLayout>
</ScrollView>
</ContentPage>