C# MAUI GridLayout 使用程式隱藏/顯示行列元素 & UI自動補齊[ 移除/插入 GridLayout內的行列配置(RowDefinitions/ColumnDefinitions)和對應的內部元件 ]
C# MAUI GridLayout 使用程式隱藏/顯示行列元素 & UI自動補齊[ 移除/插入 GridLayout內的行列配置(RowDefinitions/ColumnDefinitions)和對應的內部元件 ]
資料來源: 公司專案
VTSTORE.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"
x:Class="VPOS.Views.VTSTORE"
xmlns:local="clr-namespace:VPOS.CustomControls"
Background="Transparent" Title="">
<Border x:Name="FullBorder" Stroke="White" StrokeThickness="1" Background="#194a6e">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="FullGrid" RowDefinitions="0.6*,1.1*,10.3*" ColumnDefinitions="*" RowSpacing="0">
<Border x:Name="HeadBorder" Stroke="Blue" StrokeThickness="1" Background="Transparent" Margin="0" Padding="0" Grid.Row="0" Grid.Column="0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<Grid x:Name="HeadGrid" RowDefinitions="*" ColumnDefinitions="19*,1*">
<Label x:Name="TitleLable"
Text="點點食訂單查詢" TextColor="White" FontSize="Medium" Grid.Row="0" Grid.Column="0"
FontAutoScalingEnabled="True" VerticalOptions="Center" HorizontalOptions="Center" />
<Button x:Name="CloseBtn" FontSize="Medium" BackgroundColor="Transparent" Clicked="CloseBtn_Clicked" Text="X" Grid.Row="0" Grid.Column="1"/>
</Grid>
</Border>
<Border x:Name="TopBorder" Stroke="Blue" StrokeThickness="1" Background="Transparent" Margin="0" Padding="0" Grid.Row="1" Grid.Column="0">
<Grid x:Name="TopGrid" ColumnDefinitions="*,*,*,*,*,*,*" ColumnSpacing="20" Padding="20,5,0,5">
<Button x:Name="TopBtn00" Text="掃描訂單" BorderColor="White" TextColor="White" BackgroundColor="#2470a0" Grid.Column="0" Clicked="TopBtn00_Clicked"/>
<Button x:Name="TopBtn01" Text="等待處理(現場單)" BorderColor="White" TextColor="White" BackgroundColor="#2470a0" Grid.Column="1" Clicked="TopBtn01_Clicked"/>
<Button x:Name="TopBtn02" Text="等待處理(預購單)" BorderColor="White" TextColor="White" BackgroundColor="#2470a0" Grid.Column="2" Clicked="TopBtn02_Clicked"/>
<Button x:Name="TopBtn03" Text="製作中" BorderColor="White" TextColor="White" BackgroundColor="#2470a0" Grid.Column="3" Clicked="TopBtn03_Clicked"/>
<Button x:Name="TopBtn04" Text="進階查詢" BorderColor="White" TextColor="White" BackgroundColor="#2470a0" Grid.Column="4" Clicked="TopBtn04_Clicked"/>
<Button x:Name="TopBtn05" Text="離開" BorderColor="White" TextColor="White" BackgroundColor="#2470a0" Grid.Column="5" Clicked="CloseBtn_Clicked"/>
<ImageButton x:Name="KeyboardBtn" Source="keyboard.png" BackgroundColor="Transparent" Grid.Column="6" WidthRequest="60" HeightRequest="60" HorizontalOptions="Center" VerticalOptions="Center" Clicked="KeyboardBtn_Clicked"/>
</Grid>
</Border>
<Grid x:Name="BodyGrid" Grid.Row="2" RowDefinitions="*" ColumnDefinitions="18*,2*" Margin="0,0,0,0">
<Grid x:Name="LeftGrid" RowDefinitions="1.3*,9*" ColumnDefinitions="*" Background="Transparent" Margin="0" Padding="0" Grid.Row="0" Grid.Column="0">
<Grid x:Name="LeftTopGrid" RowDefinitions="*" ColumnDefinitions="0.9*,0.9*,1.8*,0.4*" Margin="0" Padding="15,15,10,5" Grid.Row="0" Grid.Column="0" ColumnSpacing="15">
<Border Stroke="White" StrokeThickness="1" Background="Transparent" Margin="0" Padding="10" Grid.Column="0">
<Entry x:Name="OrderNoEntry" FontSize="Subtitle" TextColor="Black" BackgroundColor="White" Placeholder="輸入訂單號碼" />
</Border>
<Label Text="點點食訂單編號" TextColor="White" BackgroundColor="#194a6e" VerticalOptions="Start" HorizontalOptions="Start" Padding="0" Margin="15,-10,0,0" Grid.Column="0"/>
<Border Stroke="White" StrokeThickness="1" Background="Transparent" Margin="0" Padding="10" Grid.Column="1">
<Picker x:Name="StatePicker" FontSize="Subtitle" Title="" BackgroundColor="White" WidthRequest="180"/>
</Border>
<Label Text="訂單狀態" TextColor="White" BackgroundColor="#194a6e" VerticalOptions="Start" HorizontalOptions="Start" Padding="0" Margin="15,-10,0,0" Grid.Column="1"/>
<Border Stroke="White" StrokeThickness="1" Background="Transparent" Margin="0" Padding="0" Grid.Column="2">
<Grid RowDefinitions="*" ColumnDefinitions="*,10,*" Margin="0" Padding="10">
<DatePicker x:Name="StartDatePicker" FontSize="Subtitle" BackgroundColor="White" WidthRequest="250" Grid.Column="0"/>
<Label Text="~" FontSize="Subtitle" TextColor="White" BackgroundColor="#194a6e" Padding="0" VerticalOptions="Center" Grid.Column="1"/>
<DatePicker x:Name="EndDatePicker" FontSize="Subtitle" BackgroundColor="White" WidthRequest="250" Grid.Column="2"/>
</Grid>
</Border>
<Label Text="訂單日期" TextColor="White" BackgroundColor="#194a6e" VerticalOptions="Start" HorizontalOptions="Start" Padding="0" Margin="15,-10,0,0" Grid.Column="2"/>
<Button x:Name="MiddleBtn" Text="查詢" BorderColor="White" TextColor="White" BackgroundColor="#cc6600" Grid.Column="3" Clicked="MiddleBtn_Clicked"/>
</Grid>
<ScrollView Margin="15,0,10,10" HorizontalScrollBarVisibility="Always" VerticalScrollBarVisibility="Always" Grid.Row="1">
<ListView x:Name="OrderListView"
SelectionMode="Single"
BackgroundColor="White"
IsPullToRefreshEnabled="True" IsRefreshing="True"
VerticalScrollBarVisibility="Never"
ItemSelected="OrderListView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- ListView 資料結構標準: ListView.ItemTemplate -> DataTemplate -> ViewCell-->
<Grid BackgroundColor="{Binding BColor}" ColumnDefinitions="200,150,300,200,250,150,150,300" Margin="10">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#8df2f2" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Red" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Label Text="{Binding No}" FontSize="{Binding Font_Size}" FontAutoScalingEnabled="True" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="0" />
<Label Text="{Binding Type}" FontSize="{Binding Font_Size}" FontAutoScalingEnabled="True" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="1" />
<Label Text="{Binding Information}" FontSize="{Binding Font_Size}" FontAutoScalingEnabled="True" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="2" />
<Label Text="{Binding Name}" FontSize="{Binding Font_Size}" FontAutoScalingEnabled="True" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="3" />
<Label Text="{Binding Time}" FontSize="{Binding Font_Size}" FontAutoScalingEnabled="True" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="4" />
<Label Text="{Binding Price}" FontSize="{Binding Font_Size}" FontAutoScalingEnabled="True" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="5" />
<Label Text="{Binding PayType}" FontSize="{Binding Font_Size}" FontAutoScalingEnabled="True" HorizontalTextAlignment="End" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="6" />
<Label Text="{Binding State}" FontSize="{Binding Font_Size}" FontAutoScalingEnabled="True" HorizontalTextAlignment="End" VerticalTextAlignment="Center" TextColor="{Binding Font_Color}" Grid.Column="7" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</Grid>
<Border x:Name="RightBorder" Stroke="Blue" StrokeThickness="1" Background="Transparent" Margin="0" Padding="0" Grid.Row="0" Grid.Column="1">
<VerticalStackLayout x:Name="RightVerticalStackLayout" Spacing="20" Padding="5,20,5,0">
<Button x:Name="RightBtn00" HeightRequest="60" Text="訂單資訊" BorderColor="White" TextColor="White" BackgroundColor="#cc6600" Clicked="RightBtn00_Clicked"/>
<Button x:Name="RightBtn01" HeightRequest="60" Text="接收訂單" BorderColor="White" TextColor="White" BackgroundColor="#cc6600" Clicked="RightBtn01_Clicked"/>
<Button x:Name="RightBtn02" HeightRequest="60" Text="婉拒訂單" BorderColor="White" TextColor="White" BackgroundColor="#cc6600" Clicked="RightBtn02_Clicked"/>
<Button x:Name="RightBtn03" HeightRequest="60" Text="補印訂單" BorderColor="White" TextColor="White" BackgroundColor="#cc6600" Clicked="RightBtn03_Clicked"/>
<Button x:Name="RightBtn04" HeightRequest="60" Text="移除訂單" BorderColor="White" TextColor="White" BackgroundColor="#cc6600" Clicked="RightBtn04_Clicked"/>
</VerticalStackLayout>
</Border>
</Grid>
</Grid>
</Border>
</ContentPage>
VTSTORE.cs
using System.Collections.ObjectModel;
namespace VPOS.Views;
public class VTSTOREOrderItem
{
public string id { get; set; }
public string No { get; set; }//訂單號
public string Type { get; set; }//點餐方式
public string Information { get; set; }//訂單資訊
public string Name { get; set; }//客戶名稱
public string Time { get; set; }//點餐/預計取餐時間
public string Price { get; set; }//訂單金額
public string PayType { get; set; }//付款方式
public string State { get; set; }//訂單狀態
public Color Font_Color { get; set; }
public Color Default_Color { get; set; }
public double Font_Size { get; set; }
public Color BColor { get; set; }
}
public partial class VTSTORE : ContentPage
{
public static bool m_blnRun = false;
private ObservableCollection<VTSTOREOrderItem> m_VTSTOREOrderItems = new ObservableCollection<VTSTOREOrderItem>();
public ObservableCollection<PickerModel> PickerList { get; set; } = new ObservableCollection<PickerModel>();
public PickerModel m_SelectedPicker { get; set; } = new PickerModel();
public int m_SelectedPickerIndex = -1;
public VTSTORE()
{
InitializeComponent();
m_blnRun = false;
OrderListView.ItemsSource = m_VTSTOREOrderItems;//綁定購物車資料結構
//Picker 變數初始化
if (MainPage.m_dblScreenWidth==1920)
{
StatePicker.WidthRequest = 250;
StartDatePicker.WidthRequest = 250;
EndDatePicker.WidthRequest = 250;
}
else if (MainPage.m_dblScreenWidth == 1366)
{
StatePicker.WidthRequest = 220;
StartDatePicker.WidthRequest = 220;
EndDatePicker.WidthRequest = 220;
}
else
{
StatePicker.WidthRequest = 150;
StartDatePicker.WidthRequest = 150;
EndDatePicker.WidthRequest = 150;
}
String[] ItemState = new String[6] { "未完成的訂單", "等待接單", "已經接單，處理中", "婉拒訂單", "訂單已完成", "店顛已註銷" };
for (int i = 0; i < ItemState.Length; i++)
{
PickerModel ItemObject = new PickerModel();
ItemObject.Picker_Name = ItemState[i];
ItemObject.Picker_Value = i.ToString();
PickerList.Add(ItemObject);
}
StatePicker.ItemsSource = PickerList;
StatePicker.ItemDisplayBinding = new Binding("Picker_Name");
StatePicker.SelectedIndex = 0;
//---Picker 變數初始化
LeftTopGridHide();//隱藏/移除GridLayout
//---
//配合背景透明設定達到調整畫面大小功能
int intMarginX, intMarginY;
intMarginX = 50 / 4; //(int)((MainPage.m_dblScreenWidth - 1000) / 4);
intMarginY = 50 / 4; //(int)((MainPage.m_dblScreenHeight - 700) / 4);
FullBorder.Margin = new Thickness(intMarginX, intMarginY, intMarginX, intMarginY);
//---配合背景透明設定達到調整畫面大小功能
}
private async void CloseBtn_Clicked(object sender, EventArgs e)
{
m_blnRun = false;
await Navigation.PopModalAsync();
}
private void KeyboardBtn_Clicked(object sender, EventArgs e)
{
MainPage.ShowSoftKeyboard();//呼叫軟體鍵盤
}
private void TopBtn04_Clicked(object sender, EventArgs e)//進階查詢
{
LeftTopGridShow();//顯示/插入GridLayout
SetTopBtnColor(TopBtn04);//TopBtn點擊按鈕顏色切換
}
private void TopBtn03_Clicked(object sender, EventArgs e)//製作中
{
LeftTopGridHide();//隱藏/移除GridLayout
SetTopBtnColor(TopBtn03);//TopBtn點擊按鈕顏色切換
}
private void TopBtn02_Clicked(object sender, EventArgs e)//等待處理(預購單)
{
LeftTopGridHide();//隱藏/移除GridLayout
SetTopBtnColor(TopBtn02);//TopBtn點擊按鈕顏色切換
}
private void TopBtn01_Clicked(object sender, EventArgs e)//等待處理(現場單)
{
LeftTopGridHide();//隱藏/移除GridLayout
SetTopBtnColor(TopBtn01);//TopBtn點擊按鈕顏色切換
}
private void TopBtn00_Clicked(object sender, EventArgs e)//掃描訂單
{
LeftTopGridHide();//隱藏/移除GridLayout
SetTopBtnColor(TopBtn00);//TopBtn點擊按鈕顏色切換
}
private void RightBtn00_Clicked(object sender, EventArgs e)//訂單資訊
{
}
private void RightBtn01_Clicked(object sender, EventArgs e)//接收訂單
{
}
private void RightBtn02_Clicked(object sender, EventArgs e)//婉拒訂單
{
}
private void RightBtn03_Clicked(object sender, EventArgs e)//補印訂單
{
}
private void RightBtn04_Clicked(object sender, EventArgs e)//移除訂單
{
}
private void MiddleBtn_Clicked(object sender, EventArgs e)//查詢
{
}
private void OrderListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
}
private void SetTopBtnColor(Button BtnBuf)//TopBtn點擊按鈕顏色切換
{
Color m_ColorTopBtnNormal = Color.FromHex("#2470a0");
Color m_ColorTopBtnClicked = Color.FromHex("#cc6600");
TopBtn00.BackgroundColor = m_ColorTopBtnNormal;
TopBtn01.BackgroundColor = m_ColorTopBtnNormal;
TopBtn02.BackgroundColor = m_ColorTopBtnNormal;
TopBtn03.BackgroundColor = m_ColorTopBtnNormal;
TopBtn04.BackgroundColor = m_ColorTopBtnNormal;
BtnBuf.BackgroundColor = m_ColorTopBtnClicked;
}
private void LeftTopGridHide()//隱藏/移除GridLayout
{
if(LeftTopGrid.IsVisible)
{
LeftTopGrid.IsVisible = false;
LeftGrid.RowDefinitions.RemoveAt(0);
}
}
private void LeftTopGridShow()//顯示/插入GridLayout
{
if (!LeftTopGrid.IsVisible)
{
LeftTopGrid.IsVisible = true;
GridLength height = new GridLength(1.3, GridUnitType.Star);
RowDefinition RowDefinitionBuf = new RowDefinition(height);
LeftGrid.RowDefinitions.Insert(0, RowDefinitionBuf);
}
}
}
One thought on “C# MAUI GridLayout 使用程式隱藏/顯示行列元素 & UI自動補齊[ 移除/插入 GridLayout內的行列配置(RowDefinitions/ColumnDefinitions)和對應的內部元件 ]”
C# MAUI GridLayout 使用程式隱藏/顯示行列元素 & UI自動補齊[ 移除/插入 GridLayout內的行列配置(RowDefinitions/ColumnDefinitions)和對應的內部元件 ] ~ 非起始列 就要自己把移除列的高度指定到其他列
private void TabBorderShowHide(int index)
{
switch (index)
{
case 1:
TabBtn01.BackgroundColor = Color.FromHex("#14539A");
TabBtn02.BackgroundColor = Color.FromHex("#0C3561");
TabBorder01.IsVisible = true;
TabBorder02.IsVisible = false;
SetPicker01Value();
SetPicker02Value();
SetPicker03Value();
SetPicker04Value();
if (!FooterGrid.IsVisible)
{
//---
//指定 BodyGrid 所以 BodyGrid 從11.4* -> 10.4*
var row = FullGrid.RowDefinitions[1];
row.Height = new GridLength(10.4, GridUnitType.Star);
//---指定 BodyGrid 所以 BodyGrid 從11.4* -> 10.4*
FooterGrid.IsVisible = true;
GridLength height = new GridLength(1, GridUnitType.Star);
RowDefinition RowDefinitionBuf = new RowDefinition(height);
FullGrid.RowDefinitions.Insert(2, RowDefinitionBuf);
}
break;
case 2:
TabBtn02.BackgroundColor = Color.FromHex("#14539A");
TabBtn01.BackgroundColor = Color.FromHex("#0C3561");
TabBorder02.IsVisible = true;
TabBorder01.IsVisible = false;
SetPicker05Value();
SetPicker06Value();
SetPicker07Value();
if (FooterGrid.IsVisible)
{
FooterGrid.IsVisible = false;
FullGrid.RowDefinitions.RemoveAt(2);
//---
//指定將移除列的高度1*放到 BodyGrid 所以 BodyGrid 從10.4* -> 11.4*
var row = FullGrid.RowDefinitions[1];
row.Height = new GridLength(11.4, GridUnitType.Star);
//---指定將移除列的高度1*放到 BodyGrid 所以 BodyGrid 從10.4* -> 11.4*
}
break;
}
}