WPF で 3D オブジェクトを回転させる

前回の WPF で 3D オブジェクトを表示するに引き続いて、今回は 3D オブジェクトを回転させます。
図のようにボタンを配置して、6 方向の回転ができるように実装します。

次のようにコードを追加・変更します。

ボタンとして RepeatButton を配置しています。
RepeatButton は、押したままにしておけば断続的に Click イベントが発生します。
また回転の状態を表すために、ModelVisual3D.Transform の中で MatrixTransform3D を使います。

回転には、回転軸と回転角度が必要です。

  • 回転軸は、ベクトルで表されます。
  • 回転角度は、回転軸の方向に右ねじを押し込む場合を正とします。

6 つのボタンはそれぞれ、x, y, z 軸を回転軸とした正方向または負方向の回転を表します。
1 回の Click イベントにつき 5° ずつ回転させています。
なお、カメラは z 軸上の正の位置から原点方向を見下ろし、右側が x 軸の正、上側が y 軸の正を表しています。

Click イベントハンドラーの中で、Matrix3D.Rotate メソッドを呼び出すことでオブジェクトを回転させます。
引数には、回転軸と回転角度を表す Quaternion (四元数) を指定します。
このように、回転軸と回転角度がわかっている場合は比較的簡単に実装ができます。

下図は、最初の状態から x 軸のまわりに -60° 回転させたところです。

全体のソースコードは DiceRotationWpf (GitHub) にあります。
マウスまたはタッチのドラッグ操作でも回転できるようになっています。

Dice Rotation

 

前回: WPF で 3D オブジェクトを表示する
次回: 3D における回転の表現と相互変換

作成したサンプル
DiceRotationWpf (GitHub)

バージョン情報
.NET Framework 4.5

参照
3-D グラフィックスの概要
3-D 変換の概要

WPF で 3D オブジェクトを表示する

WPF の 3D グラフィックスの機能を使って、3D オブジェクトを表示する方法を示します。
XAML でさいころのような立方体を描画することを目指します。

Dice (XAML)

先に XAML を示します。この後に簡単な説明が続きます。

 

まず、Viewport3D を配置します。
3D オブジェクトを描画するには次の 3 種類のものが必要で、これらを Viewport3D に設定します。

カメラ
Viewport3D.Camera プロパティに指定します。PerspectiveCamera を使うと、遠近感が出ます。
既定では LookDirection="0,0,-1" UpDirection="0,1,0" となっており、
つまり z 軸の逆方向を向いており、y 軸の正方向が上になっています。

照明
通常のオブジェクトと同様に、Viewport3D.Children プロパティにモデルとして追加します。
AmbientLight を使うと、影がなく、一様な明るさでオブジェクトが表示されます。

オブジェクト
主に ModelVisual3D として定義し、Viewport3D.Children プロパティに追加します。

以下では、ModelVisual3D の設定について書いていきます。
GeometryModel3D でオブジェクトを定義し、ModelVisual3D.Content プロパティにそれを指定します。
複数のオブジェクトをグループ化するには、Model3DGroup を使います。
GeometryModel3D には、マテリアルとジオメトリを指定します。

マテリアル

GeometryModel3D.Material プロパティで、何を表示するかを指定します。
ここでは、さいころの面を描くために 2D の TextBlock を用意しておき、それをテクスチャとして指定しています。
2D の Brush をテクスチャとして利用するには、DiffuseMaterial を使います。

また、BackMaterial プロパティに、Material プロパティと同じものを指定すれば、裏面には表面を反転したものが表示されます。
つまり、「3」の裏面は「ε」のようになります。

ジオメトリ

GeometryModel3D.Geometry プロパティで、どこに表示するかを指定します。
具体的には、MeshGeometry3D を利用して、次のものを指定します。

点の集合 (Positions プロパティ)
メッシュを構成する三角形に分割した場合に、頂点となる点の集合を指定します。

三角形の集合 (TriangleIndices プロパティ)
Positions プロパティで指定した点に0からインデックスを付けて、メッシュを構成する三角形の頂点を列挙します。
三角形の頂点の順番は、表側から見て反時計回りになるように指定します。

テクスチャの位置 (TextureCoordinates プロパティ)
Positions プロパティで指定した各点が、マテリアルの中のどの点に対応するかを指定します。
マテリアルは 2D なので、左上が (0, 0)、右下が (1, 1) です。

例えば、

<MeshGeometry3D Positions="-1,-1,1 1,-1,1 1,1,1 -1,1,1" TriangleIndices="0,1,2 0,2,3" TextureCoordinates="0,1 1,1 1,0 0,0"/>

とした場合は、P0(-1, -1, 1), P1(1, -1, 1), P2(1, 1, 1), P3(-1, 1, 1) の 4 点があり、
メッシュは P0P1P2 と P0P2P3 の 2 つの三角形で構成され、
P0 が左下、P1 が右下、P2 が右上、P3 が左上となるようにテクスチャを描画するという意味になります。
なお、これらの値を XAML 上で列挙するときの区切り文字としては、カンマまたはスペースの両方が使えます。

アフィン変換 (移動、スケール、回転など) について

3D オブジェクトのアフィン変換は、ModelVisual3D.Transform プロパティで指定します。

コードでの記述について

XAML の代わりに C# などの .NET のコードで記述することもできます。
同一の処理が繰り返される場合には、コードで生成したほうが簡単に表現できることもあります。

 

次回: WPF で 3D オブジェクトを回転させる

作成したサンプル
Wpf3DSample (GitHub): コードで描画した例もあります。

バージョン情報
.NET Framework 4.5

参照
3-D グラフィックスの概要
3-D 変換の概要

WPF で外枠にはみ出さないようにする

WPF で、Border や Grid などの枠の中に、その領域をはみ出すようなコントロールを配置して、
それを Transform などで移動させるとします。
すると、そのコントロールの一部が切り取られてしまったり、外枠にはみ出てしまうなど、期待通りの動作にならないことがあります。
以下では、この現象をどうすれば回避できるかを試していきます。
(追記: Canvas で ClipToBounds="True" とすればよい、とコメントを頂いたため、後半に追記しました。)

Blend for Visual Studio で WPF アプリケーション プロジェクトを作成して、
Border の中に Rectangle を配置して、Rectangle を期待通りに動かせるかどうかを調べます。

Window の領域を 4 つに分けて、以下の方法を試してみます。

  • 左上: Border の中に Rectangle を配置するだけ
  • 右上: Border と Rectangle の間に Canvas を配置する
  • 左下: Border と Rectangle の間に ScrollViewer と Canvas を配置する
  • 右下: Border と Rectangle の間に ScrollContentPresenter と Canvas を配置する

ScrollViewer を使うことで、外側にはみ出さないようにします。
スクロールバーを消すために、VerticalScrollBarVisibility プロパティを Disabled に設定します。
また、ScrollContentPresenter は、ScrollViewer の中で使われているコントロールです。

すると、Blend for Visual Studio のデザイナーでは次のように表示されます。
この時点で、右上の方法では外枠の Border の上に描画されてしまうことがわかります。

FrameLayoutWpf

また、この 4 つの Rectangle に対して、TranslateZoomRotateBehavior を設定します。
(Blend for Visual Studio のアセットからドラッグ アンド ドロップします。)
これで、実行時にタッチ操作などでコントロールを動かせるようになります。

全体の XAML は次のようになります。

このアプリケーションを実際に動かしてみます。

FrameLayoutWpf

  • 左上: 初期配置の領域以外の部分は切り取られてしまいます。
  • 右上: Rectangle が枠外にはみ出します。
  • 左下: 期待通りです。
  • 右下: 期待通りの動作ですが、ScrollContentPresenter.Content が既定プロパティではないため、
    上の階層がデザインツールに表示されません。

 

ここで、よねやんさんから、Canvas の ClipToBounds プロパティの値を True にすればよい、とコメントを頂きました。

右上の Canvas を変更して実行してみます。

FrameLayoutWpf

期待通りです。
というわけで、ScrollViewer などは不要になりました。
Canvas を配置して、ClipToBounds="True" を設定するだけです。

 

作成したサンプル
FrameLayoutWpf (GitHub)

バージョン情報
.NET Framework 4.5

参照
UIElement.ClipToBounds プロパティ

XAML マークアップ拡張を自作する

例えば XAML でデータ バインディングをするときに、

Text="{Binding Message}"

のような記法を用いますが、これは XAML マークアップ拡張と呼ばれ、
Binding クラスが MarkupExtension クラスを継承しているためにこの形式の記述ができるようになっています。

今回は例として、構成ファイル (.config) の <appSettings> の値を読み込む
XAML マークアップ拡張クラスを自作してみたいと思います。
先にコードを示します。

マークアップ拡張クラスでは、ProvideValue メソッドを実装して実際に設定する値を返します。
設定先となる依存関係プロパティを取得するには、
ProvideValue メソッドに渡される serviceProvider から IProvideValueTarget を取り出します。

さて、App.config の <appSettings> に設定値を追加して、
MainWindow.xaml 上の UI コントロールのプロパティにそれらの値を設定します。

クラス名にサフィックスとして Extension を付けておくと、サフィックスを除いた名前で記述できます。
値を設定している部分は、

Height="{local:AppSettings Key=WindowHeight}"

と書いてもよいですが、Key を引数に取るコンストラクターが存在することで、

Height="{local:AppSettings WindowHeight}"

と書けるようになります。
なお、この部分は次のようにも書けます。

<Window>
    <Window.Height>
        <local:AppSettings Key="WindowHeight"/>
    </Window.Height>
</Window>

MarkupExWpf

 

前回: プロパティ変更をタイマーで同期して通知する

作成したサンプル
MarkupExWpf (GitHub)

バージョン情報
C# 6.0
.NET Framework 4.5

参照
MarkupExtension クラス
XAML のマークアップ拡張機能の概要
型コンバーターおよびマークアップ拡張機能で使用できるサービス コンテキスト

プロパティ変更をタイマーで同期して通知する

C# のコードでデータ バインディング (1) で書いた通り、
Binding Source は INotifyPropertyChanged か DependencyObject でなければ
プロパティ変更通知ができないため、永続的に値が反映される OneWay バインディングはできません。

そこで、プロパティ変更通知機能を持たない既存のオブジェクトをタイマーで監視して
プロパティ変更通知を発生させる DynamicSyncProxy<T> クラスというのを作ってみました。

DynamicObject クラスを継承し、既存のオブジェクトを内部に持ちます。
そのオブジェクトのプロパティへのアクセスを透過するプロキシとして機能します。

さて、プロパティ変更通知機能を持たない TextModel クラスを用意して、
DynamicSyncProxy<T> を介してデータ バインディングを設定します (dynamic 型として扱います)。

この例では 0.3 秒ごとに値が同期されます。

DynamicBinding

 

前回: ExpandoObject を使ったデータ バインディング
次回: XAML マークアップ拡張を自作する

作成したサンプル
DynamicBindingWpf (GitHub)

バージョン情報
C# 6.0
.NET Framework 4.5

参照
データ バインディングの概要
C# のコードでデータ バインディング (1)

ExpandoObject を使ったデータ バインディング

C# のコードでデータ バインディング (1) では、
INotifyPropertyChanged インターフェイスを実装した Person1 クラスに
プロパティを定義してデータ バインディングを構成しました。

ところで、dynamic 型として扱うことで実行時に任意のプロパティを追加できる ExpandoObject クラスというものがあり、
しかも INotifyPropertyChanged インターフェイスを実装しています。
したがって ExpandoObject クラスを使えば、
プロパティを事前に定義しなくてもデータ バインディングができるようになります。

次のコードは、C# のコードでデータ バインディング (1) の TwoWay バインディングのコードを少し書き換えて、
ExpandoObject クラスを使うようにしたものです。
Person1 クラスを使ったときと同様にデータ バインディングが動作します。

 

さて、ExpandoObject は、XAML で DataContext に設定した場合でもプロパティにアクセスできます。
次に示す XAML では、空の ExpandoObject オブジェクトに対して、
UI コントロールから Input プロパティと Output プロパティに直接バインドしています。

コード側で、Input を大文字に変換して Output に反映させています。

ExpandoBinding

 

前回: C# のコードでデータ バインディング (3)
次回: プロパティ変更をタイマーで同期して通知する

作成したサンプル
BindingConsole (GitHub)
ExpandoBindingWpf (GitHub)

バージョン情報
C# 6.0
.NET Framework 4.5

参照
データ バインディングの概要
C# のコードでデータ バインディング (1)

XAML でリキッド レイアウト

リキッド レイアウト (liquid layout) とは、表示領域のサイズによって動的に表示方法が最適化されるようなレイアウトを指します。

もしレイアウトについてとくに意識せずに固定サイズのアプリケーションを実装してしまうと、
ウィンドウのサイズが小さい場合には一部のコンテンツが隠れたり、
逆にウィンドウのサイズが大きい場合には空白ができたりしてしまいます。

ディスプレイの解像度の制限やユーザーによるウィンドウのサイズ変更など、
表示領域のサイズの連続的な変化に対応しなければなりません。

以下では、XAML 系アプリケーションでリキッド レイアウトを実現するためのパターンと実装例を紹介します。

(1) Grid

Grid では、ColumnDefinitions プロパティおよび RowDefinitions プロパティにより、各行・列の幅を指定できます。
固定値のほか、他の行・列との相対値 (1:2 にする場合など) や内部のコンテンツの幅 (Auto) も指定できます。

(2) ScrollViewer

ScrollViewer を利用すれば、スクロールにより全体を表示させることができます。
コレクション データを扱う場合は、ScrollViewer と WrapPanel を組み合わせて使うとよいでしょう。
ちなみに ScrollViewer は、既定で縦スクロールバーが有効、横スクロールバーが無効に設定されています。

(3) Viewbox

Viewbox は、表示領域に合わせて内部のコンテンツを伸縮させることにより、元のレイアウトを保持します。
最も手っ取り早い方法かもしれません。

(4) 最大値・最小値の指定

Viewbox のような伸縮させるコントロールでは、既定では無制限にコンテンツが拡大・縮小してしまいます。
したがって、サイズの最大値・最小値を指定する方法も有効です。

 

これらのパターンを実装する例として、次の WPF アプリケーションを作成しました。

(全体のソースコードは GitHub の LayoutWpf にあります。)

 

ここでは 4 つの表示領域があり、
左上はとくに何も対策しない例、右上は ScrollViewer を使う例、
左下は Viewbox を使う例、右下は Viewbox の横幅に最大値を指定する例です。

各領域では、内部のコンテンツとしてコレクション データを ItemsControl で表示させています。
この ItemsControl の ItemsPanel を WrapPanel に設定しています。

また、この 4 つの表示領域は 2×2 の Grid 上にあり、行も列も 1:1 に分割されています。

このアプリケーションを起動するとこうなります。

起動時の状態

 

ウィンドウのサイズを小さくします。
左上および右上では WrapPanel の列の数が減りますが、
左上では、下部を表示することができません。右上では、スクロールすれば残りが表示されます。
左下と右下では Viewbox に合わせてコンテンツが縮小されます。

小さくした状態

 

今度は、ウィンドウのサイズを大きくします。
左上および右上では WrapPanel の列の数が増えています。
左下では Viewbox に合わせてコンテンツが拡大されるのに対し、右下では Viewbox が一定以上は大きくなりません。

大きくした状態

 

作成したサンプル
LayoutWpf (GitHub)

参照
Grid クラス
ScrollViewer クラス
Viewbox クラス