如何在数据模板中实例化ViewModel

时间:2017-01-24 22:35:59

标签: wpf xaml data-binding win-universal-app

我是WPF的新开发者,通用应用程序等。

我创建了一个显示问题的视图。

我有一个QuestionsViewModel,它公开了一个Question集合。在XAML中,我使用ItemsControl来显示问题。

现在在DataTemplate中,我想使用用户控件来显示问题,实例化我的QuestionViewModel,将当前问题绑定到它并将视图模型设置为用户控件的上下文。我的问题是{Binding}没有给我一个问题,我有一个Binding对象:/

我应该这样做吗? 如何在ViewModel中获取当前问题?

代码

public class Question : AEntity, IQuestion
{
    public Question(String title, String answer) : base()
    {
        this.Title = title;
        this.Answer = answer;
    }


    public string Title { get; set; }
    public string Answer { get; set; }
}

public class QuestionsViewModel : BaseViewModel
{
    private String description;

    public QuestionsViewModel()
    {
        ObservableCollection<Question> questions = new ObservableCollection<Question>();
        questions.CollectionChanged += Questions_CollectionChanged;
        Questions = questions;
        AddQuestionCommand = new AddQuestionCommand(Questions);
        AddQuestionCommand.Execute(null);//add a question for test
    }

    private void Questions_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        Description = String.Format("{0} question(s)", Questions.Count);
    }

    public ICollection<Question> Questions { get; private set; }

    public ICommand AddQuestionCommand { get; private set; }

    public String Description {
        get { return description; }
        set
        {
            description = value;
            onPropertyChanged("Description");
        }
    }
}

public class QuestionViewModel : BaseViewModel
{
    private Question question;

    public QuestionViewModel()
    {
    }

    public Question Question { get; set; }

}

问题视图

<UserControl  x:Class="Question_Answer.View.Control.QuestionsControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:model="using:Question_Answer.Model"
xmlns:uc="using:Question_Answer.View.Control"
xmlns:vm="using:Question_Answer.ViewModel.Control"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<UserControl.DataContext>
    <vm:QuestionsViewModel Description="view description">  </vm:QuestionsViewModel>        
</UserControl.DataContext>

<ItemsControl Name="Questions" Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Questions}">
    <ItemsControl.ItemTemplate>
            <DataTemplate x:DataType="model:Question">
                <uc:QuestionItemControl>
                    <uc:QuestionItemControl.DataContext>
                        <vm:QuestionViewModel Question="{Binding}" />
                    </uc:QuestionItemControl.DataContext>
                </uc:QuestionItemControl>
            </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
</UserControl>

质疑用户控制

<UserControl
x:Class="Question_Answer.View.Control.QuestionItemControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Question_Answer.View.Control"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Text="{Binding Question.Title}" />
    <TextBlock Grid.Column="1" Text="{Binding Question.Answer}" />
</Grid>

3 个答案:

答案 0 :(得分:2)

您的代码中需要修改一些内容。

我直接制作代码示例供您参考。

public class QuestionsViewModel:ViewModelBase
{
    private String description;
    public ObservableCollection<Question> questions { get; set; }
    public QuestionsViewModel()
    {
        questions = new ObservableCollection<Question>();
        questions.CollectionChanged += Questions_CollectionChanged;
        questions.Add(new Question("t1","a1"));


    }

    private void Questions_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        Description = String.Format("{0} question(s)", e.NewItems.Count);
    }



    public String Description
    {
        get { return description; }
        set
        {
            description = value;
            RaisePropertyChanged("Description");
        }
    }
}

public class QuestionViewModel:ViewModelBase
{
    private Question question;

    public QuestionViewModel()
    {
    }
    public Question Question
    {
        get { return question; }
        set
        {
            question = value;
            RaisePropertyChanged("Question");
        }
    }
}
<UserControl
x:Class="AppMvvm2.QuestionItemControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppMvvm2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Text="{Binding Title}" />
    <TextBlock Grid.Column="1" Text="{Binding Answer}" />
</Grid>

<UserControl
x:Class="AppMvvm2.QuestionsControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppMvvm2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<UserControl.DataContext>
    <local:QuestionsViewModel></local:QuestionsViewModel>
</UserControl.DataContext>
<StackPanel Margin="0 50 0 0">
    <TextBlock Text="{Binding Description}"></TextBlock>
    <ItemsControl Name="Questions" Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding questions}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <local:QuestionItemControl></local:QuestionItemControl>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

<Page
x:Class="AppMvvm2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppMvvm2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">


<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <local:QuestionsControl></local:QuestionsControl>
</Grid>

答案 1 :(得分:1)

要将绑定到目标属性应该是依赖项属性:https://msdn.microsoft.com/en-us/windows/uwp/xaml-platform/custom-dependency-properties

但是你应该做的是让QuestionItemControl从ItemsControl中的父元素继承DataContext。只需避免在ItemsControl中显式设置QuestionItemControl的DataContext属性:

<ItemsControl Name="Questions" Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Questions}">
    <ItemsControl.ItemTemplate>
        <DataTemplate x:DataType="model:Question">
            <uc:QuestionItemControl />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

...并直接绑定到QuestionItemControl.xaml中的T​​itle和Answer属性:

<UserControl
x:Class="Question_Answer.View.Control.QuestionItemControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Question_Answer.View.Control"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="{Binding Title}" />
        <TextBlock Grid.Column="1" Text="{Binding Answer}" />
    </Grid>
</UserControl>

这应该有效,因为每个QuestionItemControl的DataContext实际上是ItemsControl的ItemsSource中的Question对象。

答案 2 :(得分:0)

最后,我将使用QuestionViewModel的集合而不是Question。这可能意味着将Question集合与QuestionViewModel ...

同步