XAMLab(ザムラボ)
ザムラボ - XAML研究室、WPF、Silverlight関連など。

目次

Blog 利用状況
  • 投稿数 - 202
  • 記事 - 1
  • コメント - 1230
  • トラックバック - 43
ニュース

書庫

日記カテゴリ

ギャラリ

なか-chan関連サイト

他の方へのリンク

 

WPFでは、いろいろな形のウィンドウが簡単に作れます。
今回は、ショッキングピンクのハート型ウィンドウを作ってみます。

1)まず、Expression Blendを起動すると、ようこそ画面が表示されますので、
  [プロジェクト]タブ-[新しいプロジェクト]を選択します。
  すると、新しい画面が開きます。

2)初期状態でウィンドウのサイズが、600x480になっており大きすぎるので、
  左側[オブジェクトとタイムライン]の[ウィンドウ]を選択し、
  右側、[プロパティ]タブを開き、[レイアウト]の[Width]を
  640から480に変更します。すると、480x480のウィンドウになります。

3)左側の[四角形]ツールを押し続けると、[楕円]が出てきますので、
  これを選択します。これで楕円をかけるようになります。

4)中央の[グリッドを表示]と[グリッド線への位置合わせ]のボタンを
  どちらも表示する設定にしておきます。

5)画面の中央よりやや上あたりに、適当な大きさで、楕円を描きます。

6)[オブジェクト]メニュー-[パス]-[パスに変換]を選択すると、
  選択されている楕円が、パスに変換されます。

7)左上から2番目、[直接選択]ツールを選択し、パスの上部分と下部分を
  ともに、図のように下へずらします。

8)[直接選択]ツールで、[Alt]キーを押しながら、ハンドル(つかんで
  パス形状を操作するためのもの)を動かして、ハート形を作っていきます。
  [Alt]キーを押しながら、ハンドルを操作すると、角を作れます。
  図のような配置、大きさにしてください。

9)レイアウトの、[Margin]右の[詳細プロパティ オプション]-[カスタム式]を
  選択し、「20」と入力します。これにより、上下左右のマージンがすべて
  20(ドット)に設定されます。

10)左側[オブジェクトとタイムライン]のWindowを選択し、右側、
  [ブラシ]-[Background]をNo brushに設定します。

11)[外観]-[AllowsTransparency]のチェックを入れます。
  ウィンドウの背景が透明になり、タイトルバーも消えます。

12)あとは、ハートのストローク(縁取り)を太くしたり、透明度の
  設定([RGBA]の[A]を100%から70%にしたり)をしたり、ビットマップ
  効果で、[グロー]をかけたりして、お好みに調整します。

13)[F5]キーを押すことにより、GUIのテストを行えます。

14)まだ移動はできません。終了するには、[Alt] + [F4]キーを
  押します。

次回は、ウィンドウを移動できるようにしたいと思います。
(XAMLだけでは無理かな??→上のほうにマウスカーソルが
来たら、transparentをON/OFFすれば、タイトルバーがでてくるかな?)

 

投稿日時 : 2007年6月29日 1:19
コメント
タイトル
名前
Url
コメント