xaml - 如何从 Listview 中的按钮中提取索引？

Question

我有一个不寻常的问题。如何从 Listview 中的按钮中提取索引。我想要<Button Clicked = "indexOne" Text = "{Binding Answers [0]}" />索引 0 等对不起我的英语。

    <ContentPage.Content>
    <ScrollView>
        <ListView x:Name="elo"   Margin="10,0" RowHeight="250">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell >
                        <Grid >
                            <StackLayout >
                                <Label Text="{Binding Question1}"   />
                                <Button Clicked="indexOne" Text="{Binding Answers[0]}" />
                                <Button Clicked="indexTwo"  Text="{Binding Answers[1]}" />
                                <Button Clicked="indexThree" Text="{Binding Answers[2]}"/>
                                <Button Clicked="indexFour" Text="{Binding Answers[3]}" />

                            </StackLayout>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ScrollView>
</ContentPage.Content>

Answer 1

欢迎来到 SO！

您可以使用Xamarin.Forms MessagingCenter来实现这一点，但不确定这是实现这一目标的最佳方式。如果以后有好的解决方案会在这里更新。

下面是解释的示例代码。创建一个OptionClass来存储 Option of Question 。

public class OptionClass 
{
    // add QuestionID
    public int QuestionID { set; get; }

    public string OptionTitle { set; get; }

    public int OptionIndex { set; get; }

    // add int[] for button command paramater 
    public int[] IDValues {
        get
        {
            return new int[] { QuestionID, OptionIndex };
        } 
    }
    public ICommand OptionChooseCommand { set; get; }

}

创建一个QuestionClass 类来生成每个问题数据：

public class QuestionClass 
{
    public string  QuestionTitle { set; get; }

    // add QuestionID
    public int  QuestionID { set; get; }

    public List<OptionClass> optionClasses { set; get; }

    public QuestionClass(string title,List<OptionClass> options, int questionId)
    {
        optionClasses = new List<OptionClass>();
        QuestionTitle = title;
        optionClasses = options;
        QuestionID = questionId;
    }
}

最后，创建一个AnsweViewModel来生成问题列表数据：

public class AnsweViewModel 
{
    private MainPage mainPage;

    public List<QuestionClass> questionClasses { set; get; }

    public AnsweViewModel(MainPage mainPage)
    {
        this.mainPage = mainPage;
        questionClasses = new List<QuestionClass>();

        List<OptionClass> optionsOne = new List<OptionClass>();
        optionsOne.Add(new OptionClass()
        {
            QuestionID = 0,
            OptionTitle = "A",
            OptionIndex = 1,
            OptionChooseCommand = new Command<int[]>((int[] value) => {
                MessagingCenter.Send<MainPage, int[]>(mainPage, "ButtonInfo", value);
            })
        });
        optionsOne.Add(new OptionClass()
        {
            QuestionID = 0,
            OptionTitle = "B", OptionIndex = 2,
            OptionChooseCommand = new Command<int[]>((int[] value) => {
                MessagingCenter.Send<MainPage, int[]>(mainPage, "ButtonInfo", value);
            })
        });
        optionsOne.Add(new OptionClass() {
            QuestionID = 0,
            OptionTitle = "C", OptionIndex = 3,
            OptionChooseCommand = new Command<int[]>((int[] value) => {
                MessagingCenter.Send<MainPage, int[]>(mainPage, "ButtonInfo", value);
            })
        });
        optionsOne.Add(new OptionClass()
        {
            QuestionID = 0,
            OptionTitle = "D", OptionIndex = 4,
            OptionChooseCommand = new Command<int[]>((int[] value) => {
                MessagingCenter.Send<MainPage, int[]>(mainPage, "ButtonInfo", value);
            })
        });

        questionClasses.Add(new QuestionClass("Question One", optionsOne, 0) { });

        List<OptionClass> optionsTwo = new List<OptionClass>();
        optionsTwo.Add(new OptionClass()
        {
            QuestionID = 1,
            OptionTitle = "A",
            OptionIndex = 1,
            OptionChooseCommand = new Command<int[]>((int[] value) => {
                MessagingCenter.Send<MainPage, int[]>(mainPage, "ButtonInfo", value);
            })
        });
        optionsTwo.Add(new OptionClass()
        {
            QuestionID = 1,
            OptionTitle = "B",
            OptionIndex = 2,
            OptionChooseCommand = new Command<int[]>((int[] value) => {
                MessagingCenter.Send<MainPage, int[]>(mainPage, "ButtonInfo", value);
            })
        });
        optionsTwo.Add(new OptionClass()
        {
            QuestionID = 1,
            OptionTitle = "C",
            OptionIndex = 3,
            OptionChooseCommand = new Command<int[]>((int[] value) => {
                MessagingCenter.Send<MainPage, int[]>(mainPage, "ButtonInfo", value);
            })
        });
        questionClasses.Add(new QuestionClass("Question Two", optionsTwo, 1) { });
    }
}

在Xaml中，使用Bindable Layouts来显示选项视图。如果 always options 是四项，则不需要使用 this 。

<ListView x:Name="elo"
            Margin="10,0"
            RowHeight="250">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <StackLayout Orientation="Vertical">
                        <Label Text="{Binding QuestionTitle}" />
                        <StackLayout BindableLayout.ItemsSource="{Binding optionClasses}" Orientation="Horizontal">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <Button Text="{Binding OptionTitle}"
                                            Command="{Binding OptionChooseCommand}"
                                            CommandParameter="{Binding IDValues}"/>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>
                    </StackLayout>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

在ContentPage中，代码如下：

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        AnsweViewModel answeViewModel = new AnsweViewModel(this);
        elo.ItemsSource = answeViewModel.questionClasses;

        MessagingCenter.Subscribe<MainPage,int>(this, "ButtonIndex", (sender,arg) =>
        {
            Console.WriteLine("Question is " + answeViewModel.questionClasses[arg[0]].QuestionTitle + " Button Index is : " + arg[1]);
            DisplayAlert("Question is " + answeViewModel.questionClasses[arg[0]].QuestionTitle, " Button Index is : " + arg[1], "Ok");
            // Do something whenever the "Hi" message is received
        });
    }
}

更新后的效果：（不需要关心选择哪个单元格）