Delphi
Windows10
FMX
Delphi10Seattle
DelphiDay 12

Delphi 10 Seattle で Windows10スタイルのFMXアプリを作る

More than 1 year has passed since last update.

DelphiXE8ではすでにEDNに以下の記事Windows 10アプリをRAD Studio XE8と新しいFireMonkeyスタイルを使って構築する があるのですが,この記事を参考にDelphi 10 Seattleでやってみたいと思います。

1) フォームデザイナの上部にあるマスタビューを選択して、TStyleBookコンポーネントをフォームに追加します。
2) マスタビュー上で、ツールバーの スタイル ドロップダウンメニューからWindowsをマスタスタイルとして選択します。
3) StyleBookコンポーネントをダブルクリックで開いてWindows 10スタイルを読み込みます。カスタムスタイルを使うには、マスタビューも含めて各ビューでスタイルが必要になります。
4) フォーム上のStyleBookプロパティをStyleBook1に設定します。
5) 作成したWindowsのビューに切り替え、それぞれのビューでTStyleBookコンポーネントをダブルクリックし、StyleBookにカスタムWindows 10スタイルを読み込んで,「適用して閉じる」ボタンをクリックしてフォームデザイナに戻ります。
6) すると編集フォームにもスタイルが適用されていることがわかります。
7) 単一アプリの複数のフォームに同一のフォームを適用したいときには,メインフォームにTStyleBookを張り,スタイルを適用して,各ビューのTStyleBook.UseStyleManager を Trueに設定するとできます。TStyleBookはメインフォームだけあればよいようです。ただし,編集時に最初のフォーム以外はスタイルが適用されませんので,スペースのない場合などには苦労するでしょう。できれば改善してほしい点です。

  • XE8でWindows10スタイルにしたアプリをDelphi 10 Seattleで編集する場合には,タブなどデザインが全く違うものや,余白のサイズを大きくとる必要があるものがあるので,以前のスタイルを捨て,ビューも一から作り直した方が速いように思いました。

  • フォームの編集時は,どのビューでフォームを編集しているかを意識する必要があります。実行時に表示されるビューでないビューを編集しても実行時に反映されません。

  • Embarcaderoから提供されている10種類のスタイルが提供されています。
    ID: 30354, FireMonkey Premium Styles Pack for RAD Studio 10 Seattleをダウンロードして,使うのも面白いかもしれません。

ところで,XE8のWindows10スタイルのフォームをDelphi 10 Seattleに更新した際に,不具合にぶつかってしまいました。それはTTabControlをFormに配置し,TTabItem上にコントロールを配置してAnchorsにakRightやakBottomを設定すると,画面からはみ出すという問題です。
これはTTabItemにTLayoutを配置してAlignにalClientを設定し,その配下にコントロールを移動することで回避できます。この問題はDelphi 10 Seattle Update 1でも修正されていません。不具合修正を中心に更新をするというお話をデベロッパーキャンプで聞きました。この問題は既に,RSP-11721RSP-11895にレポートされていて,現在はRSP-11895に統合されており,優先度は中となっています。近いうちには解決されることを期待しています。

※不具合のレポート確認についてHosokawaさんにご指摘いただきました。ありがとうございました。OwlさんにTwitterでJIRAの情報を教えていただきました。感謝です。