Image Picker

DirectX(8.1)で Image Picker を使って画像を選択します。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プロジェクトの作成

  1. DirectX(8.1)で Picker を使って選択した画像を Image コントロールに描画します。
    空プロジェクト を参照してベースとなる XAML のプロジェクトを構築して下さい。
  2. DirectXPage.xaml をダブルクリックしてレイアウトウインドウを表示します。
    ツールボックスからウインドウの上部に Button を貼り付けます。
    ボタンクリックの Event Handler("Button_Click") を設定して下さい。
  3. 次にツールボックスから Image をウインドウにドラッグします。
    Button の下に、大きく配置して下さい。
    Image に名前("img_box")を付けます。
  4. DirectXPage.xaml.cpp の #include と using の設定です。
    #include <ppltasks.h>
    using namespace Windows::Storage::Pickers;
    using namespace Windows::Storage;
    using namespace Windows::Storage::Streams;
    using namespace Windows::UI::Xaml::Media::Imaging;
    
  5. DirectXPage.xaml.cpp の ButtonClick に Picker を使って画像を選択するコードを書きます。
    auto bitmapImage に選択した画像を取得して、img_box.Source に設定します。
                
    void App1::DirectXPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
        auto open = ref new FileOpenPicker();
        open->SuggestedStartLocation = PickerLocationId::PicturesLibrary;
        open->ViewMode = PickerViewMode::Thumbnail;
    
        // Filter to include a sample subset of file types
        open->FileTypeFilter->Clear();
        open->FileTypeFilter->Append(".bmp");
        open->FileTypeFilter->Append(".png");
        open->FileTypeFilter->Append(".jpeg");
        open->FileTypeFilter->Append(".jpg");
    
        // Open a stream for the selected file
        create_task(open->PickSingleFileAsync()).then([this](StorageFile^ file)
        {
            if (file)
            {
                // Ensure the stream is disposed once the image is loaded
                create_task(file->OpenAsync(Windows::Storage::FileAccessMode::Read)).then([this](IRandomAccessStream^ fileStream)
                {
                    // Set the image source to the selected bitmap
                    auto bitmapImage = ref new BitmapImage();
    
                    bitmapImage->SetSource(fileStream);
                    img_box->Source = bitmapImage;
                    img_box->Height = bitmapImage->PixelHeight;
                    img_box->Width = bitmapImage->PixelWidth;
                });
            }
        });
    }
    
  6. プログラムをコンパイル&実行して下さい。
    ボタンをクリックするとウインドウエクスプローラと同様にフォルダーツリーから画像を選択することが出来ます。
    もう一度ボタンをクリックすると、再び画像の選択画面が表示されます。
    C++ のプロジェクト Image Picker と同じ要領です。
    Text File の Picker は Auto2D Picker を参照して下さい。

超初心者のプログラム入門(DirectX Store)