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

    作成2013.04.04

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

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


  2. フォームアプリケーションからWPFアプリケーションへの変更
     図形処理においては、フォームアプリケーションからWPFアプリケーションへの変更は困難なようです。コードは全面変更となります。
     完成ファイルは以下からダウンロードできます。
     ダウンロード後は解凍してから使用してください。
      WPF での図形と基本描画の概要(2)をダウンロードする。
     解凍すると「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
    
            Dim an As New RotateTransform
            an.CenterX = 100
            an.CenterY = 100
            an.Angle = 45
    
            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
    
            myRectangle.RenderTransform = an
            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, 100, 70, 100)
            myPath3.Data = myGeometry3
    
            myPath3.RenderTransform = an
            Grid1.Children.Add(myPath3)
        End Sub
    
        Private Sub MenuItem4_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MenuItem4.Click
            Dim an As New RotateTransform
            an.CenterX = 100
            an.CenterY = 100
            an.Angle = 45
    
            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
    
            myEllipse.RenderTransform = an
            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 = 50
            myPath4.Data = myGeometry4
    
            myPath4.RenderTransform = an
            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 = 70
            myEllipseGeometry.RadiusY = 100
    
            Dim an As New RotateTransform
            an.CenterX = 100
            an.CenterY = 100
            an.Angle = 45
            myImage.RenderTransform = an
    
            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))
            myPathFigure.Segments.Add(New LineSegment(New Point(10, 30), True))
            Dim myPathGeometry = New PathGeometry
            myPathGeometry.Figures.Add(myPathFigure)
            myPath5.Data = myPathGeometry
    
            Dim an As New RotateTransform
            an.CenterX = 100
            an.CenterY = 100
            an.Angle = 45
            myPath5.RenderTransform = an
    
            Grid1.Children.Add(myPath5)
        End Sub
    End Class
    


  8. .図形回転コードの解説
    (1)Dim an As New RotateTransformは変数anをRotateTransform型で生成します。
    (2) an.CenterX = 100はX軸回転中心を設定します。
    (3)an.CenterY = 100Y軸回転中心を設定します
    (4) an.Angle = 45は回転角度を設定します。
    (5)myRectangle.RenderTransform = anで四角形を回転します。
    (6)Grid1.Children.Add(myRectangle)でGrid1に四角形を加えます。


    感想:
    (1)WPFアプリケーションにおいて図形の回転は簡単です。






36章:チュートリアル35:WPFテキスト ファイルからデータを読み取るの作成に行く。

トップページに戻る。