Picker Image

Windows10 & Visual Studio を使って Picker で選択した画像を描画します。

前田稔の超初心者のプログラム入門

プログラムの説明

  1. Picker を使って選択した画像を Image コントロールに描画します。
    Visual Studio で UWP(Universal Windows Platform) のプロジェクトを作成します。
    プロジェクトの作成は XAML で図形を描画 を参照して下さい。
  2. MainPage.xaml を直接編集して Button と Image を貼り付けます。
        <Grid>
            <Button x:Name="button" Content="Button" Margin="10,10,0,0"
                VerticalAlignment="Top" Width="80" Click="Button_Click"/>
            <Image x:Name="image" HorizontalAlignment="Center" Height="800"
                Margin="0,70,0,0" VerticalAlignment="Top" Width="1200"/>
        </Grid>
    
  3. MainPage.xaml.h にボタンクリック関数の宣言を追加します。
        private:
            void Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
        };
    
  4. MainPage.xaml.cpp に using を追加します。
    Navigation の後に追加して下さい。
    using namespace Windows::UI::Xaml::Navigation;
    
    using namespace Windows::Storage::Pickers;
    using namespace Windows::Storage;
    using namespace Windows::Storage::Streams;
    using namespace Windows::UI::Xaml::Media::Imaging;
    using namespace concurrency;
    
  5. MainPage.xaml.cpp に Button_Click() 関数を追加します。
    void App1::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
        auto open = ref new FileOpenPicker();
        open->SuggestedStartLocation = PickerLocationId::PicturesLibrary;
        open->ViewMode = PickerViewMode::Thumbnail;
        
        open->FileTypeFilter->Clear();
        open->FileTypeFilter->Append(".bmp");
        open->FileTypeFilter->Append(".png");
        open->FileTypeFilter->Append(".jpeg");
        open->FileTypeFilter->Append(".jpg");
        open->FileTypeFilter->Append(".gif");
        
        create_task(open->PickSingleFileAsync()).then([this](StorageFile^ file)
        {
            if (file)
            {
                create_task(file->OpenAsync(Windows::Storage::FileAccessMode::Read)).then([this](IRandomAccessStream^ fileStream)
                {
                   auto image = ref new BitmapImage();
                   
                   bitmapImage->SetSource(fileStream);
                   image->Source = bitmapImage;
                   image->Height = bitmapImage->PixelHeight;
                   image->Width = bitmapImage->PixelWidth;
                });
            }
        });
    }
    
  6. プログラムをコンパイル&実行して下さい。
    ボタンをクリックするとウインドウエクスプローラと同様にフォルダーツリーから画像を選択することが出来ます。
    Async で Task の終了を待って画像を描画します。
    Animation GIF を選択すると、アニメーションしながら描画されました。
    C# でも同様のプログラム Image Picker を作成しています。

【NOTE】

2019/03/17 VS-2019-00435 で作成すると MainPage.xaml.cpp の [this] から赤の下線が消えません。
Windows8 & Visual Studio Express 2012 のときは、エラーは無かったと思うのですが? (^_^;)
ビルドすると正常にコンパイル出来たようなので、実行してみると問題なく動作しました。

Picker を使うと全てのフォルダーにアクセスが可能なようで、C:\TMP\ に格納されている JPEG 画像も描画出来ました。
またマイドキュメントフォルダの画像を描画するときも、マニフェストの設定は必要無いようです。
C# では await(async) を使っていますが C++ では create_task を使うようです。

超初心者のプログラム入門(C/C++)