モンクのブログ -2ページ目

モンクのブログ

WPFについて、デザイナーの視点から書いていきたいなと。
サンプルなんかも上げたりして。でもモンクだらけになりそうな・・・。

WPFの初期セミナーを受けた時、私はものすごくアバウトな質問をしてしまいました。「FLASHと同等の表現が可能か?」という質問で、回答は「できる」だったのですが、これが私の認識をいろいろと迷わす事になりました。

FLASHはactionscriptという簡単なスクリプトを持っており、動的にコンテンツの変化に応じた動きを設定するようなアニメーションでもデザイナーが簡単に設定できたのです。

前述の質問を投げたとき、私はWPFのデザイナーの範囲はXAMLまで、という解釈でした。ということは、つまりXAMLだけでFLASHのようなリッチな表現が可能と思い込んでしまったのです。

あの質問が悪かったと後になって悔やんだのですが、とにかく結論をいうと、

XAMLだけでは動的なアニメーションは設定できません。

理由:XAMLのアニメーションは必ず値の出発点と終了点を持たせる必要があるから。

ということです。いくらバインドさせても、バインドされた側が必ず値を持っている必要がある。

コンテンツに応じて高さが変わるようなコントロールの高さをアニメーションするような事はできません。
もちろんプログラムに記述すれば済む話ですけどね。そうなるとデザイナーとプログラマーの作業分離って何?ってなります。

まあ、まだ調査が必要でしょうけど、、

iPhoneからの投稿
WPFのビットマップエフェクトはソフトウェアレンダリングになるそうです。

実験してみた結果、小さいもの(例えばボタンとか)にエフェクトをかけるのはまだ問題ないんですが、
大きなキャンバスやパネル全体にエフェクトをかけるととにかく動作が遅い!
根本的に問題解決される見込みもないようなので、表現を狭めない為に代替の方法を採用しています。

設定方法は簡単。BorderやRectangleをとにかく重ねる。
んで、影の濃い方から順番に不透明度を落としていきます。
すると、何となくシャドウが落ちているように見える、というわけ。

例)
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Title="TEST XAML"
Width="140"
Height="160"
>
<Grid Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,10,10">
<!--シャドウ部分-->
<Grid>
<Border BorderBrush="#FF000000" Opacity="0.6" Margin="0,0,0,-1" BorderThickness="1" CornerRadius="1"/>
<Border BorderBrush="#FF000000" Opacity="0.4" Margin="-1,0,-1,-2" BorderThickness="1" CornerRadius="2"/>
<Border BorderBrush="#FF000000" Opacity="0.2" Margin="-2,-1,-2,-3" BorderThickness="1" CornerRadius="3"/>
<Border BorderBrush="#FF000000" Opacity="0.1" Margin="-3,-2,-3,-4" BorderThickness="1" CornerRadius="4"/>
</Grid>

<Border BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FF4E62B1" Offset="0.0" />
<GradientStop Color="#FF4E62B1" Offset="1.0" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFEDFDFF" Offset="0.0" />
<GradientStop Color="#FFBAE2FF" Offset="1.0" />
</LinearGradientBrush>
</Border.BorderBrush>

<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFB1E3FA" Offset="0.0" />
<GradientStop Color="#FF006BE5" Offset="0.5" />
<GradientStop Color="#FF0045C5" Offset="0.5" />
<GradientStop Color="#FF19EEFF" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
</Border>
</Grid>
</Window>

モンクのブログ



もちろん、一方方向にだけシャドウを落とす場合には、バックグラウンドをグラデーションにしたBorderやRectangleの不透明度を下げると同じようにシャドウに見えます。

いずれにしろ、プログラマーには嫌がられる方法です。何故ならそれだけでメモリを食うんで。
それでもビットマップエフェクトをかけるよりはまし。

明日はサンプル的なものを作ってみよう!


iPhoneからの投稿
WPFを使用したアプリケーションをつくるにあたり、当然静止画で作り込みます。

その時、XP~7までのウインドウフレームがデザインに
大きく影響している事を感じるのは私だけではないはず。
そして、このウインドウフレームを独自ウインドウにすれば
アプリケーションとしてのデザインの独自性を出す事ができると
感じるのも私だけではないはずです。得意げ


1,独自ウインドウの作成方法

さあそこで、方法としては以下のプロパティをWindowコントロールに設定する事になります。

WindowStyle="None"
AllowsTransparency="True"
Background="Transparent"

そして、この上に独自ウインドウスタイルを設定し、機能を持たせれば完成?
と思いきや・・・。


2,問題発生!

XPの動作が異常に重い・・・。何故!むっ


3,原因?

まあ、調べると原因としては、

「レイアード ウィンドウを使用すると、WPF アプリケーションで、コンテンツを四角形以外のウィンドウの画面に描画できます。Windows Vista では、レイアード ウィンドウはハードウェアによって加速されます。Windows XP などのその他のシステムでは、レイアード ウィンドウはハードウェアによる加速を使用せずにソフトウェアで描画されます。」

ということらしいんですね。
(レイアード ウィンドウとは独自ウインドウとイコールと解釈しています。)

※1 ソフトウェアレンダリングとは、

「マシンのグラフィックス カードに依存するハードウェア レンダリングとは対照的に、ソフトウェア レンダリングでは、CPU 上で計算が行われます。また、一般的に、ソフトウェア レンダリングの方が、コンピュータのグラフィックス カードの制限を受けない分、柔軟性があります。しかし、ソフトウェア レンダリングの方が処理に時間がかかります。」

※2 ハードウェアレンダリングとは

「ハードウェア レンダリングは、コンピュータのビデオ カードとそのドライバを使って、ディスク上でイメージをレンダーします。一般的に、ハードウェア レンダリングの方がソフトウェア レンダリングよりも高速ですが、生成するイメージの精度は劣ります。」


単純に、XPだとソフトウェアレンダリングになってしまうから処理に時間がかかる、と。
と、いうことは企業ユースのソフトウェアではXPを外す訳にはいかないので、
WPFだけで独自ウインドウを実装するのは不可、という結論になります。

んなアホな。プンプン


でも、itunesとかADOBE系のソフトウェアはXPでも独自ウインドウになってるのになぁ。WPFでないのは明らかでしょう。
もうちょっと調査が必要です。