WPF で外枠にはみ出さないようにする

WPF で、Border や Grid などの枠の中に、その領域をはみ出すようなコントロールを配置して、
それを Transform などで移動させるとします。
すると、そのコントロールの一部が切り取られてしまったり、外枠にはみ出てしまうなど、期待通りの動作にならないことがあります。
以下では、この現象をどうすれば回避できるかを試していきます。
(追記: Canvas で ClipToBounds="True" とすればよい、とコメントを頂いたため、後半に追記しました。)

Blend for Visual Studio で WPF アプリケーション プロジェクトを作成して、
Border の中に Rectangle を配置して、Rectangle を期待通りに動かせるかどうかを調べます。

Window の領域を 4 つに分けて、以下の方法を試してみます。

  • 左上: Border の中に Rectangle を配置するだけ
  • 右上: Border と Rectangle の間に Canvas を配置する
  • 左下: Border と Rectangle の間に ScrollViewer と Canvas を配置する
  • 右下: Border と Rectangle の間に ScrollContentPresenter と Canvas を配置する

ScrollViewer を使うことで、外側にはみ出さないようにします。
スクロールバーを消すために、VerticalScrollBarVisibility プロパティを Disabled に設定します。
また、ScrollContentPresenter は、ScrollViewer の中で使われているコントロールです。

すると、Blend for Visual Studio のデザイナーでは次のように表示されます。
この時点で、右上の方法では外枠の Border の上に描画されてしまうことがわかります。

FrameLayoutWpf

また、この 4 つの Rectangle に対して、TranslateZoomRotateBehavior を設定します。
(Blend for Visual Studio のアセットからドラッグ アンド ドロップします。)
これで、実行時にタッチ操作などでコントロールを動かせるようになります。

全体の XAML は次のようになります。

このアプリケーションを実際に動かしてみます。

FrameLayoutWpf

  • 左上: 初期配置の領域以外の部分は切り取られてしまいます。
  • 右上: Rectangle が枠外にはみ出します。
  • 左下: 期待通りです。
  • 右下: 期待通りの動作ですが、ScrollContentPresenter.Content が既定プロパティではないため、
    上の階層がデザインツールに表示されません。

 

ここで、よねやんさんから、Canvas の ClipToBounds プロパティの値を True にすればよい、とコメントを頂きました。

右上の Canvas を変更して実行してみます。

FrameLayoutWpf

期待通りです。
というわけで、ScrollViewer などは不要になりました。
Canvas を配置して、ClipToBounds="True" を設定するだけです。

 

作成したサンプル
FrameLayoutWpf (GitHub)

バージョン情報
.NET Framework 4.5

参照
UIElement.ClipToBounds プロパティ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。