#wp7dev_jp

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

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

Tutorial0Tutorial1Tutorial4Tutorial5Tutorial6Tutorial7

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

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

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

 

  1. チュートリアルページを作る(Pivotページではなく空のページでOK)

    image
  2. Tutorial フォルダをプロジェクトに作って、画像をプロジェクトに読み込む
       
    image
    • コピーしたファイルのビルト アクションを「埋め込みリソース」に             
           
      image
      •   コンストラクターの InitializedComponent() 以下にコードをコピペ

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

       

      追加するコード

       

      // コンストラクター
      
      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);
      
      }
      

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

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

      image

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

      • アセンブリリソースの取得
      • 取得した文字列一覧から特定キーワードを含む一覧の取得
      • Grid オブジェクトのコードからの操作
      • リソースストリームから Imageコントロールの作成
      • 実行時に動的に生成されたコントロールへのイベント設定
      • ラムダ式を使った簡易表記