使用 CaliburnMicro 在 HubPage 中绑定 ViewModel答案

【问题标题】：ViewModel binding in HubPage using CaliburnMicro使用 CaliburnMicro 在 HubPage 中绑定 ViewModel
【发布时间】：2015-07-05 03:11:17
【问题描述】：

将 HubPage 部分中定义的视图绑定到相应的 ViewModel 所需的流程是什么？

<Hub Header="{Binding HubHeader}" >
    <HubSection x:Name="NewestOffers" Header="{Binding NewestOffersHeader}" IsHeaderInteractive="True" >
        <DataTemplate >
            <local:NewestOffersView DataContext="{Binding NewestOffers}"/>
        </DataTemplate>
    </HubSection>

    <HubSection Header="{Binding SearchHeader}" IsHeaderInteractive="True" >
        <DataTemplate x:Name="SearchView">
            <local:SearchView/>
        </DataTemplate>
    </HubSection>

    <HubSection Header="{Binding AddOfferHeader}" IsHeaderInteractive="True" >
        <DataTemplate>
            <local:AddOfferView/>
        </DataTemplate>
    </HubSection>

    <HubSection Header="{Binding AccountHeader}" IsHeaderInteractive="True">
        <DataTemplate>
            <local:AccountView/>
        </DataTemplate>
    </HubSection>
</Hub>

我创建了所有的 ViewModel，例如 NewestOffersViewModel、SearchViewModel 等，但它没有被绑定。而且我没有忘记在容器配置中注册它们。

@编辑：包含中心的页面的视图模型：

public class MainPageViewModel : PropertyChangedBase
{
    public string HubHeader
    {
        get { return "Second Hand Bookshop"; }
    }
    public SearchViewModel SearchView { get; set; }
    public NewestOffersViewModel NewestOffersViewModel { get; set; }
    public MainPageViewModel()
    {
        SearchView = new SearchViewModel();
        NewestOffersViewModel = new NewestOffersViewModel();
    }
    public string SearchSectionHeader
    {
        get { return "Search"; }
    }

还有 MainPageView（我正在尝试将 NewestOffersView 绑定到 NewestOffersViewModel）。

 <Hub Header="{Binding HubHeader}" >
    <HubSection Header="{Binding NewestOffersHeader}" IsHeaderInteractive="True" >
        <DataTemplate >
            <ContentControl  x:Name="NewestOffersViewModel" />
        </DataTemplate>
    </HubSection>

【问题讨论】：

标签： c# xaml mvvm windows-phone caliburn.micro

【解决方案1】：

好的，所以我得到了这个工作。主页面视图：

<Hub Header="{Binding HubHeader}" >
    <HubSection Header="{Binding NewestOffersHeader}" IsHeaderInteractive="True" >
        <DataTemplate >
            <local:NewestOffersView  DataContext="{Binding NewestOffersViewModel}" />
        </DataTemplate>
    </HubSection>

    <HubSection Header="{Binding SearchHeader}" IsHeaderInteractive="True" >
        <DataTemplate x:Name="SearchView">
            <local:SearchView DataContext="{Binding SearchViewModel}"/>
        </DataTemplate>
    </HubSection>

    <HubSection Header="{Binding AddOfferHeader}" IsHeaderInteractive="True" >
        <DataTemplate>
            <local:AddOfferView DataContext="{Binding AddOfferViewModel}"/>
        </DataTemplate>
    </HubSection>

    <HubSection Header="{Binding AccountHeader}" IsHeaderInteractive="True">
        <DataTemplate>
            <local:AccountView DataContext="{Binding AccountViewModel}"/>
        </DataTemplate>
    </HubSection>
</Hub>

MainPageViewModel：

 public class MainPageViewModel : PropertyChangedBase
{
    public string HubHeader
    {
        get { return "Second Hand Bookshop"; }
    }
    public SearchViewModel SearchViewModel { get; set; }
    public NewestOffersViewModel NewestOffersViewModel { get; set; }
    public AddOfferViewModel AddOfferViewModel { get; set; }
    public AccountViewModel AccountViewModel { get; set; }
    public MainPageViewModel()
    {
        SearchViewModel = new SearchViewModel();
        NewestOffersViewModel = new NewestOffersViewModel();
        AddOfferViewModel = new AddOfferViewModel();
        AccountViewModel = new AccountViewModel();
    }

现在看起来很明显，但早些时候我认为视图会以与 MainPageView 相同的自动方式得到解决。

@Henk Holterman 说

在 DataTemplate 中使用 UserControl 让我有点失望。

但我无法让具有内容控制功能的版本运行...抱歉。 xd

【讨论】：