为列表框中的每个项目加载不同的DataTemplate [英] Loading Different DataTemplate for each item in ListBox

问题描述

我正在尝试创建一个学习应用程序，并且我想根据问题类型加载数据模板如下所述.

I am trying to create a learn application and I would like to load data template for based on Question type as explained below.

     If Question Type is TYPE1

     load InstructionTemplate_Type1.xaml
     load ChoiceTemplate_Type1.xaml
     load QuestionTemplate_Type1.xaml

     If Question Type is TYPE2

     load InstructionTemplate_Type2.xaml
     load ChoiceTemplate_Type2.xaml
     load QuestionTemplate_Type2.xaml

     If Question Type is TYPE3

     load InstructionTemplate_Type3.xaml
     load ChoiceTemplate_Type3.xaml
     load QuestionTemplate_Type3.xaml

     else

     load InstructionTemplate_Type3.xaml
     load ChoiceTemplate_Type3.xaml
     load QuestionTemplate_Type3.xaml

我的页面应该看起来像...

and the my page should look like...

有人可以帮我怎么做吗

我正在使用上一篇文章中的代码

I am using the code from my previous post

在WPF中嵌套的ObservableCollection数据绑定

xaml是...

    <learn:SelectedItemIsCorrectToBooleanConverter x:Key="SelectedCheckedToBoolean" />

    <Style x:Key="ChoiceRadioButtonStyle" TargetType="{x:Type RadioButton}" BasedOn="{StaticResource {x:Type RadioButton}}">
        <Style.Triggers>
            <DataTrigger Value="True">
                <DataTrigger.Binding>
                    <MultiBinding Converter="{StaticResource SelectedCheckedToBoolean}">
                        <Binding Path="IsCorrect" />
                        <Binding RelativeSource="{RelativeSource Self}" Path="IsChecked" />
                    </MultiBinding>
                </DataTrigger.Binding>
                <Setter Property="Background" Value="Green"></Setter>
            </DataTrigger>
            <DataTrigger Value="False">
                <DataTrigger.Binding>
                    <MultiBinding Converter="{StaticResource SelectedCheckedToBoolean}">
                        <Binding Path="IsCorrect" />
                        <Binding RelativeSource="{RelativeSource Self}" Path="IsChecked" />
                    </MultiBinding>
                </DataTrigger.Binding>
                <Setter Property="Background" Value="Red"></Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <DataTemplate x:Key="InstructionTemplate" DataType="{x:Type learn:Question}">
        <TextBlock Text="{Binding Path=Instruction}" />
    </DataTemplate>

     <DataTemplate x:Key="ChoiceTemplate" DataType="{x:Type learn:Choice}">
                        <RadioButton Content="{Binding Path=Name}" IsChecked="{Binding RelativeSource=   {RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Margin="10 1" 
                                     Style="{StaticResource ChoiceRadioButtonStyle}" />
                    </DataTemplate>

    <DataTemplate x:Key="QuestionTemplate" DataType="{x:Type learn:Question}">
        <StackPanel Margin="10 0">
            <TextBlock Text="{Binding Path=Name}" />
            <ListBox ItemsSource="{Binding Path=Choices}" SelectedItem="{Binding Path=SelectedChoice}" HorizontalAlignment="Stretch" ItemTemplate="ChoiceTemplate">

            </ListBox>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

<DockPanel>
    <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom">
        <Button Content="Select Question 3 choice 3" Click="ButtonBase_OnClick" />
    </StackPanel>
    <ItemsControl ItemsSource="{Binding Path=Questions}">
        <ItemsControl.ItemTemplateSelector>
            <learn:QuestionTemplateSelector QuestionTemplate="{StaticResource QuestionTemplate}" InstructionTemplate="{StaticResource InstructionTemplate}" />
        </ItemsControl.ItemTemplateSelector>
    </ItemsControl>
</DockPanel>

有人可以帮助我了解如何通过更智能的设计将其归档吗?(可能是Question的通用基类，并为每个Question Type都有Derived Question类，并使用该类中的虚函数加载数据模板...)，但我想知道如何使用Template Selector ...或我们需要使用一些不同的方法吗?

Can Some one help me in understanding how this can be archived with smarter design (may be a common base class for Question and have Derived Question class for each Question Type and load the data template using a virtual function from the class...) but I am wondering how this can be done using Template Selector ...or do we need to use some different approach..

推荐答案

如果创建从常见Quiestion ViewModel派生的ViewModel，则可以创建列表( ObservableCollection< Question> ).然后使用以下列表框:

If you create your ViewModel-s derived from a common Quiestion ViewModel, you can create the list (ObservableCollection<Question>). Then use the following ListBox:

<ListBox ItemsSource="{Binding YourQuestionList}">
     <ListBox.Resources>
           <DataTemplate DataType="{x:Type VM:QuestionType1}">
                  ( ... question1 full design ... )
           </DataTemplate>
           <DataTemplate DataType="{x:Type VM:QuestionType2}">
                  ( ... question2 full design ... )
           </DataTemplate>
           ( ... other data templates ... )
</ListBox>

DataContext将是自定义完整设计中的特定Question ViewModel，因此您也可以使用这些属性进行绑定.您需要将对ViewModel所在的名称空间的引用(例如: xmlns:VM ="clr-namespace:YourApp.VMs" )添加到xaml文件的顶部(如果您的名称空间用于ViewModels是 VMs .

The DataContext will be the specific Question ViewModel inside your custom full design, so you can use those properties for binding, too. You need to add the reference to the namespace your ViewModels are in (eg.: xmlns:VM="clr-namespace:YourApp.VMs") to the top of the xaml file (if your namespace for ViewModels is VMs.

我认为这应该为您完成工作.

I think this should do the work for you.

这篇关于为列表框中的每个项目加载不同的DataTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！