34章:チュートリアル33:WPF での図形と基本描画の概要(1)

    作成2013.04.04

     WPFアプリケーションにおいては、図形処理の概念が劇的に変化しました。このためWindowsフォー ムアプリケーションとは互換性が無いようです。
     WPFアプリケーションにおいては、WPF での図形と基本描画の概要の内容を十分に理解する必要がありそうです。

  1. 参照元情報
    「WPF での図形と基本描画の概要」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. フォームアプリケーションからWPFアプリケーションへの変更
     図形処理においては、フォームアプリケーションからWPFアプリケーションへの変更は困難なようです。コードは全面変更となります。
     完成ファイルは以下からダウンロードできます。
     ダウンロード後は解凍してから使用してください。
      WPF での図形と基本描画の概要(1)をダウンロードする。
     解凍すると「34WpfGraphics」フォルダーがあります。
    注(1)「34WpfGraphics」フォルダーの「WpfGraphics.sln」ファイルをダブルクリックすると「Microsoft Visual Basic 2010 Express」が起動します。
    注(2)メニューの「ウインド」_「ウインドレイアウトのリセット」で標準に戻ります。
    注(3)「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」と「XAML」が表示されます。
    注(4)メニューの「表示」_「コード」を選択するとコードが表示されます。
    注(5)「WpfGraphics.sln」の動作確認は「デバッグ」_「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. WpfGraphics.slnの実行
    (1)「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)空白の画面が表示されます。
    (4)メニューの「TEST項目」_「直線描画」を選択します。
    (5)直線が表示されます。
    (6)メニューの「TEST項目」_「四角」を選択します。
    (7)四角が表示されます。
    (8)メニューの「TEST項目」_「楕円」を選択します。
    (9)楕円が表示されます。
    (10)メニューの「TEST項目」_「写真」を選択します。
    (11)写真が表示されます。
    (12)メニューの「TEST項目」_「複合図形」を選択します。
    (13)複合図形が表示されます。
    (14)クローズボックスでプログラムを終了します。


  4. プロジェクトの構成
    (1)UserControl1.vbの構成
    ・UserControlクラスはありません。

    (2)XAMLコードの構成
    ・StackPanel、Menu、MenuItemを配置します。


  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>
            <StackPanel Name="StackPanel1" VerticalAlignment="Top"  Orientation="Horizontal">
                <Menu Height="23" Name="Menu1">
                    <MenuItem Header="TEST項目" Name="MenuItem1">
                        <MenuItem Header="直線" Name="MenuItem2"/>
                        <MenuItem Header="四角" Name="MenuItem3"/>
                        <MenuItem Header="楕円" Name="MenuItem4"/>
                        <MenuItem Header="写真" Name="MenuItem5"/>
                        <MenuItem Header="複合図形" Name="MenuItem6"/>
                    </MenuItem>
                </Menu> 
            </StackPanel>
            <Grid  Name="Grid1">
                
            </Grid> 
        </Grid>
    </Window>
    


  6. XAMLのポイント
    (1)ごく、一般的な記述のみです。


  7. Class MainWindowクラスの全コード
    Class MainWindow 
        Private Sub MenuItem2_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MenuItem2.Click
            Grid1.Children.Clear()
            Dim myLine As New Line()
            myLine.Stroke = Brushes.LightSteelBlue
            myLine.X1 = 20
            myLine.X2 = 150
            myLine.Y1 = 30
            myLine.Y2 = 250
            myLine.HorizontalAlignment = HorizontalAlignment.Left
            myLine.VerticalAlignment = VerticalAlignment.Top
            myLine.StrokeThickness = 2
            Grid1.Children.Add(myLine)
    
            Dim myPath2 As New Path()
            myPath2.Stroke = Brushes.DarkViolet
            myPath2.StrokeThickness = 6
            Dim myGeometry2 As New LineGeometry()
            myGeometry2.StartPoint = New System.Windows.Point(30, 50)
            myGeometry2.EndPoint = New System.Windows.Point(250, 250)
            myPath2.Data = myGeometry2
            Grid1.Children.Add(myPath2)
        End Sub
    
        Private Sub MenuItem3_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MenuItem3.Click
            Grid1.Children.Clear()
            Dim myRectangle = New Rectangle()
            Dim myThickness As New Thickness()
            myThickness.Left = 120
            myThickness.Top = 120
            myThickness.Right = 0
            myThickness.Bottom = 0
            myRectangle.HorizontalAlignment = Windows.HorizontalAlignment.Left
            myRectangle.VerticalAlignment = Windows.VerticalAlignment.Top
            myRectangle.Margin = myThickness
            myRectangle.Stroke = Brushes.SaddleBrown
            myRectangle.Width = 100
            myRectangle.Height = 60
            myRectangle.Fill = Brushes.SeaGreen
            Grid1.Children.Add(myRectangle)
    
            Dim myPath3 As New Path()
            myPath3.Stroke = Brushes.Red
            myPath3.Fill = Brushes.RoyalBlue
            myPath3.StrokeThickness = 4
            Dim myGeometry3 As New RectangleGeometry()
            myGeometry3.Rect = New System.Windows.Rect(150, 200, 70, 100)
            myPath3.Data = myGeometry3
            Grid1.Children.Add(myPath3)
        End Sub
    
        Private Sub MenuItem4_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MenuItem4.Click
            Grid1.Children.Clear()
            Dim myEllipse = New Ellipse()
            Dim myThickness2 As New Thickness()
            myThickness2.Left = 20
            myThickness2.Top = 120
            myThickness2.Right = 0
            myThickness2.Bottom = 0
            myEllipse.HorizontalAlignment = Windows.HorizontalAlignment.Left
            myEllipse.VerticalAlignment = Windows.VerticalAlignment.Top
            myEllipse.Margin = myThickness2
            myEllipse.Stroke = Brushes.Aquamarine
            myEllipse.Width = 100
            myEllipse.Height = 60
            myEllipse.Fill = Brushes.Coral
            Grid1.Children.Add(myEllipse)
    
            Dim myPath4 As New Path()
            myPath4.Stroke = Brushes.Black
            myPath4.Fill = Brushes.MediumSlateBlue
            myPath4.StrokeThickness = 2
            Dim myGeometry4 As New EllipseGeometry()
            myGeometry4.Center = New System.Windows.Point(250, 50)
            myGeometry4.RadiusX = 25
            myGeometry4.RadiusY = 25
            myPath4.Data = myGeometry4
            Grid1.Children.Add(myPath4)
        End Sub
    
        Private Sub MenuItem5_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MenuItem5.Click
            Grid1.Children.Clear()
            Dim myImage = New Image()
            Dim imageUri = New Uri("http://homepage3.nifty.com/skomo/f30/99-3-20b.jpg")
    
            myImage.Source = New BitmapImage(imageUri)
            myImage.Width = 200
            myImage.Height = 200
            myImage.HorizontalAlignment = Windows.HorizontalAlignment.Center
            myImage.VerticalAlignment = Windows.VerticalAlignment.Center
            Dim myEllipseGeometry = New EllipseGeometry()
            myEllipseGeometry.Center = New Point(100, 100)
            myEllipseGeometry.RadiusX = 90
            myEllipseGeometry.RadiusY = 100
            myImage.Clip = myEllipseGeometry
            Grid1.Children.Add(myImage)
        End Sub
    
        Private Sub MenuItem6_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MenuItem6.Click
            Grid1.Children.Clear()
            Dim myPath5 As New Path()
            myPath5.Stroke = Brushes.Black
            myPath5.Fill = Brushes.MediumSlateBlue
            myPath5.StrokeThickness = 2
            Dim myPathFigure As New PathFigure
            myPathFigure.StartPoint = New Point(10, 30)
            myPathFigure.Segments.Add(New BezierSegment(New Point(100, 0), New Point(200, 200), New Point(300, 100), True))
            myPathFigure.Segments.Add(New LineSegment(New Point(400, 100), True))
            myPathFigure.Segments.Add(New ArcSegment(New Point(200, 100), New Size(50, 50), 45, True, SweepDirection.Clockwise, True))
            Dim myPathGeometry = New PathGeometry
            myPathGeometry.Figures.Add(myPathFigure)
            myPath5.Data = myPathGeometry
            Grid1.Children.Add(myPath5)
        End Sub
    End Class
    


  8. Private Sub MenuItem2_Clickのコードの解説
    (1)直線描画を行います。
    (2)Grid1.Children.Clear()で画面を消去します。
    (3)Dim myLine As New Line()で変数myLineをLine()型で生成します。
    (4) Grid1.Children.Add(myLine)でGrid1にmyLineを加えます。
    (5)Dim myPath2 As New Path()で変数myPath2をPath()で生成します。
    (6)Grid1.Children.Add(myPath2)でGrid1にmyPath2を加えます。


  9. Private Sub MenuItem3_Clickのコードの解説
    (1)四角描画を行います。
    (2)Grid1.Children.Clear()で画面を消去します。
    (3) Dim myRectangle = New Rectangle()で変数myRectangleをRectangle()型で生成します。
    (4)Grid1.Children.Add(myRectangle)でGrid1にmyRectangleを加えます。
    (5)Dim myPath3 As New Path()で変数myPath3をPath()で生成します。
    (6)Grid1.Children.Add(myPath2)でGrid1にmyPath3を加えます。


  10. Private Sub MenuItem4_Clickのコードの解説
    (1)楕円描画を行います。
    (2)Grid1.Children.Clear()で画面を消去します。
    (3)Dim myEllipse = New Ellipse()で変数myEllipseをEllipse()型で生成します。
    (4) Grid1.Children.Add(myEllipse)でGrid1にmyEllipseを加えます。
    (5)Dim myPath4 As New Path()で変数myPath4をPath()で生成します。
    (6)Grid1.Children.Add(myPath4)でGrid1にmyPath4を加えます。


  11. Private Sub MenuItem5_Clickのコードの解説
    (1)写真描画を行います。
    (2)Grid1.Children.Clear()で画面を消去します。
    (3)Dim myImage = New Image()で変数myImageをImage()型で生成します。
    (4) Dim imageUri = New Uri("http://homepage3.nifty.com/skomo/f30/99-3-20b.jpg")で写真のアドレスを設定します。
    (5)myImage.Source = New BitmapImage(imageUri)でmyImageに画像が設定されます、
    (6)Grid1.Children.Add(myImage)でGrid1にmyImageを加えます。


  12. Private Sub MenuItem6_Clickのコードの解説
    (1)複合図形の描画を行います。
    (2)Grid1.Children.Clear()で画面を消去します。
    (3)Dim myPath4 As New Path()で変数myPath4をPath()で生成します。
    (4)Grid1.Children.Add(myPath5)でGrid1にmyPath5を加えます。


    感想:
    (1)図形処理の方法が劇的に変化しました。
    (2)System.Windows.Shapes.ShapeクラスとSystem.Windows.Shapes.Pathクラスの図形があります。
    (3)System.Windows.Shapes.Shapeクラスの図形はHorizontalAlignmentやMarginで図形の位置が設定されるのに対して、System.Windows.Shapes.Pathクラスの図形は絶対座標で位置が定義されるのが特徴的です。
    (4)Pathクラスでは、直線、2次曲線、円弧を複数つなぎ合わせた複雑な図形を容易に定義できます。
    (5)大幅に図形処理の方法が変化したため、Windowsフォームアプリケーションとは互換性が無いようです。






35章:チュートリアル34:WPF での図形と基本描画の概要(2)に行く。

トップページに戻る。