求助：Xamarin Forms中实现按钮点击显示颜色列表功能

方法一：使用系统原生ActionSheet（简单快捷） #

这是最适合新手的实现方式，借助Xamarin.Forms内置的DisplayActionSheet方法，点击按钮后直接弹出底部选择列表。

1. XAML布局代码

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourProjectNamespace.YourPage">
    <StackLayout Padding="20">
        <!-- 绑定点击事件的按钮 -->
        <Button Text="选择颜色" 
                Clicked="OnColorSelectButtonClicked"
                VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

2. 后台C#逻辑代码

using Xamarin.Forms;

namespace YourProjectNamespace
{
    public partial class YourPage : ContentPage
    {
        public YourPage()
        {
            InitializeComponent();
        }

        private async void OnColorSelectButtonClicked(object sender, EventArgs e)
        {
            // 定义需要展示的颜色选项
            var colorChoices = new[] { "红色", "绿色", "蓝色", "黄色", "橙色" };
            
            // 弹出选择列表，参数依次为：标题、取消按钮文本、销毁按钮文本、选项数组
            var selectedColor = await DisplayActionSheet("选择颜色", "取消", null, colorChoices);
            
            // 处理用户选择（排除点击取消的情况）
            if (!string.IsNullOrWhiteSpace(selectedColor) && selectedColor != "取消")
            {
                // 示例：将按钮背景色改为选中的颜色
                var btn = sender as Button;
                btn.BackgroundColor = selectedColor switch
                {
                    "红色" => Color.Red,
                    "绿色" => Color.Green,
                    "蓝色" => Color.Blue,
                    "黄色" => Color.Yellow,
                    "橙色" => Color.Orange,
                    _ => btn.BackgroundColor
                };
            }
        }
    }
}

方法二：自定义弹窗（带颜色预览，更灵活） #

如果需要更直观的颜色展示（比如显示对应颜色块），可以用自定义弹窗实现。

1. 创建自定义弹窗页面

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourProjectNamespace.ColorPickerPopup">
    <Frame BackgroundColor="White" 
           CornerRadius="10"
           WidthRequest="300"
           HeightRequest="400">
        <StackLayout>
            <Label Text="选择颜色" FontSize="Large" Margin="0,10,0,10" HorizontalOptions="Center" />
            <!-- 颜色列表 -->
            <ListView x:Name="ColorListView" 
                      RowHeight="50"
                      ItemSelected="OnColorItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal" Padding="10">
                                <!-- 颜色预览块 -->
                                <BoxView Color="{Binding Color}" WidthRequest="40" HeightRequest="40" CornerRadius="5" />
                                <!-- 颜色名称 -->
                                <Label Text="{Binding Name}" VerticalOptions="Center" Margin="10,0,0,0" />
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <Button Text="取消" Clicked="OnCancelClicked" Margin="0,10,0,0" />
        </StackLayout>
    </Frame>
</ContentView>

2. 弹窗后台代码

using System.Collections.Generic;
using Xamarin.Forms;

namespace YourProjectNamespace
{
    public partial class ColorPickerPopup : ContentView
    {
        // 定义事件，用于通知主页面用户选择的颜色
        public event EventHandler<Color> ColorSelected;

        public ColorPickerPopup()
        {
            InitializeComponent();
            
            // 填充颜色数据
            ColorListView.ItemsSource = new List<ColorItem>
            {
                new ColorItem { Name = "红色", Color = Color.Red },
                new ColorItem { Name = "绿色", Color = Color.Green },
                new ColorItem { Name = "蓝色", Color = Color.Blue },
                new ColorItem { Name = "粉色", Color = Color.Pink },
                new ColorItem { Name = "青色", Color = Color.Cyan }
            };
        }

        private void OnColorItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem is ColorItem selectedItem)
            {
                ColorSelected?.Invoke(this, selectedItem.Color);
                // 关闭弹窗
                Application.Current.MainPage.Navigation.PopModalAsync();
            }
        }

        private void OnCancelClicked(object sender, EventArgs e)
        {
            Application.Current.MainPage.Navigation.PopModalAsync();
        }

        // 辅助类，存储颜色名称和对应Color对象
        public class ColorItem
        {
            public string Name { get; set; }
            public Color Color { get; set; }
        }
    }
}

3. 主页面调用弹窗
   修改主页面的按钮点击事件：

private async void OnColorSelectButtonClicked(object sender, EventArgs e)
{
    var popup = new ColorPickerPopup();
    popup.ColorSelected += (s, selectedColor) =>
    {
        // 处理选中的颜色，比如修改按钮背景
        var btn = sender as Button;
        btn.BackgroundColor = selectedColor;
    };
    
    // 以模态方式弹出弹窗
    await Navigation.PushModalAsync(new ContentPage
    {
        BackgroundColor = Color.FromRgba(0,0,0,0.5), // 半透明背景
        Content = popup,
        ContentLayout = new AbsoluteLayout()
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        }
    });
}

内容的提问来源于stack exchange，提问作者Pushkar