在 .net maui 中添加网格外的布局视图

Question

我是 .net Maui 的新手，一直在按照指南创建一个屏幕，其中包含显示项目的 collections 列表。

我正在尝试让购物车选项显示在屏幕的右上角，这将显示购物车中有多少商品，但我很难做到这一点，每次我尝试在外面添加一个新的 gridView在框架中，我收到有关“属性内容设置不止一次”的错误

任何人都可以指出我如何做到这一点的正确方向吗？

屏幕目前看起来像下面的那个，我的目标是有一个带有 label 的购物车图像，以说明屏幕右上角添加的所有内容的价格。

任何帮助将不胜感激。

图片：

代码：

<?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

如果你想让购物车选项显示在屏幕的右上角，你可以使用Shell.TitleView来显示购物车中有多少商品。 您可以动态地使用绑定到Label来显示购物车中有多少商品。 下面是XAML代码供您参考：

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>