How to extract index from a button in Listview? - xaml

Question

I have an unusual question. How to extract index from a button in Listview.
I would like <Button Clicked = "indexOne" Text = "{Binding Answers [0]}" /> to have index 0 e.t.c
Sorry for my english.
<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

Welcome to SO !
You can use the Xamarin.Forms MessagingCenter to achiece that , not sure this is the best way to achieve that . If later have good solutions will update here .
Here is the sample code to explain that .Create a OptionClass to store 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; }
}
Create a QuestionClass class to generate each question data :
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;
}
}
Last , creat a AnsweViewModel to generate list data of questions :
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) { });
}
}
Here in Xaml , use Bindable Layouts to show option view . If always options are four items, not need to use 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>
In ContentPage , code as follow :
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
});
}
}
The updated effect :(not need to care about which cell be selected )