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

Question

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

QuizPageViewModel：

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

    }  

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

QuizQuestion：- EF 实体

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

问题类型可以是truefalse、multianswer、multichoice等类型

在 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 代码仅显示测验的单选按钮问题。如何绑定和显示其他类型的问题（复选框、组合框、文本框）？帮助）））

Answer 1

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

在下面的代码中，您可以看到有一个条件语句检查问题的类型并根据问题的类型返回一个模板。

  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，如下所示。

 <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 here。