Xamarin.Forms.WPF の画面上の青い領域を消す

前回 Xamarin.Forms.WPF でデスクトップアプリを作りました。

WPF のアプリを作ることができましたが、画面上方に広い青い領域があることが気になります。

Windows Phone アプリ標準のテンプレートでアプリ名やページ名を表示する広い領域が画面上部にあったのを何となく思い出します。

■ 表示されるもの

Xamarin.Forms.WPF アプリのこの上部の領域ですが、ページに Title 属性を設定すると、設定したタイトルが表示されます。

なるほど、そういう領域ね完璧に理解したわ。
などと思いながら、ページ遷移を実装して 2 ページ目に遷移すると。。。

！？
1 ページ目だけの特殊機能何でしょうか？

■ NavigationPage

ページ遷移と言えば Xamarin.Forms には NavigationPage というものがあります。こちらも試してみましょう。
NavigationPage を使うには共有コードプロジェクトの App.xaml.cs を編集します。

• MainPage = new MainPage(); → MainPage = new NavigationPage(new MainPage()); と書き換えます。

変更前

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation (XamlCompilationOptions.Compile)]
namespace XFWPF
{
    public partial class App : Application
    {
        public App ()
        {
            InitializeComponent();

            MainPage = new MainPage();
        }

変更後

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation (XamlCompilationOptions.Compile)]
namespace XFWPF
{
    public partial class App : Application
    {
        public App ()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage());
        }

表示

！？
どうやら話題の領域はナビゲーションバーだったようです。
ナビゲーションバーなら消すのは簡単です。

■ ナビゲーションバーを消す方法

ナビゲーションバーを消すにはページクラスのコンストラクタに NavigationPage.SetHasNavigationBar(this, false); を書き足します。

変更前

using System;
using Xamarin.Forms;

namespace XFWPF
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

変更後

using System;
using Xamarin.Forms;

namespace XFWPF
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

                        NavigationPage.SetHasNavigationBar(this, false);
        }

表示

これなら画面に入力項目を30個、40個と並べたアプリが大好きなジャパニーズエンタープライズアプリケーション開発者も安心ですね。