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

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

フライアウトのコンテンツを作る

　次は、「お気に入り」に追加するためのフライアウトの中身を作ろう。画面のXAMLの中に作り込んでしまうと煩雑になるので、ユーザーコントロールとして作成する。

　プロジェクトに「Favorite」フォルダーを作り、そのフォルダーを右クリックしてメニューから［追加］−［新しい項目］を選んで［新しい項目の追加］ダイアログを出す。そこで［ユーザーコントロール］を選び、名前を「FavoriteControl.xaml」とし、［追加］ボタンをクリックしてファイルを作成する。

　「FavoriteControl.xaml」ユーザーコントロールのDataContextにはFeedItemオブジェクトをバインドして使うことにする。画面には、記事のタイトル、エンドユーザーが入力するコメント欄、そして［追加］と［キャンセル］のボタンなどを配置する（次のコードと画像）。

<UserControl
  x:Class="AtmarkItReader.Favorite.FavoriteControl"
  ……省略……
  mc:Ignorable="d"
  d:DesignHeight="230"
  d:DesignWidth="400"

  Height="230"
  >
  <!-- 実行時の高さ（＝230）は、ソフトウェアキーボードで隠れない寸法にした -->

  <Grid MaxWidth="400">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border x:Name="flyoutTitleBorder" Background="#00a2e8">
      <TextBlock x:Name="flyoutTitleText" FontSize="15" HorizontalAlignment="Stretch"
                 Margin="10,5">お気に入りに追加する</TextBlock>
    </Border>
    <Grid Grid.Row="1" Margin="0,10,0,0">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <TextBlock FontSize="18">タイトル:</TextBlock>
      <TextBlock x:Name="titleText" Grid.Column="1" FontSize="18" FontWeight="Bold"
                 Margin="10,0,0,0" TextTrimming="WordEllipsis"
                 Text="{Binding Title}" ToolTipService.ToolTip="{Binding Title}" />
    </Grid>
    <TextBlock Grid.Row="2" FontSize="18" Margin="0,10,0,0">コメント:</TextBlock>
    <TextBox x:Name="commentText" Grid.Row="3" FontSize="21"
             TextWrapping="Wrap" AcceptsReturn="True"
             ScrollViewer.VerticalScrollBarVisibility="Auto"
             PlaceholderText="コメントを入力してください" />
    <Grid Grid.Row="4" Margin="0,10,0,0">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Button x:Name="favoriteOkButton" Click="favoriteOkButton_Click"
               Width="{Binding ActualWidth, ElementName=favoriteCancelButton, Mode=OneWay}" >
        追加</Button>
      <Button x:Name="favoriteCancelButton" Grid.Column="1" Click="favoriteCancelButton_Click"
               HorizontalAlignment="Right">
        キャンセル</Button>
    </Grid>
  </Grid>

</UserControl>

「お気に入り」に追加するためのUI（XAML）
太字の部分を追加する。イベントハンドラーを実装していないので、まだコンパイルできない。

「お気に入り」に追加するためのUI（XAMLエディター）

　続いて、XAMLで指定したイベントハンドラーをコードビハインドに実装しよう（次のコード）。［追加］ボタンをタップされたときは、データコンテキストからFeedItemオブジェクトを取り出して、先ほど作成したロジックのAddFeedItemAsyncメソッドを呼び出す。

public sealed partial class FavoriteControl : UserControl
{
  public FavoriteControl()
  {
    this.InitializeComponent();
  }

  // ［追加］ボタンがタップされたとき
  private async void favoriteOkButton_Click(object sender, RoutedEventArgs e)
  {
    // FeedItemとエンドユーザーが入力したコメント文字列をAddFeedItemAsyncメソッドに渡す
    string comment = this.commentText.Text.Trim();
    if (comment.Length == 0)
      comment = null;
    await AtmarkItReader.Logic.FavoriteStorage.AddFeedItemAsync(GetCurrentFeedItem(), comment);

    CloseFlyout(); // フライアウトを閉じる
    CloseAppBar(); // アプリバーを閉じる
  }

  // ［キャンセル］ボタンがタップされたとき
  private void favoriteCancelButton_Click(object sender, RoutedEventArgs e)
  {
    CloseFlyout(); // フライアウトを閉じる
  }

  // データコンテキストからFeedItemオブジェクトを取り出す
  private AtmarkItReader.DataModel.FeedItem GetCurrentFeedItem()
  {
    var feedItem = this.DataContext as AtmarkItReader.DataModel.FeedItem;
    return feedItem;
  }

  // フライアウトの中に表示されているなら、フライアウトを閉じる
  private void CloseFlyout()
  {
    var p = this.Parent as FrameworkElement;
    while (p.Parent != null)
    {
      if (p.Parent is Popup)
      {
        // 自分の親、そのまた親とたどっていって、
        // Popupコントロール（フライアウトの親クラス）が見つかったら、
        // それを閉じる。
        (p.Parent as Popup).IsOpen = false;
        break;
      }
      p = p.Parent as FrameworkElement;
    }
  }

  // ページのアプリバーを閉じる
  private void CloseAppBar()
  {
    // 現在画面に表示されているFrameオブジェクト
    var f = Window.Current.Content as Frame;
    if (f == null)
      return;

    // 現在画面に表示されているPageオブジェクト
    var p = f.Content as Page;
    if (p == null)
      return;

    // Pageオブジェクトにアプリバー（下側）があったら、それを閉じる
    var appBar = p.BottomAppBar;
    if (appBar != null)
      appBar.IsOpen = false;
  }
}

ユーザーコントロールのコードビハインド（C#）
太字の部分を追加する。
何やら複雑なようだが、「お気に入り」を追加している部分はシンプルだ。フライアウトとアプリバーを閉じるための処理が煩雑になっている。