次の方法で共有

Projectセットアップ

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

Visual StudioのSolution ExplorerがWinUIプロジェクトのファイルを表示しています。

以下に示す項目は、主に操作する項目です。 これらのファイルは、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 でのアプリの表示方法を決定するpublisher情報、ロゴ、プロセッサ アーキテクチャ、およびその他の詳細を構成できます。

XAML ファイルと部分クラス

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

通常、任意の XAML ファイルを含む 2 つのファイル、.xaml ファイル自体、および Solution Explorer 内の子項目である対応する分離コード ファイルがあります。

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

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

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

MainWindow の更新

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

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

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

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

ヒント

このチュートリアルのコードは、GitHub リポジトリからダウンロードまたは表示できます。 このステップのコードを確認するには、こちらのコミットを参照してください: note ページ - initial。

  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 の概念について詳しく説明します。

注

このマークアップでは、XAML でプロパティを設定する 2 つの異なる方法が表示されます。 最初の最短の方法は、次のような XAML 属性構文を使用することです: <object attribute="value">。 これは、 <MicaBackdrop Kind="Base"/>などの単純な値に適しています。 ただし、XAML パーサーが文字列を予期される値型に変換する方法を認識している値に対してのみ機能します。

プロパティ値がより複雑な場合、または XAML パーサーで変換方法がわからない場合は、 プロパティ要素の構文 を使用してオブジェクトを作成する必要があります。 このように：

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

たとえば、 Window.SystemBackdrop プロパティを設定するには、プロパティ要素の構文を使用し、 MicaBackdrop 要素を明示的に作成する必要があります。 ただし、単純な属性構文を使用して、 MicaBackdrop.Kind プロパティを設定できます。

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

MainWindow.xamlでは、<Window.SystemBackdrop>、<Grid.RowDefinitions>、および<TitleBar.IconSource>には、プロパティ要素の構文で設定する必要がある複雑な値が含まれています。

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

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

システム タイトル バーとカスタム タイトル バーの両方が表示されている空の WinUI ノート アプリ ウィンドウ

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

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

    • MainWindow.xaml ファイルが開き、編集中の作業中の文書である場合は、F7 キーを押します。
    • MainWindow.xaml ファイルが開き、編集中の作業中の文書である場合は、テキスト エディターで右クリックし、[コードの表示] を選択します。
    • Solution Explorer を使用して 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. projectをビルドして実行するには、F5 を押すか、ツール バーの [デバッグ] ボタンをクリックするか、メニュー Run> デバッグの開始を選択します。

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

タイトル バーのアイコンとアプリ名を含む空の WinUI Notes アプリ ウィンドウ。

手順 2 に進む - ノート ページを追加する

  • Last updated on