ここでは、Windowsフォームアプリケーション用サンプルコードをWPFアプリケーション用コードに変換します。フォームアプリケーションからWPFアプリケーションへの変化が最近の主流のようです。
参照元情報参照元情報「WPF での図形と基本描画の概要」にジャンプする
作成方法の詳細は上記を参照願います。
フォームアプリケーションからWPFアプリケーションへの変更図形処理においては、フォームアプリケーションからWPFアプリケーションへの変更は困難なようです。コードは全面変更となります。
完成ファイルは以下からダウンロードできます。
ダウンロード後は解凍してから使用してください。
WPF での図形と基本描画の概要（１）をダウンロードする。解凍すると「36WpfGraphics」フォルダーがあります。
注（１）「36WpfGraphics」フォルダーの「WpfGraphics.sln」ファイルをダブルクリックすると「Microsoft Visual Basic 2010 Express」が起動します。
注（２）メニューの「ウインド」＿「ウインドレイアウトのリセット」で標準に戻ります。
注（３）「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」と「XAML」が表示されます。
注（４）メニューの「表示」＿「コード」を選択するとコードが表示されます。
注（５）「WpfGraphics.sln」の動作確認は「デバッグ」＿「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。
WpfGraphics.slnの実行（１）「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
（２）「デバッグ」＿「デバッグ開始」を選択します。
（３）空白の画面が表示されます。
（４）メニューの「TEST項目」＿「直線描画」を選択します。
（５）直線が表示されます。
（６）メニューの「TEST項目」＿「四角」を選択します。
（７）四角が表示されます。
（８）メニューの「TEST項目」＿「楕円」を選択します。
（９）楕円が表示されます。
（１０）メニューの「TEST項目」＿「写真」を選択します。
（１１）写真が表示されます。
（１２）メニューの「TEST項目」＿「複合図形」を選択します。
（１３）複合図形が表示されます。
（１４）クローズボックスでプログラムを終了します。
プロジェクトの構成（１）UserControl1.vbの構成
・UserControlクラスはありません。
（２）XAMLコードの構成
・StackPanel、Menu、MenuItemを配置します。
MainWindow.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>
XAMLのポイント（１）ごく、一般的な記述のみです。
MainWindow.xaml.csの全コード
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace WpfGraphics
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void MenuItem2_Click(object sender, RoutedEventArgs e)
{
Grid1.Children.Clear();
Line myLine = 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);
Path myPath2 = new Path();
myPath2.Stroke = Brushes.DarkViolet;
myPath2.StrokeThickness = 6;
LineGeometry myGeometry2 = 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);
}
private void MenuItem3_Click(object sender, RoutedEventArgs e)
{
Grid1.Children.Clear();
Rectangle myRectangle = new Rectangle();
Thickness myThickness = new Thickness();
myThickness.Left = 120;
myThickness.Top = 120;
myThickness.Right = 0;
myThickness.Bottom = 0;
myRectangle.HorizontalAlignment =HorizontalAlignment.Left;
myRectangle.VerticalAlignment = VerticalAlignment.Top;
myRectangle.Margin = myThickness;
myRectangle.Stroke = Brushes.SaddleBrown;
myRectangle.Width = 100;
myRectangle.Height = 60;
myRectangle.Fill = Brushes.SeaGreen;
Grid1.Children.Add(myRectangle);
Path myPath3 = new Path();
myPath3.Stroke = Brushes.Red;
myPath3.Fill = Brushes.RoyalBlue;
myPath3.StrokeThickness = 4;
RectangleGeometry myGeometry3 = new RectangleGeometry();
myGeometry3.Rect = new System.Windows.Rect(150, 200, 70, 100);
myPath3.Data = myGeometry3;
Grid1.Children.Add(myPath3);
}
private void MenuItem4_Click(object sender, RoutedEventArgs e)
{
Grid1.Children.Clear();
Ellipse myEllipse = new Ellipse();
Thickness myThickness2 = new Thickness();
myThickness2.Left = 20;
myThickness2.Top = 120;
myThickness2.Right = 0;
myThickness2.Bottom = 0;
myEllipse.HorizontalAlignment =HorizontalAlignment.Left;
myEllipse.VerticalAlignment = VerticalAlignment.Top;
myEllipse.Margin = myThickness2;
myEllipse.Stroke = Brushes.Aquamarine;
myEllipse.Width = 100;
myEllipse.Height = 60;
myEllipse.Fill = Brushes.Coral;
Grid1.Children.Add(myEllipse);
Path myPath4 = new Path();
myPath4.Stroke = Brushes.Black;
myPath4.Fill = Brushes.MediumSlateBlue;
myPath4.StrokeThickness = 2;
EllipseGeometry myGeometry4 = new EllipseGeometry();
myGeometry4.Center = new System.Windows.Point(250, 50);
myGeometry4.RadiusX = 25;
myGeometry4.RadiusY = 25;
myPath4.Data = myGeometry4;
Grid1.Children.Add(myPath4);
}
private void MenuItem5_Click(object sender, RoutedEventArgs e)
{
Grid1.Children.Clear();
Image myImage = new Image();
var 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 =HorizontalAlignment.Center;
myImage.VerticalAlignment = VerticalAlignment.Center;
EllipseGeometry myEllipseGeometry = new EllipseGeometry();
myEllipseGeometry.Center = new Point(100, 100);
myEllipseGeometry.RadiusX = 90;
myEllipseGeometry.RadiusY = 100;
myImage.Clip = myEllipseGeometry;
Grid1.Children.Add(myImage);
}
private void MenuItem6_Click(object sender, RoutedEventArgs e)
{
Grid1.Children.Clear();
Path myPath5 = new Path();
myPath5.Stroke = Brushes.Black;
myPath5.Fill = Brushes.MediumSlateBlue;
myPath5.StrokeThickness = 2;
PathFigure myPathFigure = 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));
PathGeometry myPathGeometry = new PathGeometry();
myPathGeometry.Figures.Add(myPathFigure);
myPath5.Data = myPathGeometry;
Grid1.Children.Add(myPath5);
}
}
}
private void MenuItem2_Clickのコードの解説（１）直線描画を行います。
（２）Grid1.Children.Clear()；で画面を消去します。
（３）Line myLine = new Line();で変数myLineをLine()型で生成します。
（４） Grid1.Children.Add(myLine);でGrid1にmyLineを加えます。
（５）Path myPath2 = new Path();で変数myPath2をPath()で生成します。
（６）Grid1.Children.Add(myPath2);でGrid1にmyPath2を加えます。
private void MenuItem3_Clickのコードの解説（１）四角描画を行います。
（２）Grid1.Children.Clear();で画面を消去します。
（３） Rectangle myRectangle = new Rectangle();で変数myRectangleをRectangle()型で生成します。
（４）Grid1.Children.Add(myRectangle)；でGrid1にmyRectangleを加えます。
（５）Path myPath3 = new Path();で変数myPath3をPath()で生成します。
（６）Grid1.Children.Add(myPath3);でGrid1にmyPath3を加えます。
private void MenuItem4_Clickのコードの解説（１）楕円描画を行います。
（２）Grid1.Children.Clear();で画面を消去します。
（３）Ellipse myEllipse = new Ellipse();で変数myEllipseをEllipse()型で生成します。
（４） Grid1.Children.Add(myEllipse)；でGrid1にmyEllipseを加えます。
（５）Path myPath4 = new Path();で変数myPath4をPath()で生成します。
（６）Grid1.Children.Add(myPath4)；でGrid1にmyPath4を加えます。
private void MenuItem5_Clickのコードの解説（１）写真描画を行います。
（２）Grid1.Children.Clear()；で画面を消去します。
（３）Image myImage = new Image();で変数myImageをImage()型で生成します。
（４） var imageUri = new Uri("http://homepage3.nifty.com/skomo/f30/99-3-20b.jpg");で写真のアドレスを設定します。
（５）myImage.Source = new BitmapImage(imageUri);でmyImageに画像が設定されます、
（６）Grid1.Children.Add(myImage);でGrid1にmyImageを加えます。
private void MenuItem6_Click(object sender, RoutedEventArgs e)のコードの解説（１）複合図形の描画を行います。
（２）Grid1.Children.Clear()で画面を消去します。
（３）Path myPath5 = new Path();で変数myPath5をPath()で生成します。
（４）Grid1.Children.Add(myPath5);でGrid1にmyPath5を加えます。
感想：
（１）図形処理の方法が劇的に変化しました。
（２）System.Windows.Shapes.ShapeクラスとSystem.Windows.Shapes.Pathクラスの図形があります。
（３）System.Windows.Shapes.Shapeクラスの図形はHorizontalAlignmentやMarginで図形の位置が設定されるのに対して、System.Windows.Shapes.Pathクラスの図形は絶対座標で位置が定義されるのが特徴的です。
（４）Pathクラスでは、直線、2次曲線、円弧を複数つなぎ合わせた複雑な図形を容易に定義できます。
（５）大幅に図形処理の方法が変化したため、Windowsフォームアプリケーションとは互換性が無いようです。
（６）ただし、VBとC#は図形処理に関して、ほぼ完全な互換性がありました。
３７章：WPF での図形と基本描画の概要（2）に行く。