ShopNCook/Views/RecipePage.xaml

<?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.Pages.RecipePage"
             Title="RecipePage"
             x:Name="RecipeViewPage"
             xmlns:views="clr-namespace:ShoopNCook.Views"
             BackgroundColor="{StaticResource BackgroundPrimary}">
    
    <Grid
        RowDefinitions="90*, 10*"
        Padding="10">
        
        <!--Main content-->
        <ScrollView>
            <Grid
                RowDefinitions="Auto, Auto, *, Auto">
                <!--Header-->
                <FlexLayout
                    Grid.Row="0"
                    Direction="Row"
                    JustifyContent="SpaceBetween"
                    AlignContent="Center"
                    AlignItems="Center"
                    HeightRequest="60">
                    
                    <ImageButton 
                        Source="arrow_back.svg"
                        Clicked="OnBackButtonClicked"/>

                    <Label 
                        Style="{StaticResource h1}"
                        x:Name="RecipeName"
                        Text="Recipe name"/>

                    <ImageButton
                        x:Name="Favorite"
                        Margin="0, 0, 5, 0"
                        Clicked="OnFavorite"/>
                </FlexLayout>

                <!--Recipe image-->
                
                <Border
                    Grid.Row="1"
                    Margin="10"
                    Stroke="Transparent"
                    StrokeShape="RoundRectangle 20"
                    BackgroundColor="{StaticResource ImageBackground}">
                    <Image 
                        Aspect="AspectFill"
                        HeightRequest="250"
                        x:Name="RecipeImage"/>
                </Border>

                <!--Steps-->

                <VerticalStackLayout
                    Grid.Row="2"
                    Padding="30, 0, 30, 0">

                    <!--Cook time-->
                    <VerticalStackLayout>
                        <HorizontalStackLayout>
                            <Label 
                                Style="{StaticResource Small}"
                                Text="Cooking time: "/>
                            <Label 
                                Style="{StaticResource Small}"
                                x:Name="CookTime"/>
                            <Label 
                                Style="{StaticResource Small}"
                                Text=" min"/>
                        </HorizontalStackLayout>

                    <!--Energy-->

                        <HorizontalStackLayout>
                            <Label 
                                Style="{StaticResource Small}"
                                Text="Energy: "/>
                            <Label 
                                Style="{StaticResource Small}"
                                x:Name="Energy"/>
                            <Label 
                                Style="{StaticResource Small}"
                                Text="/pers"/>
                        </HorizontalStackLayout>
                    </VerticalStackLayout>

                    <!--Ingredient list-->
                    <Label
                        Style="{StaticResource h2}"
                        Text="Ingredients"/>

                    <VerticalStackLayout 
                        x:Name="IngredientList"/>

                    <!--Step list-->
                    <Label
                        Style="{StaticResource h2}"
                        Text="Preparation steps"/>

                    <VerticalStackLayout
                        x:Name="StepList"/>

                </VerticalStackLayout>

                <!--Stars-->

                <HorizontalStackLayout
                    Grid.Row="3"
                    MaximumHeightRequest="45">
                    <HorizontalStackLayout
                        x:Name="Stars"
                        Spacing="2"
                        Margin="10, 0, 0, 0">
                        <ImageButton
                            WidthRequest="30"
                            Command="{Binding StarCommand, Source={x:Reference RecipeViewPage}}"
                            CommandParameter="1"/>
                        <ImageButton
                            WidthRequest="30"
                            Command="{Binding StarCommand, Source={x:Reference RecipeViewPage}}"
                            CommandParameter="2"/>
                        <ImageButton
                            WidthRequest="30"
                            Command="{Binding StarCommand, Source={x:Reference RecipeViewPage}}"
                            CommandParameter="3"/>
                        <ImageButton
                            WidthRequest="30"
                            Command="{Binding StarCommand, Source={x:Reference RecipeViewPage}}"
                            CommandParameter="4"/>
                        <ImageButton
                            WidthRequest="30"
                            Command="{Binding StarCommand, Source={x:Reference RecipeViewPage}}"
                            CommandParameter="5"/>
                    </HorizontalStackLayout>
                    <Border
                        Margin="12, 0, 0, 0"
                        Stroke="Transparent"
                        StrokeShape="RoundRectangle 150">
                        <Button
                            FontFamily="PoppinsMedium"
                            TextColor="White"
                            BackgroundColor="{StaticResource Selected}"
                            VerticalOptions="Center"
                            HorizontalOptions="Center"
                            Text="Submit"
                            Clicked="OnSubmitReviewClicked"/>
                    </Border>
                </HorizontalStackLayout>
            </Grid>
        </ScrollView>

        <!--Footer-->
        
        <FlexLayout
            Grid.Row="1"
            Direction="Row"
            JustifyContent="SpaceBetween"
            AlignItems="Center"
            >
            <views:CounterView
                x:Name="Counter"
                CounterText="pers"
                Count="1"/>

            <Button
                Grid.Column="1"
                Text="Add to list"
                Style="{StaticResource UserButton}"
                TextColor="White"
                BackgroundColor="Gray"
                Clicked="OnAddToMyListClicked">
            </Button>
        </FlexLayout>
    </Grid>
</ContentPage>