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

new9mtju  于 2023-01-27  发布在  .NET
关注(0)|答案(1)|浏览(190)

我对. net毛伊岛非常陌生,一直在遵循一个指南来创建一个带有显示项目的收藏列表的屏幕。
我尝试在屏幕右上角显示购物车选项,这将显示购物车中有多少项,但我很难做到这一点,每次我尝试在框架外添加新的gridView时,我都会收到关于"属性内容设置了多次"的错误
有人能给我指出正确的方向吗?
屏幕目前看起来像下面的一个,我的目标是有一个标签说,在屏幕的右上角添加的一切价格购物车的图像。
任何帮助都将不胜感激。
图片:

代码:

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

q1qsirdb1#

如果你想让购物车选项显示在屏幕的右上角,你可以使用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>

相关问题