如何生成(绑定)测验形式使用wpf mvvm

本文关键字：wpf mvvm 何生成 绑定 | 更新日期: 2023-09-27 18:11:45

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

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

问题类型可以是真、假、多答案、多选择等类型

在<<p> strong> 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代码只显示测验的单选按钮问题。如何绑定和显示其他类型的问题(复选框，组合框，文本框)?帮助)))

如何生成(绑定)测验形式使用wpf mvvm

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

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

  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

相关文章：