Question

我是WPF的新手并尝试使用WPF创建自学习应用程序。我正在努力理解数据绑定，数据模板，ItemControls等概念。

我正在尝试创建一个包含以下要求的学习页面。

1）页面可能有多个问题。一旦显示滚动条问题填满了整个页面。 2）选择的格式根据问题类型而有所不同。 3）用户应能够选择问题的答案。

我遇到了绑定嵌套ObservableCollection并显示上述要求内容的问题。

有人可以帮助您创建如下所示的页面，以及如何沿着XMAL使用INotifyPropertyChanged来执行嵌套绑定。

myPage

以下是我尝试使用的基本代码，用于显示问题和答案。

        namespace Learn
        {
            public enum QuestionType
            {
                OppositeMeanings,
                LinkWords
                //todo
            }
            public class Question
            {
                public Question()
                {
                    Choices = new ObservableCollection<Choice>();

                }
                public string Name { set; get; }
                public string Instruction { set; get; }
                public string Clue { set; get; }
                public ObservableCollection<Choice> Choices { set; get; }
                public QuestionType Qtype { set; get; }
                public Answer Ans { set; get; }
                public int Marks { set; get; }
            }
        }

        namespace Learn
        {
            public class Choice
            {
                public string Name { get; set; }
                public bool isChecked { get; set; }
            }
        }
        namespace Learn
        {
            public class NestedItemsViewModel
            {
                public NestedItemsViewModel()
                {
                    Questions = new ObservableCollection<Question>();
                    for (int i = 0; i < 10; i++)
                    {
                        Question qn = new Question();

                        qn.Name = "Qn" + i;
                        for (int j = 0; j < 4; j++)
                        {
                            Choice ch = new Choice();
                            ch.Name = "Choice" + j;
                            qn.Choices.Add(ch);
                        }
                        Questions.Add(qn);
                    }

                }

                public ObservableCollection<Question> Questions { get; set; }
            }

            public partial class LearnPage : UserControl
            {

                public LearnPage()
                {
                    InitializeComponent();

                    this.DataContext = new NestedItemsViewModel();

                }

            }
        }

Answer 1

你最初的尝试可以让你获得80％的胜利。希望我的答案会让你更近一点。

首先，INotifyPropertyChanged是一个对象支持的接口，用于通知Xaml引擎数据已被修改，并且需要更新用户界面以显示更改。您只需要在标准clr属性上执行此操作。

因此，如果您的数据流量都是单向的，从ui到模型，则无需实现INotifyPropertyChanged。

我创建了一个使用您提供的代码的示例，我修改了它并创建了一个视图来显示它。 ViewModel和数据类如下 public enum QuestionType { OppositeMeanings， LinkWords }

public class Instruction
{
    public string Name { get; set; }
    public ObservableCollection<Question> Questions { get; set; }
}

public class Question : INotifyPropertyChanged
{
    private Choice selectedChoice;
    private string instruction;

    public Question()
    {
        Choices = new ObservableCollection<Choice>();

    }
    public string Name { set; get; }
    public bool IsInstruction { get { return !string.IsNullOrEmpty(Instruction); } }
    public string Instruction
    {
        get { return instruction; }
        set
        {
            if (value != instruction)
            {
                instruction = value;
                OnPropertyChanged();
                OnPropertyChanged("IsInstruction");
            }
        }
    }
    public string Clue { set; get; }
    public ObservableCollection<Choice> Choices { set; get; }
    public QuestionType Qtype { set; get; }

    public Choice SelectedChoice
    {
        get { return selectedChoice; }
        set
        {
            if (value != selectedChoice)
            {
                selectedChoice = value;
                OnPropertyChanged();
            }
        }
    }
    public int Marks { set; get; }

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

public class Choice
{
    public string Name { get; set; }
    public bool IsCorrect { get; set; }
}

public class NestedItemsViewModel
{
    public NestedItemsViewModel()
    {
        Questions = new ObservableCollection<Question>();
        for (var h = 0; h <= 1; h++)
        {
            Questions.Add(new Question() { Instruction = string.Format("Instruction {0}", h) });
            for (int i = 1; i < 5; i++)
            {
                Question qn = new Question() { Name = "Qn" + ((4 * h) + i) };
                for (int j = 0; j < 4; j++)
                {
                    qn.Choices.Add(new Choice() { Name = "Choice" + j, IsCorrect = j == i - 1 });
                }
                Questions.Add(qn);
            }
        }
    }

    public ObservableCollection<Question> Questions { get; set; }

    internal void SelectChoice(int questionIndex, int choiceIndex)
    {
        var question = this.Questions[questionIndex];
        question.SelectedChoice = question.Choices[choiceIndex];
    }
}

请注意，答案已更改为SelectedChoice。这可能不是您所需要的，但它使示例更容易一些。我还在SelectedChoice上实现了INotifyPropertyChanged模式，因此我可以从代码中设置SelectedChoice（特别是从调用SelectChoice ）。

后面的主要Windows代码实例化ViewModel并处理一个按钮事件以从后面的代码中设置选择（纯粹显示INotifyPropertyChanged工作）。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        ViewModel = new NestedItemsViewModel();
        InitializeComponent();
    }

    public NestedItemsViewModel ViewModel { get; set; }

    private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        ViewModel.SelectChoice(3, 3);
    }
}

Xaml是

<Window x:Class="StackOverflow._20984156.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:learn="clr-namespace:StackOverflow._20984156"
        DataContext="{Binding RelativeSource={RelativeSource Self}, Path=ViewModel}"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>

        <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="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">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate 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>
                    </ListBox.ItemTemplate>
                </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>
</Window>

注意：我的学习命名空间与您的命名空间不同，因此如果您使用此代码，则需要将其修改为命名空间。

因此，主ListBox显示一个问题列表。 ListBox（每个问题）中的每个项目都使用DataTemplate进行渲染。类似地，在DataTemplate中，ListBox用于显示选项，DataTemplate用于将每个选项呈现为单选按钮。

兴趣点。

每个选项都绑定到它所属的ListBoxItem的IsSelected属性。它可能不会出现在xaml中，但每个选项都会有一个ListBoxItem。 IsSelected属性与ListBox的SelectedItem属性保持同步（由ListBox保持），并且绑定到您问题中的SelectedChoice。
选项ListBox有一个ItemsPanel。这允许您使用不同类型的面板的布局策略来布局ListBox的项目。在这种情况下，水平StackPanel。
我添加了一个按钮，用于在viewmodel中设置问题3到3的选择。这将显示INotifyPropertyChanged正常工作。如果从SelectedChoice属性的setter中删除OnPropertyChanged调用，则视图将不会反映更改。

上面的示例不处理指令类型。

要处理说明，我会

将指令作为问题插入并更改问题DataTemplate，使其不显示指令的选项;或
在视图模型中创建一组指令，其中指令类型包含一组问题（视图模型将不再包含一组问题）。

教学课程类似于

public class Instruction
{
    public string Name { get; set; }
    public ObservableCollection<Question> Questions { get; set; }
}

根据有关计时器到期和多个页面的评论添加。

此处的评论旨在为您提供足够的信息以了解要搜索的内容。

<强> INotifyPropertyChanged的

如果有疑问，请实施INotifyPropertyChanged 。我上面的评论是让你知道你为什么使用它。如果您已经显示了将从代码中操作的数据，那么您必须实现INotifyPropertyChanged。

ObservableCollection对象非常适合处理代码中的列表操作。它不仅实现了INotifyPropertyChanged，而且还实现了INotifyCollectionChanged，这两个接口都确保如果集合发生变化，xaml引擎会知道它并显示更改。请注意，如果修改集合中对象的属性，则可以通过在对象上实现INotifyPropertyChanged来通知Xaml引擎。 ObservableCollection非常棒，而不是omnipercipient。

<强>寻呼

对于您的方案，分页很简单。在某处存储完整的问题列表（内存，数据库，文件）。当您转到第1页时，查询商店以获取这些问题，并使用这些问题填充ObservableCollection。当您转到第2页时，查询商店中的第2页问题，清除ObservableCollection并重新填充。如果您实例化一次ObservableCollection，然后在分页时清除并重新填充它，那么将为您处理ListBox刷新。

<强>计时器

从Windows的角度来看，定时器是非常耗费资源的，因此应该谨慎使用。您可以使用.net中的许多计时器。我倾向于使用System.Threading.Timer或System.Timers.Timer。这两个都在DispatcherThread之外的线程上调用计时器回调，这允许您在不影响UI响应的情况下执行工作。但是，如果在工作期间需要修改UI，则需要Dispatcher.Invoke或Dispatcher.BeginInvoke来重新启动Dispatcher线程。 BeginInvoke是异步的，因此，在等待DispatcherThread变为空闲时不应挂起该线程。

根据有关数据模板分离的评论添加。

我在Question对象中添加了一个IsInstruction（我没有实现一个Instruction类）。这显示了从Property B（IsInstruction）的属性A（指令）中提升PropertyChanged事件的示例。

我将DataTemplate从列表框移动到Window.Resources并给它一个键。我还为指令项创建了第二个DataTemplate。

我创建了一个DataTemplateSelector来选择要使用的DataTemplate。当您需要在加载数据时选择DataTemplate时，DataTemplateSelectors很好。将其视为OneTime选择器。如果您要求DataTemplate在其渲染的数据范围内进行更改，那么您应该使用触发器。选择器的代码是

public class QuestionTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        DataTemplate template = null;

        var question = item as Question;
        if (question != null)
        {
            template = question.IsInstruction ? InstructionTemplate : QuestionTemplate;
            if (template == null)
            {
                template = base.SelectTemplate(item, container);
            }
        }
        else
        {
            template = base.SelectTemplate(item, container);
        }

        return template;
    }

    public DataTemplate QuestionTemplate { get; set; }

    public DataTemplate InstructionTemplate { get; set; }
}

选择器绑定到ItemsControl的ItemTemplateSelector。

最后，我将ListBox转换为ItemsControl。 ItemsControl具有ListBox的大部分功能（ListBox控件派生自ItemsControl）但它缺少Selected功能。这将使您的问题看起来更像是一个问题页而不是列表。

注意：虽然我只是添加了DataTemplateSelector的代码，但我在其余的答案中更新了代码片段以使用新的DataTemplateSelector。

根据有关设置正确和错误答案背景的评论添加

根据模型中的值动态设置背景需要一个触发器，在本例中为多个触发器。

我已更新Choice对象以包含IsCorrect，并且在ViewModel中创建问题期间，我已在每个答案的其中一个选项上指定了IsCorrect。

我还更新了MainWindow以在RadioButton上包含样式触发器。关于触发器有一些要点 1.样式或RadioButton在鼠标结束时设置背景。修复需要重新创建RadioButton的样式。 1.由于触发器基于2个值，我们可以在模型上创建另一个属性以组合2个属性，或者使用MultiBinding和MultValueConverter。我使用了MultiBinding，MultiValueConverter如下。

public class SelectedItemIsCorrectToBooleanConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var boolValues = values.OfType<bool>().ToList();

        var isCorrectValue = boolValues[0];
        var isSelected = boolValues[1];

        if (isSelected)
        {
            return isCorrectValue;
        }

        return DependencyProperty.UnsetValue;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

我希望这会有所帮助

WPF中嵌套的ObservableCollection数据绑定

1 个答案: