Visual Basic でOpenCV③ - WPF アプリケーション

OpenCV Visual Basic OpenCvSharp

Visual BasicでOpenCVを使う入門を紹介します。WPF アプリケーションの例を紹介します。

WPF アプリケーション

WPF アプリケーションで画像を表示するプログラムを紹介します。

  1. Visual Studio 2022 Community を起動し、［新規作成］→［プロジェクト］を選びます。
  2. 新しいプロジェクトの作成」画面が現れますので「WPF アプリケーション」を選びます。
  3. 「新しいプロジェクトを構成します」画面が現れますので「プロジェクト名」や「場所」などを指定します。
  4. これでプロジェクトが作成されます。このプロジェクトには、自動で生成されたフォームとソースファイルが含まれます。
  5. MainWindow.xaml と MainWindow.xaml.cs を変更します。

以降に、変更したMainWindow.xaml と MainWindow.xaml.cs のソースリストを示します。
まず、xamlのソースリストを示します。

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <DockPanel LastChildFill="True">
            <Menu DockPanel.Dock="Top" VerticalAlignment="Top">
                <MenuItem Header="ファイル(_F)">
                    <MenuItem Header="開く(_O)" Click="MenuItem_Open_Click"/>
                    <MenuItem Header="閉じる(_C)" Click="MenuItem_Close_Click"/>
                </MenuItem>
            </Menu>
            <ScrollViewer HorizontalScrollBarVisibility="Auto" 
                                            VerticalScrollBarVisibility="Auto">
                <Image Name ="Image" HorizontalAlignment="Left"
                                        VerticalAlignment="Top" Stretch="None"/>
            </ScrollViewer>
        </DockPanel>
    </Grid>
</Window>

全体にDockPanel を配置し、その上部にMenu を置き、下部にScrollViewerを配置します。DockPanel のLastChildFill プロパティを"True" に設定したため、DockPanel の残りの部分をScrollViewer が覆います。ScrollViewer にImage を配置し、これに画像を表示します。ScrollViewer のHorizontalScrollBarVisibility とVerticalScrollBarVisibility プロパティに"Auto" を指定したため、Image がScrollViewer より大きくなると、自動でスクロールバーが現れます。

次に、xaml に対するvb のソースリストを示します。

Imports Microsoft.Win32
Imports OpenCvSharp
Imports OpenCvSharp.WpfExtensions


Class MainWindow

    Private Sub MenuItem_Open_Click(sender As Object, e As RoutedEventArgs)
        Dim dialog = New OpenFileDialog With {
                            .Filter = "全てのファイル (*.*)|*.*"
                    }

        If dialog.ShowDialog() = True Then
            Dim iMat As Mat = New Mat(dialog.FileName)
            Image.Source = BitmapSourceConverter.ToBitmapSource(iMat)
            SizeToContent = SizeToContent.WidthAndHeight
        End If
    End Sub

    Private Sub MenuItem_Close_Click(sender As Object, e As RoutedEventArgs)
        Close()
    End Sub

End Class

OpenCvSharp と OpenCvSharp.WpfExtensions を利用しますのでImportsステートメントを追加します。
OpenFileDialogを利用しダイアログを表示させ、画像の読み込みはMatのコンストラクタに任せます。表示を行う際にMatオブジェクトからBitmapSourceConverter.ToBitmapSourceメソッドでBitmapSourceに変換します。これをImageオブジェクトのSourceプロパティに設定します。
この、

Image.Source = BitmapSourceConverter.ToBitmapSource(iMat)

は、

Image.Source = iMat.ToBitmapSource

と記述することもできます。

紹介したプログラムはWPF アプリケーションですが、MVVM やバインドなどは使用しません。MVVM やMVC などを用いない方が、これまでWindows フォームアプリなどを利用していた人は分かりやすいでしょうし、説明が簡単になります。MVVM などは、大規模なアプリケーション開発には向きますが、小規模なプログラムでは却ってプログラムが分かりにくくなります。本ブログはOpenCV を.NET のVisual Basicから利用することの解説を主目的としています。なるべくOpenCV の機能が分かりやすくなる方法を採用します。MVVM に慣れた人であれば、このようなプログラムをMVVM へ書き換えるのは簡単でしょう。

実行

［開く］メニュー項目を選択して「開く」ダイアログが表示し、ファイルを選ぶと画像がウィンドウに表示されます。

ウィンドウサイズを画像より小さくするとスクロールバーが現れます。


コラム：BitmapとBitmapSource
「Windows フォームアプリ」ではBitmapを利用しますが、「WPF アプリケーション」ではBitmapSourceを使用する機会が多いです。MatオブジェクトをBitmapオブジェクト、もしくはBitmapSourceオブジェクトへ変換するには、以下のメソッドを利用します。

OpenCvSharp.Extensions → BitmapConverter.ToBitmap(Mat)あるいは、Mat.ToBitmap
OpenCvSharp.WpfExtensions → BitmapSourceConverter.ToBitmapSource(Mat)あるいはMat.ToBitmapSource

他の方法もありますが、それほど重要ではありませんので、ここでは割愛します。