ユニバーサルWindowsアプリ(Pre)入門008:GitHubのサンプルを読んでみる

水曜日 , 24, 6月 2015 Leave a comment

 毎度のお約束、本記事はプレビュー状態のOS、IDE、SDKを利用しております。製品版では異なる可能性があります。

 

 本記事はWindows 10向けのユニバーサルWindowsアプリについて学んだことを残して行く記事です。

 これまでの記事はカテゴリ「UWP(Win 10) Preview」を参照ください。

 

GitHubのサンプルコードから学ぼう

 

 前回紹介したGitHubのサンプルコードの一つを眺めてみることにします。

 ユニバーサルWindowsアプリの作り方などの参考になりそうな部分をピックアップしてみようと思います。

 サンプルはGitHubからクローンするかZip形式でダウンロードしてきます。

 

fileaccessプロジェクトを開く

 

 まずはfileaccessプロジェクトを覗いてみます。基本となるファイル操作処理っぽいプロジェクト名なので、読みやすいと予想。

 ファイルの構成はこんな感じ。

 MainPage.xamlがあって、それぞれのシナリオに対応したxamlファイルがそれぞれある感じですね。

003

 

プログラムを実行してみる

 

 Windows Phone側の動作はこんな感じ。

 各シナリオがリストになったメニューが表示されますが、左上の横線4本のアイコンで表示非表示が切り替え可能。このコントロールは便利そう。

wp_ss_20150623_0004

 

 メニューを消すとこんな感じ。

wp_ss_20150623_0003

 ストアアプリは画面幅に余裕があるので、こんな表示に。ストアアプリでもWindows Phoneでも同じXAMLっぽいですね。Win8.1の知識だとMainPage.xamlが大枠でFrameか何かを使ってそれぞれのシナリオ用のxamlを中に読み込んで切り替えるという方法かな。さて、どうでしょう。

 

XAMLを眺めてみる

 

 MainPage.xamlを開いてみます。

 XAMLエディターのデザインビューを見ると、左上のプルダウンで画面幅などを変更してデザインを確認できることがわかります。

006

 

 MainPage.xamlのコードを見ると見慣れないコントロールがあります。RelativePanelとSplitViewというレイアウト系と思しきコントロールが二つ。メニューの仕組みなどはこの辺に答えがありそうですが、とりあえず先に進みましょう。

 各ページはFrameコントロールで読み込んでいるのは予想通り。基本はWinRTの知識で行ける感は更に強まりました。

 

MainPage.xaml.csを読んでみる

 

 MainPage.xamlのコードビハインドを確認。

 staticな変数としてMainPage(自分自身)を保持しています。

 

public static MainPage Current;

 

 Frameで読み込んだ各ページから親ページの操作を行いたい場合などに利用するのかなぁ。

 画面表示時に画面幅に応じてScenarioControlというname属性を持つリストボックスのSelectedIndexの値を操作しています。

 

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Populate the scenario list from the SampleConfiguration.cs file
            ScenarioControl.ItemsSource = scenarios;
            if (Window.Current.Bounds.Width < 640)
            {
                ScenarioControl.SelectedIndex = -1;
            }
            else
            {
                ScenarioControl.SelectedIndex = 0;
            }
        }

 

 手元に横幅640以下を実現できる端末が無いなぁと困りましたが、ローカルで実行するストアアプリは幅を狭めた状態で終了すると、その時の幅で次回起動するので、それで再現。

 横幅が狭い場合は、下画像のようにシナリオが選択されていない状態で起動し、ユーザーがどれかシナリオを選択することでメニューが消えて画面にシナリオが表示されるという流れになるような設定でした。確かにこの幅だと最初に何も選択されていない方が自然な動作ですね。

007

 コードを眺めた感じ、サンプルということで、すごく処理が追いやすいコードになっています。Win 8の頃のサンプルは探し難かったなぁという苦い思い出は過去のものとなったようです。

 

ファイル操作

 

 今回はコードをざっくり眺めてみるのが主眼でしたが、ファイル操作の部分も折角なので見てみましょう。

 

            StorageFolder storageFolder = KnownFolders.PicturesLibrary;
            rootPage.sampleFile = await storageFolder.CreateFileAsync(MainPage.filename, CreationCollisionOption.ReplaceExisting);

 

 WinRTのファイル操作とほとんど同じ感覚ですね。

 IoTとかだとKnownFoldersどうなるんだろとか、セキュリティサンドボックスはどう変わるのかなど細かく気になることがありますがこれも後に調べることにします。

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です