2010/04/20 - WPFならデザインも楽にできる

WPFでボタンをデザイン。C++MFCだとオーナードローでこんなボタンを作ったらそれだけで数日はかかりそうだが，C#+WPF+Expression Blendなら慣れれば1時間くらいでできそう。今までめんどくさくてUIに凝ることもなかったが，これだけの開発環境を用意されるとUI作るのが楽しくなってくる。

2010042001

ちなみに作り方をメモっておく。Expression Blendで普通のボタンを作ってテンプレートの編集。ボタンの中身をごっそり削除して，Ellipseを配置してグラデーションをいい感じに設定。中身にcontaintPresenterをはりつけておく。ここまででデザインは完了。これだとボタンを押しても見た目が変わらないので，トリガータブの「+プロパティ」でIsPressedとかIsMouseOverとか必要なものを追加して，デザインを適当にいじるとイベントが起きたときに差分が適用されるようになる。ここまででスタイル作成完了。Mainのウィンドウに戻って今作ったスタイルをボタンのStyleとして設定。最後にボタンの中身にExpression Designとかで作った絵を貼り付けて完成。

2010042002

ついでにツールチップも付けてみた。色合いを変えて半透明にするためにStyleを変更してみたが，以下のようなコードを書くと，Expression Blendで編集する際に「’ToolTip’は，論理親またはビジュアル親を持つことができません。」というエラーになる。Expression Blendで編集できないだけでVisual Studio 2010ではビルドできて普通に動くのだが，これでいいのだろうか。

2010042003

<ResourceDictionary>
    <Style x:Key="Tip" TargetType="{x:Type ToolTip}">
        <Setter Property="Background" Value="#202020"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Opacity" Value="0.8"/>
    </Style>
</ResourceDictionary>
----
<Window>
    <Button Style="{DynamicResource PanelButton}">
        <Button.ToolTip><ToolTip Style="{DynamicResource Tip}">次のページ</ToolTip></Button.ToolTip>
            <Canvas Width="16" Height="16" Background="{DynamicResource NextButton}"/"
    </Button>
</Window>

プログラミング  ,
RSS  レスポンス

コメントする