名刺アプリ作成のすすめ(Windows 8.1 アプリ開発入門) 第8回 ～ グリッド ページ (著書一覧ページ) からWebサイトにとばす ～

  • Article

マイクロソフトの田中達彦です。
本連載では、Windows 8.1に対応した名刺アプリの作り方を通じて、アプリの開発方法を説明します。
今回は、第7回で編集した画像データを表示しているページを修正していきます。

[第7回までのグリッド ページ]
第7回までの記事の内容を実装したアプリを起動させると、以下のような画面が表示されます。

ここで花札の画像をクリックしたり、「花札 >」と書かれた場所をクリックすると、以下の画像が表示されます。

花札の画像をクリックしたときはItemDetailPage.xamlが表示され、「花札 >」をクリックするとGroupDetailPage.xamlが表示されるのです。

[特定のWebサイトの表示]
ItemDetailPageやGroupDetailPageをそのまま使用しても良いのですが、ここでは画像をクリックすると特定のWebサイトを表示させるように変更します。
Windowsストアに公開している名刺アプリでも、特定のWebサイトを表示させるようにしています。

表示させるWebサイトのURLは、SampleData.jsonに記載します。
SampleData.jsonは既に第6回の記事で変更しています。
そのとき、個々のデータのTitle、Subtitle、ImagePathを変更しました。
アプリでまだ使用していない項目としては、DescriptionとContentがあります。
どちらを使用してもよいのですが、ここではDescriptionを利用しましょう。
今はSampleData.jsonの項目を変えずに利用しています。もちろん、項目そのものを変えてしまっても構いません。

それでは、松に鶴のデータのDescriptionの部分を以下のように任意のURLに変更します。
ここではhttps://www.microsoft.com/ja/jp/に変更しています。

次に、GroupedItemsPage.xaml.csを変更します。
変更する場所は、ItemView_ItemClickの中です。
このイベントハンドラーは、アイテムがクリックされたときに呼ばれます。
変更前はクリックしたアイテムの詳細が表示されます。
これを変更後のコードの黄色でマーカーしているように変更します。

(変更前)
void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    // 適切な移動先のページに移動し、新しいページを構成します。
    // このとき、必要な情報をナビゲーション パラメーターとして渡します
    var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
    this.Frame.Navigate(typeof(ItemDetailPage), itemId);
}

(変更後)
async void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    // 適切な移動先のページに移動し、新しいページを構成します。
    // このとき、必要な情報をナビゲーション パラメーターとして渡します
    var url = ((SampleDataItem)e.ClickedItem).Description;

    if(url.Substring(0, 5) == "http:")
        await Windows.System.Launcher.LaunchUriAsync(new Uri(url));
}

ここでは、SampleData.jsonのDescriptionに書かれている文字列を取得し、もしその文字列の最初の5文字が http: で始まるものであれば、そのWebサイトを表示させています。
これを実行すると、以下のようになります。

[グループ詳細ページの非表示]
「花札 >」と書かれたところをクリックするとグループ詳細ページであるGroupDetailPageが表示されます。
ここではグループ詳細ページを表示させる必要はないため、「花札 >」をクリックしても何もしないように変更します。
「花札 >」をクリックしたときの処理は、GroupedItemsPage.xaml.csのHeader_Clickというイベントハンドラー内で行っていますので、ここに以下の黄色くマーカーしているようにreturnを追加して何もしないように変更します。

void Header_Click(object sender, RoutedEventArgs e)
{
    return;

    // ボタン インスタンスがどのグループを表すかを確認します
    var group = (sender as FrameworkElement).DataContext;

    // 適切な移動先のページに移動し、新しいページを構成します。
    // このとき、必要な情報をナビゲーション パラメーターとして渡します
    this.Frame.Navigate(typeof(GroupDetailPage), ((SampleDataGroup)group).UniqueId);
}

ここでは、returnを加えずに、Header_Clickの中身を丸ごと削除してしまっても構いません。

さらに、もっと情報があるという印の「>」を表示させないために、GroupedItemsPage.xamlの以下の黄色でマーカーした行をまるまる削除します。

    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid Margin="0,0,0,2">
                        <Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
                            AutomationProperties.Name="Group Title"
                            Click="Header_Click"
                            Style="{StaticResource TextBlockButtonStyle}" >
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
                                <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
                            </StackPanel>
                        </Button>
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </GridView.GroupStyle>
</GridView>

これで「>」が表示されなくなりました。

次回は、アプリを起動したときに表示させるハブ ページを作成する方法を紹介します。

[前後の記事]
第7回 グリッド ページ (著書一覧ページ) を整える
第9回 ハブ ページ (トップページ) の追加

マイクロソフト
田中達彦