連載
» 2013年12月13日 16時17分 公開

連載:Windowsストア・アプリ開発入門:第8回 入力されたデータを保存する (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エディター) 「お気に入り」に追加するための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#)
太字の部分を追加する。
何やら複雑なようだが、「お気に入り」を追加している部分はシンプルだ。フライアウトとアプリバーを閉じるための処理が煩雑になっている。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。