How generate(binding) quiz in form using wpf mvvm

问题

How binding quiz with different type questions in WPF app using MVVM?

QuizPageViewModel:

   public class QuizPageViewModel : ViewModelBase
{
    public QuizPageViewModel()
    {
        QuizCollection = new ObservableCollection<QuizQuestion>();

    }  

    public ObservableCollection<QuizQuestion> QuizCollection { get; set; }}

Where QuizQuestion: - EF Entity

 public partial class QuizQuestion
{
    public QuizQuestion()
    {        
        QuizAnswers = new HashSet<QuizAnswer>();
        QuizMultiQuestions = new HashSet<QuizMultiQuestion>();
    }

    public long Id { get; set; }

    public int QuizId { get; set; }

    ***public String Type { get; set; }***

    [Required]
    public string Name { get; set; }           
}

Question Type can be truefalse, multianswer, multichoice and other type

in xaml:

  <ItemsControl ItemsSource="{Binding QuizCollection}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>

                     <ListBox ItemsSource="{Binding Path=QuizAnswers}"
                                       VerticalAlignment="Stretch"
                                       Background="Transparent">
                                <ListBox.ItemTemplate>
                                    <ItemContainerTemplate>

                                        <RadioButton GroupName="{Binding Id}" 
                      Content="{Binding Name}"  />
                                    </ItemContainerTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>

                     </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

this xaml code display only radiobutton question of quiz. How binding and display other Type of question (checkbox, combobox, textbox)? HELP)))

回答1:

You can use an Item template selector in your items control to display different controls/templates depending on the question.

In the code below you can see that there's a conditional statement that checks the type of question and return a template based on the type of question.

  public class QuiztemplateSelector : DataTemplateSelector
  {
    public DataTemplate TrueOrFalseTemplate { get; set; }
    public DataTemplate MultiAnswerTemplate { get; set; }
    public DataTemplate MultiChoiceTemplate { get; set; }
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
      var question = item as QuizQuestion;
      if (question.Type.Equals("TruOrFalse"))
        return TrueOrFalseTemplate;
      else if (question.Type.Equals("MultiAnswer"))
        return MultiAnswerTemplate;
      else if ("MultiChoice")
        return MultiChoiceTemplate;

      return null; //Or your default Template.
    }
  }

Now in your xaml, you can create templates for the types of questions (i.e. true/False, Multi choice, multi answer). Then you need to pass those templates to the QuiztemplateSelector as shown below.

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
      <DataTemplate x:Key="TrueOrFalse">
        <!-- Write your True or false template here-->
      </DataTemplate>
      <DataTemplate x:Key="MultiChoice">
        <!-- Write your MultiChoice template here-->
      </DataTemplate>
      <DataTemplate x:Key="MultiAnswer">
        <!-- Write your multianswer Template here -->
      </DataTemplate>
      <local:QuizTemplateSelector x:Key="QuizTemplateSelector"
                                  MultiAnswerTemplate="{StaticResource MultiAnswer}"
                                  TrueOrFalseTemplate="{StaticResource TrueOrFalse}"
                                  MultiChoiceTemplate="{StaticResource MultiChoice}" />
    </Grid.Resources>
    <ItemsControl ItemsSource="{Binding QuizCollection}" ItemTemplateSelector="{StaticResource QuiztemplateSelector}">
      <ItemsControl.ItemTemplate>
        <DataTemplate>

          <ListBox ItemsSource="{Binding Path=QuizAnswers}"
                                       VerticalAlignment="Stretch"
                                       Background="Transparent">
            <ListBox.ItemTemplate>
              <ItemContainerTemplate>

                <RadioButton GroupName="{Binding Id}" 
                      Content="{Binding Name}"  />
              </ItemContainerTemplate>
            </ListBox.ItemTemplate>
          </ListBox>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </Grid>

You can read more abour DataTemplateSelector here.

来源：https://stackoverflow.com/questions/32457157/how-generatebinding-quiz-in-form-using-wpf-mvvm

标签

wpf

xaml

mvvm