Шаблон Hub App

Описание шаблона

Создадим проект для Windows Phone 8.1 по шаблону Hub App:

Структура проекта уже будет иметь ряд каталогов и файлов по умолчанию:

В отличие от проектов Blank App или WebView App здесь нет как таковой главной страницы MainPage.xaml. Выполнение же приложение начинается фактически со страницы HubPage.xaml.

Ключевым моментом в данном шаблоне является концепция Хаба. Хаб представляет некоторый контейнер, внутри которого уже помещаются отдельные секции. Так, в файле HubPage.xaml можно увидеть следующие секции:

<Grid x:Name="LayoutRoot">
    <Hub x:Name="Hub" x:Uid="Hub" Header="application name" 
			Background="{ThemeResource HubBackgroundImageBrush}">
        <HubSection x:Uid="HubSection1" Header="SECTION 1" DataContext="{Binding Groups}" 
				HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
            <!--секция 1-->
        </HubSection>

        <HubSection x:Uid="HubSection2" Header="SECTION 2" Width="Auto"
            DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
            <!--секция 2-->
        </HubSection>

        <HubSection x:Uid="HubSection3" Header="SECTION 3" DataContext="{Binding Groups[1]}" 
				HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
			<!--секция 3-->
        </HubSection>

        <HubSection x:Uid="HubSection4" Header="SECTION 4" DataContext="{Binding Groups[2]}" 
				HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
            <!--секция 4-->
        </HubSection>

        <HubSection x:Uid="HubSection5" Header="SECTION 5" DataContext="{Binding Groups[3]}" 
				HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
            <!--секция 5-->
        </HubSection>
    </Hub>
</Grid>

Каждая секция представлена элементом HubSection. Стандартный шаблон сделан так по умолчанию, что каждая из пяти секций имеет индивидуальный шаблон. За настройку шаблона отображения данных отвечает свойство DataTemplate. Например, рассмотрим первую секцию:

<HubSection x:Uid="HubSection1" Header="SECTION 1" DataContext="{Binding Groups}" 
			HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
    <DataTemplate>
        <ListView
            ItemsSource="{Binding}"
            IsItemClickEnabled="True"
            ItemClick="GroupSection_ItemClick" 
            ContinuumNavigationTransitionInfo.ExitElementContainer="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,0,27.5">
                        <TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </DataTemplate>
</HubSection>

Здесь мы видим, что для отображения элементов секции используется элемент ListView. В качестве шаблона необязательно используется ListView, ряд секций используют также GridView.

Теперь рассмотрим, что именно отображает секция. В начале файла для страницы задается контекст данных:

DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

То есть привязка идет к свойству DefaultViewModel, которое определено в самом классе Page. И если мы перейдем в файл кода HubPage.xaml.cs, то можем найти код, устанавливающий источник данных для данного свойства:

public ObservableDictionary DefaultViewModel
{
    get { return this.defaultViewModel; }
}
private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
    var sampleDataGroups = await SampleDataSource.GetGroupsAsync();
    this.DefaultViewModel["Groups"] = sampleDataGroups;
}

Класс SampleDataSource, который находится в проекте в папке DataModel загружает данные из файла SampleData.json в методе GetGroupsAsync:

private async Task GetSampleDataAsync()
{
    if (this._groups.Count != 0)
        return;

    Uri dataUri = new Uri("ms-appx:///DataModel/SampleData.json");
	//.......................................
}

Таким образом, данные подключаются к странице. Сам json-файл имеет иерархическую структуру:

{"Groups":[
  {
    "UniqueId": "Group-1",
    "Title": "Group Title: 1",
    "Subtitle": "Group subtitle: 1",
    "ImagePath": "Assets/DarkGray.png",
    "Description" : "Group Description: Lorem ipsum dolor sit amet",
    "Items":
	[
//..................

Если мы вернемся к файлу Хаба, то увидим, что для первой секции задается в качестве контекста элемент Groups из файла json:

DataContext="{Binding Groups}"

А внутри секции элемент ListView выводит названия групп с помощью привязки к их свойству Title:

<TextBlock Text="{Binding Title}"

Остальные секции привязываются к отдельным группам внутри json-файла: DataContext="{Binding Groups[0]}". А чтобы вывести элементы внутри групп, в каждой секции идет привязка к свойству items: ItemsSource="{Binding Items}"

Таким образом, при переходе на вторую секцию, которая отображает первую группу из json-файла, мы можем увидеть следующее:

Для каждого отдельного элемента в группе в секции добавляется обработчик клика ItemView_ItemClick, объявленный в файле HubPage.xaml.cs:

private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
    if (!Frame.Navigate(typeof(ItemPage), itemId))
    {
        throw new Exception(this.resourceLoader.GetString("NavigationFailedExceptionMessage"));
    }
}

Он осуществляет переход непосредственно страницу элемента, которая создается с помощью файла ItemPage.xaml. По умолчанию она просто выводит название элемента:

Также для самой первой секции, которая выводит список групп, есть обработчик нажатия GroupSection_ItemClick, который по нажатию осуществляет переход к странице группы, представленной файлом SectionPage.xaml и отображающей все данные о группе.

Возможно, для общего понимания структура проекта покажется слишком сложной, но в то же время данный шаблон позволит довольно просто создать навигацию из сложных по структуре элементов, в чем собственно его сильная сторона.