この記事では、XAML / C＃でWindows 8.1用のアプリケーションを開発するための新機能に関する一連の記事を開きます。 一貫して空のテンプレートから機能する「製品カタログ」アプリケーションに移行する予定です。
最初の記事は、Visual Studio 2013の標準のハブアプリプロジェクトテンプレートに基づいて、アプリケーションの簡単なバージョンを作成することに焦点を当てています。その中で、アプリケーションに便利で多様な起動画面を実装する方法を学びます。
仕事に必要なもの：
- OS Windows 8.1 ;
- Visual Studio 2013
- Windows 8.1 SDK （Visual Studio 2013に既に含まれています ）。
テンプレートからアプリケーションを作成する
Visual Studio 2013を開き、新しいプロジェクトの作成を選択します（ ファイル -> 新規 -> プロジェクト ...）。 次に、テンプレートで、 Visual C＃ -> Windows Storeでプロジェクトを選択します。 Hub Appテンプレートを使用することを示します。
eShopなどのプロジェクト名を入力します。
作成されたプロジェクトの構造を考慮してください。
- アセット\-プロジェクトの画像とアイコンを含むフォルダー。
- ナビゲーションを実装し、アプリケーションのライフサイクルを保証するための補助クラスを含む共通の\-ファイル。
- DataModel \-データの操作方法を記述するファイル。
- 文字列\-アプリケーションの多言語化とローカライズのためのリソースファイルを含むフォルダー。
- Package.appxmanifest-主要な設定、使用される機能、アプリケーション名、タイルおよびその他のパラメーターを記述するアプリケーションマニフェスト。
- App.xaml-アプリケーションの初期化。
- HubPage.xaml-アプリケーションのメイン画面。 ストアの商品カテゴリのリストが含まれます。
- SectionPage.xaml-製品カテゴリ。
- ItemPage.xaml-詳細な製品情報の表示画面。
F5キー 、緑色の矢印を押すか、 [デバッグ] -> [デバッグの開始]を選択して、アプリケーションの起動を試みます。
アプリケーションの仕組みをご覧ください。
- アプリケーション画面を右にスクロールしてみてください。
- 別の灰色のタイルをクリックしてみてください。
- グループのタイトルをクリックしてみてください。
- グループアイテムのタイトルをクリックしてみてください。
- 内部ページの戻るボタンをクリックしてみてください。
Visual Studioに戻り、デバッグを停止します （ Shift + F5 、赤い四角、またはメニューから[ デバッグ] -> [ デバッグの 停止 ]を選択します）。
仕組みを検討してください。
- Hubpage.xaml
- DataModel \ SampleData.json
- DataModel \ SampleDataSource.cs
ハブコントロールに基づく製品カタログストアフロントの作成
偶然、 Hub Appテンプレートを使用してプロジェクトを作成しませんでした。 そして今、 ハブコントロールは既にアプリケーションのメイン画面にあります。
ハブは、アプリケーションの階層ナビゲーションシステムのデザインパターンを実装する新しいコントロールです。
ハブは、アプリケーションへのエントリポイントであり、プロモーションと製品カテゴリのショーケースになります。 このコントロールは、さまざまなデータソースから取得したさまざまなコンテンツ（テキスト、ビデオ、画像）を表示でき、ネストされたコントロールをその中に配置できます。 GridView コントロールまたはListViewコントロールのいずれかを使用して同様の動作を実現できますが、それにはさらに多くの労力が必要になります。
それでは、アプリケーションで作業しましょう。
1. JSON形式でデータを準備します。
SampleData.jsonファイルを開き、次のテキストをコピーします。
{"Groups":[ { "UniqueId": "Group-1", "Title": " Nokia Lumia", "Subtitle": " Nokia Lumia", "ImagePath": "Assets/DarkGray.png", "Description" : " Nokia. . .", "Items": [ { "UniqueId": "Group-1-Item-1", "Title": " COLOUD KNOCK", "Subtitle": " . .", "ImagePath": "Assets/2-Misc-Product-Page-Gear-593x500.png", "Price": "999 .", "Description" : " . .", "Content" : " . ." }, { "UniqueId": "Group-1-Item-2", "Title": " COLOUD POP", "Subtitle": " COLOUD POP", "ImagePath": "Assets/3-Misc-Product-Page-Gear-594x500.png", "Price": "999 .", "Description" : " . .", "Content" : " . ." }, { "UniqueId": "Group-1-Item-3", "Title": " COLOUD BOOM ", "Subtitle": "Item Subtitle: 3", "ImagePath": "Assets/1-Misc-Product-Page-Gear-636x500.png", "Price": "999 .", "Description" : " . .", "Content" : " . ." }, { "UniqueId": "Group-1-Item-4", "Title": " NOKIA PURITY PRO MONSTER", "Subtitle": " NOKIA PURITY PRO MONSTER", "ImagePath": "Assets/BH-940-Front.png", "Price": "999 .", "Description" : " , ", "Content" : " , " }, { "UniqueId": "Group-1-Item-5", "Title": " NOKIA PURITY", "Subtitle": " NOKIA PURITY", "ImagePath": "Assets/WH-920-cyan-png.png", "Price": "999 .", "Description" : " -", "Content" : " -" } ] }, { "UniqueId": "Group-2", "Title": " ", "Subtitle": " ", "ImagePath": "Assets/LightGray.png", "Description" : " . ", "Items": [ { "UniqueId": "Group-2-Item-1", "Title": " NOKIA DC-50", "Subtitle": " NOKIA DC-50", "ImagePath": "Assets/Nokia-Portable-Wireless-Charging-Plate-DC-50.png", "Price": "999 .", "Description" : " ", "Content" : " " }, { "UniqueId": "Group-2-Item-2", "Title": " NOKIA DC-19", "Subtitle": " NOKIA DC-19", "ImagePath": "Assets/Nokia-universal-portable-USB-charger-DC-19.png", "Price": "999 .", "Description" : " ", "Content" : " " }, { "UniqueId": "Group-2-Item-3", "Title": " ", "Subtitle": " ", "ImagePath": "Assets/DT-900-Front.png", "Price": "999 .", "Description" : " ", "Content" : " " } ] } ] }
テスト充填用の製品の写真と説明は、ノキアのWebサイトwww.nokia.com/ru-ru/accessories/all/headsetsから取得しました。
2.アプリケーションインターフェイスを準備し、データを表示します。
アプリケーションのメイン画面には、4つの水平スクロールセクションがあります。
- アプリケーションの名前と背景画像を含むセクション。
- プロモーションアイテムのあるセクション。
- 製品カテゴリの2つのセクション。 これらは、共通の表示テンプレートを使用して、外観が同じ2つのセクションになります。
HubPage.xamlファイルを開き、次のコードをそこに貼り付けます。
<Page DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" x:Name="pageRoot" x:Class="eShop.HubPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:eShop" xmlns:data="using:eShop.Data" xmlns:common="using:eShop.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <DataTemplate x:Key="CategoryItemTemplate"> <Grid Height="280" Width="310" Margin="5,10,5,10"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Height="150"> <Image Source="{Binding ImagePath}" Stretch="None" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel Grid.Row="1" Margin="0,10,0,0"> <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/> <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" /> </StackPanel> <Button Grid.Row="2" Content="" Margin="0,10,0,0" HorizontalAlignment="Right" /> </Grid> </DataTemplate> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </Grid.ChildrenTransitions> <Hub SectionHeaderClick="Hub_SectionHeaderClick" > <Hub.Header> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="80"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="backButton" Style="{StaticResource NavigationBackButtonNormalStyle}" Margin="-1,-1,39,0" VerticalAlignment="Top" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" AutomationProperties.Name="Back" AutomationProperties.AutomationId="BackButton" AutomationProperties.ItemType="Navigation Button"/> <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" VerticalAlignment="Top" IsHitTestVisible="false" TextWrapping="NoWrap" /> </Grid> </Hub.Header> <HubSection Width="780" Margin="0,0,80,0"> <HubSection.Background> <ImageBrush ImageSource="Assets/Background.jpg" Stretch="UniformToFill" /> </HubSection.Background> </HubSection> <HubSection Width="500" Header=" " > <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Image Source="Assets/DT-900-Front.png" Stretch="None" Width="420" Height="280"/> <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap" Text=" " /> <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="2" Text=" - !" /> <Button Grid.Row="3" Content="" Margin="0,10,0,0" HorizontalAlignment="Right" /> </Grid> </DataTemplate> </HubSection> <HubSection IsHeaderInteractive="True" DataContext="{Binding Group1Items}" Header="{Binding Title}" Padding="40,40,40,32"> <DataTemplate> <GridView x:Name="itemGridView" ItemsSource="{Binding Items}" Margin="-9,-14,0,0" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Items In Group" ItemTemplate="{StaticResource CategoryItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> </GridView> </DataTemplate> </HubSection> <HubSection IsHeaderInteractive="True" DataContext="{Binding Group2Items}" Header="{Binding Title}" Padding="40,40,40,32"> <DataTemplate> <GridView x:Name="itemGridView" ItemsSource="{Binding Items}" Margin="-9,-14,0,0" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Items In Group" ItemTemplate="{StaticResource CategoryItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> </GridView> </DataTemplate> </HubSection> </Hub> </Grid> </Page>
次の行に注意してください。
<Page DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}">
{Binding DefaultViewModel} -このページ内のデータをバインドするために使用できるオブジェクト、要素のコレクションを定義します。
<HubSection DataContext="{Binding Group1Items}" Header="{Binding Title}">
{Binding Group1Items} -コントロールの表示用にデータを取得するオブジェクトを決定します。 Group1Itemsオブジェクトには、製品カテゴリとその中に存在する製品に関する情報が含まれています。
{Binding Title} -Group1Itemsオブジェクトの製品カテゴリの名前を含むプロパティを指します。
コントロールへのデータバインディングの詳細については、 こちらをご覧ください 。
3.データを取得してバインドします。
HubPage.csファイルを開き、その中のnavigationHelper_LoadStateメソッドを見つけて、次のコードに置き換えます。
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e) { var sampleDataGroup1 = await SampleDataSource.GetGroupAsync("Group-1"); this.DefaultViewModel["Group1Items"] = sampleDataGroup1; var sampleDataGroup2 = await SampleDataSource.GetGroupAsync("Group-2"); this.DefaultViewModel["Group2Items"] = sampleDataGroup2; }
SampleDataSource.GetGroupAsyncメソッド-SampleData.jsonファイルから製品とカテゴリのデータを受け取ります。このファイルには最初にコンテンツが入力されています。
SampleDataSourceオブジェクトは、テンプレートを使用してプロジェクトが作成されたときに自動的に生成され、次のデータモデルを持ちます。
DefaultViewModelはパブリックプロパティです。これは、インターフェイスをデータにバインドするためにページで使用されるオブジェクトのディレクトリです。 ページでの使用は、<Page>タグで定義されます。
4.アプリケーションを起動します。
F5キー 、緑色の矢印を押すか、 [デバッグ] -> [デバッグの開始]を選択して、アプリケーションを起動できます。
結果のアプリケーションの外観を以下の図に示します。
ご覧のとおり、アプリケーションは視覚的に変化し、ローカルデータの使用方法を学習しました。 ただし、完全なアプリケーションを作成する前に、まだやることがたくさんあります。
これは、次の記事で行います。
リンクから完成した例をダウンロードできます： http : //sdrv.ms/1gKmlvw