ShopNCook/Views/CreateRecipePage.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.CreateRecipePage"
             Title="CreateRecipePage"
             xmlns:views="clr-namespace:ShoopNCook.Views"
             BackgroundColor="{StaticResource BackgroundPrimary}">
    <Grid
        RowDefinitions="Auto, *, Auto"
        Padding="20, 30, 20, 20">
        <!-- Header label and return button -->
        <HorizontalStackLayout
            Grid.Row="0"
            MaximumHeightRequest="60">

            <ImageButton 
                HeightRequest="50"
                WidthRequest="50"
                Source="arrow_back.svg"
                HorizontalOptions="Start"
                Clicked="OnBackButtonClicked"/>

            <Label 
                Text="Create new recipe"
                Style="{StaticResource h3}"
                FontSize="20"
                VerticalTextAlignment="Center"/>
        </HorizontalStackLayout>

        <!--Editor-->
        <ScrollView
            Grid.Row="1">
            <VerticalStackLayout>
                <!--Image display and Image upload button-->
                <Grid
                    RowDefinitions="Auto">
                    <Border
                        Grid.Row="0"
                        BackgroundColor="{StaticResource ImageBackground}"
                        Stroke="White"
                        StrokeThickness="2"
                        StrokeShape="RoundRectangle 25">
                        <Image 
                            x:Name="RecipeImage"
                            HeightRequest="250"/>
                    </Border>
                    <Border
                        Grid.Row="0"
                        BackgroundColor="{StaticResource Selected}"
                        Stroke="White"
                        StrokeThickness="2"
                        StrokeShape="RoundRectangle 200"
                        WidthRequest="50"
                        HeightRequest="50"
                        HorizontalOptions="End"
                        VerticalOptions="End"
                        TranslationY="20"
                        TranslationX="-20">
                        
                        <ImageButton
                            Source="edit.svg"
                            WidthRequest="30"/>
                    </Border>
                </Grid>
                
                <VerticalStackLayout>
                    <!--Ingredients-->
                    <Entry
                        Style="{StaticResource UserInput}"
                        Placeholder="Specify your recipe name"
                        x:Name="RecipeNameEntry"/>
                    <Label
                        Style="{StaticResource h2}"
                        Text="Ingredient list (for 1 person)"/>
                    
                    <!--Ingredient entry list-->
                    <VerticalStackLayout 
                        x:Name="IngredientList"
                        Spacing="5">
                        <views:IngredientEntry/>
                    </VerticalStackLayout>

                    <!--Add new ingredient button-->
                    <HorizontalStackLayout>
                        <HorizontalStackLayout.GestureRecognizers>
                            <TapGestureRecognizer 
                                Tapped="OnAddIngredientTapped"
                                NumberOfTapsRequired="1"/>
                        </HorizontalStackLayout.GestureRecognizers>
                        <Label 
                            Text="+"
                            TextColor="LightGreen"
                            FontSize="50"/>
                        <Label
                            Margin="0, 10, 0, 0"
                            Style="{StaticResource h2}"
                            Text="Add Ingredient"
                            VerticalTextAlignment="Center"/>
                    </HorizontalStackLayout>

                    <!--General Informations-->
                    <Label
                        Style="{StaticResource h2}"
                        Text="Informations"/>
                    <HorizontalStackLayout>
                        <Label
                            Style="{StaticResource h3}"
                            VerticalTextAlignment="Center"
                            Text="Cook time: "/>
                        <Entry
                            Style="{StaticResource UserInput}"
                            Keyboard="Numeric"
                            x:Name="CookTimeInput"/>
                        <Label
                            Style="{StaticResource h3}"
                            VerticalTextAlignment="Center"
                            Text="minutes"/>
                    </HorizontalStackLayout>

                    <HorizontalStackLayout>
                        <Label
                            Style="{StaticResource h3}"
                            VerticalTextAlignment="Center"
                            Text="Estimated cal/persons: "/>
                        <Entry
                            Style="{StaticResource UserInput}"
                            Keyboard="Numeric"
                            x:Name="EnergyInput"/>
                        <Label
                            Style="{StaticResource h3}"
                            VerticalTextAlignment="Center"
                            Text="cal/pers"/>
                    </HorizontalStackLayout>

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

                    <!--Step list-->
                    <VerticalStackLayout 
                        x:Name="StepList"
                        Spacing="5">
                        <views:StepEntry Ordinal="1"/>
                    </VerticalStackLayout>

                    <!--Add new Step button-->
                    <HorizontalStackLayout>
                        <HorizontalStackLayout.GestureRecognizers>
                            <TapGestureRecognizer 
                                Tapped="OnAddStepTapped"
                                NumberOfTapsRequired="1"/>
                        </HorizontalStackLayout.GestureRecognizers>
                        
                        <Label 
                            Text="+"
                            TextColor="LightGreen"
                            FontSize="50"/>
                        <Label
                            Margin="0, 10, 0, 0"
                            Style="{StaticResource h2}"
                            Text="Add Step"
                            VerticalTextAlignment="Center"/>
                    </HorizontalStackLayout>


                </VerticalStackLayout>
            </VerticalStackLayout>
        </ScrollView>
        <Button
            Grid.Row="3"
            Style="{StaticResource UserButton}"
            BackgroundColor="{StaticResource ActionButton}"
            Text="Upload recipe"
            Clicked="OnUploadRecipeClicked"/>
    </Grid>
    
</ContentPage>