C# WinUI 3アプリで［NavigationView］の履歴を削除する方法

C# WinUI 3アプリを作っていく途中で、躓いた部分を備忘録的に投稿します。今回はWinUI3プロジェクトで［NavigationView］の変更履歴を削除する追加する手順です。

［戻る］ボタンと［NavigationView］の関連付け

Xamlに［NavigationView］と［TitleBar］の［BackButton］を関連付けします。

<Window
  x:Class="WinUi3Samples.CustomTitleBar"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:WinUi3Samples"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  Title="CustomTitleBar">
    
  <Window.SystemBackdrop>
    <MicaBackdrop Kind="Base"/>
  </Window.SystemBackdrop>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TitleBar Title="CustomTitleBar"
      IsBackButtonVisible="True"
      IsBackButtonEnabled="{x:Bind RootFrame.CanGoBack, Mode=OneWay}">
    </TitleBar>
    <NavigationView x:Name="RootNavigationView" Grid.Row="1"
      PaneDisplayMode="Top"
      IsBackButtonVisible="Collapsed"
      IsPaneToggleButtonVisible="False">
      <NavigationView.MenuItems>
        <NavigationViewItem  Content="Menu Item1" Tag="Item1" />
        <NavigationViewItem  Content="Menu Item2" Tag="Item2" />
      </NavigationView.MenuItems>
      <Frame x:Name="RootFrame" />
    </NavigationView>
  </Grid>
</Window>

実行するとタイトルバーの左端に無効化された［戻る］ボタンと［NavigationView］はどのアイテムも選択されない状態で表示されます。

コードで変更しても履歴に残る

実行時に［NavigationView］のアイテムを初期選択する方法はいくつかあります。

例えばXaml側の［NavigationViewItem］の［IsSelected］プロパティを有効にします。

<Window
  x:Class="WinUi3Samples.CustomTitleBar"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:WinUi3Samples"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  Title="CustomTitleBar">
    
  <Window.SystemBackdrop>
    <MicaBackdrop Kind="Base"/>
  </Window.SystemBackdrop>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TitleBar Title="CustomTitleBar"
      IsBackButtonVisible="True"
      IsBackButtonEnabled="{x:Bind RootFrame.CanGoBack, Mode=OneWay}">
      BackRequested="TitleBar_BackRequested"
    </TitleBar>
    <NavigationView x:Name="RootNavigationView" Grid.Row="1"
      PaneDisplayMode="Top"
      IsBackButtonVisible="Collapsed"
      IsPaneToggleButtonVisible="False">
      <NavigationView.MenuItems>
        <NavigationViewItem  Content="Menu Item1" Tag="Item1" IsSelected="True"/>
        <NavigationViewItem  Content="Menu Item2" Tag="Item2" />
      </NavigationView.MenuItems>
      <Frame x:Name="RootFrame" />
    </NavigationView>
  </Grid>
</Window>

その他にもC#のコードでクラスの初期化時に、次のコードでアイテムを選択する方法もあります。

public CustomTitleBar()
{
  this.InitializeComponent();
  ExtendsContentIntoTitleBar = true;
  NavigationViewItem selectedItem = (NavigationViewItem)RootNavigationView.MenuItems[0];
  RootNavigationView.SelectedItem = selectedItem;
}

どちらの方法もの実行すると［NavigationView］で［Menu Item1］が選択された状態で表示されますが、画面がコードで選択されるので［戻る］ボタンが有効になります。

アイテムを選択しても［戻る］ボタンを無効にしたい場合は［NavigationView］の履歴を管理している［BackStack］をクリアします。

具体的にはコード側で、アイテムを選択した直後に次のコードで行えます。

public CustomTitleBar()
{
  this.InitializeComponent();
  ExtendsContentIntoTitleBar = true;
  NavigationViewItem selectedItem = (NavigationViewItem)RootNavigationView.MenuItems[0];
  RootNavigationView.SelectedItem = selectedItem;
  RootFrame.BackStack.Clear();
}

実行すると［Menu Item1］が選択された状態で表示されますが［戻る］ボタンは無効の状態です。

まとめ

今回は短い記事ですが、WinUI3プロジェクトで［NavigationView］の変更履歴を削除する手順について書きました。

タイトルバーに［戻る］ボタンを追加して［NavigationView］を利用して画面の状態を関連付けしている場合に、画面の選択をコードで行うと［戻る］ボタンが有効になります。

画面の起動時など［戻る］ボタンを無効のまま［NavigationView］のアイテムを既定値として選択したい場合には［BackStack］をクリアにします。

C#のWinUI 3アプリで［NavigationView］の初期値を選択した際に［戻る］ボタンが有効になってしまう人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただき、ありがとうございます。