28章:チュートリアル27:マウス イベントの制御(VB)

    作成2013.03.30

     ここでは、Silverlight アプリケーション用サンプルコードをWPFアプリケーション用コードに変換します。

  1. 参照元情報
     マウス イベントの制御(Visual Basic ガイド ツアー)
    「マウス イベントの制御」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. マウス イベントの制御
     マウス イベントの制御の解説とおりにWPFアプリケーションを作成すると、互換性の問題でエラーが発生しますが、僅かな修正で動作するようになります。
     完成ファイルは以下からダウンロードできます。
     ダウンロード後は解凍してから使用してください。
      [ファイルのドラッグ アンド ドロップ]をダウンロードする。
     解凍すると「28MouseEvents」フォルダーがあります。
    注(1)「28MouseEvents」フォルダーの「MouseEvents.sln」ファイルをダブルクリックすると「Microsoft Visual Basic 2010 Express」が起動します。
    注(2)メニューの「ウインド」_「ウインドレイアウトのリセット」で標準に戻ります。
    注(3)「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」と「XAML」が表示されます。
    注(4)メニューの「表示」_「コード」を選択するとコードが表示されます。
    注(5)「MouseEvents.sln」の動作確認は「デバッグ」_「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. MouseEvents.slnの実行
    (1)「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)MainWindow画面が表示されます。
    (4)上の欄を右クリックするとメセージボックスが表示されます。
    (5)中段の欄でホイールで色が変わります。
    (6)下の欄で右クリックするとメニューが表示されます。
    (7)クローズボックスで終了します。


  4. 新規プロジェクトの作成
    (1)新規プロジェクト
     新規プロジェクトを作成すると「デザイナー」にはとXAMLが自動生成されます。

    (2)XAMLコードの作成
     サンプルのXAMLコードをコピーして、ペーストすると完成します。

    (3) クラスコード
    Class MainWindow
    End Class
    が自動生成されます。

    (4) その他
     サンプルのXAMLコードをコピーして、ペーストすると簡単に完成しますが、互換性の問題でエラーが発生します。エラーの原因を修正すると動作するようになります。
     エラーの原因を修正は学習に有効な作業となります。


  5. XAMLの全コード
    <Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
    
            <Border Grid.Row="0" x:Name="border1" Background="LightCyan">
                <TextBlock Text="右クリックでメッセージ ボックスを表示します。" />
            </Border>
    
            <Border Grid.Row="1" x:Name="border2" Background="LightYellow">
                <TextBlock Text="マウスのホイール操作で色が変わります。" />
            </Border>
    
            <Canvas Grid.Row="2" x:Name="canvas1" Background="LightSkyBlue">
                <TextBlock Text="右クリックでメニューを表示します。" />
    
                <Popup x:Name="contextMenu">
                    <ListBox>
                        <TextBlock Text="Blue" MouseLeftButtonUp="menu_MouseLeftButtonUp" />
                        <TextBlock Text="Red" MouseLeftButtonUp="menu_MouseLeftButtonUp" />
                        <TextBlock Text="Green" MouseLeftButtonUp="menu_MouseLeftButtonUp" />
                        <TextBlock Text="Yellow" MouseLeftButtonUp="menu_MouseLeftButtonUp" />
                    </ListBox>
                </Popup>
            </Canvas>
        </Grid>
    </Window>
        </Grid>
    </Window>
    


  6. XAMLのポイント
    (1)<UserControl x:Class="MySilverlightApp.MainPage"が<Window x:Class="MainWindow"に変更となります。  (<Window x:Class="MainWindow"はWPFアプリケーションのデホルトです。)
    (2)その他変更ありません。


  7. Class MainWindowクラスの全コード
    Class MainWindow
        Dim LeftButtonDown As Boolean = False
    
        Public Sub New()
            ' この呼び出しはデザイナーで必要です。
            InitializeComponent()
            AddHandler border1.MouseRightButtonDown, AddressOf border1_MouseRightButtonDown
            AddHandler border1.MouseRightButtonUp, AddressOf border1_MouseRightButtonUp
            AddHandler border2.MouseWheel, AddressOf border2_MouseWheel
            AddHandler canvas1.MouseRightButtonDown, AddressOf canvas1_MouseRightButtonDown
            AddHandler canvas1.MouseRightButtonUp, AddressOf canvas1_MouseRightButtonUp
        End Sub
    
        Private Sub border1_MouseRightButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            e.Handled = True
        End Sub
    
        Private Sub border1_MouseRightButtonUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            MessageBox.Show("右クリックしました")
        End Sub
    
        Dim colorValue As Integer = 0
    
        Private Sub border2_MouseWheel(ByVal sender As Object, ByVal e As MouseWheelEventArgs)
            colorValue = colorValue + (e.Delta / 4)
            If colorValue < 0 Then colorValue = 0
            If colorValue > 255 Then colorValue = 255
            Dim c As Color = Color.FromArgb(255, 255, _
                    Convert.ToByte(255 - colorValue), Convert.ToByte(colorValue))
            border2.Background = New SolidColorBrush(c)
        End Sub
    
        Private Sub canvas1_MouseRightButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            e.Handled = True
        End Sub
    
        Private Sub canvas1_MouseRightButtonUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            Dim pt As Point = e.GetPosition(canvas1)
            contextMenu.SetValue(Canvas.LeftProperty, pt.X)
            contextMenu.SetValue(Canvas.TopProperty, pt.Y)
            contextMenu.IsOpen = True
        End Sub
    
        Private Sub menu_MouseLeftButtonUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            If TypeOf sender Is TextBlock Then
                Dim tblock As TextBlock = CType(sender, TextBlock)
                Dim pinfo As System.Reflection.PropertyInfo _
                    = GetType(Colors).GetProperty(CType(tblock.Text, String))
                Dim c As Color
                If pinfo Is Nothing Then c = Colors.Black Else c = pinfo.GetValue(Nothing, Nothing)
                canvas1.Background = New SolidColorBrush(c)
            End If
            contextMenu.IsOpen = False
        End Sub
    End Class
    


  8. Class MainWindowクラスのコード解説
    (1)Dim LeftButtonDown As Boolean = Falseは意味がないようです。
    (2)AddHandler border1.MouseRightButtonDown, AddressOf border1_MouseRightButtonDownは上段の右クリックダウンのイベントを追加します。
    (3)AddHandler border1.MouseRightButtonUp, AddressOf border1_MouseRightButtonUpは上段の右クリックアップのイベントを追加します。
    (4)e.Handled = Trueで標準の右クリックメニューを無効にします。
    (5)MessageBox.Show("右クリックしました")でメッセージボックスを表示します。
    (6)Private Sub border2_MouseWheelで色を変化させます。
    (7)Private Sub canvas1_MouseRightButtonUpでポップアップメニューを表示します。
    (8)Private Sub menu_MouseLeftButtonUpで下段の色を変化させます。


    感想:
    (1)複雑なマウス イベントの制御処理ができそうです。






29章:チュートリアル28:WPFピクチャ ビューアーの作成に行く。

トップページに戻る。