C# 带有两个选择器事件句柄的Xamarin控件模板

我有一个带有两个选择器的xamarin控件模板，添加到app.xml中，我在两个页面“主页和详细信息”中使用该模板，我想：

如何在使用此模板的所有页面上维护选择器选定的索引

如何在所有页面上为两个选择器处理selectedindexchange事件，例如：（索引更改时使用选定文本设置标签文本）

PS：我的选择器项源将在运行时从我的模型中设置。根据第一个选择器选择，第二个选择器的项目源将更改

app.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SimpleTheme.App">
    <Application.Resources>
        <ResourceDictionary>
            <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="{TemplateBinding Parent.FirstPickerSelectedIndex}" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="180" FontSize="Small" TextColor="#214189">
                        <Picker.Items>
                            <x:String>FirstPicker_1</x:String>
                            <x:String>FirstPicker_2</x:String>
                            <x:String>FirstPicker_3</x:String>
                            <x:String>FirstPicker_4</x:String>
                            <x:String>FirstPicker_5</x:String>
                        </Picker.Items>
                    </Picker>
                    <Picker x:Name="SecondPicker" Title="SecondPicker" SelectedIndex="{TemplateBinding Parent.SecondPickerSelectedIndex}" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="210" FontSize="Small" TextColor="#214189" >
                        <Picker.Items>
                            <x:String>SecondPicker_1</x:String>
                            <x:String>SecondPicker_2</x:String>
                            <x:String>SecondPicker_3</x:String>
                            <x:String>SecondPicker_4</x:String>
                            <x:String>SecondPicker_5</x:String>
                        </Picker.Items>
                    </Picker>
                    <ContentPresenter Grid.Row="1" Grid.ColumnSpan="2"/>
                </Grid>
            </ControlTemplate>
        </ResourceDictionary>
    </Application.Resources>
</Application>

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

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

DetailPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SimpleTheme.App">
    <Application.Resources>
        <ResourceDictionary>
            <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="{TemplateBinding Parent.FirstPickerSelectedIndex}" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="180" FontSize="Small" TextColor="#214189">
                        <Picker.Items>
                            <x:String>FirstPicker_1</x:String>
                            <x:String>FirstPicker_2</x:String>
                            <x:String>FirstPicker_3</x:String>
                            <x:String>FirstPicker_4</x:String>
                            <x:String>FirstPicker_5</x:String>
                        </Picker.Items>
                    </Picker>
                    <Picker x:Name="SecondPicker" Title="SecondPicker" SelectedIndex="{TemplateBinding Parent.SecondPickerSelectedIndex}" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="210" FontSize="Small" TextColor="#214189" >
                        <Picker.Items>
                            <x:String>SecondPicker_1</x:String>
                            <x:String>SecondPicker_2</x:String>
                            <x:String>SecondPicker_3</x:String>
                            <x:String>SecondPicker_4</x:String>
                            <x:String>SecondPicker_5</x:String>
                        </Picker.Items>
                    </Picker>
                    <ContentPresenter Grid.Row="1" Grid.ColumnSpan="2"/>
                </Grid>
            </ControlTemplate>
        </ResourceDictionary>
    </Application.Resources>
</Application>

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

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

---

由于我找不到设置侦听器的好方法，我使用自定义的

ContentView

来包含ControlTemplate的布局，如下所示：

MyView.xaml：

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App5.MyView">
  <ContentView.Content>
    <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"    Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="180" FontSize="Small" TextColor="#214189" >
        </Picker>
        <Picker x:Name="SecondPicker" Title="SecondPicker"   Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="210" FontSize="Small" TextColor="#214189" >
        </Picker>
        <ContentPresenter Grid.Row="1" Grid.ColumnSpan="2"/>
    </Grid>
  </ContentView.Content>
</ContentView>

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyView : ContentView
 {

    public MyView()
    {
        InitializeComponent();
        List<FirstModel> listFirstModel = new List<FirstModel>();
        listFirstModel.Add(new FirstModel { Key = "Pl", Description = "DescPl" });
        listFirstModel.Add(new FirstModel { Key = "Ps", Description = "DescPs" });
        listFirstModel.Add(new FirstModel { Key = "En", Description = "DescEn" });
        listFirstModel.Add(new FirstModel { Key = "H", Description = "DescH" });

        List<SecondModel> listSecondModel = new List<SecondModel>();
        listSecondModel.Add(new SecondModel { FirstModelKey = "Pl", Key = "Pl1", Description = "SecondModelPl1" });
        listSecondModel.Add(new SecondModel { FirstModelKey = "Pl", Key = "Pl2", Description = "SecondModelPl2" });
        listSecondModel.Add(new SecondModel { FirstModelKey = "Pl", Key = "Pl3", Description = "SecondModelPl3" });

        listSecondModel.Add(new SecondModel { FirstModelKey = "Ps", Key = "Ps1", Description = "SecondModelPs1" });
        listSecondModel.Add(new SecondModel { FirstModelKey = "Ps", Key = "Ps2", Description = "SecondModelPs2" });
        listSecondModel.Add(new SecondModel { FirstModelKey = "Ps", Key = "Ps3", Description = "SecondModelPs3" });

        listSecondModel.Add(new SecondModel { FirstModelKey = "En", Key = "En1", Description = "SecondModelEn1" });
        listSecondModel.Add(new SecondModel { FirstModelKey = "En", Key = "En2", Description = "SecondModelEn2" });
        listSecondModel.Add(new SecondModel { FirstModelKey = "En", Key = "En3", Description = "SecondModelEn3" });

        listSecondModel.Add(new SecondModel { FirstModelKey = "H", Key = "H1", Description = "SecondModelH1" });
        listSecondModel.Add(new SecondModel { FirstModelKey = "H", Key = "H2", Description = "SecondModelH2" });
        listSecondModel.Add(new SecondModel { FirstModelKey = "H", Key = "H3", Description = "SecondModelH3" });


        foreach (FirstModel fm in listFirstModel)
        {
            FirstPicker.Items.Add(fm.Description);
        }
        FirstPicker.SelectedIndexChanged += (sender, e) => {

            SecondPicker.Items.Clear();

            string key = listFirstModel[FirstPicker.SelectedIndex].Key;
            foreach (SecondModel sm in listSecondModel.FindAll(o => o.FirstModelKey == key))
                SecondPicker.Items.Add(sm.Description);

        };

       // use MessagingCenter to get the SelectedIndex and set it
        MessagingCenter.Subscribe<string, int>("firstpicker", "indext", (sender, args) => {
            FirstPicker.SelectedIndex = args;
        });
        MessagingCenter.Subscribe<string, int>("secondpicker", "indext", (sender, args) => {
            SecondPicker.SelectedIndex = args;
        });
    }


}

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:App5"
         x:Class="App5.HomePage">

    <StackLayout x:Name="ss" VerticalOptions="CenterAndExpand">
    //use the custom contentView
    <local:MyView x:Name="mv"></local:MyView>
    <Label Text="Welcome to the HomePage!" HorizontalOptions="Center" />
        <Label x:Name="lbl_firstpicker" Text="First Picker Selected Item" HorizontalOptions="Center" TextColor="DarkRed"/>
        <Label x:Name="lbl_secondpicker" Text="Second Picker Selected Item" HorizontalOptions="Center" TextColor="DarkRed"/>
    <Button Text="todetail" Clicked="Button_Clicked"/>
</StackLayout>

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class HomePage : ContentPage
{
    private int firstSelectedIndex;
    private int secondSelectedIndex;

    public HomePage()
    {
        InitializeComponent();
        //find the picker control and set listener
        Picker p = mv.FindByName<Picker>("FirstPicker");
        Picker s = mv.FindByName<Picker>("SecondPicker");
        p.SelectedIndexChanged += FirstPicker_SelectedIndexChanged;
        s.SelectedIndexChanged += SecondPicker_SelectedIndexChanged;
    }
    void FirstPicker_SelectedIndexChanged(object sender, EventArgs e)
    {
        var picker = (Picker)sender;
        firstSelectedIndex = picker.SelectedIndex;
        if (firstSelectedIndex != -1)
        {
            lbl_firstpicker.Text = picker.Items[firstSelectedIndex];
        }

    }
    void SecondPicker_SelectedIndexChanged(object sender, EventArgs e)
    {
        var picker = (Picker)sender;
        secondSelectedIndex = picker.SelectedIndex;

        if (secondSelectedIndex != -1)
        {
            lbl_secondpicker.Text = picker.Items[secondSelectedIndex];
        }
    }
    // navigation to detailpage and notice Picker to set the selected indext
    async void Button_Clicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new DetailPage());
        MessagingCenter.Send<string, int>("firstpicker", "indext", firstSelectedIndex);
        MessagingCenter.Send<string, int>("secondpicker", "indext", secondSelectedIndex);
    }
}

---

DetailsPage类似于主页

它现在可以工作了吗？是的，非常感谢您的支持。当我尝试在包含母版页的项目中添加上述方法时，请致电

MessagingCenter。在
受保护覆盖无效OnDisappearing（）中发送
）

在视图中而不是单击的

按钮中

我面临一个奇怪的行为：在

详细信息页面

中，从第一个选择器

DescPl

和第二个选择器

SecondModelPl2

中进行选择，然后导航到

主页

第二个选择器的选定索引将是0而不是1，并且此行为可以通过不同的方式重现方式。所有代码都与上述代码相同。如果您在

DetailsPage

中选择picker，然后导航到

主页

？如果是，您应该调用

MessagingCenter。在
protected override void OnDisappearing（）中发送
。
在
DetailsPage
中我确实调用了它，我在这个链接上发布了我的代码。两个页面都有相同的代码。你应该在选择选取者的页面中调用它。如果你在不选择选取者的页面中调用它，它将发送一个默认值（0）。我需要在详细信息和主页之间维护索引，并且还可以从其中任何一个页面更改它。您的主要方法实现了这一点，但当我添加母版页并开始使用onDisappearing（）时，行为无法正常工作。特别是对于我在第一条评论中发布的场景和其他场景，就好像我在第一个选取器中选择了第二项一样，效果很好。