Adding a layout view outside of grid in .net maui

Question

I am very new to .net Maui and have been following a guide to creating a screen with a collections list that displays items.

I'm trying to get a cart option to display in the top right of the screen, which will show how many items are in the cart, but I'm struggling to do so, each time I try to add say a new gridView outside of the frame, I get an error about 'the property content is set more than once'

Can anyone maybe point me in the right direction on how to do this?

the screen currently looks like the one below and I would be aiming to have an image of a cart with a label to say the price of everything that's been added in the top right of the screen.

Any help will be appreciated.

Image:

code:

<?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="CoffeeShop.MenuScreen"
             xmlns:viewmodel="clr-namespace:CoffeeShop.ViewModel"
             x:DataType="viewmodel:ItemViewModel"
             xmlns:model="clr-namespace:CoffeeShop.Model"
             Title="MenuScreen" >



    <CollectionView Margin="10"
                    ItemsSource="{Binding ItemCollection}"
                    SelectionMode="Single">

        
            <CollectionView.ItemTemplate>

            <DataTemplate x:DataType="model:Item">
                <Grid HeightRequest="160"
                            ColumnDefinitions="*, *">

                    <Frame  Padding="10" Margin="10"
                        BorderColor="Black"
                        CornerRadius="0">

                    <Grid HeightRequest="160"
                            ColumnDefinitions="*, *">

                        <Image 
                                   HeightRequest="75"
                                   Aspect="AspectFit"
                                   Source="{Binding ItemPic}"/>

                        <Grid  Grid.Column="1" Margin="20">

                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>

                            <Label Grid.Row="0"  FontSize="Medium" 
                                   Text="{Binding Type}"/>
                            <Label Grid.Row="1"
                                       FontSize="Medium"
                                   Text="{Binding Name}"/>
                            <Label Grid.Row="2"
                                       FontSize="Medium"
                                   Text="{Binding PriceString}"/>

                            <Button x:Name="Add to Cart" Grid.Row =" 1"
                            Text="Add to Cart"
                            HorizontalOptions="End"
                            />
                        </Grid>


                    </Grid>


                </Frame>

            </DataTemplate>
            
        </CollectionView.ItemTemplate>
    </CollectionView>
    
</ContentPage>

    

Answer 1

If you want to get a cart option to display in the top right of the screen, you can use the Shell.TitleView to show how many items are in the cart. You can dynamically use a binding to the Label to show how many items are in the cart. Here's the XAML code below for your reference:

Xaml:

<Shell.TitleView> 
     <Grid>
         <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"></ColumnDefinition>
                <ColumnDefinition ></ColumnDefinition>
                <ColumnDefinition Width="100"></ColumnDefinition>
         </Grid.ColumnDefinitions>

         <Label Text="6 items"
                   TextColor="White"
                   FontSize="Medium"
                   Grid.Column="2"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   />
     
     </Grid>
</Shell.TitleView>