UWPでMVVMが～とか考える前に初心者にとってもとっつきやすい（とっついたあとはガンバ！）というのを紹介したいと思います。

ということで、UWPアプリで簡単な画像ビューワーを作ってみましょう！

プロジェクトの作成

プロジェクトの新規作成でVisual C# → Windows → ユニバーサル → 空白のアプリ（ユニバーサルWindows）を作成します。プロジェクト名はImageViewerAppとしておきましょう。

画面の作成

次に画面を作成します。画面上部に画像を開くボタンを置いて、その下にスクロールビューワーの中に画像を表示する領域を作ります。

<Page x:Class="ImageViewerApp.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:ImageViewerApp"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition /></Grid.RowDefinitions><Button Content="Open"HorizontalAlignment="Stretch"Click="ImageOpenButton_Click" /><ScrollViewer Grid.Row="1"HorizontalScrollBarVisibility="Auto"><Image x:Name="Image" /></ScrollViewer></Grid></Page>

コードビハインドの作成

ButtonのClickのImageOpenButton_Clickにカーソルを合わせてF12を押します。するとボタンを押したときの処理のコードが作成されます。ここに画像を開いて読み込む処理を記述します。usingに注意しながら、ImageOpenButton_Clickイベントハンドラの中身を記述していきます。FileOpenPickerやBitmapImageでusingの追加がいりますが、FileOpenPickerと入力したあとにCtrl + .を押すとusingを補間するか聞いてくれます。

using System;
using Windows.Storage.Pickers;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 を参照してくださいnamespace ImageViewerApp
{
    /// <summary>/// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。/// </summary>publicsealedpartialclass MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private async void ImageOpenButton_Click(object sender, RoutedEventArgs e)
        {
            // 画像を開くダイアログをの設定
            var picker = new FileOpenPicker();
            picker.FileTypeFilter.Add(".png");
            picker.FileTypeFilter.Add(".jpg");
            picker.FileTypeFilter.Add(".jpeg");

            // ファイルを1つ選択する
            var file = await picker.PickSingleFileAsync();
            if (file != null)
            {
                // ファイルを選択していたら開く。using (var s = await file.OpenReadAsync())
                {
                    // 画像に読み込んでコントロールにセットする
                    var bitmap = new BitmapImage();
                    bitmap.SetSource(s);
                    this.Image.Source = bitmap;
                }
            }
        }
    }
}

実行して動作確認

うまくいってると実行してボタンを押すと画像を開くダイアログがでます。画像を開くと、以下のような感じでいい感じに画像が表示されます。

まとめ

ということで、UWPで簡単な画像ビューワーを作ってみました。 超簡単でしょう？

XAMLとC#を使った開発でMVVM！とか気を張らずに、これくらいのゆるい感じでとっかかるのもいいのではないかと思います。コレクションはDataTemplate使わないと死ぬので、どこだけは押さえてあとは緩くいってもいいかなぁと思う今日この頃。

あ、でも個人的にはMVVMちっくに作るほうが平和だと思ってます。