C# maui listview observablecollection 動態新增/修改/刪除/更新UI
C# maui listview observablecollection 動態新增/修改/刪除/更新UI
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"
xmlns:local="clr-namespace:VPOS.CustomControls"
x:Class="VPOS.MainPage"
Background="#194a6e"
Title=""><!-- 隱藏標題 -->
<Grid x:Name="FullGrid"
Padding="3"
RowSpacing="2" ColumnSpacing="2" >
<Grid.RowDefinitions>
<RowDefinition /><!--Workspace -->
<RowDefinition Height="40" /><!--status column -->
</Grid.RowDefinitions>
<Grid x:Name="WorkspaceGrid"
RowSpacing="2" ColumnSpacing="2"
Grid.Row="0" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/><!-- Menu -->
<ColumnDefinition /><!-- Content -->
</Grid.ColumnDefinitions>
<Grid x:Name="MenuGrid"
RowSpacing="2" ColumnSpacing="2"
Grid.Row="0" Grid.Column="0">
<Border x:Name="MenuBorder"
Stroke="#194a6e"
StrokeThickness="0"
Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="5">
<ImageButton x:Name="SettingsBtn"
BorderColor="White"
BorderWidth="2"
CornerRadius="5"
BackgroundColor="#194a6e"
Source = "settings.png"
Clicked="SettingsBtn_Clicked"
HorizontalOptions="Fill"
VerticalOptions="Fill">
</ImageButton>
<ImageButton x:Name="DevicesBtn"
BorderColor="White"
BorderWidth="2"
CornerRadius="5"
BackgroundColor="#194a6e"
Source = "device.png"
Clicked="DevicesBtn_Clicked"
HorizontalOptions="Fill"
VerticalOptions="Fill">
</ImageButton>
<ImageButton x:Name="SynchronizeBtn"
BorderColor="White"
BorderWidth="2"
CornerRadius="5"
BackgroundColor="#194a6e"
Source = "synchronize.png"
Clicked="SynchronizeBtn_Clicked"
HorizontalOptions="Fill"
VerticalOptions="Fill">
</ImageButton>
<ImageButton x:Name="LogoutBtn"
BorderColor="White"
BorderWidth="2"
CornerRadius="5"
BackgroundColor="#194a6e"
Source = "logout.png"
Clicked="LogoutBtn_Clicked"
HorizontalOptions="Fill"
VerticalOptions="Fill">
</ImageButton>
</VerticalStackLayout>
</Border><!--MenuBorder-->
</Grid><!--MenuGrid-->
<Grid x:Name="ContentGrid"
RowSpacing="2" ColumnSpacing="2"
Grid.Row="0" Grid.Column="1"
ColumnDefinitions="5.2*,0.8*,6*">
<Border x:Name="LeftContentBorder"
Grid.Row="0" Grid.Column="0"
Stroke="White"
StrokeThickness="1"
Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="LeftContentGrid"
RowDefinitions="3.5*,5.5*,2*">
<Border x:Name="LeftContentBorder00"
Grid.Row="0" Grid.Column="0"
Stroke="#194a6e"
StrokeThickness="1"
Background="White">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="ShowInfoGrid"
RowDefinitions="1.3*,1.2*,*">
<Grid x:Name="ShowInfoGrid00"
Margin="4,0"
RowSpacing="0" ColumnSpacing="0"
Grid.Row="0" Grid.Column="0"
RowDefinitions="0.4*,0.3*,0.3*"
ColumnDefinitions="*,*,*,*,*,*" IsEnabled="True">
<Label x:Name="OrderStatusLable"
Grid.Row="0" Grid.ColumnSpan="6"
Text="訂購中"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Large"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="QuantityTextLable"
Grid.Row="1" Grid.Column="0"
Text="商品數量:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="QuantityValueLable"
Grid.Row="1" Grid.Column="1"
Text="100"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="DiscountTextLable"
Grid.Row="1" Grid.Column="2"
Text="優惠金額:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="DiscountValueLable"
Grid.Row="1" Grid.Column="3"
Text="100"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="ServiceTextLable"
Grid.Row="1" Grid.Column="4"
Text="服務費:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="ServiceValueLable"
Grid.Row="1" Grid.Column="5"
Text="100"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="ReceivableTextLable"
Grid.Row="2" Grid.Column="0"
Text="應收總額:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="ReceivableValueLable"
Grid.Row="2" Grid.Column="1"
Text="300"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="ChangeTextLable"
Grid.Row="2" Grid.Column="2"
Text="找零金額:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="ChangeValueLable"
Grid.Row="2" Grid.Column="3"
Text="100"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
</Grid>
<Grid x:Name="ShowInfoGrid01"
Margin="4,0"
RowSpacing="0" ColumnSpacing="0"
Grid.Row="1" Grid.Column="0"
RowDefinitions="2,*,*,*"
ColumnDefinitions="1.09*,1.99*,1.09*,1.5*,0.9*,0.6*">
<Border x:Name="ShowInfoLine00"
Grid.Row="0" Grid.ColumnSpan="6"
Stroke="Black"
StrokeThickness="0.5"/>
<Label x:Name="OrderNoTextLable"
Grid.Row="1" Grid.Column="0"
Text="訂單編號:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="OrderNoValueLable"
Grid.Row="1" Grid.Column="1"
Text="20230927-0001"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="PickupNoTextLable"
Grid.Row="1" Grid.Column="2"
Text="取餐號:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="PickupNoValueLable"
Grid.Row="1" Grid.Column="3"
Text="00000001"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="VisitorsTextLable"
Grid.Row="1" Grid.Column="4"
Text="來客數:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="VisitorsValueLable"
Grid.Row="1" Grid.Column="5"
Text="0001"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="OrderTypeTextLable"
Grid.Row="2" Grid.Column="0"
Text="訂單類型:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="OrderTypeValueLable"
Grid.Row="2" Grid.Column="1"
Text="Uber Eats"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="TableNoTextLable"
Grid.Row="2" Grid.Column="2"
Text="桌號:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="TableNoValueLable"
Grid.Row="2" Grid.Column="3"
Text="豪華廳A0001"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="ShopNoTextLable"
Grid.Row="2" Grid.Column="4"
Text="牌號:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="ShopNoValueLable"
Grid.Row="2" Grid.Column="5"
Text="100"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="MemberNameTextLable"
Grid.Row="3" Grid.Column="0"
Text="會員名稱:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="MemberNameValueLable"
Grid.Row="3" Grid.Column="1"
Text="合用系統有限公司"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="MemberTelTextLable"
Grid.Row="3" Grid.Column="2"
Text="會員電話:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="MemberTelValueLable"
Grid.Row="3" Grid.Column="3"
Text="04-22216292"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
</Grid>
<Grid x:Name="ShowInfoGrid02"
Margin="4,0"
RowSpacing="1" ColumnSpacing="0"
Grid.Row="2" Grid.Column="0"
RowDefinitions="2,*,*"
ColumnDefinitions="1*,1.3*,0.6*,1.31*,1.19*,0.6*">
<Border x:Name="ShowInfoLine01"
Grid.Row="0" Grid.ColumnSpan="6"
Stroke="Black"
StrokeThickness="0.5"/>
<Label x:Name="InvoiceNoTextLable"
Grid.Row="1" Grid.Column="0"
Text="發票號碼:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="InvoiceNoValueLable"
Grid.Row="1" Grid.Column="1"
Text="AB14433816"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="InvoiceNoBtn"
Grid.Row="1" Grid.Column="2" Grid.RowSpan="2"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="InvoiceCountTextLable"
Grid.Row="1" Grid.Column="3"
Text="發票剩餘張數:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="InvoiceCountValueLable"
Grid.Row="1" Grid.Column="4"
Text="100"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="CarrierBtn"
Grid.Row="1" Grid.Column="5" Grid.RowSpan="2"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="TaxIDTextLable"
Grid.Row="2" Grid.Column="0"
Text="客戶統編:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="TaxIDValueLable"
Grid.Row="2" Grid.Column="1"
Text="42897648"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="CarrierTextLable"
Grid.Row="2" Grid.Column="3"
Text="發票載具:"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<Label x:Name="CarrierValueLable"
Grid.Row="2" Grid.Column="4"
Text="/RZDFEP2"
LineBreakMode="WordWrap"
TextColor="Black"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
</Grid>
</Grid><!--ShowInforGrid-->
</Border><!--LeftContentBorder00-->
<Border x:Name="LeftContentBorder01"
Grid.Row="1" Grid.Column="0"
Stroke="#194a6e"
StrokeThickness="1"
Background="White">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="ShopcartGrid"
RowSpacing="2" ColumnSpacing="2"
ColumnDefinitions="5.2*,0.8*">
<Grid x:Name="ShopcartMainGrid"
Grid.Row="0" Grid.Column="0"
RowDefinitions="*" ColumnDefinitions="*">
<ListView x:Name="ShopcartListView"
Grid.Row="0" Grid.Column="0"
SelectionMode="Single"
BackgroundColor="White"
RowHeight="46">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- ListView 資料結構標準: ListView.ItemTemplate -> DataTemplate -> ViewCell-->
<Grid ColumnDefinitions="30,30,4*,1*,1*,1.2*">
<Image Source="{Binding Image00}" WidthRequest="30" HeightRequest="30" Grid.Column="0"/>
<Image Source="{Binding Image01}" WidthRequest="30" HeightRequest="30" Grid.Column="1"/>
<Label Text="{Binding Name}" FontSize="Subtitle" FontAutoScalingEnabled="True" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="2"/>
<Label Text="{Binding Amount}" FontSize="Subtitle" FontAutoScalingEnabled="True" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="3"/>
<Label Text="{Binding Price}" FontSize="Subtitle" FontAutoScalingEnabled="True" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="4"/>
<Label Text="{Binding Sum}" FontSize="Subtitle" FontAutoScalingEnabled="True" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="5"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
<Border x:Name="ShopcartBtnBorder"
Grid.Row="0" Grid.Column="1"
Stroke="White"
StrokeThickness="1"
Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<VerticalStackLayout
x:Name="ShopcartBtnVertical"
Padding="3" Spacing="10">
<local:CustBtn x:Name="ModifiedBtn"
HorizontalOptions="Fill"
VerticalOptions="Center">
</local:CustBtn>
<local:CustBtn x:Name="PlusBtn"
HorizontalOptions="Fill"
VerticalOptions="Center">
</local:CustBtn>
<local:CustBtn x:Name="MinusBtn"
HorizontalOptions="Fill"
VerticalOptions="Center">
</local:CustBtn>
</VerticalStackLayout>
</Border>
</Grid><!--ShopcartGrid-->
</Border><!--LeftContentBorder01-->
<Border x:Name="LeftContentBorder02"
Grid.Row="2" Grid.Column="0"
Stroke="#194a6e"
StrokeThickness="1"
Background="White">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="ShopcartBtnGrid"
Margin="1,2"
RowSpacing="1" ColumnSpacing="1"
RowDefinitions="*,*"
ColumnDefinitions="*,*,*,*,*">
<local:CustBtn x:Name="ShopcartBtn00"
Grid.Row="0" Grid.Column="0"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="ShopcartBtn01"
Grid.Row="0" Grid.Column="1"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="ShopcartBtn02"
Grid.Row="0" Grid.Column="2"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="ShopcartBtn03"
Grid.Row="0" Grid.Column="3"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="ShopcartBtn04"
Grid.Row="0" Grid.Column="4" Grid.RowSpan="2"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="ShopcartBtn05"
Grid.Row="1" Grid.Column="0"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="ShopcartBtn06"
Grid.Row="1" Grid.Column="1"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="ShopcartBtn07"
Grid.Row="1" Grid.Column="2"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="ShopcartBtn08"
Grid.Row="1" Grid.Column="3"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
</Grid>
</Border><!--LeftContentBorder02-->
</Grid><!--LeftContentGrid-->
</Border><!--LeftContentBorder-->
<Border x:Name="MiddleContentBorder"
Grid.Row="0" Grid.Column="1"
Stroke="White"
StrokeThickness="1"
Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
</Border><!--MiddleContentBorder-->
<Border x:Name="RightContentBorder"
Grid.Row="0" Grid.Column="2"
Stroke="White"
StrokeThickness="1"
Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="RightContentGrid"
RowSpacing="2" ColumnSpacing="2"
RowDefinitions="2*,7*,2*">
<Border x:Name="RightContentBorder00"
Grid.Row="0" Grid.Column="0"
Stroke="#194a6e"
StrokeThickness="1"
Background="White">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="CategoryBtnGrid"
ColumnDefinitions="5*,0.5*">
<Border x:Name="CategoryBtnBorder01"
Grid.Row="0" Grid.Column="1"
Stroke="White"
StrokeThickness="1"
Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid RowDefinitions="*,0.85*,*" Margin="0,3,0,3">
<local:CustBtn x:Name="CategoryUpBtn"
Grid.Row="0" Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Start">
</local:CustBtn>
<Label x:Name="CategoryTextLable"
Grid.Row="1" Grid.Column="0"
Text="1/2"
LineBreakMode="WordWrap"
TextColor="White"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="CategoryDownBtn"
Grid.Row="2" Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="End">
</local:CustBtn>
</Grid>
</Border>
</Grid>
</Border><!--RightContentBorder00-->
<Border x:Name="RightContentBorder01"
Grid.Row="1" Grid.Column="0"
Stroke="#194a6e"
StrokeThickness="1"
Background="White">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="ProductBtnGrid"
ColumnDefinitions="5*,0.5*">
<Border x:Name="ProductBtnBorder01"
Grid.Row="0" Grid.Column="1"
Stroke="White"
StrokeThickness="1"
Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid RowDefinitions="*,0.3*,*">
<local:CustBtn x:Name="ProductUpBtn"
Grid.Row="0" Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="End">
</local:CustBtn>
<Label x:Name="ProductTextLable"
Grid.Row="1" Grid.Column="0"
Text="1/2"
LineBreakMode="WordWrap"
TextColor="White"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="ProductDownBtn"
Grid.Row="2" Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Start">
</local:CustBtn>
</Grid>
</Border>
</Grid>
</Border><!--RightContentBorder01-->
<Border x:Name="RightContentBorder02"
Grid.Row="2" Grid.Column="0"
Stroke="#194a6e"
StrokeThickness="1"
Background="White">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="CondimentBtnGrid"
ColumnDefinitions="5*,0.5*">
<Border x:Name="CondimentBtnBorder01"
Grid.Row="0" Grid.Column="1"
Stroke="White"
StrokeThickness="1"
Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid RowDefinitions="*,0.85*,*" Margin="0,3,0,3">
<local:CustBtn x:Name="CondimentUpBtn"
Grid.Row="0" Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Start">
</local:CustBtn>
<Label x:Name="CondimentTextLable"
Grid.Row="1" Grid.Column="0"
Text="1/2"
LineBreakMode="WordWrap"
TextColor="White"
FontSize="Default"
FontAutoScalingEnabled="True"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="Fill"
VerticalOptions="Fill"/>
<local:CustBtn x:Name="CondimentDownBtn"
Grid.Row="2" Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="End">
</local:CustBtn>
</Grid>
</Border>
</Grid>
</Border><!--RightContentBorder02-->
</Grid><!--RightContentGrid-->
</Border><!--RightContentBorder-->
</Grid><!--ContentGrid-->
</Grid><!--WorkspaceGrid-->
<Grid x:Name="StatusGrid"
Grid.Row="1" Grid.Column="0">
<Border x:Name="StatusBorder"
Stroke="White"
StrokeThickness="1"
Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
</Border><!--StatusBorder-->
</Grid><!--StatusGrid-->
</Grid><!--FullGrid-->
</ContentPage>
Code
public class ShopcartItem
{
public string id { get; set; }
public string Image00 { get; set; }
public string Image01 { get; set; }
public string Name { get; set; }
public string Amount { get; set; }
public string Price { get; set; }
public string Sum { get; set; }
public string image_id { get; set; }
public Color Font_Color { get; set; }
public string State { get; set; }
}
public partial class MainPage : ContentPage
{
private ObservableCollection<ShopcartItem> m_ShopcartItems = new ObservableCollection<ShopcartItem>();
public MainPage()//建構子
{
InitializeComponent();
LogFile.Write("MainPage Start");
GetDisplayInfo();
ShowInfoInit();
ShopcartBtnGridInit();
CreateCategoryBtn(8,2,4);
CreateProductBtn(16,4,4);
CreateCondimentBtn(8,2,4);
ShopcartListView.ItemsSource = m_ShopcartItems;//綁定購物車資料結構
/*
//---
//移除方格整列元素 & 動態調整版面大小
ShowInfoLine01.IsVisible = false;
InvoiceNoTextLable.IsVisible = false;
InvoiceNoValueLable.IsVisible = false;
InvoiceNoBtn.IsVisible = false;
InvoiceCountTextLable.IsVisible = false;
InvoiceCountValueLable.IsVisible = false;
CarrierBtn.IsVisible = false;
TaxIDTextLable.IsVisible = false;
TaxIDValueLable.IsVisible = false;
CarrierTextLable.IsVisible = false;
CarrierValueLable.IsVisible = false;
ShowInfoGrid.RowDefinitions.RemoveAt(2);
LeftContentGrid.RowDefinitions[0] = new RowDefinition(new GridLength(2.5, GridUnitType.Star));
LeftContentGrid.RowDefinitions[1] = new RowDefinition(new GridLength(6.5, GridUnitType.Star));
//---移除方格整列元素 & 動態調整版面大小
*/
}
private void ShowInfoInit()
{
/*
OrderStatusLable.Text = "";//訂購中
QuantityValueLable.Text = "";//商品數量
DiscountValueLable.Text = "";//優惠金額
ServiceValueLable.Text = "";//服務費
ReceivableValueLable.Text = "";//應收總額
ChangeValueLable.Text = "";//找零金額
OrderNoValueLable.Text = "";//訂單編號
PickupNoValueLable.Text = "";//取餐號
VisitorsValueLable.Text = "";//來客數
OrderTypeValueLable.Text = "";//訂單類型
TableNoValueLable.Text = "";//桌號
ShopNoValueLable.Text = "";//牌號
MemberNameValueLable.Text = "";//會員名稱
MemberTelValueLable.Text = "";//會員電話
InvoiceNoValueLable.Text = "";//發票號碼
InvoiceCountValueLable.Text = "";//發票剩餘張數
TaxIDValueLable.Text = "";//客戶統編
CarrierValueLable.Text = "";//發票載具
//*/
Color BackgroundColor = new Color(25, 74, 110);
double dblFontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));
CarrierBtn.InitDisplay(Colors.White, BackgroundColor, "發票\n載具", dblFontSize);
InvoiceNoBtn.InitDisplay(Colors.White, BackgroundColor, "客戶\n統編", dblFontSize);
}
private void ShopcartBtnGridInit()
{
double dblFontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));
ShopcartBtn00.m_intSID = 0;
ShopcartBtn01.m_intSID = 1;
ShopcartBtn02.m_intSID = 2;
ShopcartBtn03.m_intSID = 3;
ShopcartBtn04.m_intSID = 4;
ShopcartBtn05.m_intSID = 5;
ShopcartBtn06.m_intSID = 6;
ShopcartBtn07.m_intSID = 7;
ShopcartBtn08.m_intSID = 8;
//ShopcartBtn09.m_intSID = 9;
//ShopcartBtn10.m_intSID= 10;
Color BackgroundColor = new Color(25, 74, 110);
String []StrName= new String[11];
for(int i=0; i<11; i++)
{
StrName[i]= i.ToString();
}
ShopcartBtn00.InitDisplay(Colors.White, BackgroundColor, StrName[0], dblFontSize);
ShopcartBtn01.InitDisplay(Colors.White, BackgroundColor, StrName[1], dblFontSize);
ShopcartBtn02.InitDisplay(Colors.White, BackgroundColor, StrName[2], dblFontSize);
ShopcartBtn03.InitDisplay(Colors.White, BackgroundColor, StrName[3], dblFontSize);
ShopcartBtn04.InitDisplay(Colors.White, BackgroundColor, StrName[4], dblFontSize);
ShopcartBtn05.InitDisplay(Colors.White, BackgroundColor, StrName[5], dblFontSize);
ShopcartBtn06.InitDisplay(Colors.White, BackgroundColor, StrName[6], dblFontSize);
ShopcartBtn07.InitDisplay(Colors.White, BackgroundColor, StrName[7], dblFontSize);
ShopcartBtn08.InitDisplay(Colors.White, BackgroundColor, StrName[8], dblFontSize);
//ShopcartBtn09.InitDisplay(Colors.White, BackgroundColor, StrName[9], dblFontSize);
//ShopcartBtn10.InitDisplay(Colors.White, BackgroundColor, StrName[10], dblFontSize);
// 綁定事件
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += ShopcartBtn_Clicked;
ShopcartBtn00.GestureRecognizers.Add(tapGestureRecognizer);
ShopcartBtn01.GestureRecognizers.Add(tapGestureRecognizer);
ShopcartBtn02.GestureRecognizers.Add(tapGestureRecognizer);
ShopcartBtn03.GestureRecognizers.Add(tapGestureRecognizer);
ShopcartBtn04.GestureRecognizers.Add(tapGestureRecognizer);
ShopcartBtn05.GestureRecognizers.Add(tapGestureRecognizer);
ShopcartBtn06.GestureRecognizers.Add(tapGestureRecognizer);
ShopcartBtn07.GestureRecognizers.Add(tapGestureRecognizer);
ShopcartBtn08.GestureRecognizers.Add(tapGestureRecognizer);
//ShopcartBtn09.GestureRecognizers.Add(tapGestureRecognizer);
//ShopcartBtn10.GestureRecognizers.Add(tapGestureRecognizer);
ModifiedBtn.InitDisplay(Colors.White, BackgroundColor, "修改", dblFontSize);
PlusBtn.InitDisplay(Colors.White, BackgroundColor, "┼", dblFontSize);
MinusBtn.InitDisplay(Colors.White, BackgroundColor, "─", dblFontSize);
}
private async void ShopcartBtn_Clicked(object sender, EventArgs e)
{
await this.ShowPopupAsync(new MessageBox($"{((CustBtn)(sender)).m_intSID}"));
switch(((CustBtn)(sender)).m_intSID)
{
case 0:
break;
case 1:
break;
case 2:
break;
case 3:
break;
case 4://結帳按鈕
break;
case 5:
break;
case 6:
break;
case 7:
break;
case 8:
break;
case 9:
break;
case 10:
break;
}
}
//---
//畫面右側按鈕動態建立函數
CustBtn[] m_CategoryBtn;
private void CreateCategoryBtn(int intQuantity, int intRows, int intColumns)
{
double dblFontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));
CategoryUpBtn.InitDisplay(Colors.White, new Color(25, 74, 110), "▲", dblFontSize);
CategoryDownBtn.InitDisplay(Colors.White, new Color(25, 74, 110), "▼", dblFontSize);
if (intRows*intColumns>= intQuantity)
{
Grid CategoryMainGrid = new Grid();//建立網格
CategoryMainGrid.Margin = new Thickness(2,1,2,1);
CategoryMainGrid.RowSpacing = 1;
CategoryMainGrid.ColumnSpacing = 1;
for (int i = 0;i<intRows;i++) //配置列數
{
CategoryMainGrid.RowDefinitions.Add(new RowDefinition());
}
for (int i = 0; i < intColumns; i++)//配置行數
{
CategoryMainGrid.ColumnDefinitions.Add(new ColumnDefinition());
}
m_CategoryBtn=new CustBtn[intQuantity];//建立按鈕陣列
for(int i=0;i<intQuantity;i++)
{
//建立按鈕
m_CategoryBtn[i] = new CustBtn();//建立每個按鈕實體
m_CategoryBtn[i].InitData(i);
dblFontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));
m_CategoryBtn[i].InitDisplay(new Color(65, 134, 168), new Color(36,112,160),$"產品類名稱超長測試{i+1}", dblFontSize);//每個按鈕初始化
// 綁定事件
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += CategoryBtn_Clicked;
m_CategoryBtn[i].GestureRecognizers.Add(tapGestureRecognizer);
//放到Layout上
int intRow = i / intColumns;
int intColumn = i % intColumns;
CategoryMainGrid.Add(m_CategoryBtn[i], intColumn, intRow);
}
//放到XAML的Layout上
CategoryBtnGrid.Add(CategoryMainGrid, 0, 0);
}
}
private async void CategoryBtn_Clicked(object sender, EventArgs e)
{
await this.ShowPopupAsync(new MessageBox($"{((CustBtn)(sender)).m_intSID}"));
//---
//手動增加ListView項目[測試程式]
ShopcartItem ShopcartItemMain = new ShopcartItem();
ShopcartItemMain.id = "0";
ShopcartItemMain.Image00 = "checkbox00.png";
ShopcartItemMain.Image01 = "blank.png";
ShopcartItemMain.Name = "四季春";
ShopcartItemMain.Amount = "10";
ShopcartItemMain.Price = "40";
ShopcartItemMain.Sum = "400";
ShopcartItemMain.Font_Color = Colors.Black;
m_ShopcartItems.Add(ShopcartItemMain);
ShopcartListView.ScrollTo(m_ShopcartItems[m_ShopcartItems.Count-1], ScrollToPosition.End, false);
//---手動增加ListView項目[測試程式]
}
CustBtn[] m_ProductBtn;
private void CreateProductBtn(int intQuantity, int intRows, int intColumns)
{
double dblFontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));
ProductUpBtn.InitDisplay(Colors.White, new Color(25, 74, 110), "▲", dblFontSize);
ProductDownBtn.InitDisplay(Colors.White, new Color(25, 74, 110), "▼", dblFontSize);
if (intRows * intColumns >= intQuantity)
{
Grid ProductMainGrid = new Grid();
ProductMainGrid.Margin = new Thickness(2, 2, 1, 1);
ProductMainGrid.RowSpacing = 1;
ProductMainGrid.ColumnSpacing = 1;
for (int i = 0; i < intRows; i++)
{
ProductMainGrid.RowDefinitions.Add(new RowDefinition());
}
for (int i = 0; i < intColumns; i++)
{
ProductMainGrid.ColumnDefinitions.Add(new ColumnDefinition());
}
m_ProductBtn = new CustBtn[intQuantity];//建立按鈕陣列
for (int i = 0; i < intQuantity; i++)
{
//建立按鈕
m_ProductBtn[i] = new CustBtn();//建立每個按鈕實體
m_ProductBtn[i].InitData(i);
dblFontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));
m_ProductBtn[i].InitDisplay(Colors.White, new Color(106, 117, 79), $"產品名稱{i + 1}", dblFontSize);//每個按鈕初始化
// 綁定事件
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += Product_Clicked;
m_ProductBtn[i].GestureRecognizers.Add(tapGestureRecognizer);
//放到Layout上
int intRow = i / intColumns;
int intColumn = i % intColumns;
ProductMainGrid.Add(m_ProductBtn[i], intColumn, intRow);
}
//放到XAML的Layout上
ProductBtnGrid.Add(ProductMainGrid, 0, 0);
}
}
private async void Product_Clicked(object sender, EventArgs e)
{
await this.ShowPopupAsync(new MessageBox($"{((CustBtn)(sender)).m_intSID}"));
//---
//手動修改ListView中的項目[測試程式]
//m_ShopcartItems.RemoveAt(0);//刪除
//m_ShopcartItems.Clear();//清空
//m_ShopcartItems.Insert(index, item);//插入
ShopcartItem Item = m_ShopcartItems[2];
Item.Font_Color = Colors.Red;
Item.Image00 = "checkbox01.png";
m_ShopcartItems[2] = Item;
//---手動修改ListView中的項目[測試程式]
}
CustBtn[] m_CondimentBtn;
private void CreateCondimentBtn(int intQuantity, int intRows, int intColumns)
{
double dblFontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));
CondimentUpBtn.InitDisplay(Colors.White, new Color(25, 74, 110), "▲", dblFontSize);
CondimentDownBtn.InitDisplay(Colors.White, new Color(25, 74, 110), "▼", dblFontSize);
if (intRows * intColumns >= intQuantity)
{
Grid CondimentMainGrid = new Grid();
CondimentMainGrid.Margin = new Thickness(2, 2, 1, 1);
CondimentMainGrid.RowSpacing = 0;
CondimentMainGrid.ColumnSpacing = 1;
for (int i = 0; i < intRows; i++)
{
CondimentMainGrid.RowDefinitions.Add(new RowDefinition());
}
for (int i = 0; i < intColumns; i++)
{
CondimentMainGrid.ColumnDefinitions.Add(new ColumnDefinition());
}
m_CondimentBtn = new CustBtn[intQuantity];//建立按鈕陣列
for (int i = 0; i < intQuantity; i++)
{
//建立按鈕
m_CondimentBtn[i] = new CustBtn();//建立每個按鈕實體
m_CondimentBtn[i].InitData(i);
dblFontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));
m_CondimentBtn[i].InitDisplay(Colors.White, new Color(92, 171, 125), $"配料名稱{i + 1}", dblFontSize);//每個按鈕初始化
// 綁定事件
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += Condiment_Clicked;
m_CondimentBtn[i].GestureRecognizers.Add(tapGestureRecognizer);
//放到Layout上
int intRow = i / intColumns;
int intColumn = i % intColumns;
CondimentMainGrid.Add(m_CondimentBtn[i], intColumn, intRow);
}
//放到XAML的Layout上
CondimentBtnGrid.Add(CondimentMainGrid, 0, 0);
}
}
private async void Condiment_Clicked(object sender, EventArgs e)
{
await this.ShowPopupAsync(new MessageBox($"{((CustBtn)(sender)).m_intSID}"));
}
//---畫面右側按鈕動態建立函數
//---
//系統菜單事件
private async void LogoutBtn_Clicked(object sender, EventArgs e)//登出
{
LogFile.Write("MainPage End");
await Shell.Current.GoToAsync("login");
}
private async void DevicesBtn_Clicked(object sender, EventArgs e)//周邊管理
{
await Navigation.PushModalAsync(new DevicesListPage());
}
private void SettingsBtn_Clicked(object sender, EventArgs e)//系統設定
{
}
private async void SynchronizeBtn_Clicked(object sender, EventArgs e)//資料更新
{
await this.ShowPopupAsync(new QuesMessageBox("確定要執行資料更新?"));
if (QuesMessageBox.m_blnResult)
{
if (HttpsFun.WebRequestTest(ref LoadingPage.m_intNetworkLevel))//判斷是否有網路
{
await this.ShowPopupAsync(new SyncLocalDatabase());//同步本地端資料庫
LogFile.Write("MainPage End");
await Shell.Current.GoToAsync("login");//切換到登入頁面
}
else
{
await this.ShowPopupAsync(new MessageBox("網路偵測異常，無法執行資料同步?"));
}
}
}
//---系統菜單事件
}