2013年05月09日

WPFサンプル:鏡面反射

   このエントリーをはてなブックマークに追加 Clip to Evernote
これまでのサンプルプログラムで示してきた VisualBrush OpacityMask BlurEffect を使うことで、鏡面反射の効果を出すことができます。

SpecularRef

以下、そのXAMLです。C#でのコード追加はありません。
VisualBrush の Visual プロパティで、反射されるオブジェクトをバインドしています。

  

Posted by gushwell at 23:30Comments(0)TrackBack(0)

2013年05月06日

WPFサンプル:PowerPointで作成した図形をWPFで表示する

   このエントリーをはてなブックマークに追加 Clip to Evernote
PowerPointで作成したドキュメントはXPS形式にエクスポートすることができます。
僕はこのXPSの形式については詳しくはありませんが、PathオブジェクトはXAMLとの互換性があるようです。
そのため、このPathオブジェクトのタグをXAMLに貼付ければ、以下のような図形を表示することができます。

Path2

以下簡単にXAMLに組み込むまでの手順を簡単に説明します。

1. PowerPointで図形を作成する。
2. エクスポート機能を使い「PDF/XPSドキュメントの作成」を起動
3. ファイル形式を XPS にして、任意のフォルダに保存
4. 保存したファイルの拡張子を zip に変更し、ファイルを展開
5. 展開してできたフォルダの Documents\1\Pages を開く
6. 図形があるページのファイル(拡張子 .fpage)をエディタで開く
  この中身は XML 形式です。
7. 該当の図形の path 要素をコピーし、XAMLに張り付ける。
  画像ファイルを利用している場合は、画像ファイルもソリューションに加えて、
  ファイルパスを適切に変更してください。

この手順で作成した XAMLを以下に示します。
Path 要素は、.fpageファイルからコピペしただけです。

  
Posted by gushwell at 19:00Comments(0)TrackBack(0)

2013年04月25日

WPFサンプル:OpacityMaskを使用しイメージをトリミングする

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回示したOpacityMaskのもう一つのサンプルです。
イメージを円形にくりぬく際に、ぼかし効果を付加しています。
どのようなBrushを使用しているかがわかるように、ウィンドウの下には そのマスクするBrushを表示しています。

OpcaityMaskTrim



  
Posted by gushwell at 22:30Comments(0)TrackBack(0)

2013年04月23日

WPFサンプル:OpacityMaskで不透明マスク処理をする

   このエントリーをはてなブックマークに追加 Clip to Evernote
この例では、LinearGradientBrushを使って、マスク処理をしています。
そのスクリーンショットをご覧ください。

OpcaityMask1
OpcaityMask2
OpcaityMask3

不透明マスクの働きが理解できるように、不透明マスクそのものもウィンドウ下に表示しています。
黒い四角が不透明マスクです。黒いところ(黒である必要はないですが)が表示され、白いところ(実際はTransparent)が不透明になります。
画像処理に疎い僕は、感覚的には黒いところが不透明になったほうが直感的かなと思うのですが、 名前がOpacity(不透明)なので反対になるのでしょうね。
Sliderの値で、LinearGradientBrushを変化させています。

以下、XAMLです。


  
Posted by gushwell at 22:00Comments(0)TrackBack(0)

2013年04月21日

WPFサンプル:Opacityプロパティで背景が透けてみえるようにする

   このエントリーをはてなブックマークに追加 Clip to Evernote
Opacityプロパティのサンプルです。
Opacityは、不透明度(日本語として違和感があるけど)を表します。
既に、ImageBrushやDropShadowEffectのサンプルでもOpacityプロパティを使っていますが、 今回は、UIElementのOpacityプロパティのサンプルとなります。

Opacity1
Opacity2
Opacity3

ここでは、TextBlock, Button, RectangleのOpacityの値を変化させています。
Opacityの既定値は、1.0で、完全に不透明となっています。
0に近づくにつれ、透明になっていきます。

以下、XAMLです。


  
Posted by gushwell at 22:30Comments(0)TrackBack(0)

2013年04月18日

WPFサンプル:Clipプロパティでイメージの一部をトリミングする

   このエントリーをはてなブックマークに追加 Clip to Evernote
ImageオブジェクトのClipプロパティを使用すると、イメージの一部をトリミングして切り出すことができます。
Clip プロパティに Geometryオブジェクトを設定することで、さまざまなジオメ トリック形状 (楕円パス、線分、複雑なパスなど) を使ってイメージをトリミン グすることができます。
ここでは、楕円(EllipseGeometry)と星型(PathGeometry)でイメージをトリミングしてみました。

ClippingSample

  
Posted by gushwell at 23:00Comments(0)TrackBack(0)

2013年04月16日

WPFサンプル:DropShadowEffectを使い影付き効果とにじみ効果を出す

   このエントリーをはてなブックマークに追加 Clip to Evernote
DropShadowEffectを使うと、コントロールに影をつけたり、にじみ効果を出すことができます。
DropShadowEffectクラスの主要プロパティは以下の通り。
  1. ShadowDepth : オブジェクトと、オブジェクトの影との間の距離を設定します。
  2. Direction : 影が付く角度を設定します
  3. Color : 影の色を設定します。
  4. Opacity : 影の不透明度を設定します。 有効な範囲は、0.0 〜 1.0 です。0.0 は影が完全に透明であることを示し、1.0 は影が完全に不透明であることを示します。例えば、値 0.5 は影の不透明度が 50% であることを示します。

サンプルプログラムでは、この3つのプロパティをSliderの値にバインドさせています。
なお、DropShadowEffectのShadowDepthプロパティに0 を設定することで、にじみ効果を出すことができます。
サンプルプログラムのスクリーンショットです。

DropShadow1

DropShadow2

XAMLを示します。
  
Posted by gushwell at 23:00Comments(0)TrackBack(0)

2013年04月14日

WPFサンプル:BlurEffectを使いぼかし効果を得る

   このエントリーをはてなブックマークに追加 Clip to Evernote
BlurEffectを使うと、ぼかし効果を得ることができます。

BlurEffect1   BlurEffect2

この例では、TextBlock, Image, Buttonにぼかし効果を付加しています。
UIElementには、Effectプロパティが用意されており、このEffectプロパティに各種ビットマーク効果を表すオブジェクトを設定することで、ぼかしなどの効果を得ることができます。
要素間のバインド機能を使い、Sliderを操作すると、そのValueの値に応じ、BlurEffectのRadiusプロパティが変化させています。
Radiusプロパティには、BlurEffect によって適用されるぼかしの大きさを設定します。
値が 0 の場合、ぼかし効果はありません。値が大きいほど、ぼかし効果が高くなります。
既定値は 5 です。


  
Posted by gushwell at 23:00Comments(0)TrackBack(0)