Image Canvas

Picker で選択した画像を Canvas に描画します。

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

プログラムの説明

  1. Windows10 & Visual Studio 2017 で新規プロジェクトを作成します。
    MainPage.xaml のデザイン画面で Canvas を画面一杯に張り付けて下さい。
    Canvas は[すべての XAML コントロール]の中に格納されています。
    サイズを変更しても画面一杯になるように MainPage.xaml から Canvas のプロパティを直接設定します。
    Canvas の名前は "MyCanvas" として下さい。
        <Grid>
            <Canvas x:Name="MyCanvas" Visibility="Visible" Grid.Row="0"
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        </Grid>
    
  2. MainPage.xaml.cs の MainPage() 関数から MyForm_Load() 関数を呼び出します。
    using System;
      ・・・
    using Windows.UI.Xaml.Navigation;
    using Windows.Storage.Pickers;
    using Windows.Storage;
    using Windows.Storage.Streams;
    using Windows.UI.Xaml.Media.Imaging;
    using Windows.Graphics.Imaging;
    using Windows.UI.Xaml.Shapes;
      ・・・
        public MainPage()
        {
            this.InitializeComponent();
            MyForm_Load();
        }
    
  3. MyForm_Load() 関数から Picker で画像を選択して Canvas に背景画像として張り付けます。
        async void MyForm_Load()
        {
            FileOpenPicker open = new FileOpenPicker();
            open.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
            open.ViewMode = PickerViewMode.Thumbnail;
    
            open.FileTypeFilter.Clear();
            open.FileTypeFilter.Add(".bmp");
            open.FileTypeFilter.Add(".jpg");
    
            StorageFile photoFile = await open.PickSingleFileAsync();
            if (photoFile != null)
            {   IRandomAccessStream fileStream = await photoFile.OpenAsync(FileAccessMode.Read);
                BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);
                BitmapTransform transform = new BitmapTransform();
    
                SoftwareBitmap sourceBitmap =
                    await decoder.GetSoftwareBitmapAsync
                        (decoder.BitmapPixelFormat,
                        BitmapAlphaMode.Premultiplied,
                        transform,
                        ExifOrientationMode.IgnoreExifOrientation,
                        ColorManagementMode.DoNotColorManage);
    
                ImageBrush brush = new ImageBrush();
                SoftwareBitmapSource bitmapSource = new SoftwareBitmapSource();
                await bitmapSource.SetBitmapAsync(sourceBitmap);
                brush.ImageSource = bitmapSource;
                brush.Stretch = Stretch.Fill;
                this.MyCanvas.Background = brush;
                sourceBitmap.Dispose();
                fileStream.Dispose();
            }
        }
    
  4. 画像は Canvas に背景色を設定する時のように ImageBrush を生成して背景として張り付けています。
    手順は ImageBrush を生成して、選択した画像を brush.ImageSource に設定します。
    MyCanvas の Background として brush を使います。
        ImageBrush brush = new ImageBrush();
        SoftwareBitmapSource bitmapSource = new SoftwareBitmapSource();
        await bitmapSource.SetBitmapAsync(sourceBitmap);
        brush.ImageSource = bitmapSource;
        brush.Stretch = Stretch.Fill;
        this.MyCanvas.Background = brush;
    
  5. プログラムを起動するとファイルピッカーが起動するので、背景画像を選択して下さい。
    ウインドウの背景に選択した画像が描画されます。
    マウスでウインドウサイズを変更すると、サイズに合わせて Canvas が伸縮します。

矩形を描画

  1. Canvas に描画された背景画像の上から矩形を描画します。
    MyForm_Load() 関数の fileStream.Dispose(); の後に次のソースコードを追加して下さい。
                // Add a Rectangle Element
                Rectangle myRect = new Rectangle();
                myRect.Stroke = new SolidColorBrush(Windows.UI.Colors.Red);
                myRect.Fill = new SolidColorBrush(Windows.UI.Colors.Transparent);
                myRect.Margin = new Thickness(400, 200, 0, 0);
                myRect.Width = 300;
                myRect.Height = 200;
                MyCanvas.Children.Add(myRect);
    
  2. new Rectangle(); で矩形オブジェクトを生成します。
    Width が矩形の幅で、Height が高さです。
    Margin が左,右,上,下の空白のサイズで、400,200 が矩形の左上の座標になります。
    MyCanvas.Children.Add(myRect); で Canvas に Add します。

超初心者のプログラム入門(C# Frame Work)