You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Xamarin.Forms中通过按钮点击事件实现Picker选中项跨页面显示?

解决Xamarin.Forms中跨页面传递Picker选中项的问题

方法一:构造函数直接传值(新手首选,简单直观)

这是最容易上手的方式,直接在跳转页面时把Picker选中项通过构造函数传给目标页面。

  1. Picker所在页面(PageA)的XAML:给Picker命名,方便后台获取选中项
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.PageA">
    <StackLayout Padding="20">
        <Picker x:Name="MyPicker" Title="请选择一项" Margin="0,0,0,20">
            <Picker.Items>
                <x:String>选项1</x:String>
                <x:String>选项2</x:String>
                <x:String>选项3</x:String>
            </Picker.Items>
        </Picker>
        <Button Text="跳转显示选中项" Clicked="OnJumpButtonClicked"/>
    </StackLayout>
</ContentPage>
  1. PageA后台代码:按钮点击时获取选中项,跳转并传值
private void OnJumpButtonClicked(object sender, EventArgs e)
{
    // 先判断是否选中了项
    if (MyPicker.SelectedItem == null) return;
    
    string selectedItem = MyPicker.SelectedItem.ToString();
    // 跳转到PageB并传入选中项
    Navigation.PushAsync(new PageB(selectedItem));
}
  1. 目标页面(PageB)的XAML:用Label显示传递过来的值
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.PageB">
    <StackLayout Padding="20">
        <Label x:Name="ResultLabel" FontSize="Large"/>
    </StackLayout>
</ContentPage>
  1. PageB后台代码:通过构造函数接收值并显示
public PageB(string selectedItem)
{
    InitializeComponent();
    ResultLabel.Text = $"你选中的是:{selectedItem}";
}

方法二:使用MessagingCenter传递(适合复杂场景)

如果页面之间耦合度高,或者需要跨多个页面传递数据,可以用Xamarin.Forms自带的MessagingCenter消息机制。

  1. PageA按钮点击事件:发送包含选中项的消息
private void OnJumpButtonClicked(object sender, EventArgs e)
{
    if (MyPicker.SelectedItem == null) return;
    
    string selectedItem = MyPicker.SelectedItem.ToString();
    // 发送消息,指定消息标识和传递的内容
    MessagingCenter.Send<object, string>(this, "PickerSelectedItem", selectedItem);
    Navigation.PushAsync(new PageB());
}
  1. PageB订阅消息:在页面出现时订阅消息,显示内容;消失时取消订阅避免内存泄漏
protected override void OnAppearing()
{
    base.OnAppearing();
    // 订阅消息,匹配标识"PickerSelectedItem"
    MessagingCenter.Subscribe<object, string>(this, "PickerSelectedItem", (sender, item) =>
    {
        ResultLabel.Text = $"你选中的是:{item}";
    });
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
    // 取消订阅,防止内存泄漏
    MessagingCenter.Unsubscribe<object, string>(this, "PickerSelectedItem");
}

关于你之前绑定ItemsSource无效的问题

大概率是没正确设置BindingContext或者未实现INotifyPropertyChanged接口。如果想用MVVM绑定Picker,参考以下步骤:

  1. 创建ViewModel:实现属性变更通知,提供ItemsSource和SelectedItem属性
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace YourApp.ViewModels
{
    public class PickerViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<string> _pickerItems;
        public ObservableCollection<string> PickerItems
        {
            get => _pickerItems;
            set
            {
                _pickerItems = value;
                OnPropertyChanged();
            }
        }

        private string _selectedItem;
        public string SelectedItem
        {
            get => _selectedItem;
            set
            {
                _selectedItem = value;
                OnPropertyChanged();
            }
        }

        public PickerViewModel()
        {
            // 初始化Picker选项
            PickerItems = new ObservableCollection<string>
            {
                "选项1", "选项2", "选项3"
            };
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
  1. PageA绑定ViewModel:设置BindingContext并绑定Picker的属性
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:YourApp.ViewModels"
             x:Class="YourApp.PageA">
    <ContentPage.BindingContext>
        <vm:PickerViewModel/>
    </ContentPage.BindingContext>
    <StackLayout Padding="20">
        <Picker ItemsSource="{Binding PickerItems}" 
                SelectedItem="{Binding SelectedItem}" 
                Title="请选择一项" 
                Margin="0,0,0,20"/>
        <Button Text="跳转显示" Clicked="OnJumpButtonClicked"/>
    </StackLayout>
</ContentPage>
  1. 获取绑定的SelectedItem:在按钮点击时直接用ViewModel的属性
private void OnJumpButtonClicked(object sender, EventArgs e)
{
    var vm = BindingContext as PickerViewModel;
    if (vm == null || string.IsNullOrEmpty(vm.SelectedItem)) return;
    
    Navigation.PushAsync(new PageB(vm.SelectedItem));
}

内容的提问来源于stack exchange,提问作者Rishap Kumar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.15 14:50:37