UWPアプリケーションでのSVGサポートとCompactOverlayモード







Creators Updateが開発者にもたらしたシンプルだが興味深い革新をいくつか示したいと思います。



現時点では、Creators Update SDKをダウンロードしてインストールするには、Windowsインサイダーである必要があります。 現在、ビルドSDK番号15063を入手できます。WindowsInsiderサイトの開発者ページにあります



更新された10とCreators Update SDKに加えて、Visual Studio 2017も必要になります。



SVGサポート



ビットマップのように、SVGファイルをページに埋め込むことができるようになりました。

Windowsアイコンの実装例:



<Image Source="ms-appx:///winsign.svg" Width="50" Height="50"></Image>
      
      





試すために、テキストエディタでSVG拡張子と次の内容のファイルを自分で作成できます。



 <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Win_1" x="0px" y="0px" viewBox="0 0 299.35 299.35" style="enable-background:new 0 0 299.35 299.35;" xml:space="preserve" width="512px" height="512px"> <g> <path d="M125.707,28.43c-1.176-0.949-2.715-1.317-4.193-0.999L38.62,45.247c-2.304,0.495-3.949,2.532-3.949,4.888v83.487 c0,2.761,2.238,5,5,5h82.894c2.762,0,5-2.239,5-5V32.32C127.564,30.809,126.882,29.38,125.707,28.43z" fill="#006DF0"/> <path d="M259.679,160.728h-105c-2.762,0-5,2.239-5,5v106.055c0,2.357,1.646,4.393,3.949,4.888l105,22.567 c0.349,0.075,0.7,0.112,1.051,0.112c1.133,0,2.244-0.385,3.143-1.111c1.175-0.949,1.857-2.379,1.857-3.889V165.728 C264.679,162.967,262.441,160.728,259.679,160.728z" fill="#006DF0"/> <path d="M262.822,1.111c-1.176-0.949-2.714-1.317-4.193-0.999l-105,22.567c-2.304,0.495-3.949,2.532-3.949,4.888v106.055 c0,2.761,2.238,5,5,5h105c2.762,0,5-2.239,5-5V5C264.679,3.49,263.997,2.06,262.822,1.111z" fill="#006DF0"/> <path d="M122.564,160.728H39.671c-2.762,0-5,2.239-5,5v83.487c0,2.356,1.646,4.393,3.949,4.888l82.894,17.816 c0.348,0.075,0.7,0.112,1.051,0.112c1.133,0,2.244-0.385,3.143-1.111c1.175-0.949,1.857-2.378,1.857-3.889V165.728 C127.564,162.967,125.326,160.728,122.564,160.728z" fill="#006DF0"/> </g> </svg>
      
      





ファイルはプロジェクトのルートフォルダに追加する必要があります。 SVGはベクトルグラフィックであり、品質を損なうことなくスケーリングされます。つまり、少なくとも50個、少なくとも500個のサイズを指定できます。







CompactOverlayモード



このモードは、テレビのPicture-in-Pictureと非常によく似ています。 私はあなたのことは知りませんが、私はしばしばビデオを見ますが、同時に他の仕事もしています。 Windows 8.1にはスナップモードがありました。 Windows 10の最初のバージョンでは、多くの変更が行われましたが、ウィンドウが常に残りのモードになるモードはありませんでした。 実際、CompactOverlayモードはアプリケーションの最上位モードです。 このモードでは、アプリケーションはウィンドウのサイズに制限があります。 このモードは、特に開発者/ユーザー自身がUser Voice: UWP Windows Always On Topページで要求しました。



アクションを試すために、ボタンを追加できます



 <Button x:Name="btnCompactMode" Click="btnCompactMode_Click" Margin="0,10,0,0">Compact mode</Button>
      
      





および次の処理コード:



 private async void btnCompactMode_Click(object sender, RoutedEventArgs e) { if (ApplicationView.GetForCurrentView().ViewMode == ApplicationViewMode.Default) { await ApplicationView.GetForCurrentView().TryEnterViewModeAsync(ApplicationViewMode.CompactOverlay); btnCompactMode.Content = "Default mode"; } else { await ApplicationView.GetForCurrentView().TryEnterViewModeAsync(ApplicationViewMode.Default); btnCompactMode.Content = "Compact mode"; } }
      
      





その結果、同時に独自のビジネスの一部を行い、アプリケーションを見ることができます。たとえば、USDとEUROの比率のグラフを表示できます。







ウィンドウは少し小さくしたり大きくしたりできますが、画面の床まで広げることはできません。

ViewModePreferencesを使用して、コードから特定のサイズを設定できます。



 ViewModePreferences compactOptions = ViewModePreferences.CreateDefault(ApplicationViewMode.CompactOverlay); compactOptions.CustomSize = new Windows.Foundation.Size(300, 200); bool modeSwitched = await ApplicationView.GetForCurrentView().TryEnterViewModeAsync(ApplicationViewMode.Default, compactOptions);
      
      





新しいアプリケーションウィンドウを作成し、CompactOverlayにすることができます。



 int compactViewId = 0; await CoreApplication.CreateNewView().Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { var frame = new Frame(); compactViewId = ApplicationView.GetForCurrentView().Id; frame.Navigate(typeof(CompactOverlayPage)); Window.Current.Content = frame; Window.Current.Activate(); ApplicationView.GetForCurrentView().Title = " CompactOverlay"; }); await ApplicationViewSwitcher.TryShowAsViewModeAsync(compactViewId, ApplicationViewMode.CompactOverlay);
      
      





ただし、新しいウィンドウは以前に作成できますが、通常モードでのみ可能です。



 await ApplicationViewSwitcher.TryShowAsStandaloneAsync(compactViewId);
      
      







いくつかのシンプルな機能



SVGとCompactOverlayをサポートすることに加えて、テキストを強調して消すための別のシンプルだが必要な機会がありました。 これは以前は不可能だったことが判明しました。



 <TextBlock TextDecorations="Strikethrough">bla-bla-bla</TextBlock>
      
      





今すぐアクセスキーを使用することもできます。 これらはショートカットです。ボタンへのアクセスを高速化するために使用されるキーボードショートカットです。



ウィンドウ要素にすばやくアクセスするためのキーボードショートカットの作成は非常に簡単です。 ボタンの例を考えてみましょう。 2つのボタンを作成します。 1つのキーをアクセスキーAに割り当て、2番目のキーをBに割り当てます。



 <Button AccessKey="A" Click="ButtonA_Click"> A</Button> <Button AccessKey="B" Click="ButtonB_Click"> B</Button> <TextBox Width="200" AccessKey="T" />
      
      





これで、Alt + Aを押すとButtonA_Clickイベントがトリガーされ、Bを押すとButtonB_Clickイベントがトリガーされます。 Alt + Tを押すと、フォーカスが入力フィールドに設定されます。

詳細はこちら: アクセスキー



これらは、最新の更新プログラムのリリースで登場したすべての機能ではありません。 SDKの最終リリースを楽しみにしています。



他の機能については、 Windows Developer Day-Creators Updateをお読みください。



新機能の完全なリストはこちらから入手できます: 開発者向けのWindows 10の新機能



VSに関するもう1つの興味深い記事: Visual Studio 2017 Update PreviewおよびWindows 10 Creators Update SDK



All Articles