ViewModel binding in HubPage using CaliburnMicro

Question

What would be the needed flow to make views defined in HubPage sections to get bound to the corresponding ViewModels?

<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>

I have all of the ViewModels created, such as NewestOffersViewModel, SearchViewModel etc. but it doesn't get bound. And I didn't forget to register them in the container configuration.

@Edit: The view model for the page containing the hub:

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"; }
    }

And the piece of MainPageView (I am trying to bing NewestOffersView to NewestOffersViewModel).

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

Answer 1

Ok, so I got this working. MainPageView:

<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();
    }

It seems obvious now but earlier I thought that views would get resolved the same automatic way as MainPageView.

@Henk Holterman said

The use of a UserControl in a DataTemplate throws me off a little.

But I couldn't get the version with content control to work... Sorry. xd