maui sqlite开发一个商城加购物车的演示(3)

购物车界面及代码

在这里插入图片描述

<?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"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             x:Class="ShoppingUI.CartPage"
               Shell.NavBarIsVisible="True"
             Title="购物车">
    <ContentPage.Content>
        <Grid RowDefinitions="Auto,*,Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="0" BackgroundColor="#2C363C">

            <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" Grid.ColumnSpan="2" Margin="0,10,10,8" BackgroundColor="#2C363C" HorizontalOptions="FillAndExpand">
                    <Label Text=" 购物车"  HorizontalTextAlignment="Start" FontSize="28" TextColor="White" FontAttributes="Bold"/>
                <StackLayout Grid.Column="1" Grid.Row="1" Orientation="Horizontal" HorizontalOptions="End">
                    <Label  Text="{Binding Path=CartItems.Count}" CharacterSpacing="3" Padding="0,20,0,0" FontSize="15" FontAttributes="Bold" HorizontalTextAlignment="Center" TextColor="White"/>
                    <Label  Text="件" Padding="0,20,0,0" FontSize="15" FontAttributes="Bold" HorizontalTextAlignment="Center" TextColor="White"/>
                </StackLayout>
                </Grid>

            <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="Start" BackgroundColor="#2C363C">
                    <syncfusion:SfListView x:Name="listView" ItemSpacing="5,0,0,0" 
                   ItemsSource="{Binding CartItems}"
                               ItemSize="120">

                        <syncfusion:SfListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,0,0,8" RowDefinitions="*,*" ColumnDefinitions="100,120,*"  BackgroundColor="#e3ecfa">
                                <Frame HeightRequest="100" WidthRequest="100" HasShadow="False" Grid.RowSpan="2" CornerRadius="10" BackgroundColor="White"  VerticalOptions="CenterAndExpand">
                                    <Image Source="{Binding Picture}"  Aspect="AspectFill" />
                                </Frame>
                                <StackLayout Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" VerticalOptions="Center">
                                    <Label Text="{Binding Name}"  Padding="10,0,0,10" FontSize="17" FontAttributes="Bold" TextColor="#2C363C"/>
                                    <Label  Text="{Binding Price}" Padding="10,0,0,0" FontAttributes="Bold" FontSize="20" TextColor="#2C363C"/>
                                </StackLayout>
                                <StackLayout Orientation="Horizontal" Grid.Row="1" Grid.Column="3" VerticalOptions="Center">
                                <Button  FontSize="15"   BackgroundColor="Transparent" Text="-" TextColor="Black" HorizontalOptions="End" HeightRequest="40" WidthRequest="50" />
                                    <Button  FontSize="13"  Margin="10,0,10,0" BackgroundColor="#2C363C" Text="{Binding Quantity}" TextColor="White" HorizontalOptions="End" HeightRequest="40" WidthRequest="50"/>
                                <Button  FontSize="15"   BackgroundColor="Transparent" Text="+" TextColor="Black" HorizontalOptions="End" HeightRequest="40" WidthRequest="50"  />
                                </StackLayout>
                            </Grid>
                        </DataTemplate>
                        
                        </syncfusion:SfListView.ItemTemplate>
                    </syncfusion:SfListView>
                </Grid>

                <Label Grid.Row="3" Grid.Column="0" TextColor="White" Text="Total Payment" Padding="30,10,30,5" />
            <Label Grid.Row="4" Grid.Column="0" TextColor="White" Text="$99.00" Padding="30,0,30,30" FontAttributes="Bold" FontSize="30"/>
            <Button Grid.Row="3" Grid.RowSpan="2" Grid.Column="1" VerticalOptions="Center" BackgroundColor="White" Text="Checkout" TextColor="#2C363C" CornerRadius="20" Margin="0,10,30,30" WidthRequest="180" FontSize="17" FontAttributes="Bold" HeightRequest="55"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

namespace ShoppingUI;

public partial class CartPage : ContentPage
{
	public CartPage(ProductPageViewModel productPageViewModel)
	{
		InitializeComponent();
        BindingContext = productPageViewModel;
      
    }
}