如何使用 wpf mvvm 在表单中生成(绑定)测验

问题描述

如何使用 MVVM 在 WPF 应用程序中绑定不同类型问题的测验?

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; }}

其中QuizQuestion: - EF 实体

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

在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>

此 xaml 代码仅显示测验的单选按钮问题.如何绑定和显示其他类型的问题(复选框、组合框、文本框)?帮助)))

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

推荐答案

您可以在项目控件中使用项目模板选择器来根据问题显示不同的控件/模板.

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.
    }
  }

现在在您的 xaml 中，您可以为问题类型(即真/假、多选、多答案)创建模板.然后您需要将这些模板传递给 QuiztemplateSelector，如下所示.

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>

您可以阅读更多关于 DataTemplateSelector 此处.

You can read more abour DataTemplateSelector here.

这篇关于如何使用 wpf mvvm 在表单中生成(绑定)测验的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！