【#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 で属性を指定するだけです。