第8回 入力されたデータを保存する：連載：Windowsストア・アプリ開発入門（5/6 ページ）

[山本康彦（http://www.bluewatersoft.jp/），BluewaterSoft]

画面にコントロールを組み込む

　上で作ったユーザーコントロールを記事表示画面に組み込むと、「お気に入り」に追加する機能が完成する。「ViewPage.xaml」ファイルを開き、AppBarButtonコントロールとFlyoutコントロール、そして作成したユーザーコントロール（＝FavoriteControlコントロール）を追加する（次のコードと画像）。

<Page
  x:Name="pageRoot"
  x:Class="AtmarkItReader.ViewPage"
  ……省略……
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"

  xmlns:fv="using:AtmarkItReader.Favorite"
  >
  ……省略……
  <Page.BottomAppBar>
    <CommandBar Background="#00a2e8" Opened="bottomAppBar_Opened">
      <CommandBar.SecondaryCommands>

        <!-- 【第8回】「お気に入り」ボタンを追加 -->
        <AppBarButton x:Name="addFavoriteButton" Icon="Favorite" Label="お気に入りにする"
                      ToolTipService.ToolTip="この記事をお気に入りに追加します">
          <AppBarButton.Flyout>
            <Flyout>
              <fv:FavoriteControl />
            </Flyout>
          </AppBarButton.Flyout>
        </AppBarButton>
        <AppBarSeparator />
        ……省略……

記事表示画面に「お気に入りにする」ボタンを追加する（XAML）
太字の部分を追加する。ユーザーコントロールは新しい名前空間にあるので、その指定も必要だ。
また、既存のボタンとグループ分けするためにAppBarSeparatorコントロールも追加した。
なお、このように<AppBarButton.Flyout>タグの中に記述したフライアウトコントロールは、ボタンがタップされると自動的にポップアップする。

記事表示画面に「お気に入りにする」ボタンを追加する（XAMLエディター）

　ところで、このページのデータコンテキストにはFeedItemオブジェクトがセットされている（第5回参照）。すると、AppBarButtonコントロールにも、その中のFlyoutコントロールにも、そしてその中のユーザーコントロールにも、データコンテキストとしてFeedItemオブジェクトが引き継がれている。ユーザーコントロールを作り始めるところで「DataContextにはFeedItemオブジェクトをバインドして使うことにする」と決めたが、このように画面に組み込んだだけでそれは実現できているのだ。

　「お気に入り」に追加する機能は、これで完成だ。

「お気に入り」を表示する機能を実装する

　「お気に入り」をファイルから取り出すロジックは、すでにGetFavoriteFeedAsyncメソッドとして実装済みだ。あとは、WebサービスからRSSフィードを取得するところで、「お気に入り」のデータも付け加えれば、メイン画面と一覧画面に「お気に入り」が表示される。

「お気に入り」のデータを追加するロジック

　DataLoaderクラスのLoadStartメソッドに、「お気に入り」のデータを追加する処理を追加する。なお、これまでLoadAsyncメソッドの中で暫定的にダミーの「お気に入り」データを追加していた部分は削除する（次のコード）。

public class DataLoader
{
  ……省略……
  public static async void LoadStart(DataModel.FeedsData feedsData)
  {
    await LoadAsync(feedsData);

    // 【第8回】ローミングフォルダーのファイルから読み込んだ「お気に入り」を追加する
    var favoriteFeed = await Logic.FavoriteStorage.GetFavoriteFeedAsync();
    feedsData.Feeds.Add(favoriteFeed);
  }

  internal static async Task<DataModel.FeedsData> LoadAsync(DataModel.FeedsData feedsData)
  {
    ……省略……

    ////空の「お気に入り」を追加する
    //AddEmptyFavorite(feedsData);

//#if DEBUG && ASYNC_TEST
//      // 《テスト》「お気に入り」にダミーのデータを追加する
//      if (!FeedDownloder.TEST)
//      {
//        feedsData.Feeds[URLs.Length].Items.Add(
//          new DataModel.FeedItem("ダミー記事データ", "http://www.bluewatersoft.jp", "2013/11/15")
//        );
//      }
//#endif

    feedsData.IsLoaded = true;
    return feedsData;
  }

  //private static void AddEmptyFavorite(DataModel.FeedsData feedsData)
  //{
  //  // 【第7回】繰り返し呼び出されたときは、新たに追加せず、既存データを消す
  //  var currentData = feedsData.Feeds.Find("お気に入り");
  //  if (currentData != null)
  //  {
  //    currentData.Items.Clear();
  //    return;
  //  }
  //
  //  feedsData.Feeds.Add(new DataModel.Feed("お気に入り"));
  //}
}

画面に表示するデータに「お気に入り」のデータも追加する（C#）
太字の部分を追加／変更する。
これまで暫定的にダミーの「お気に入り」を追加していた部分とAddEmptyFavoriteメソッドは、不要になるので削除する。

画面を改修する

　メイン画面と記事一覧画面で、「お気に入り」のデータにコメントが入っていたら、それをツールチップとして表示するようにしよう。どちらもデータバインドを追加するだけだ（次のコードと画像）。

【メイン画面（HubPage.xaml）】
<ListView.ItemTemplate>
  <DataTemplate>
    <Border Background="BlueViolet" Width="500"
            ToolTipService.ToolTip="{Binding FavoriteComment}">
      <!-- 【第8回】↑ToolTipを追加 -->

      <StackPanel Margin="15,10,35,10">
        <TextBlock Text="{Binding Title}" Foreground="White" FontSize="24" TextWrapping="Wrap" />
        <TextBlock Text="{Binding PubDate}" Foreground="White" FontSize="12" />
      </StackPanel>
    </Border>
  </DataTemplate>
</ListView.ItemTemplate>

【記事一覧画面（FeedPage.xaml）】
<GridView.ItemTemplate>
  <DataTemplate>
    <Grid Background="{StaticResource TileBackground}" Width="300" Height="120" Margin="0,0,20,0"
          ToolTipService.ToolTip="{Binding FavoriteComment}">
      <!-- 【第8回】↑ToolTipを追加 -->

      <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <TextBlock Text="{Binding Title}" Foreground="White" FontSize="24"
                 Margin="15,5,15,5" MaxHeight="70"
                 TextWrapping="Wrap" TextTrimming="CharacterEllipsis" />
      <TextBlock Grid.Row="1" Text="{Binding PubDate}" Foreground="White" FontSize="12"
                 Margin="15,0,15,10" />
    </Grid>
  </DataTemplate>
</GridView.ItemTemplate>

「お気に入り」のコメントをツールチップとして表示する（XAML）
太字の部分を追加する。

「お気に入り」のコメントをツールチップとして表示する（XAMLエディター）
メイン画面には複数のListViewコントロールがあるが、ツールチップを追加するのは最後のもの（「お気に入り」のリスト）だけである（「Background="BlueViolet"」という指定のある<Border>開始タグに追加する）。

　以上で、「お気に入り」に追加した記事が、メイン画面と記事一覧画面に表示されるようになった。なぜこれだけでと思うかもしれないが、LoadStartメソッドに追加したコードの意味をよく考えていただきたい。そこでは、FavoriteStorageクラスが管理しているFeedオブジェクトを、アプリケーションリソースであるfeedsDataオブジェクトにそのまま追加した。ということは、記事表示画面のフライアウトで追加した「お気に入り」のデータは、アプリケーションリソースが持っているデータにも反映されているのだ。