2012年10月8日月曜日

20121010-DropShadowWindow.zip

 

WPF で Zune のようなドロップダウンシャドーのウィンドウを作りたいときがあります。

最近の Microsoft デザイン(旧称 : Metro) っぽくしたい場合ですね。こういう時は以下の手順で Zune のようなウィンドウが簡単に作れます。

 

Window の背景色を透明にする

clip_image001

Window の AllowTransparency をオンにする

clip_image002

Grid の背景色を黒にする。

clip_image003

Grid の Margin を設定。シャドーを描画する領域サイズになります。

clip_image004

効果から DropShadowEffect を Grid に

clip_image005

DropShadowEffect でシャドーの大きさを設定

clip_image006

これで Zune のようになりますが、タイトルバーがないのでマウスでウィンドウを動かすことが出来ません。

clip_image007

次に、このコードをコードビハインドに追加。

これでマウスとタッチでウィンドウ移動できるようになります。

#region メソッド (ウィンドウ移動)

bool NowMouseDown;
Point startPoint;

private void Window_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
this.Left += e.CumulativeManipulation.Translation.X;
this.Top += e.CumulativeManipulation.Translation.Y;
}

private void Window_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.NowMouseDown = true;
this.startPoint = e.GetPosition(this);
}

private void Window_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
if (!this.NowMouseDown)
return;

var window = sender as Window;
Point pos = e.GetPosition(window);
this.Left += pos.X - this.startPoint.X;
this.Top += pos.Y - this.startPoint.Y;
}

private void Window_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.NowMouseDown = false;
}

private void Window_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
this.NowMouseDown = false;
}

#endregion

0 コメント:

コメントを投稿