Pivot を使ったチュートリアルのページを簡単に作る

#wp7dev_jp

出来ればヘルプやチュートリアルのページがあったほうがアプリとしてはうれしいですが、作るのが大変。

簡単な方法は、手順通りに画面キャプチャしてみせること。

その時に便利なのが、Pivotです。ウイザード的な処理は大体やってくれます。が、そのPivotを使ったページを作るのが面倒。そこで作ってみました。

Pivot を使ったチュートリアルを作ってみる

出来ればこの辺は頭を使いたくないので、コピペでできるものを考えています。事前に元画像ファイルは取得しておきましょう。

あとは、起動すると勝手に画像ファイルを読み込み、ピボットページを作ってくれます。ね？簡単でしょ？

追加するコード

 // コンストラクター

public Tutorial()

    InitializeComponent();

    //システムトレイの表示を消す

    SetValue(SystemTray.IsVisibleProperty, false);

    //画面上にあるすべてのコントロールを消去

    for (int i = 0; i < LayoutRoot.Children.Count; i++)

        LayoutRoot.Children.RemoveAt(0);

    // プロジェクトリソースから Tutorial 名前がついたものを抽出

    // 画像ファイルのビルドアクションは 「埋め込まれたリソース」に。

    Assembly app = Assembly.GetExecutingAssembly();

    string[] allRes = app.GetManifestResourceNames();

    string[] imgRes =

        allRes.Where(a => a.Contains(".Tutorial.")).ToArray();

    Array.Sort(imgRes);

    // 画像の数を取得

    int count = imgRes.Length;

    // 該当の画像がなければ終了

    if( count == 0 )return;

    //Pivot を作成

    Pivot mypivot = new Pivot();

    //画像ファイルを含むPivotのページを作る

    for (int i = 0; i < count; i++)

        // 画像ファイルのストリームからBitmapImageを作成

        Stream imageStream =

            app.GetManifestResourceStream(imgRes[i]);

        BitmapImage bmp = new BitmapImage();

        bmp.SetSource(imageStream);

        // Imageコントロールを作成し BitmapImage を読み込む

        Image img = new Image() { Source = bmp };

        // Pivotのページを作り、作成したImageコントロールを配置

        PivotItem pivotpage = new PivotItem();

        pivotpage.Content = img;

        // 作成したPivotページをPivotコントロールに追加する

        mypivot.Items.Add(pivotpage);

    // ここはなくてもいい

    // Pivotページをタップすると次のページに飛ぶ仕組み

    mypivot.Tap += (s, ex) => {

        if (mypivot.SelectedIndex == mypivot.Items.Count - 1)

            mypivot.SelectedIndex = 0;

        else

            mypivot.SelectedIndex++;

};

    //画面上にすべてのページを含むPivotを配置

    LayoutRoot.Children.Add(mypivot);

コード内の手順はこんな感じです。

画面上の不要なものはすべて消す
Pivot を作る。
1. リソースファイル一覧を取得し、そこから関連画像だけを抽出
2. 画像リソースから Image コントロールを作成し
3. 作成したコントロールを含む Pivot のページを作
4. Pivotにページを追加する。
完成したPivotを画面上に配置

このコードにはいろいろな要素が含まれるので、こういった視点で見ても面白いかもしれませんん。

Additional resources