Projectセットアップ

アプリのコーディングに入る前に、Visual Studio プロジェクトを簡単に見て、プロジェクトのセットアップを行います。 Visual Studio WinUI 3 プロジェクトを作成すると、いくつかの重要なフォルダーとコード ファイルが生成されます。 これらは、Visual Studioの ソリューション エクスプローラー ペインで確認できます。

以下に示す項目は、主に操作する項目です。 これらのファイルは、WinUI アプリを構成して実行するのに役立ちます。 各ファイルは、以下で説明する異なる目的で機能します。

• Assets フォルダー

  このフォルダーには、アプリのロゴ、画像、その他のメディア アセットが含まれています。 アプリのロゴのプレースホルダー ファイルが入力され始めます。 このロゴは、Windowsスタート メニュー、Windows タスク バー、アプリが公開されたときのMicrosoft Store内のアプリを表します。

• App.xaml および App.xaml.cs

  App.xaml ファイルには、色、スタイル、テンプレートなどのアプリ全体の XAML リソースが含まれています。 App.xaml.cs ファイルには、通常、アプリケーション ウィンドウをインスタンス化してアクティブ化するコードが含まれています。 このprojectでは、MainWindow クラスを指します。

• MainWindow.xaml および MainWindow.xaml.cs

  これらのファイルは、アプリのウィンドウを表します。

• Package.appxmanifest

  この package マニフェスト ファイルでは、発行元情報、ロゴ、プロセッサ アーキテクチャ、およびその他の詳細を構成して、Microsoft Storeでのアプリの表示方法を決定できます。

XAML ファイルと部分クラス

拡張アプリケーション マークアップ言語 (XAML) は、オブジェクトを初期化し、オブジェクトのプロパティを設定できる宣言型言語です。 宣言型 XAML マークアップで表示される UI 要素を作成できます。 その後、イベントに応答し、XAML で最初に宣言したオブジェクトを操作できる XAML ファイル (通常は 分離コード ファイルと呼ばれます) ごとに個別のコード ファイルを関連付けることができます。

通常、任意の XAML ファイルを含む 2 つのファイル、.xaml ファイル自体、および ソリューション エクスプローラー 内の子項目である対応する分離コード ファイルがあります。

• .xaml ファイルには、アプリの UI を定義する XAML マークアップが含まれています。 クラス名は、 x:Class 属性で宣言されます。
• コード ファイルには、XAML マークアップと対話するために作成したコードと、 InitializeComponent メソッドの呼び出しが含まれています。 クラスは partial classとして定義されます。

projectをビルドすると、InitializeComponent メソッドが呼び出され、.xaml ファイルが解析され、コード partial class と結合されたコードが生成され、完全なクラスが作成されます。

詳細については、次のドキュメントを参照してください。

• XAML の概要
• 部分クラスとメソッド (C# プログラミング ガイド)
• x:Class 属性、 x:Class ディレクティブ

MainWindow の更新

projectに含まれる MainWindow クラスは、アプリのシェルの定義に使用される XAML Window クラスのサブクラスです。 アプリのウィンドウには、次の 2 つの部分があります。

• ウィンドウの クライアント 部分は、コンテンツが移動する場所です。
• 非クライアント部分は、Windows オペレーティング システムによって制御される部分です。 タイトル バーが含まれています。キャプション コントロール (最小/最大/閉じるボタン)、アプリ アイコン、タイトル、ドラッグ領域があります。 ウィンドウの外側のフレームも含まれます。

WinUI ノート アプリを Fluent Design ガイドラインと一致させるために、 MainWindowにいくつかの変更を加えます。 まず、 マイカ 素材をウィンドウの背景として適用します。 マイカは、ウィンドウの背景を描くためにテーマとデスクトップの壁紙を組み込んだ不透明でダイナミックな素材です。 次に、アプリのコンテンツを タイトル バー 領域に拡張し、システム タイトル バーを XAML TitleBar コントロールに置き換えます。 これにより、スペースの使用が向上し、タイトル バーに必要なすべての機能を提供しながら、デザインをより詳細に制御できます。

また、ウィンドウのコンテンツとして Frame を追加します。 Frame クラスは Page クラスと連携して、アプリ内のコンテンツのページ間を移動できます。 後の手順でページを追加します。

1. ソリューション エクスプローラー の MainWindow.xaml をダブルクリックして開く。

2. 開始タグと終了タグ<Window.. > タグの間で、既存の XAML を次のように置き換えます。

   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
   
   <Grid>
       <Grid.RowDefinitions>
           <!-- Title Bar -->
           <RowDefinition Height="Auto" />
           <!-- App Content -->
           <RowDefinition Height="*" />     
       </Grid.RowDefinitions>
       <TitleBar x:Name="AppTitleBar"
                 Title="WinUI Notes">
           <TitleBar.IconSource>
               <FontIconSource Glyph="&#xF4AA;"/>
           </TitleBar.IconSource>
       </TitleBar>
   
       <!-- App content -->
       <Frame x:Name="rootFrame" Grid.Row="1"/>
   </Grid>
   

3. Ctrl キーを押しながら S キーを押すか、ツール バーの [保存] アイコンをクリックするか、メニューの [ファイル>保存] MainWindow.xamlを選択して、ファイルを保存します。

この XAML マークアップがすべて現在何を行っているかを理解していない場合は、心配しないでください。 アプリ UI の残りの部分をビルドする際に、XAML の概念について詳しく説明します。

<object ... >
    <object.property>
        value
    </object.property>
</object>

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

ここでアプリを実行すると、追加した XAML TitleBar 要素が表示されますが、システム タイトル バーの下に表示されます。これはまだ表示されています。

システム タイトル バーの置き換えを完了するには、少しコードを記述する必要があります。

1. MainWindow.xaml.csを開きます。 MainWindow.xaml (または任意の XAML ファイル) の分離コードは、次の 3 つの方法で開くことができます。

   • MainWindow.xaml ファイルが開き、編集中の作業中の文書である場合は、F7 キーを押します。
   • MainWindow.xaml ファイルが開き、編集中の作業中の文書である場合は、テキスト エディターで右クリックし、[コードの表示] を選択します。
   • ソリューション エクスプローラー を使用して MainWindow.xaml エントリを展開し、MainWindow.xaml.cs ファイルを表示します。 ファイルをダブルクリックして開きます。

2. MainWindowのコンストラクターで、InitializeComponentの呼び出しの後に次のコードを追加します。

   public MainWindow()
   {
       this.InitializeComponent();
   
       // ↓ Add this. ↓
       // Hide the default system title bar.
       ExtendsContentIntoTitleBar = true;
       // Replace system title bar with the WinUI TitleBar.
       SetTitleBar(AppTitleBar);
       // ↑ Add this. ↑
   }
   

   ExtendsContentIntoTitleBar プロパティは、既定のシステム タイトル バーを非表示にし、アプリの XAML をその領域に拡張します。 SetTitleBar の呼び出しは、指定した XAML 要素 (AppTitleBar) をアプリのタイトル バーとして扱うようにシステムに指示します。

3. F5 キーを押すか、ツール バーの [デバッグ] ボタンをクリックするか、[デバッグ][デバッグの開始]メニューを選択して、プロジェクトをビルドして実行します>デバッグを開始します。

ここでアプリを実行すると、空のウィンドウにマイカの背景と、システム タイトル バーに置き換えられた XAML タイトル バーが表示されます。