【#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 アプリ開発 101 (one oh one）」

Windows Forms 開発者のための
C# / XAML による UWP アプリ開発入門
第2版 (Visual Studio 2017 対応)
(A4換算で約200ページ)

この本は、 2～3日間の研修を想定して作成したテキストです。 Windows Forms 開発者にとっては馴染みの薄いデータバインディングやデータテンプレートなどに重点を置いて解説しています。
※ Xamarin ではなく、MS 純正の UWP アプリ開発方式の方です。

2017年 7月に第2版となりました。 Visual Studio 2017 対応版です。 無償の Visual Studio 2017 Community を使って演習していきます。

入手はこちらからどうぞ↓

• Kindle 版
   
• UWP アプリ版

どちらも定価 700円ですが、
・ Kindle版は「無料サンプルを送信」で冒頭1割ほどが読めます
・ UWPアプリ版は冒頭3分の1ほどが無償で読めます

UWP アプリ版は、Windows 10 Mobile でも読めます。
HoloLens や Xbox One でも OK ♪

続きを読む "【#UWP】入門書 「UWP アプリ開発 101」 第2版 (VS2017 対応) 好評発売中です"