WPF ToolkitをExpression Blend2で使用する方法についてのメモです。

・Expression Blend2はSP1を適用したものを使用してください。（Expression Blend2 SP1のダウンロードとインストール 参照）

・WPF Toolkit は[WPF]WPF Toolkitのインストール を参照してインストールしてください。

上記がインストールされているものとして

1.プロジェクトの「参照の追加」を選択して C:\Program Files\WPF Toolkit\v3.5.31016.1 にあるWPFToolkit.dll を参照追加します。

追加すると下記のようになります。

2.後は「アセットライブラリ」を開き「カスタムコントロール」タブを選択すると、WPF Toolkitのコントロールを選択できるようになります。

コントロールを貼り付けると下記のような感じになります。

2008/10/27にWPF Toolkit - October 2008 Release がリリースされています。

Silverlight2とWPFで使用可能なコントロールまとめ でWPFの開発でDataGridが使用できないことを説明しましたが

このツールキットをインストールすることで

• Calendar
• DataGrid
• DatePicker

コントロールが使用可能となります。

これらのコントロールをWPFアプリケーションで使用したい方は、

CodePlex の このページからダウンロードして下記手順でインストールを行います。

1.ダウンロードしてきたファイルを解凍し WPFToolkit.msi をダブルクリックします。

2.下記画面が表示されるので、[I accept the ...]にチェックをつけ、[Install]ボタンをクリックします。

3.インストールが行われます

4.[Finish]ボタンをクリックしてインストールを終了します。

Visual Studio 2008を起動してWPFアプリの作成を開始すると、ツールボックスに[WPF Toolkit]タブが追加され、

• Calendar
• DataGrid
• DatePicker

コントロールが使用可能になっていることを確認してください。

Silverlight2とWPFで使用できるコントロールは下記の通りです。 

これはVisual Studio 2008 SP1を当てた後のものです。（当てる前については確認していません）

○がついているものが使用可能なコントロールです。

これを見てわかるように、DataGridコントロールはSIlvelight2側にしか提供されていません。

（正確には、CodePlexからダウンロードして追加することが可能です）

DataGridは最初から備わっていて欲しかったですね。

CodeZineにて 「Windows PowerShell 独自コマンドレットの開発」が公開になりましたので、興味がある方はご覧ください。

今回は入門編ではありません。中級から上級の方向けです。

これまでの記事は下記の通りです。

今回はオブジェクトの傾斜についてです。

傾斜を行うには<SkewTransform>タグを使用します。

このタグでは以下の属性を使用します。

• CenterX: 傾斜を行う際の中心点X
• CenterY: 傾斜を行う際の中心点Y
• AngleX: X方向傾斜角度
• AngleY: Y方向傾斜角度

X方向の傾斜

X方向へ45度傾斜させる場合には、AngleXに45を指定し、XAMLを下記のように書きます。

<Button Height="23" Margin="99,106,104,0" Name="Button1" 
    VerticalAlignment="Top" IsDefault="True" IsCancel="True">
    <Button.RenderTransform>
        <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0">
        </SkewTransform>
    </Button.RenderTransform>
    Button
</Button>

Y方向の傾斜

Y方向へ45度傾斜させる場合には、AngleYに45を指定し、XAMLを下記のように書きます。

<Button Height="23" Margin="99,106,104,0" Name="Button1" 
    VerticalAlignment="Top" IsDefault="True" IsCancel="True">
    <Button.RenderTransform>
        <SkewTransform CenterX="0" CenterY="0" AngleX="0" AngleY="45">
        </SkewTransform>
    </Button.RenderTransform>
    Button
</Button>

メモです。

WPFでは3Dも扱えるのですが、今のところ3Dモデルを作成できるソフトウェアはMicrosoftから出ていません。

有償であればZAM3Dなるソフトウェアがありますが貧乏人には買えません...

そこで、フリーウェアで何とかならないかと探していたところ、下記でできそうなことがわかりました。

・Metasequoia

3DCGやCAD、ゲーム制作などに用いる立体形状データを作成するためのポリゴンベースのモデラー

有料版と無料版があります。

このソフトウェアだけでは3DモデルのXAMLを作成できません。

・Identity

XAML対応Windows用3Dアニメーションツール。

上記の Metasequoia で作成したデータからアニメーションをつけてXAMLを作成することができます。

上記２つを使えば3D対応XAMLを作成できそうです。（ってまだ試していません。いずれは...）

ちなみに、この件をいろいろ調べていたら

trueSpaceというソフトウェアがMicrosoftから無償で公開されています。

trueSpaceは、Microsoftが2月に買収した米Caligariが開発した製品でもともとは700ドルくらいのソフトウェアだとか...

ただしXAMLを直接作成することはできません。DirectXでおなじみXファイルは作成できるようです。

今回はWPFアプリケーションにおけるスケーリング（拡大/縮小）について説明します。

スケーリングを行うには<ScaleTransform>タグを使用します。

このタグでは以下の属性を使用します。

• CenterX: スケーリングを行う際の中心点X
• CenterY: スケーリングを行う際の中心点Y
• SacleX: X方向伸縮倍率
• ScaleY: Y方向伸縮倍率

CenterX=0, CenterY=0, ScaleX=2, ScaleY=2とした場合のXAMLは

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
        Name="Button1" VerticalAlignment="Top" Width="75">
    <Button.RenderTransform>
    <ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2"></ScaleTransform>
    </Button.RenderTransform>
    Button
</Button>

となり、下図のようにスケーリングされます。薄いボタンはスケーリング前のボタンを表しています。

ScaleXとScaleYには負の値も指定可能です。

この場合はボタンに表示されている文字は反転することになります。

ScaleX="-1", ScaleY="-1" にしたXAMLを下記のように作成し

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
        Name="Button1" VerticalAlignment="Top" Width="75">
    <Button.RenderTransform>
    <ScaleTransform CenterX="0" CenterY="0" ScaleX="-1" ScaleY="-1"<>/ScaleTransform>
    </Button.RenderTransform>
    Button
</Button>

上記XAMLは下図のようにスケーリングされます。薄いボタンはスケーリング前のボタンを表しています。

今回から数回に分けて、WPFにおけるオブジェクトの

• 回転
• スケーリング
• 傾斜

について学んでいきたいと思います。

今回はオブジェクトの回転についてです。

Visual Studio上でデザインする場合、回転、スケーリング、傾斜といった項目はプロパティウィンドウに表示されないため、XAMLに直接手を加えることになります。

Expresion Blendがあるとマウス操作によるデザインが可能なのですが、理解しておくことでマウス操作では出来ない微調整も可能となりますのでこれを機会に覚えてしまいましょう。

Buttonコントロールを例に、それぞれについてサンプルを示します

基本
2-D平面での変換(回転、スケーリング、傾斜など)を行うには、

<オブジェクト.RenderTransform>～</オブジェクト.RenderTransform>タグが必要です。

Buttonコントロールを2-D平面で変換(回転、スケーリング、傾斜など)する場合の基本XAMLは

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
        Name="Button1" VerticalAlignment="Top" Width="75">
    <Button.RenderTransform>
    <!--ここに回転、スケーリング、傾斜などのタグを挿入-->
    </Button.RenderTransform>
    Button
</Button>

となります。あとは回転、スケーリング、傾斜などのタグを<オブジェクト.RenderTransform>～</オブジェクト.RenderTransform>へ挿入します。

回転 RotateTransform
オブジェクトの回転を行うには<RotateTransform>タグを使用します。
<RotateTransform>は、点 (CenterX、CenterY) を中心として、指定した Angle(単位:度) だけオブジェクトを回転します。

CenterX=0, CenterY=0, Angle=45とした場合のXAMLは

<RotateTransform CenterX="0" CenterY="0" Angle="45"/>

オブジェクトの中点を中心点として回転させたい場合には、
CenterX=オブジェクト幅÷2、CenterY=オブジェクト高さ÷2
とすればよいことになります。
幅:75、高さ:23のボタンを中心を軸に回転させる場合は、下記XAMLとなります。

<RotateTransform CenterX="37.5" CenterY="11.5" Angle="45"/>

まとめ

<RotateTransform> を使用すれば、自由にオブジェクトを回転できることがおわかりいただけたかと思います。

Buttonコントロール以外にも使用できますので、是非いろいろと使用してみてください。

Microsoft Expression Blend2 SP1 もとっくにダウンロード可能だったんですね.....

知りませんでした。

ということで、ダウンロードしてインストールしてみました。

1)ダウンロードしてきた実行ファイル(BlendV2SP1_ja.exe)をダブルクリックして実行

2)ライセンス条項を読んで[同意する]をクリック（もちろん同意する場合）

3)あとはインストールが完了するのを待つだけ

Blend2 SP1では「Silverlight2 アプリケーション」がサポートされていますので、Silverlight2アプリを開発する方はインストールしましょう。

Visual Studio 2008 SP1用 Silverlight Tools をダウンロードしてインストールが完了したので記録として残しておきます。

1)ダウンロードしてきたファイル(Silverlight_Tools.exe)を実行

2)[次へ]ボタンをクリック

3)ライセンス条項を読んで[同意]するにチェックをして[次へ]をクリック

4)あとはひたすら待つのみ。

5)[完了]をクリックして終了。

インストール完了後、プロジェクトの種類で「Silverlight」を選択でき、

• Silverlightアプリケーション
• Silverlightクラスライブラリ

の開発が可能となります。

下図に示すようにVB.NETかC#での開発が可能ですので、お好きな方でどうぞ。

Visual Studio 2008 SP1用 Silverlight Tools ダウンロード可能になっていたんですね。

これでSilverlight 2 用アプリケーションを Visual Studio 2008 上で開発ができますね。

さっそくダウンロードして試さなくては！！

WindowsアプリケーションのフォームにはAcceptButtonとCancelButtonというプロパティがあります。

AcceptButton:フォームの[承諾]ボタンです。このプロパティを設定すると[Enter]が押されるたびに、ボタンがクリックされる。

CancelButton:フォームの[キャンセル]ボタンです。このプロパティを設定すると[Esc]が押されるたびに、ボタンがクリックされる。

WPFにおいてWindowsフォームに対応するものはWindowですが、AcceptButtonプロパティとCancelButtonを備えていません。

Windowsフォームのように[承諾]ボタンと[キャンセル]ボタンを実現するには、ButtonコントロールのIsDefaultやIsCancelプロパティを使用します。

IsDefaultプロパティ：プロパティウィンドウでこの項目にチェックを付けるかコードでtrueをセットすると、[Enter]キーが押されるたびにクリックされるようになります。

IsCancelプロパティ：プロパティウィンドウでこの項目にチェックを付けるかコードでtrueをセットすると、[Esc]キーが押されるたびにクリックされるようになります。

このプロパティは排他制御がされていないため、1つのボタンで[承諾]も[キャンセル]も行えるボタンを作成できてしまいます。またWindowsアプリケーションとは異なり、[承諾]と[キャンセル]を意味するプロパティがボタン自身が持つことにより、複数のボタンに[承諾]や[キャンセル]を割り当てることが出来てしまいます。

下記のようにボタンを2つ、テキストボックスを1つ配置して挙動を確かめてみます。

実験方法
フォーカスをテキストボックスに置いた状態で、[Enter]または[Esc]を押す。
（これはフォーカスがButton1 or Button2にある状態で[Enter]や[Esc]を押すのを防ぐためです）

1)Button1のIsDefaultとIsCancelにTrueをセット。Button2はIsDefault,IsCancelともにFalseをセット。
  [Enter]を押しても[Esc]を押しても、Button1のクリックイベントが発生。

2)Button1およびButton2の両方のIsDefaultにTrueをセット
[Enter]を押すとButton1にフォーカスが当たるだけで、クリックイベントは発生しなかった。

3)Button1およびButton2の両方のIsCancelにTrueをセット
[Esc]を押すとButton1にフォーカスが当たるだけで、クリックイベントは発生しなかった。

4)Button1のIsDefaultにTrue,IsCancelにFalse、Button2のIsDefaultにFalse,IsCancelにTrueをセット
[Enter]を押すとButton1のクリックイベントが発生。
[Esc]を押すとButton2のクリックイベントが発生。

まとめ
上記実験結果から、IsDefaultおよびIsCancelは
・1つのボタンに同時にセットしてはいけない
・複数のボタンに同一プロパティを設定してはいけないし
ということになります。

IsDefaultおよびIsCancelは組み合わせによっては正常に動作しないこともあるので注意が必要です。
なぜ、Windowsフォームのようにしなかったのか疑問ですね

WPFのButtonコントロールはClickModeプロパティを使用して、Clickイベントの発生タイミングを変更することが可能です。

ClickModeで指定可能な値はRelease, Press, Hoverがあります。規定値はReleaseです。

それぞれの動作は下記の通りです。

Release
ボタンを押して離したときにClickイベントが発生します。
Press
ボタンを押すとすぐにClickイベントが発生します。
Hover
マウスをコントロールの上に置いたときに Click イベントが発生します。

下図のようにボタンを3つ配置して、それぞれのClickModeを割り当てて実験してみました。

ClickMode設定後のXAMLは下記の通りです。

<Button Height="23" HorizontalAlignment="Left" 
        Margin="12,12,0,0" Name="Button1" 
        VerticalAlignment="Top" Width="75" ClickMode="Release">Button1</Button>
<Button Height="23" HorizontalAlignment="Left" 
        Margin="12,41,0,0" Name="Button2" 
        VerticalAlignment="Top" Width="75" ClickMode="Press">Button2</Button>
<Button Height="23" HorizontalAlignment="Left" 
        Margin="13,70,0,0" Name="Button3" 
        VerticalAlignment="Top" Width="75" ClickMode="Hover">Button3</Button>

VB.NETのソースコードは下記の通り

Partial Public Class Window1
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
        MessageBox.Show("ClickMode:" + Button1.ClickMode.ToString())
    End Sub

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click
        MessageBox.Show("ClickMode:" + Button2.ClickMode.ToString())
    End Sub

    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button3.Click
        MessageBox.Show("ClickMode:" + Button3.ClickMode.ToString())
    End Sub

End Class

上記を実行すると、ボタンクリック時にクリックされたボタンのClickModeをメッセージボックスに表示します。

それぞれのイベントが発生するタイミングを是非体感してみてください。

ちなみに、従来のWindowsアプリケーションではクリックの動作はReleaseが該当します。

PressやHoverは慣れないと違和感を覚えますね。

Windowsアプリケーションでは、文字列の表示は各コントロールが備えているTextプロパティを使用するのがほとんどです。

たとえば

Formのタイトル、Buttonコントロールの表面に表示する文字列、Labelに表示する文字列など。

しかしWPFアプリケーションでは、コントロール毎に文字列を表示するプロパティ名称が異なります。 

必ずしもTextプロパティというわけではなく、Title,Content,Text, Headerといったプロパティが使用されます。

ということで、覚え書きとして下記に示しておきます。（すべてのコントロールについて書いたものではありません）