Xamarin双Picker控件模板：跨页面选中索引维护与事件处理

Hey there! Let's tackle your two main requirements step by step, based on the code you provided.

The core issue with your current setup is that each page defines its own BindableProperty for picker indices, so selections are isolated per page. To fix this, we'll use a shared global ViewModel that all pages and the control template bind to. This ensures picker selections stay in sync no matter which page you're on.

Step 1: Create a Shared Picker ViewModel #

First, make a view model that implements INotifyPropertyChanged (to enable data binding) and holds our picker state, including dynamic item sources:

using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace SimpleTheme
{
    public class PickerViewModel : INotifyPropertyChanged
    {
        private int _firstSelectedIndex = 2;
        private int _secondSelectedIndex = 3;
        private List<string> _firstItems;
        private List<string> _secondItems;

        public int FirstSelectedIndex
        {
            get => _firstSelectedIndex;
            set
            {
                if (_firstSelectedIndex != value)
                {
                    _firstSelectedIndex = value;
                    OnPropertyChanged();
                    // Update second picker's items when first selection changes
                    UpdateSecondPickerItems();
                }
            }
        }

        public int SecondSelectedIndex
        {
            get => _secondSelectedIndex;
            set
            {
                if (_secondSelectedIndex != value)
                {
                    _secondSelectedIndex = value;
                    OnPropertyChanged();
                }
            }
        }

        public List<string> FirstItems
        {
            get => _firstItems;
            set
            {
                _firstItems = value;
                OnPropertyChanged();
            }
        }

        public List<string> SecondItems
        {
            get => _secondItems;
            set
            {
                _secondItems = value;
                OnPropertyChanged();
            }
        }

        public PickerViewModel()
        {
            // Initialize first picker items (replace with model data at runtime)
            FirstItems = new List<string>
            {
                "FirstPicker_1", "FirstPicker_2", "FirstPicker_3", "FirstPicker_4", "FirstPicker_5"
            };
            // Set initial second picker items based on default first selection
            UpdateSecondPickerItems();
        }

        private void UpdateSecondPickerItems()
        {
            // Dynamically generate second picker items based on first selection
            SecondItems = FirstSelectedIndex switch
            {
                0 => new List<string> { "SecondPicker_1_1", "SecondPicker_1_2" },
                1 => new List<string> { "SecondPicker_2_1", "SecondPicker_2_2", "SecondPicker_2_3" },
                2 => new List<string> { "SecondPicker_3_1" },
                3 => new List<string> { "SecondPicker_4_1", "SecondPicker_4_2", "SecondPicker_4_3", "SecondPicker_4_4" },
                4 => new List<string> { "SecondPicker_5_1", "SecondPicker_5_2" },
                _ => new List<string>()
            };

            // Reset second picker index if it's out of bounds for new items
            if (SecondSelectedIndex >= SecondItems.Count)
            {
                SecondSelectedIndex = 0;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Step 2: Update the Control Template to Bind to the Global ViewModel #

Register the view model as a static resource in App.xaml, then update the pickers to bind to its properties:

<?xml version="1.0" encoding="UTF-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:SimpleTheme"
             x:Class="SimpleTheme.App">
    <Application.Resources>
        <ResourceDictionary>
            <!-- Register global picker view model -->
            <local:PickerViewModel x:Key="GlobalPickerViewModel" />
            
            <ControlTemplate x:Key="ActiveProfileTemplate">
                <Grid Padding="5,0,0,0" BackgroundColor="#f7f6fb">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.1*" />
                        <RowDefinition Height="0.8*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <BoxView Grid.ColumnSpan="2"/>
                    
                    <Picker x:Name="FirstPicker" 
                            Title="FirstPicker" 
                            SelectedIndex="{Binding Source={StaticResource GlobalPickerViewModel}, Path=FirstSelectedIndex}"
                            ItemsSource="{Binding Source={StaticResource GlobalPickerViewModel}, Path=FirstItems}"
                            Grid.Column="0" 
                            HorizontalOptions="Center" 
                            VerticalOptions="Center" 
                            WidthRequest="180" 
                            FontSize="Small" 
                            TextColor="#214189"/>
                    
                    <Picker x:Name="SecondPicker" 
                            Title="SecondPicker" 
                            SelectedIndex="{Binding Source={StaticResource GlobalPickerViewModel}, Path=SecondSelectedIndex}"
                            ItemsSource="{Binding Source={StaticResource GlobalPickerViewModel}, Path=SecondItems}"
                            Grid.Column="1" 
                            HorizontalOptions="Center" 
                            VerticalOptions="Center" 
                            WidthRequest="210" 
                            FontSize="Small" 
                            TextColor="#214189"/>
                    
                    <ContentPresenter Grid.Row="1" Grid.ColumnSpan="2"/>
                </Grid>
            </ControlTemplate>
        </ResourceDictionary>
    </Application.Resources>
</Application>

With the global view model, we can bind page labels directly to the selected items, and handle dynamic item updates in the view model.

Update HomePage to Bind to the Global ViewModel #

Modify HomePage.xaml to use the global view model and bind labels to show selected items:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:SimpleTheme"
             x:Class="SimpleTheme.HomePage">
    <ContentView x:Name="contentView" 
                 Padding="0,20,0,0" 
                 ControlTemplate="{StaticResource ActiveProfileTemplate}"
                 BindingContext="{StaticResource GlobalPickerViewModel}">
        <StackLayout VerticalOptions="CenterAndExpand">
            <Label Text="Welcome to the HomePage!" HorizontalOptions="Center" />
            <Label x:Name="lbl_firstpicker" 
                   Text="{Binding FirstItems[FirstSelectedIndex], FallbackValue='First Picker Selected Item'}" 
                   HorizontalOptions="Center" 
                   TextColor="DarkRed"/>
            <Label x:Name="lbl_secondpicker" 
                   Text="{Binding SecondItems[SecondSelectedIndex], FallbackValue='Second Picker Selected Item'}" 
                   HorizontalOptions="Center" 
                   TextColor="DarkRed"/>
        </StackLayout>
    </ContentView>
</ContentPage>

Simplify HomePage.cs (no more local bindable properties needed):

using Xamarin.Forms;

namespace SimpleTheme
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();
            // Optional: Subscribe to view model changes for page-specific logic
            var pickerVM = (PickerViewModel)BindingContext;
            pickerVM.PropertyChanged += PickerVM_PropertyChanged;
        }

        private void PickerVM_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == nameof(PickerViewModel.FirstSelectedIndex))
            {
                // Add page-specific logic here (e.g., show alert, update other UI)
                DisplayAlert("Home Page", $"First picker changed to index {((PickerViewModel)sender).FirstSelectedIndex}", "OK");
            }
        }
    }
}

Repeat for DetailPage #

Do the same for DetailPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:SimpleTheme"
             x:Class="SimpleTheme.DetailPage">
    <ContentView x:Name="contentView" 
                 Padding="0,20,0,0" 
                 ControlTemplate="{StaticResource ActiveProfileTemplate}"
                 BindingContext="{StaticResource GlobalPickerViewModel}">
        <StackLayout VerticalOptions="CenterAndExpand">
            <Label Text="Welcome to the DetailPage!" HorizontalOptions="Center" />
            <Label x:Name="lbl_firstpicker" 
                   Text="{Binding FirstItems[FirstSelectedIndex], FallbackValue='First Picker Selected Item'}" 
                   HorizontalOptions="Center" 
                   TextColor="Teal" />
            <Label x:Name="lbl_secondpicker" 
                   Text="{Binding SecondItems[SecondSelectedIndex], FallbackValue='Second Picker Selected Item'}" 
                   HorizontalOptions="Center" 
                   TextColor="Teal" />
        </StackLayout>
    </ContentView>
</ContentPage>

And DetailPage.cs:

using Xamarin.Forms;

namespace SimpleTheme
{
    public partial class DetailPage : ContentPage
    {
        public DetailPage()
        {
            InitializeComponent();
        }
    }
}

Key Outcomes #

• Shared Selection State: All pages using the control template will show the same picker selections, since they bind to the global view model.
• Dynamic Item Updates: The second picker's items automatically update when the first picker's selection changes (handled in the view model).
• Auto-Updating Labels: Labels bind directly to the selected items, so they update instantly when picker selections change.
• Page-Specific Logic: You can subscribe to the view model's PropertyChanged event in individual pages to add custom behavior.

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