.NET Gadgeteer モジュールのデモ:Display T35 / TE35 Module (カラータッチスクリーン) ~ Part 2 – WPF 描画機能

.NET Gadgeteer のモジュール紹介シリーズ、Display T35 / TE35 モジュール の紹介の 2回目です。
1 回目は こちら

 

今回は WPF を使った描画について紹介します。
WPF といっても XAML に対応しているわけではなくて、 C# または VB で UIElement を生成、プロパティ設定、・・・で実装する必要があります。
T35 / TE35 はタッチ対応のモジュールなので、当然ユーザーがタッチしてデバイスを操作することも可能なのですが、タッチについては記事を改めて紹介します。今回は描画の部分のみとします。

WPF 自体については適宜ネット上で情報を探すなり本を読むなりしていただくことにして、ここでは .NET Micro Framework /  .NET Gadgeteer で WPF を使う方法を紹介します。


WPF Window を取得 / スクリーンの向きを設定

WPF を使うためにはまずは WPF Window (ルート) が必要です。これを取得するのが WPFWindow プロパティです。Window を取得したら、あとは Child プロパティに子要素となる UIElement を代入することになります。
実際のコードは後述。

もう一つ、WPF そのものに関する機能ではないのですが、スクリーンの向きを設定するメソッドがあります。SetLCDRotation メソッドです。時計回りに90度回転、反時計回りに90度回転、180度回転を指定できます。・・・できるはずなのですが、T35 ではサポートされていないのか、私の呼び方が間違っているのか、上手く動作してくれませんでした orz
※情報をお持ちの方、ご教示ください。


Canvas に描画する

WPFWindow.Child に Canvas を指定することで、座標指定で画面上に要素を表示させることが可能です。Full .NET の WPF と同様、Canvas を入れ子にすることも可能です。(その場合は、StackPanel.Children に Canvas を追加して、・・・という流れになると思いますが)

配置できる要素 (UIElement) は、Microsoft.SPOT.Presentation.Controls 名前空間内、および Microsoft.SPOT.Presentation.Shapes 名前空間内にあります。具体的にどんなのがあるかは Visual Studio で実際に IntelliSence で見てみてください(手抜きw)。
また Brush や Pen なども必要になりますが、これらは Microsoft.SPOT.Presentation.Media 名前空間内で定義されています。
4.2 の Gadgeteer パッケージで生成されるプロジェクトテンプレートでは Microsoft.SPOT.Presentation.Shapes が using されていないので、「あれっ?」 と思ったらソースの先頭を確認してみてください。(体験談)

実際のコードで見た方が早いですね。まず以下では、図形を座標指定しながら描画する手順を紹介します。
SimpleGraphics では対応していない 枠の指定付きの楕円を描画できたり、(なぜ存在しないのか不思議な) 直線が引けたりとちょっと幸せな気分を味わえるサンプルです。
※それでも Full .NET だと Blend 使って XAML で定義できるのに比べると面倒で少し苦労はしますが。

  1. using System;
  2. using Microsoft.SPOT;
  3. using Microsoft.SPOT.Presentation;
  4. using Microsoft.SPOT.Presentation.Controls;
  5. using Microsoft.SPOT.Presentation.Media;
  6. using Microsoft.SPOT.Presentation.Shapes;
  7. using GT = Gadgeteer;
  8.  
  9. namespace T35WpfDemo1
  10. {
  11.     public partial class Program
  12.     {
  13.         // This method is run when the mainboard is powered up or reset.   
  14.         void ProgramStarted()
  15.         {
  16.             DrawShapesOnCanvas();
  17.  
  18.             // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
  19.             Debug.Print("Program Started");
  20.         }
  21.  
  22.         private void DrawShapesOnCanvas()
  23.         {
  24.             //display_T35.SetLCDRotation(GTM.Module.DisplayModule.LCDRotation.UpsideDown);
  25.  
  26.             var window = display_T35.WPFWindow;
  27.             var canvas = new Canvas();
  28.             window.Child = canvas;
  29.  
  30.             var rect = new Rectangle(100, 80);
  31.             rect.Fill = new SolidColorBrush(GT.Color.Blue);
  32.             rect.Stroke = new Pen(GT.Color.Red, 10);
  33.             canvas.Children.Add(rect);
  34.             Canvas.SetLeft(rect, 10);
  35.             Canvas.SetTop(rect, 10);
  36.  
  37.             var ellipse = new Ellipse(40, 60);
  38.             ellipse.Fill = new SolidColorBrush(GT.Color.Yellow);
  39.             ellipse.Stroke = new Pen(GT.Color.Red, 1);
  40.             canvas.Children.Add(ellipse);
  41.             Canvas.SetLeft(ellipse, 200);
  42.             Canvas.SetTop(ellipse, 100);
  43.  
  44.             var line = new Line(10, 200);
  45.             line.Stroke = new Pen(GT.Color.Green, 2);
  46.             line.Width = 200;
  47.             line.Height = 80;
  48.             line.Direction = Direction.BottomToTop;
  49.             canvas.Children.Add(line);
  50.             Canvas.SetLeft(line, 20);
  51.             Canvas.SetTop(line, 150);
  52.  
  53.             var text = new Text(Resources.GetFont(Resources.FontResources.NinaB), "Hello, WPF !!");
  54.             text.ForeColor = GT.Color.Black;
  55.             canvas.Children.Add(text);
  56.             Canvas.SetLeft(text, 50);
  57.             Canvas.SetTop(text, 100);
  58.         }
  59.     }
  60. }

実際に起動するとこうなります。

WP_000796

位置やサイズ、色の指定を全部コードで書く必要があるのでコードが長くなり手間がかかるように見えますが、やっていることは理解しやすいですね。

 


StackPanel に描画する

.NET Micro Framework でも StackPanel が使えます。組み込みでは新鮮な感じがしますが、秩序立てて要素を配置できるのはいいですね。
(まあ、とは言っても、これも XAML なしでは可読性の面で少々面倒ではありますが)

  1. using System;
  2. using Microsoft.SPOT;
  3. using Microsoft.SPOT.Presentation;
  4. using Microsoft.SPOT.Presentation.Controls;
  5. using Microsoft.SPOT.Presentation.Media;
  6. using Microsoft.SPOT.Presentation.Shapes;
  7. using GT = Gadgeteer;
  8.  
  9. namespace T35WpfDemo2
  10. {
  11.     public partial class Program
  12.     {
  13.         // This method is run when the mainboard is powered up or reset.   
  14.         void ProgramStarted()
  15.         {
  16.             DrawShapesOnStackPanel();
  17.  
  18.             // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
  19.             Debug.Print("Program Started");
  20.         }
  21.  
  22.         private void DrawShapesOnStackPanel()
  23.         {
  24.             var window = display_T35.WPFWindow;
  25.             var stack = new StackPanel();
  26.             window.Child = stack;
  27.  
  28.             var rect = new Rectangle(200, 60);
  29.             rect.Stroke = new Pen(GT.Color.Red, 3);
  30.             rect.Fill = new SolidColorBrush(GT.Color.Blue);
  31.             stack.Children.Add(rect);
  32.  
  33.             var ellipse = new Ellipse(100, 30);
  34.             ellipse.Stroke = new Pen(GT.Color.Black, 2);
  35.             ellipse.Fill = new SolidColorBrush(GT.Color.Yellow);
  36.             stack.Children.Add(ellipse);
  37.  
  38.             var line = new Line(200, 60);
  39.             line.Stroke = new Pen(GT.Color.Green, 3);
  40.             line.Direction = Direction.BottomToTop;
  41.             stack.Children.Add(line);
  42.  
  43.             var textPanel = new StackPanel();
  44.             textPanel.Width = 200;
  45.             textPanel.Height = 60;
  46.             var text = new Text(Resources.GetFont(Resources.FontResources.NinaB), "Hello, WPF !!");
  47.             text.ForeColor = GT.Color.Black;
  48.             text.HorizontalAlignment = HorizontalAlignment.Center;
  49.             text.VerticalAlignment = VerticalAlignment.Center;
  50.             textPanel.Children.Add(text);
  51.             stack.Children.Add(textPanel);
  52.         }
  53.     }
  54. }

 

実行するとこうなります。今回はマージンについては特に指定していませんが、これを加えることで柔軟なレイアウトが可能になりますね。

WP_000797

 

「図形を描画できるのは分かったから、もう少し現実的な描画が見たい」という要求はあると思いますが、デスクトップアプリとは違って、組み込みでは(特に T35 / TE35 のような解像度の画面では)センサー値の値をグラフ表示するとか、決まった位置にテキスト表示するとか、アラート時に赤色シグナルを表示する、などの用途が考えられます。その意味では、今回のような使い方も見ておくとよいと思います。

「もう少し現実的な」例は T35 / TE35 のタッチ操作とあわせて 次の記事 で紹介します。

広告
カテゴリー: .NET Micro Framework タグ: , パーマリンク

.NET Gadgeteer モジュールのデモ:Display T35 / TE35 Module (カラータッチスクリーン) ~ Part 2 – WPF 描画機能 への2件のフィードバック

  1. ピンバック: .NET Gadgeteer モジュールのデモ:Display T35 / TE35 Module (カラータッチスクリーン) ~ Part 1 – SimpleGraphics 機能 | 技術との戯れ

  2. ピンバック: .NET Gadgeteer モジュールのデモ:Display T35 / TE35 Module (カラータッチスクリーン) ~ Part 3 – タッチイベント処理機能 | 技術との戯れ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中