TouchDePo - Windows 8 ストアアプリテンプレート


さ、TouchDePoアプリテンプレートを紹介します。このアプリテンプレートは、実行すると、以下の様なページが表示できます。

Full画面のトップページ

各タイルをタッチすると

各タイルの詳細ページに遷移します。

ちゃんとSnap表示にも対応。

        private void tile5_Tapped(object sender, TappedRoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(ItemDetailPage), "tile5");
        }

となっていて、ItemDetailPageに引数を渡して遷移する形態となっています。Navigateメソッドの第二引数はobject型なので、文字列だけでなく、インスタンスを渡すことも可能です。タッチによって表示を変えるには、このコードを置き換えていきます。
タイルにテキスト等の表示を加えたい場合には、

            <Grid Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="250" Height="250">
                <Border>
                    <Image x:Name="tile1" Source="Assets/Color1.png" Tapped="tile1_Tapped"/>
                </Border>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                    <TextBlock x:Name="headerTile1" Text="{StaticResource Tile1Name}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource HeaderTextStyle}"/>
                </StackPanel>
            </Grid>

青字で示したStackPanelにTextBlock等を追加していけばOKです。
このトップページ(BasicPage)はLayoutAwarePageクラスを継承しているので、DefaultViewModelハッシュを使ったデータバインディングなども利用可能です。
他にもLayoutAwarePageだけに、ページのナビゲーションでも履歴や状態変化のハンドリングなどの機能がそろっています。

次に、詳細ページですが、このページは、Visual Studio 2012がデフォルトで用意している、”アイテム詳細ページ”という項目テンプレートを改造したものです。
このアプリでは、グループ - アイテム構造が無いので、FlipViewはいりません。なので、アイテム詳細ページ項目テンプレートを追加し、皮のFlipViewを取っ払って、中身だけにしたものがこのItemDetailPage.xamlです。オリジナルのものと比べてみてください。このページの左側の四角は、トップページでタップされた四角に張り付けてあるPNGファイルと同じものを表示しています。表示は、RichTextColumnsを使い、順に、Title、Image、Contentを張り付けています。
元々のデータバインディングの仕組みを使って、Title、Image、Contentを表示しており、これらの表示だけを変えたい場合には、DataフォルダーのTouchDePoData.csのTouchDePoDataクラスのコンストラクタの実装を変えます。

        // [Customize Point]
        // 各タイルをタッチして表示されたItemDetailPageで行う処理で必要な基本情報で
        // 書き換えます
        public TouchDePoFeatureSource()
        {
            _features.Add(new TouchDePoFeature("tile1", "abc", "Assets/Color1.png", "abcをタッチしました"));
            _features.Add(new TouchDePoFeature("tile2", "def", "Assets/Color2.png", "defをタッチしたんだ"));
            _features.Add(new TouchDePoFeature("tile3", "ghi", "Assets/Color3.png", "ghiをタッチしたよね"));
            _features.Add(new TouchDePoFeature("tile4", "jkl", "Assets/Color4.png", "jklをタッチしたでしょ"));
            _features.Add(new TouchDePoFeature("tile5", "mno", "Assets/Color5.png", "mnoをタッチだぜ"));
            _features.Add(new TouchDePoFeature("tile6", "pqr", "Assets/Color6.png", "pqrをタッチしたぜ"));
            _features.Add(new TouchDePoFeature("tile7", "stu", "Assets/Color7.png", "stuをタッチしましてん"));
            _features.Add(new TouchDePoFeature("tile8", "vwx", "Assets/Color8.png", "vwxをタッチでポ"));
        }

タイル1からタイル8まで順にタップしていくと、上のコードの各行の3番目の引数の文字列が表示されているのが確認できるでしょう。この引数に長文に変えると、一定幅でカラム化された上から下に配置される文字列が右に伸びていきます。

Comments (0)

Skip to main content