【#UWP】 どこでも掴んで動かせるウィンドウを作る
Window.Current.SetTitleBar(draggableGrid);
↑これだけで、 指定した UI コントロール (ここでは Grid) をマウスで掴んでウィンドウを動かせるようになります。
いやぁ、 SetTitleBar は以前から知ってたんですけどね。 てっきり本来のタイトルバー領域内だけでしか有効にならないと思い込んでました (汗;
画面いっぱいの Grid に適用してやれば、↓ごらんの通り (クリックして拡大するとアニメGIF)。 合わせて、 描画領域をタイトルバーに押し出してやるのと、 Fluent Design の Acrylic Effect も使ってます。
※ クラウディア画像: © 2011 Microsoft Corporation All Rights Reserved.
ウィンドウの中をマウスでドラッグして、 ウィンドウを動かせます。 上の動画では分かりませんが、 タイトルバー扱いなので、 右クリックするとタイトルバーと同じコンテキストメニューが出ますし、 ダブルクリックするとウィンドウが最大化します。
SetTitleBar したコントロール (および、 その中に置いたコントロール) には、 触れません。 ボタンやテキストボックスなどを触れるようにするには、 SetTitleBar するコントロールとは別のビジュアルツリーに入れてやります (次のコード)。
<Grid x:Name="rootGrid">
<!-- タイトルバー扱いする Grid -->
<Grid x:Name="draggableGrid" Background="……省略……"/>
<!-- 操作可能な UI を置くための Grid -->
<Grid x:Name="contentGrid" Margin="20">
<StackPanel HorizontalAlignment="Center">
<ToggleSwitch Header="ToggleSwitch" />
<TextBox Header="TextBox" TabIndex="0" />
</StackPanel>
</Grid>
</Grid>
- コード全体: https://github.com/biac/blogcode/tree/master/DraggableWindow
- 描画領域をタイトルバーまで押し出す方法: WinRT/Metro TIPS: タイトルバーにUIコントロールを配置するには?[Windows 10 UWPアプリ開発]
※ なお、 このコードでは Windows 10 1703 (15063) でも Acrylic Effect が有効になるようにするため、 面倒なことをしています。 1709 (仮) 以降でよければ、 Acrylic Effect は XAML で属性を指定するだけです。
| 固定リンク
« 【#UWP】入門書 「UWP アプリ開発 101」 第2版 (VS2017 対応) 好評発売中です | トップページ | 【#UWP】 15063用の Acrylic Effect を、ちゃんと実装してみる »
「プログラミング」カテゴリの記事
- 【.NET / Win8.1 ストアアプリ】 HttpClient で TLS 1.1 / 1.2 に対応するには(2018.06.17)
- 【VS2017 15.7pv2】 XAML のランタイム ツールに 「ヒートマップ」 が増えた(2018.03.28)
- 【.NET Core】 プロジェクトを作ると 「project.assets.json が見つかりません」 エラー(2018.02.10)
- 【#UWP】 ビットマップの表示色を変える (Win2D.uwp 経由で Direct2D を使う)(2017.08.23)
- 【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る(2017.08.16)
「* プログラミング ( Metro スタイル )」カテゴリの記事
- 【.NET / Win8.1 ストアアプリ】 HttpClient で TLS 1.1 / 1.2 に対応するには(2018.06.17)
- 【VS2017 15.7pv2】 XAML のランタイム ツールに 「ヒートマップ」 が増えた(2018.03.28)
- 【#UWP】 ビットマップの表示色を変える (Win2D.uwp 経由で Direct2D を使う)(2017.08.23)
- 【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る(2017.08.16)
- 【#UWP】 15063用の Acrylic Effect を、ちゃんと実装してみる(2017.08.05)
この記事へのコメントは終了しました。
コメント