2013年03月27日

WPFサンプル:RadialGradientBrushを使い放射状グラデーションで領域を塗りつぶす

   このエントリーをはてなブックマークに追加 Clip to Evernote
放射状グラデーション(下の図参照)で領域を塗りつぶすには、RadialGradientBrushを指定します。

RadialGradientBrush1 RadialGradientBrush2 RadialGradientBrush3

GradationOriginでグラデーションの開始位置を指定します。放射グラデーションの円の中心は、
Centerプロパティで指定しますが、この例では、規定値 Point(0.5, 0.5) を使用しています。
つまり、この例では、Rectangleの中心ということになります。
放射状グラデーションの外側の円の横半径は、RadiusX とRadiusYプロパティで指定します。
既定値は 0.5 であり、この例では省略し規定値を使っています。
グラデーションの色の変化は、GradientStopを使います。GradientStopは、色とその相対位置を指定
しています。この例では、White -> Olive -> Blackへとグラデーションします。


この例では、Sliderを動かすと、GradientOriginの位置を変化させることができます。
XAMLで簡単に実現する方法がわからなかったので、この部分は、C#で記述しています。
2つのSliderの値から、Pointオブジェクトを作成し、それをGradientOrigin のセットすることで実現しています。


  

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

2013年03月26日

WPFサンプル:LinearGradientBrushで領域を線形グラデーションで塗りつぶす

   このエントリーをはてなブックマークに追加 Clip to Evernote
LinearGradientBrushクラスを使用することで、領域を線形グラデーションで塗りつぶすことができます。
GradientStop で指定した色と位置(開始点を0 終了点を1とした相対位置)から、その間の色を自動で補正
することで、グラデーション効果を出します。

LinearGradientBrush1

LinearGradientBrush2

グラデーションの開始位置と終了位置は、LinearGradientBrushのStartPointとEndPointプロパティで指定
します。左上が、(0,0) 右下が (1,1) となります。
この例では、Sliderの値と、中間の色である RoyalBlue のOffSetをバインドしています。


もうひとつの例をお見せします。
GradientStopは、いくつでも指定できますので、7色を配置し、虹色のグラデーションを作ることも
可能です。TextBlockのForegroundにグラデーション効果を適用している例です。

LinearGradientBrush3

このXAMLを示します。


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

2013年03月24日

WPFサンプル:SolidColorBrushを使い領域を均一のColor(純色)で塗りつぶす

   このエントリーをはてなブックマークに追加 Clip to Evernote
SolidColorBrushを使うことで、領域を均一の Color (純色) で塗りつぶすことができます。

これまでもこのブログでは、既に何度も例をお見せしていますが、Foreground="red" といった
記述は、文字列からSolidColorBrush型への型変換が働いており、SolidColorBrush型であることを
明示することなく、利用することができるようになっています。

今回は、XAMLでの3つの記述方法を示します。


3つは、記述方法は異なりますが、以下のように全く同じ見た目になります。

SolidColorBrush1


C#でSolidColorBrushを扱うコードもコードビハインド側で記述しています。
コメントにも書いてある通り、純色を作成する際はアルファ値も指定します。
このアルファ値で、透明度を指定できます。
255は完全な不透明 0 は完全な透明を意味します。


マウスをBorder内に移動したときのスクリーンショットも掲載しておきます。

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

2013年03月21日

WPFサンプル:Pathで一連の曲線(円弧やベジェ曲線)を描く

   このエントリーをはてなブックマークに追加 Clip to Evernote
Pathクラスを使うと一連の直線と曲線を描くことができます。

ここでは、3つのサンプルを載せていますが、一番上の青い半円と一番下の図計について簡単に説明します。

WPFPathSample


Dataプロパティは、描画される図形を指定する Geometry を設定するのですが、XAMLではパスマークアップ
構文を使います。
パスマークアップ構文の詳細はこちらを見ていただくとして、この半円の例だと、
Mが開始位置を示すコマンドを示し、続く 50,110がその位置を示します。
Aは楕円の円弧を描くコマンドで、それにそのパラメータが続きます。
順番に、size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint です。
isLargeArcFlagは、円弧の角度が180を超える場合は、1を指定します。それ以外では 0 を指定します。

sweepDirectionFlag は円弧を描くときに時計回りか反時計回りかを指定します。
1の場合は時計回り、0の場合は反時計回りとなります。

画面下の図形は、3次ベジエ曲線です。


Mが開始位置を示すコマンドを示し、続く 30,25がその位置を示します。
Cコマンドは、3 次ベジエ曲線コマンドを表します。
パラメータは順に controlPoint1 controlPoint2 endPointを示します。
controlPoint1は、曲線の開始接線を決定する曲線の 1 つ目の制御点。
controlPoint2は、曲線の終了接線を決定する曲線の 2 つ目の制御点。
endPointは、曲線が描画される終了点です。


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

2013年03月20日

WPFサンプル:TransformGroupを使って、複数ブジェクト変形を合成する

   このエントリーをはてなブックマークに追加 Clip to Evernote
TransformGroupを使うと、複数のオブジェクトの変形(Transform)を合成することができます。
この複合変換では、個々の変換が行われる順序が重要となります。
回転やスケーリングは、原点を基準に行われますので、「移動したら回転」と「回転してから移動」では、
結果が異なります。
XAMLでは記述した順番に変形が行われます。

TransformGroup

TransformGroup2

TransformGroup3

ここでは以下の4つのオブジェクトで合成しています。
ScaleTransform 拡大縮小
RotateTransform 回転
SkewTransform 傾斜
TranslateTransform 移動

このサンプルアプリのXAMLを以下に示します。


このXAMLでは、TransformGroup に 4つの Transform オブジェクトを指定していますが、各Transform
オブジェクトのプロパティには何も設定していないので、実際には合成が行われていない状態と同じです。

C#のプログラムで、CheckBoxのチェック状態に応じて、各Transform オブジェクトのプロパティの値を
設定することで、効果を出しています。

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

2013年03月18日

WPFサンプル:SkewTransform を使用し、オブジェクトを傾斜させる

   このエントリーをはてなブックマークに追加 Clip to Evernote
SkewTransform クラスを使用すると、オブジェクトを傾斜させることができます。

SkewTransformの、AngleX, AngleYプロパティで、X軸と、Y 軸の傾きを指定します。

SkewTransform1

SkewTransform2

この例では、AngleX, AngleYにSliderの値をバインドさせることでTextBlockとButtonを傾斜させています。

TextBloxkでは、RenderTransformOrigin ="0.5,0.5" とすることで、オブジェクトの中心を軸に
オブジェクトを傾斜させています。

以下、上記実行例のXAMLです。


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

2013年03月14日

WPFサンプル:ScaleTransformを使用し、オブジェクトを伸縮させる

   このエントリーをはてなブックマークに追加 Clip to Evernote
ScaleTransformを使用すると、オブジェクトを左右または上下に伸縮できます。

ここでは、TextBlockとButtonを伸縮させるサンプルを書いてみました。

ScaleTransform1

ScaleTransform2

上記実行例でお分かりの通り、マイナス値を指定することで、オブジェクトを反転させることができます。

デフォルトでは、回転する際は、オブジェクトの左上隅を中心として回転させます。
オブジェクトの中心で反転させたい場合には、RenderTransformOriginプロパティを 0.5,0.5 に設定します。
この例では、TextBlockでは、RenderTransformOriginプロパティを 0.5,0.5 に設定していますので、
テキストの中心が回転軸となっています。

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

2013年03月12日

WPFサンプル:RotateTransformを使用し、オブジェクトを回転させる

   このエントリーをはてなブックマークに追加 Clip to Evernote
RenderTransform プロパティに RotateTransformクラスのオブジェクトを設定することで、オブジェクト
を回転させることができます。
この例では、RotateTransformのAngleプロパティとSliderの値をバインドさせています。
スライダーを動かすと、TextBlockが回転します。

RotateTransform1

RotateTransform2

RenderTransform プロパティは、UIElementクラスのプロパティですので、その派生クラスならば、
TextBlockに限らずどんなクラスでも回転させることができます。



C#のコードでオブジェクトを回転させるコードも載せておきます。


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