Visual Studio のテンプレート データをカスタマイズする方法 (XAML)

Applies to Windows and Windows Phone

ハブグリッド分割ピボットのページには、データが最初から表示されています。それを可能にするファイル、コード、XAML タグがこれらのテンプレートには含まれているためです。 空白のページにゼロから追加するよりも、これらのファイルを編集した方が簡単にデータを表示できます。

詳しい例については、「クイック スタート: サービスからデータを読み取る」をご覧ください。

項目とグループ

ハブグリッド分割ピボットの各プロジェクトでは、データが項目のグループで整理されます。 プロジェクトの SampleDataSource ファイルには、こうした項目のグループが含まれています。 そのために、次の 3 つのクラスが定義されています。

  • SampleDataGroup
  • SampleDataItem
  • SampleDataSource

The SampleDataSource は、グループと項目のインスタンスを作成し、プロジェクトの SampleData.json ファイルからのデータを使ってインスタンスにデータを投入します。

実際のデータが SampleDataItem クラスと SampleDataGroup クラスの構造によく似ている場合は、GetSampleDataAsync 関数のコードに変更を加えることでデータを取得することができます。データのプロパティを新たに追加する場合、SampleDataItem と SampleDataGroup のコンストラクターに変更を加える必要があります。

接続先となるライブ データが設計段階では利用できない (または十分な速さで読み込むことができない) 可能性がある場合、DesignData ソースを変更して代わりのサンプル データを用意することもできます。このようにすると、XAML デザイナーのデザイン サーフェイスでデータを表示できます。グリッド アプリ テンプレートの GroupDetailPage.xaml の例を以下に示します。この例ではほかにも、設計時に SampleData.json で定義される既定のサンプル データを使います。


<CollectionViewSource
    x:Name="itemsViewSource"
    Source="{Binding Items}"
    d:Source="{Binding Groups[0].Items, Source={d:DesignData Source=/DataModel/SampleData.json}}"/>


XAML ファイル内の他の DesignData 参照と共に、DesignData ソースをそのまま使った場合には、設計時の値は SampleData.json から取得されます。

ユーザー インターフェイスへのグループと項目データのバインド

テンプレートでは、通常、データは既定の DataContext を通じて UI にバインドされます。 DataContext は、各ページで定義されている DefaultViewModel にバインドされます。

各ページでは、LoadState イベントで SampleDataSource への呼び出しを使って、データを読み込みます。データが取得されると、次の例に示すように、DefaultViewModel に割り当てられます。


var sampleDataGroups = await SampleDataSource.GetGroupsAsync((String)e.NavigationParameter);
this.DefaultViewModel["Groups"] = sampleDataGroups;

データの複数のインスタンスを書式設定して表示する場合、通常は、XAML ページに実装されているデータ テンプレートを使います。次の例に示すように、各データ テンプレートは、XAML で明示的に定義されたプロパティにバインドされます。


<DataTemplate>
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
            <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
        </Border>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
             <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                 Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
             <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
                 Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
        </StackPanel>
    </Grid>
</DataTemplate>>

プロジェクト テンプレートではデータに特定のプロパティが存在することを想定しており、XAML ではこれらのプロパティに明示的に名前が付けられることを理解することが重要です。上に示した GroupedItemsPage の XAML コードでは、title、subtitle、image path などのプロパティを見つけることができます。カスタム アプリのデータでこれらの特定のプロパティ名を使わない場合は、次のいずれかを行う必要があります。

  • 自分のデータを (通常は SampleDataSource 内の) これらのプロパティ名にマップする。
  • テンプレート コードでこれらのプロパティへの XAML とコード参照をすべて修正し、自分のデータで使われているプロパティ名と一致するようにする。

プロジェクトにデータを投入する方法の例

まず、グループと項目が実際のデータのフィールドを反映するように SampleDataSource ファイルを更新します。次に、そのデータをページ内のフィールドにバインドします。このセクションでは、RSS データを生成するための要求を行います。

JJ655409.wedge(ja-jp,WIN.10).gifSampleDataSource の更新

  1. Visual Studio のメニューで、[ファイル][新しいプロジェクト] の順にクリックします。
  2. [新しいプロジェクト] ダイアログ ボックスの左側のウィンドウで、[Visual C#][Visual Basic]、または [Visual C++] ノードを展開します。
  3. 中央のウィンドウで、[ハブ アプリ][グリッド アプリケーション]、または [分割アプリケーション] をクリックします。
  4. [名前] ボックスに「DataModelExample」と入力し、[OK] をクリックします。

    ソリューションが作られ、プロジェクト ファイルがソリューション エクスプローラーに表示されます。プロジェクト ファイルについて詳しくは、「C#、VB、C++ のプロジェクト テンプレート」をご覧ください。

    重要  Visual Studio を初めて起動したときに、開発者用ライセンスを取得するように求められます。詳しくは、「開発者用ライセンスの取得」をご覧ください。

  5. DataModel フォルダーの SampleDataSource を開きます。
  6. SampleDataItem で、公開日、作成者、リンクに関するプロパティを追加し、コンストラクターを更新します。SampleDataItem の新しいコンストラクター コードは以下のとおりです。
    
    public SampleDataItem(String uniqueId, String title, String subtitle, String imagePath,
         String description, String content, String pubDate, String author, String uriLink)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Subtitle = subtitle;
        this.Description = description;
        this.ImagePath = imagePath;
        this.Content = content;
        // Added
        this.PubDate = pubDate;
        this.Author = author;
        this.Link = uriLink;
    }
    
    
    
  7. SampleDataItem に新しいプロパティの宣言を追加します。
    
        // Added
        public string PubDate { get; private set; }
        public string Author { get; private set; }
        public string Link { get; private set; }
    
    
  8. SampleDataGroup で、公開日の新しいプロパティを追加して、コンストラクターを更新します。SampleDataGroup の新しいコンストラクター コードは以下のとおりです。
    
    public SampleDataGroup(String uniqueId, String title, String subtitle, String imagePath,
        String description, String pubDate)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Subtitle = subtitle;
        this.Description = description;
        this.ImagePath = imagePath;
        // Added
        this.PubDate = pubDate;
    
        this.Items = new ObservableCollection<SampleDataItem>();
    
    }
    
    
  9. SampleDataGroup に新しいプロパティの宣言を追加します。
    
        public string PubDate { get; private set; }
    
    
  10. SampleDataSource で、GetSampleDataAsync 関数とその中のコードをすべて削除します。この関数を、以下に示す GetSampleDataAsync という名前の関数と置き換えます。
    
    private async Task GetSampleDataAsync()
    {
        if (this._allGroups.Count != 0)
            return;
    
        await GetFeedsAsync();
    
    }
    
    

    ヒント  JSON 形式でデータを取得できる場合には、GetSampleDataAsync のサンプル コードをこれよりも多く再利用できることがあります。

  11. SampleDataSource に次の関数を追加します。
    
    
    public async Task GetFeedsAsync()
    {
        Task<SampleDataGroup> feed1 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/developers/atom.aspx");
        Task<SampleDataGroup> feed2 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/windowsexperience/atom.aspx");
        Task<SampleDataGroup> feed3 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/extremewindows/atom.aspx");
        Task<SampleDataGroup> feed4 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/business/atom.aspx");
        Task<SampleDataGroup> feed5 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/bloggingwindows/atom.aspx");
        Task<SampleDataGroup> feed6 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/windowssecurity/atom.aspx");
        Task<SampleDataGroup> feed7 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/springboard/atom.aspx");
        Task<SampleDataGroup> feed8 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/windowshomeserver/atom.aspx");
        // There is no Atom feed for this blog, so we use the RSS feed.
        Task<SampleDataGroup> feed9 =
            GetFeedAsync("http://windowsteamblog.com/windows_live/b/windowslive/rss.aspx");
        Task<SampleDataGroup> feed10 =
            GetFeedAsync("http://windowsteamblog.com/windows_live/b/developer/atom.aspx");
        Task<SampleDataGroup> feed11 =
            GetFeedAsync("http://windowsteamblog.com/ie/b/ie/atom.aspx");
        Task<SampleDataGroup> feed12 =
            GetFeedAsync("http://windowsteamblog.com/windows_phone/b/wpdev/atom.aspx");
        Task<SampleDataGroup> feed13 =
            GetFeedAsync("http://windowsteamblog.com/windows_phone/b/wmdev/atom.aspx");
    
        this._allGroups.Add(await feed1);
        this._allGroups.Add(await feed2);
        this._allGroups.Add(await feed3);
        this._allGroups.Add(await feed4);
        this._allGroups.Add(await feed5);
        this._allGroups.Add(await feed6);
        this._allGroups.Add(await feed7);
        this._allGroups.Add(await feed8);
        this._allGroups.Add(await feed9);
        this._allGroups.Add(await feed10);
        this._allGroups.Add(await feed11);
        this._allGroups.Add(await feed12);
        this._allGroups.Add(await feed13);
    }
    
    
  12. 先頭に次の using ステートメントを追加します。
    
    using Windows.Web.Syndication;
    
    
    
  13. SampleDataSource に次のメソッドを追加します。
    
    private async Task<SampleDataGroup> GetFeedAsync(string feedUriString)
    {
        // using Windows.Web.Syndication;
        SyndicationClient client = new SyndicationClient();
        Uri feedUri = new Uri(feedUriString);
    
        try
        {
            SyndicationFeed feed = await client.RetrieveFeedAsync(feedUri);
    
            string description = "tbd";
            // Use the date of the latest post as the last updated date.
            string date = feed.Items[0].PublishedDate.DateTime.ToString();
    
    
            if (feed.Subtitle != null && feed.Subtitle.Text != null)
            {
                description = feed.Subtitle.Text;
            }
    
            // This code is executed after RetrieveFeedAsync returns the SyndicationFeed.
            // Process it and copy the data we want into our FeedData and FeedItem classes.
            SampleDataGroup feedData = new SampleDataGroup(feed.Id, feed.Title.Text, 
                feed.Subtitle.Text, null, description, date);
    
            foreach (SyndicationItem item in feed.Items)
            {
                string content = "tbd";
                string uriLink = "tbd";
                string author = item.Authors[0].Name.ToString();
                string datePub = item.PublishedDate.DateTime.ToString();
    
                // Handle the differences between RSS and Atom feeds.
                if (feed.SourceFormat == SyndicationFormat.Atom10)
                {
                    content = item.Content.Text;
                    uriLink = new Uri("http://windowsteamblog.com" + item.Id).ToString();
                }
                else if (feed.SourceFormat == SyndicationFormat.Rss20)
                {
                    content = item.Summary.Text;
                    uriLink = item.Links[0].Uri.ToString();
                }
    
                SampleDataItem feedItem = new SampleDataItem(item.Id, item.Title.Text, "tbd",
                    null, null, content, datePub, author, uriLink);
               
                feedData.Items.Add(feedItem);
            }
    
            return feedData;
        }
        catch (Exception)
        {
           return null;
        }
    }
    
    
    
  14. [ビルド][ソリューションのビルド] の順にクリックするか、F7 キーを押して、エラーなしでソリューションがビルドされることを確認します。

以下の手順は、グリッド プロジェクト テンプレートを使ってプロジェクトが作成されていることを前提としています。

JJ655409.wedge(ja-jp,WIN.10).gifページにデータをバインドする方法の例

  1. グリッド アプリ プロジェクト テンプレートでサンプル コードを使うには、GroupedItemsPage.xaml を開きます。
  2. GroupedItemsPage.xaml で、XAML デザイナーの [GridView] ショートカット メニューを開き、[Edit Additional Templates] (追加テンプレートの編集)、[Edit Generated Items (ItemTemplate)] (生成された項目の編集 (ItemTemplate))、[Edit current] (現在の項目の編集) を選択します。

    XAML エディターで GridView の DataTemplate が選択されます。

  3. Subtitle プロパティへのバインドを PubDate プロパティへのバインドで置き換えます。

    このバインドを含む TextBox コントロールはこの例のようになります。

    
    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
        Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
    
    
  4. GroupDetailPage.xaml を開きます。
  5. XAML デザイナーの [GridView] ショートカット メニューを開き、[Edit Additional Templates] (追加テンプレートの編集)、[Edit Generated Items (ItemTemplate)] (生成された項目の編集 (ItemTemplate))、[Edit current] (現在の項目の編集) を選択します。

    XAML エディターで GridView の DataTemplate が選択されます。

  6. DataTemplate で StackPanel を探して、Subtitle を Author に変更します。

    このバインドを含む TextBox コントロールはこの例のようになります。

    
    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}"
        TextWrapping="NoWrap"/>
    
    
  7. XAML デザイナーの左ウィンドウで、[Group subtitle: 1] を選択します。

    XAML エディターで対応する TextBlock が選択されます。

  8. Subtitle プロパティへのバインドをグループ PubDate プロパティへのバインドで置き換えます。

    このバインドを含む TextBox コントロールはこの例のようになります。

    
    <TextBlock Text="{Binding PubDate}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}"
        MaxHeight="60"/>
    
    
  9. プロジェクトを保存し、F5 キーを押してアプリをデバッグします。

    ページ タイトルはすぐに表示されますが、フィード データを取得するのに少し時間がかかります。すべての条件が満たされたら、ホーム ページに各ブログが表示されます。グループの見出しのいずれかをクリックすると、グループの詳細ページが表示されます。

 

 

表示:
© 2014 Microsoft