C# Maui VerticalStackLayout scroll 範例

資料來源: ChatGPT3.5/Bard/Copilot

ChatGPT3.5

using Microsoft.Maui.Controls;

namespace YourNamespace
{
    public class YourPage : ContentPage
    {
        public YourPage()
        {
            var stackLayout = new StackLayout();
            // 在這裡添加垂直排列的元件至 stackLayout

            var scrollView = new ScrollView
            {
                Content = stackLayout,
                Orientation = ScrollOrientation.Vertical // 設置為垂直捲動
            };

            Content = scrollView;
        }
    }
}

Bard

<!-- 方案01.將 VerticalStackLayout 作為 ScrollView 的子元素 -->
<ScrollView>
  <VerticalStackLayout>
    <Label Text="項目 1" />
    <Label Text="項目 2" />
    <Label Text="項目 3" />
    </VerticalStackLayout>
</ScrollView>

<!-- 方案02.使用 CollectionView: -->
<CollectionView ItemsSource="{Binding Items}">
  <CollectionView.ItemTemplate>
    <DataTemplate>
      <VerticalStackLayout>
        <Label Text="{Binding Name}" />
        <Image Source="{Binding ImageUrl}" />
      </VerticalStackLayout>
    </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>

Copilot

using Microsoft.Maui;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Xaml;
using System.Linq;

namespace MauiApp1
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new MonkeysViewModel();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
            Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
            collectionView.ScrollTo(monkey, position: ScrollToPosition.Center, animate: true);
        }
    }
}

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MauiApp1.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <StackLayout>
        <Button Text="Scroll to Proboscis Monkey" Clicked="Button_Clicked" />
        <CollectionView x:Name="collectionView" ItemsSource="{Binding Monkeys}" SelectionMode="None">
            <CollectionView.ItemsLayout>
                <VerticalStackLayout Spacing="10" Margin="10" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="{Binding ImageUrl}" Aspect="AspectFill" HeightRequest="60" WidthRequest="60" />
                        <StackLayout Grid.Column="1" Spacing="0" Margin="10,0,0,0" VerticalOptions="Center">
                            <Label Text="{Binding Name}" FontAttributes="Bold" />
                            <Label Text="{Binding Location}" FontAttributes="Italic" />
                            <Label Text="{Binding Details}" />
                        </StackLayout>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

</ContentPage>

自己實作範例

<?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.FoodMeal"
             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.8*,10.2*,1*" ColumnDefinitions="*" >
            <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="Large" Grid.Row="0" Grid.Column="0"
                        FontAutoScalingEnabled="True" VerticalOptions="Center" HorizontalOptions="Center" />
                    <Button x:Name="CloseBtn" FontSize="Large" BackgroundColor="Transparent" Clicked="CloseBtn_Clicked"  Text="X" Grid.Row="0" Grid.Column="1"/>
                </Grid>
            </Border>

            <Grid x:Name="BodyGrid" Grid.Row="1" RowDefinitions="*" ColumnDefinitions="10*,10*" Margin="0,5,0,0">
                <Grid x:Name="LeftBodyGrid" Grid.Column="0" RowDefinitions="2.6*,7.4*" RowSpacing="10" ColumnSpacing="2" ColumnDefinitions="*" Margin="10,0,5,0" Padding="0">
                    <BoxView Color="Blue" Grid.Row="0" />
                    <ScrollView  Grid.Row="1">
                        <VerticalStackLayout BackgroundColor="Red" Padding="10,5,10,5" Spacing="10">
                            <VerticalStackLayout BackgroundColor="Green" Grid.Row="1" Padding="5,5,5,5" Spacing="10" MinimumHeightRequest="110">
                            </VerticalStackLayout>
                            <VerticalStackLayout BackgroundColor="Green" Grid.Row="1" Padding="5,5,5,5" Spacing="10" MinimumHeightRequest="110">
                            </VerticalStackLayout>
                            <VerticalStackLayout BackgroundColor="Green" Grid.Row="1" Padding="5,5,5,5" Spacing="10" MinimumHeightRequest="110">
                            </VerticalStackLayout>
                            <VerticalStackLayout BackgroundColor="Green" Grid.Row="1" Padding="5,5,5,5" Spacing="10" MinimumHeightRequest="110">
                            </VerticalStackLayout>
                            <VerticalStackLayout BackgroundColor="Green" Grid.Row="1" Padding="5,5,5,5" Spacing="10" MinimumHeightRequest="110">
                            </VerticalStackLayout>
                        </VerticalStackLayout>
                    </ScrollView>

                </Grid>

                <Grid x:Name="RightBodyGrid" Grid.Column="1" RowSpacing="2" ColumnSpacing="2" RowDefinitions="2*,6*,2*" Margin="5,0,10,0">
                    <BoxView Color="Red" Grid.Row="0" />
                    <BoxView Color="Green" Grid.Row="1" />
                    <BoxView Color="Blue" Grid.Row="2" />
                </Grid>
            </Grid>

            <Grid x:Name="FootGrid" Grid.Row="2" RowDefinitions="*" ColumnDefinitions="6.7*,3*,0.6*,3*,6.7*" Margin="0,5">
                <Button x:Name="SaveBtn" TextColor="White" BackgroundColor="#cc6600" FontSize="Subtitle" VerticalOptions="Fill" HorizontalOptions="Fill" Text="確定" Clicked="SaveBtn_Clicked" Grid.Column="1"/>
                <Button x:Name="ExitBtn" TextColor="White" BackgroundColor="#cc6600" FontSize="Subtitle" VerticalOptions="Fill" HorizontalOptions="Fill" Text="取消" Clicked="CloseBtn_Clicked" Grid.Column="3"/>
            </Grid>
        </Grid>
    </Border>
</ContentPage>