This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(76.8, 5%, 17%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EEG%3C/text%3E%3C/svg%3E)
I am using a NavigatinonView
<winex:WindowEx
x:Class="HorizonHub.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:local="using:HorizonHub.View"
xmlns:winex="using:WinUIEx"
Title="MainWindow">
<NavigationView
x:Name="rootContainer"
Margin="0,50,0,0"
IsBackButtonVisible="Collapsed"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
PaneDisplayMode="Left">
<Interactivity:Interaction.Behaviors>
<Interactivity:EventTriggerBehavior EventName="SelectionChanged">
<Interactivity:InvokeCommandAction Command="{x:Bind MainWindowModel.NavigateCommand}" />
</Interactivity:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<!-- Avatar & Dropdown at the TOP -->
<NavigationView.PaneCustomContent>
<StackPanel
Margin="10,0,0,5"
Orientation="Horizontal">
<Button
Background="Transparent"
BorderBrush="Transparent"
FocusVisualPrimaryBrush="Transparent"
FocusVisualSecondaryBrush="Transparent">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<Button.Flyout>
<Flyout
x:Name="OptionsMenu"
Placement="Bottom">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,0,4"
VerticalAlignment="Center"
Text="Compact Mode" />
<ToggleSwitch
Margin="10,0,0,0"
IsOn="{Binding IsCompactModeEnabled, Mode=TwoWay}" />
</StackPanel>
</Flyout>
</Button.Flyout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="28" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Width="28"
Height="28"
Source="/AppIcon.ico" />
<TextBlock
Grid.Column="1"
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="Options" />
</Grid>
</Button>
</StackPanel>
</NavigationView.PaneCustomContent>
<NavigationView.MenuItems>
<NavigationViewItem
Content="Calendar"
Icon="Calendar"
Tag="CalendarPage" />
<NavigationViewItem
Content="Account"
Icon="People"
Tag="AccountPage" />
<NavigationViewItem
Content="About"
Icon="Help"
Tag="AboutPage" />
</NavigationView.MenuItems>
<ContentControl
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content="{Binding CurrentPage}" />
</NavigationView>
</winex:WindowEx>
and in the vm, I am setting the current to the CalendarPage
public partial class MainWindowViewModel : ObservableObject {
private const string IsCompactModeEnabledKey = "IsCompactModeEnabled";
private readonly ApplicationDataContainer _localSettings = ApplicationData.Current.LocalSettings;
private readonly CalendarPageViewModel _calendarPageViewModel;
public Action<bool>? isCompactMode;
[ObservableProperty]
bool isCompactModeEnabled;
[ObservableProperty]
object? currentPage;
public MainWindowViewModel(CalendarPageViewModel calendarPageViewModel) {
_calendarPageViewModel = calendarPageViewModel;
if(_localSettings.Values.TryGetValue(IsCompactModeEnabledKey, out var storedValue)
&& storedValue is bool savedBool) {
IsCompactModeEnabled = savedBool;
}
else {
IsCompactModeEnabled = false; // Default value
}
CurrentPage = new CalendarPage(_calendarPageViewModel);
}
[RelayCommand]
void Navigate(NavigationViewSelectionChangedEventArgs args) {
if(args.SelectedItem is NavigationViewItem selectedItem && selectedItem.Tag is string pageTag) {
CurrentPage = pageTag switch {
"CalendarPage" => new CalendarPage(_calendarPageViewModel),
"AccountPage" => new AccountPage(),
"AboutPage" => new AboutPage(),
_ => new CalendarPage(_calendarPageViewModel) // Default fallback
};
}
}
partial void OnIsCompactModeEnabledChanged(bool value) {
isCompactMode?.Invoke(value);
_localSettings.Values["IsCompactModeEnabled"] = value;
}
}
}
but the navigation View doesn't select it by default
as you can see, I have the calendar page by default but is not highlighted in the NavigationView
You must select the item, like :
rootContainer.SelectedItem = rootContainer.MenuItems[0]
in Loaded event
So I should delete
CurrentPage = new CalendarPage(_calendarPageViewModel); } from my MainViewMosel
I don't know as I don't use MVVM, but if I don't select the item at beginning on my NavigationView controls, I see the same behaviour as you : the first page is displayed, but matching NavigationViewItem is not selected
I did what you told me, but Iet
System.NullReferenceException: 'Object reference not set to an instance of an object
HorizonHub.Horizon_Hub_XamlTypeInfo.XamlUserType.ActivateInstance() in XamlTypeInfo.g.cs
ABI.Microsoft.UI.Xaml.Markup.IXamlType.Do_Abi_ActivateInstance_13(nint, nint*)
namespace HorizonHub.View;
public sealed partial class MainWindow : WindowEx {
public MainWindowViewModel MainWindowModel { get; set; }
public MainWindow(MainWindowViewModel mainViewModlel) {
InitializeComponent();
MainWindowModel = mainViewModlel;
NavView.DataContext = MainWindowModel;
// Restore pane state from saved settings
NavView.IsPaneOpen = !MainWindowModel.IsCompactModeEnabled;
MainWindowModel.isCompactMode += (isCompact) => {
NavView.IsPaneOpen = !isCompact;
OptionsMenu.Hide();
};
MainWindowModel.PropertyChanged += (s, e) => {
if(e.PropertyName == nameof(MainWindowModel.CurrentPageType)) {
ContentFrame.Navigate(MainWindowModel.CurrentPageType);
}
};
}
private void NavView_Loaded(object sender, RoutedEventArgs e) {
if(ContentFrame != null) {
ContentFrame.Navigate(MainWindowModel.CurrentPageType);
}
}
}
<NavigationView
x:Name="NavView"
Loaded="NavView_Loaded"
Margin="0,50,0,0"
IsBackButtonVisible="Collapsed"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
PaneDisplayMode="Left">
<Interactivity:Interaction.Behaviors>
<Interactivity:EventTriggerBehavior EventName="SelectionChanged">
<Interactivity:InvokeCommandAction Command="{x:Bind MainWindowModel.NavigateCommand}" />
</Interactivity:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<!-- Avatar & Dropdown at the TOP -->
<NavigationView.PaneCustomContent>
<StackPanel
Margin="10,0,0,5"
Orientation="Horizontal">
<Button
Background="Transparent"
BorderBrush="Transparent"
FocusVisualPrimaryBrush="Transparent"
FocusVisualSecondaryBrush="Transparent">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<Button.Flyout>
<Flyout
x:Name="OptionsMenu"
Placement="Bottom">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,0,4"
VerticalAlignment="Center"
Text="Compact Mode" />
<ToggleSwitch
Margin="10,0,0,0"
IsOn="{Binding IsCompactModeEnabled, Mode=TwoWay}" />
</StackPanel>
</Flyout>
</Button.Flyout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="28" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Width="28"
Height="28"
Source="/AppIcon.ico" />
<TextBlock
Grid.Column="1"
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="Options" />
</Grid>
</Button>
</StackPanel>
</NavigationView.PaneCustomContent>
<NavigationView.MenuItems>
<NavigationViewItem
Content="Calendar"
Icon="Calendar"
Tag="CalendarPage" />
<NavigationViewItem
Content="Account"
Icon="People"
Tag="AccountPage" />
<NavigationViewItem
Content="About"
Icon="Help"
Tag="AboutPage" />
</NavigationView.MenuItems>
<Frame x:Name="ContentFrame" />
</NavigationView>
vm
public MainWindowViewModel(CalendarPageViewModel calendarPageViewModel) {
_calendarPageViewModel = calendarPageViewModel;
if(_localSettings.Values.TryGetValue(IsCompactModeEnabledKey, out var storedValue)
&& storedValue is bool savedBool) {
IsCompactModeEnabled = savedBool;
}
else {
IsCompactModeEnabled = false; // Default value
}
// Set default page type
CurrentPageType = typeof(CalendarPage);
}
I dont see in NavView_Loaded
.SelectedItem = .MenuItems[0]
I did what you told me, but Iet
SQLCopy
System.NullReferenceException: 'Object reference not set to an instance of an object
HorizonHub.Horizon_Hub_XamlTypeInfo.XamlUserType.ActivateInstance() in XamlTypeInfo.g.cs
ABI.Microsoft.UI.Xaml.Markup.IXamlType.Do_Abi_ActivateInstance_13(nint, nint*)
XMLCopy
namespace HorizonHub.View;
public sealed partial class MainWindow : WindowEx {
public MainWindowViewModel MainWindowModel { get; set; }
public MainWindow(MainWindowViewModel mainViewModlel) {
InitializeComponent();
MainWindowModel = mainViewModlel;
NavView.DataContext = MainWindowModel;
// Restore pane state from saved settings
NavView.IsPaneOpen = !MainWindowModel.IsCompactModeEnabled;
MainWindowModel.isCompactMode += (isCompact) => {
NavView.IsPaneOpen = !isCompact;
OptionsMenu.Hide();
};
MainWindowModel.PropertyChanged += (s, e) => {
if(e.PropertyName == nameof(MainWindowModel.CurrentPageType)) {
ContentFrame.Navigate(MainWindowModel.CurrentPageType);
}
};
}
private void NavView_Loaded(object sender, RoutedEventArgs e) {
if(ContentFrame != null) {
ContentFrame.Navigate(MainWindowModel.CurrentPageType);
}
}
}
<NavigationView
x:Name="NavView"
Loaded="NavView_Loaded"
Margin="0,50,0,0"
IsBackButtonVisible="Collapsed"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
PaneDisplayMode="Left">
<Interactivity:Interaction.Behaviors>
<Interactivity:EventTriggerBehavior EventName="SelectionChanged">
<Interactivity:InvokeCommandAction Command="{x:Bind MainWindowModel.NavigateCommand}" />
</Interactivity:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<!-- Avatar & Dropdown at the TOP -->
<NavigationView.PaneCustomContent>
<StackPanel
Margin="10,0,0,5"
Orientation="Horizontal">
<Button
Background="Transparent"
BorderBrush="Transparent"
FocusVisualPrimaryBrush="Transparent"
FocusVisualSecondaryBrush="Transparent">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<Button.Flyout>
<Flyout
x:Name="OptionsMenu"
Placement="Bottom">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,0,4"
VerticalAlignment="Center"
Text="Compact Mode" />
<ToggleSwitch
Margin="10,0,0,0"
IsOn="{Binding IsCompactModeEnabled, Mode=TwoWay}" />
</StackPanel>
</Flyout>
</Button.Flyout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="28" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Width="28"
Height="28"
Source="/AppIcon.ico" />
<TextBlock
Grid.Column="1"
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="Options" />
</Grid>
</Button>
</StackPanel>
</NavigationView.PaneCustomContent>
<NavigationView.MenuItems>
<NavigationViewItem
Content="Calendar"
Icon="Calendar"
Tag="CalendarPage" />
<NavigationViewItem
Content="Account"
Icon="People"
Tag="AccountPage" />
<NavigationViewItem
Content="About"
Icon="Help"
Tag="AboutPage" />
</NavigationView.MenuItems>
<Frame x:Name="ContentFrame" />
</NavigationView>
vm
SwiftCopy
public
It is even in documentation at
https://learn.microsoft.com/en-us/windows/apps/design/controls/navigationview#code-example
=>
// NavView doesn't load any page by default, so load home page.
NavView.SelectedItem = NavView.MenuItems[0];