WPF Hands On Lab

WPF Hands on Labという自習型のWPFトレーニングが、2005年9月のPDCで公開されました。それ以降何度かバージョンアップされていましたが、先日RTM版がnetfx3で公開されました。内容は次のとおりです WPF アプリケーションの構築 XAML ブラウザ アプリケーションの構築 WPFにおけるリッチな2Dと3Dのコンテンツの作成 WPFを使ったリッチなリーディング体験 WPFにおけるデータバインディングの使い方 ステップ バイ ステップで学習できるVisual Studioプロジェクトとドキュメントが含まれていますが、残念ながらドキュメントは英語です。しかし、日本のMSDN Windows Vista Developer Centerに2006年1月版ですが、日本語ドキュメントがあります。コードは修正されていますが、内容的にはそれほど変わっていないので、このドキュメントは十分使えると思います。 WPFのはじめの一歩として、非常に優れていますので、トライしてみることをお勧めします。私もPDC 2005のこのHands On LabからWPFを始めました。

2

鉄コン筋クリート

12月23日に映画「鉄コン筋クリート」が公開されます、ぜひ観てください。原作は映画「ピンポン」の原作者でもある松本大洋さんであり、1993年から1994年にかけてビッグコミック スピリッツに連載され、当時私も読んでいました。 監督のマイケル・アリアスとは以前同じ職場で働いていたことがあります。そのころ彼はスタジオジブリのためにアニメ調のレンダリングをするトゥーン シェーダを開発していました。そしてこのマンガを映画化したいと考え、お金を集め、数分のプロトタイプを製作して発表していました。それがこんなふうに全国で封切られるような映画となって、彼が自分の夢を実現したことに感動しています。 どちらかというと暗いイメージの世界観をもつマンガでしたが、3Dを含め、彼がこの世界観をどのように表現しているのかを観るのが楽しみです。

0

WPF UIコンポーネントを3D内で使う

WPFの特徴の一つは3Dと2Dの融合で、ボタンなどの2DのUIコンポーネントを3Dジオメトリに貼り付けることができます。しかし、これをUIとして使うことはできません、ビジュアルとして貼り付けられているだけです。 WPF 3Dチームのブログにこれを解決するためのツールが紹介されています。つまり、3Dに貼り付けた2DのWPF UIコンポーネントをそのまま使えるようにするためのライブラリです。codeprexのサイトからダウンロードでき、ソースコードも公開されています。 これを使って、以前紹介した入力を3Dに表示させるサンプルを修正し、3Dに入力した結果を3Dに表示させるサンプルを作ってみました。このツールを使うには、ダウンロードした3DTools.dllを参照設定に追加し、XAMLでViewport3DをInteractive3DDecoratorで囲みます。すると、モデルの指定に InteractiveVisual3Dが使え、この例のように座標変換、ジオメトリ、Visualやマテリアルをプロパティとして指定できます。ここでは明確にするためにリソースを使っていますが、特にリソースでなければいけないわけではありません。 <Window x:Class=“myInteractive3D.Window1“     xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation“     xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml“     xmlns:local=“clr-namespace:_3DTools;assembly=3DTools“     Title=“myInteractive3D“ Width=“400“ Height=“300“       >   <Window.Resources>     <!– Transform –>     <RotateTransform3D x:Key=“myTransform“>       <RotateTransform3D.Rotation>         <AxisAngleRotation3D Angle=“30“ Axis=“0 1 0“ />       </RotateTransform3D.Rotation>     </RotateTransform3D>     <!– Geometry –>     <MeshGeometry3D x:Key=“myPlaneMesh“          Positions=“-1,1,0 -1,-1,0 1,-1,0 1,1,0“         TextureCoordinates=“0,0…

0

WPF/E (codname)

WPF/E (codename) Dec 2006 CTPが公開されました。WPF/Eには次のような特徴があります。 ・クロス プラットフォーム、クロス ブラウザ対応。対応プラットフォームはWindows(XPとVista)およびMac(OS X 10.4.8以降の PowerPCとIntel)、対応ブラウザはInterntet Explorter、Firefox、Opera、Safari。・ASP.NET AJAXを含む、クライアント-サーバー ベースのAJAXソリューションとの容易な統合。・インラインXAMLとJavaScript、外部XAMLファイルとJavaScriptファイルの両方の配置方法をサポート。・強化されたWebオーディオ/ビデオ再生。・XAMLベースのレンダリング。WPF/EでサポートされるXAMLはWPFのサブセットであり、ハードウェア レンダリングと3Dグラフィックスはサポートされない予定です。 htmlにXAMLが埋め込め、スクリプトで制御できるものです。動作環境としてMacやIE以外のブラウザもサポートしますが、3Dやハードウェア アクセラレーションはありません。XAMLによるレンダリングという共通点はありますが、WindowsとIEのみで動作し、実行ファイルベースであるWPFとは異なります。将来的には携帯のようなモバイルデバイスでも動作させたいようです。

0

XmlDataPrivider

WPFはXMLデータの処理が非常に簡単です。特に自分でパースする必要なしに、XMLに記載された項目を表示できます。たとえば、このブログのRSSファイルからタイトルを表示するXAMLは次のとおりです。 <Page xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”         xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“>  <Page.Resources>    <XmlDataProvider x:Key=”myBlog”  XPath=”rss/channel”           Source=”http://blogs.msdn.com/hiroyuk/rss.aspx” />  </Page.Resources>  <ListBox DataContext=”{StaticResource myBlog}”          ItemsSource=”{Binding XPath=item/title}”/></Page>

0

HitTest3D

Windows Presentation Foundationの特徴の一つには3Dグラフィックスがあります。以前紹介したように3Dの描画自身はそれほど難しくはありません。3Dを使ったメニューのようなものを作りたいとき必要なことは、マウスによるクリックがどの3Dオブジェクトを選択したのかを確認することです。残念ながら、3Dオブジェクトにマウスクリックのコールバックを設定することはできません。 まず、Viewport3Dにマウスクリックのコールバックを設定します。WPFには、マウスがどのオブジェクトをクリックしたかを確認するためのVisualTreeHelper.HitTestメソッドがありますので、このコールバックの中でHitTestを呼び出します。 <Viewport3D  MouseLeftButtonDown=”OnClick” Name=”myViewport3D” > …         // Viewport3Dクリック時のヒットテスト        public void OnClick(object sender, System.Windows.Input.MouseButtonEventArgs args)        {            Point mouseposition = args.GetPosition(myViewport3D);            PointHitTestParameters pointparams =                   new PointHitTestParameters(mouseposition);            VisualTreeHelper.HitTest(myViewport3D, null, HTResult, pointparams);        } ここで注意してほしいのは、第4引数にHitTestParameters3DではなくPointHitTestParametersを渡している点です。これは第1引数にViewport3Dを渡しているからです。Viewport3Dは3Dを2Dに投影したスクリーンですから実は2Dのオブジェクトなのです。ここに3Dオブジェクトを渡そうとすると、自前でマウスのクリック点からレイを導出し、逆座標変換でスクリーン空間からワールド空間に変換し戻す必要があるので面倒です。 HitResult関数では、次のようにHitTestResultで渡されたオブジェクトと、判定したいオブジェクトの比較を行い、必要な作業を行います。ここではVisualHitを使いましたが、RayMeshGeometry3DHitTestResultのメンバには、MeshHit、ModelHit、PointHit、VisualHitなどがあり、目的に応じて利用できます。         public HitTestResultBehavior HTResult(System.Windows.Media.HitTestResult rawresult)        {            if (rawresult != null)            {                RayMeshGeometry3DHitTestResult rayMeshResult =                       rawresult as RayMeshGeometry3DHitTestResult;                                if (rayMeshResult…

2

Windows Vistaの秘密

Tim Sneathが彼のブログで「Windows Vista Secret」という連載(?)をやっています。役に立ちそうなものもあるので、ここでタイトルだけ日本語化して紹介します。詳細は(英語ですが)リンク先を見てください。 任意のフォルダでコマンドプロンプトを開く パスをコピーする XPとおなじ「ファイル名を指定して実行」ダイアログを開く ユーザーアカウント制御を無効にする タスクバーのクイック起動項目をキーで起動する セットアップ中にコマンドプロンプトを開く Windowsで最も古いコンポーネントは? Windows Explorerでズーム 負荷の高いスタートアップ起動を止めさせる 6つのキーストロークで管理者権限コマンドプロンプトを開く 削除不可を削除する              

0

MediaElement and MediaPlayer

WPFでビデオやオーディオなどのメディアを再生するには、多くの場合次のようにMediaElementを使います。MediaElementはStackPanelやCanvasレイアウト上に配置できるので、単独で使えて便利です。 <MediaElement Source = “..\..\intro.wmv” Width=”300″ Height=”200″ /> WPFには、もう一つのメディア再生用の要素として、MediaPlayerがあります。これはMediaElementと違って、レイアウト上に単独では使えず、DrawingBrushと組み合わせて使います。つまり、メディアで何らかの形状を塗りつぶすときに使います。また、MediaPlayer要素はXAML内で記述できません、次のようにC#などのコードビハインドで記述します。 <Rectangle Width=”300″ Height=”200″ Stroke=”Black” MouseDown=”OnClick1″>  <Rectangle.Fill>    <DrawingBrush>      <DrawingBrush.Drawing>        <VideoDrawing x:Name=”MyVideoDrawing”  Rect=”0,0,300,200″ />      </DrawingBrush.Drawing>    </DrawingBrush>  </Rectangle.Fill></Rectangle> void OnClick1(object sender, RoutedEventArgs e){    MediaPlayer MyPlayer = new MediaPlayer();    MyPlayer.Open(new Uri(@”..\..\intro.wmv”, UriKind.Relative));    MyVideoDrawing.Player = MyPlayer;    MyPlayer.Play();}    MediaElementとVisualBrushを使えば、同じことがXAMLだけで実現できます。わざわざMediaPlayer要素を使うメリットはなんでしょうか?実は、MediaPlayer+DrawingBrushを使うと(あるいはMediaElement単独だと)、内部での(レンダラによってはGPUでの)コピー回数を、MediaElement+VisualBrushより1回減らすことができます。小さなビデオでは問題にならないかもしれませんが、HDビデオや多数のビデオを同時再生するような場合には、効果があるかもしれません。

0

Floating Teapot 2

以前このBlogに書いたFloating Teapotを改造して、マウスで回転するトラックボール機能を追加します。トラックボールのコードは、Windows SDKのWPFサンプルのFlipperにあるTrackball.csを使います。このトラックボールは使い方は簡単なのですが、XAMLのデータ構造をこのコードに合わせなければなりません。 まず、Windows1.xaml.csに追加するのは、このTrackball用の名前空間(#using DemoDev)とコンストラクタへの次の初期化コードです。 _trackball = new Trackball();_trackball.Attach(this);_trackball.Servants.Add(myViewport3D);_trackball.Enabled = true; XAMLは次のように変更しています。     <Viewport3D Focusable=”True” Name=”myViewport3D” ClipToBounds=”True”  >      <!–カメラ–>      <Viewport3D.Camera>        <PerspectiveCamera                     Position=”-5,2,3″ NearPlaneDistance=”1″ FarPlaneDistance=”20″                     LookDirection=”5,-2,-3″ UpDirection=”0,1,0″ FieldOfView=”45″ />      </Viewport3D.Camera>            <Viewport3D.Children>            <ModelVisual3D>              <!–座標変換 トラックボール用–>            <ModelVisual3D.Transform>              <Transform3DGroup>                <Transform3DGroup.Children>                  <Transform3DCollection >                    <ScaleTransform3D ScaleX=”1″ ScaleY=”1″  ScaleZ=”1″ />                    <RotateTransform3D>                      <RotateTransform3D.Rotation>                        <AxisAngleRotation3D Axis=”0 1 0″ Angle=”0″ />                      </RotateTransform3D.Rotation>                   …

0

VisualBrush, Key input to 3D

Windows Presentation FoundationのBrushはかなり強力で、ほとんど何でも塗りつぶしに使えます。たとえば、画像ならImageBrush、ビデオならVideoBrush、ベクトル グラフィックスならDrawingBrushが使えますし、それ以外にもキー入力を別の矩形などに表示したいときなどは、そのFillプロパティにVisualBrushを使えば実現できます。 <TextBox Grid.Column=”0″ Grid.Row=”0″ x:Name=”myInput”  Text=”キー入力” />… <Rectangle Width=”300″ Height=”100″ >    <Rectangle.Fill>      <VisualBrush>        <VisualBrush.Visual>          <TextBlock Text=”{Binding ElementName=myInput, Path=Text}” Background=”Red” Width=”100″/>        </VisualBrush.Visual>     </VisualBrush>    </Rectangle.Fill></Rectangle> 実は、このVisualBrushはGeometryModel3Dのマテリアルとしても使えます。つまり、3Dオブジェクトにキー入力を表示させることができます。別にキー入力だけではなく、何らかのテキストデータを3Dオブジェクトに表示させる際にも同じ手法が使えます。   <GeometryModel3D.Material>  <DiffuseMaterial>      <DiffuseMaterial.Brush>        <VisualBrush>          <VisualBrush.Visual>            <TextBlock Text=”{Binding ElementName=myInput, Path=Text}” Background=”Red” Width=”100″ />          </VisualBrush.Visual>        </VisualBrush>      </DiffuseMaterial.Brush>     </DiffuseMaterial>  </GeometryModel3D.Material> 添付のXAMLファイルは3Dに入力テキストを表示させたlooseXAMLです。 VisualBrush.xaml

0