如何使用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> 

您可以閱讀更多abour DataTemplateSelector here。