What control is this? about fluentavalonia HOT 5 CLOSED

It should be possible to reverse engineer it, you just have to get your hands dirty with the styling. I've tried to get you started with some some of what's needed, I'll leave the rest to you to figure out.

<Style Selector="ui|NavigationView">
	<Setter Property="PaneDisplayMode" Value="Left" />
	<Setter Property="IsBackButtonVisible" Value="False" />
	<Setter Property="IsPaneToggleButtonVisible" Value="False" />
	<Setter Property="IsSettingsVisible" Value="False" />
	<Setter Property="OpenPaneLength" Value="70" /> Change 70 to whatever you like
	<Setter Property="IsPaneOpen" Value="True" />
</Style>

Adjust the foregrounds

<Style Selector="ui|NavigationViewItem">
	<Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
</Style>
<Style Selector="ui|NavigationViewItem:selected TextBlock">
	<Setter Property="Foreground" Value="{DynamicResource AccentTextFillColorPrimaryBrush}" />
</Style>
<Style Selector="ui|NavigationViewItem:selected :is(ui|IconElement)">
	<Setter Property="Foreground" Value="{DynamicResource AccentTextFillColorPrimaryBrush}" />
</Style>
If using a SymbolIcon, you can switch to the Filled version when it's selected like this, if not, you'll have to find another way to do this
<Style Selector="ui|NavigationViewItem:selected ui|SymbolIcon">
	<Setter Property="UseFilled" Value="True" />
</Style>

You'll also have to mess with the template of the NavigationViewItemPresenter, namely to remove the ColumnDefinitions on the ContentGrid element, and then you can play around with aligning the Icon & ContentPresenter as needed. You'll also need to remove the Margin of the ContentPresenter so it doesn't clip anything.

Here you have 2 options, you can hard code everything into the template of the NVI Presenter to get it how you like - once you make the changes above, you just adjust margins & alignments to get it displaying right & add some additional style selectors to handle selection, etc. As long as all template parts remain in Type and Name (where specified), everything should still link up properly (code behind logic & colors).

Or you can make the couple adjustments above and then implement it all in a MenuItemTemplate. Bind your item viewmodel to the Content property of the item & design the template to mimic the new Win Store version. Don't set the icon on the NVI in this case, create an IconElement in your template. This is more dynamic in that you have better control per item of how it displays, but only works if your binding. You may also need some behaviors or some special style selectors to get everything working via selection, etc, but this is all pretty trivial stuff.

Don't be afraid to get your hand dirty with the Styling system, and if something looks off, DevTools is your friend :)

from fluentavalonia.

It's a NavigationView with Fluent version 2 styles and some customization.

Below illustrates how the Fluent version 2 NavigationView actually looks without customization in the WinUI XAML controls gallery.

Edit: Some of the customization I see:

• Navigation view item size is increased along with the icons
• Switching the icons between regular and filled variants based on selection
• Removing the navigation (hamburger) and search buttons entirely (can easily be disabled)
• Adding additional items in the FooterMenuItems

from fluentavalonia.

Is there any sample XAML of how to achieve the store's design...as it seems many Windows 11 apps are adapting the same design of this store navigation view?

from fluentavalonia.

Is there any sample XAML of how to achieve the store's design

Not that I know of. It's possible that WinUI 3 has changed the style we see in the WinUI library as well.

from fluentavalonia.

Ah ok. I believe the WinUI 3 library is still using the Version 1 styles.
Hopefully Microsoft releases a sample or something of how to achieve this with the navigation view.

from fluentavalonia.