demo navbar working as a tree.
MODIFY
WalletWasabi.Fluent/App.xaml
WalletWasabi.Fluent/App.xaml
<Application.Styles>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Accents/FluentDark.xaml"/>
<StyleInclude Source="avares://WalletWasabi.Fluent/Icons/Icons.xaml" />
+ <StyleInclude Source="avares://WalletWasabi.Fluent/Styles/Styles.xaml" />
<StyleInclude Source="avares://WalletWasabi.Fluent/Controls/NavBarItem.xaml" />
</Application.Styles>
</Application>

ADD
WalletWasabi.Fluent/Styles/Styles.xaml
+<Styles xmlns="https://github.com/avaloniaui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+ xmlns:sys="clr-namespace:System;assembly=netstandard"
+ xmlns:local="clr-namespace:AvalonStudio.Controls.Standard.CodeEditor;assembly=AvalonStudio.Controls.Standard">
+ <Styles.Resources>
+ <sys:Double x:Key="IconElementThemeHeight">16</sys:Double>
+ <sys:Double x:Key="IconElementThemeWidth">16</sys:Double>
+ </Styles.Resources>
+</Styles>

MODIFY
WalletWasabi.Fluent/ViewModels/ClosedWalletViewModel.cs
WalletWasabi.Fluent/ViewModels/ClosedWalletViewModel.cs
using ReactiveUI;
using System;
+using System.Collections.ObjectModel;
using System.Linq;
using System.Reactive;
using System.Reactive.Linq;
@@ -12,8 +13,23 @@ namespace WalletWasabi.Fluent.ViewModels
{
public class ClosedWalletViewModel : WalletViewModelBase
{
+ private ObservableCollection<NavBarItemViewModel> _items;
+
+ public ObservableCollection<NavBarItemViewModel> Items
+ {
+ get { return _items; }
+ set { this.RaiseAndSetIfChanged(ref _items, value); }
+ }
+
protected ClosedWalletViewModel(WalletManager walletManager, Wallet wallet) : base(wallet)
{
+ _items = new ObservableCollection<NavBarItemViewModel>
+ {
+ new HomePageViewModel()
+ };
+
+ IsExpanded = true;
+
OpenWalletCommand = ReactiveCommand.CreateFromTask(
async () =>
{

MODIFY
WalletWasabi.Fluent/Views/NavBar.axaml
WalletWasabi.Fluent/Views/NavBar.axaml
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="0" />
</Style>
+ <Style Selector="ListBoxItem">
+ <Setter Property="Margin" Value="0" />
+ <Setter Property="Padding" Value="0" />
+ </Style>
+ <Style Selector="TreeViewItem">
+ <Setter Property="IsExpanded" Value="{Binding IsExpanded}" />
+ </Style>
+ <Style Selector="c|NavBarItem TextBlock">
+ <Setter Property="VerticalAlignment" Value="Center" />
+ </Style>
+
+ <Style Selector="TreeView > TreeViewItem /template/ Panel">
+ <Setter Property="IsVisible" Value="False" />
+ </Style>
</UserControl.Styles>
<UserControl.DataTemplates>
<DataTemplate DataType="vm:HomePageViewModel">
</StackPanel>
</c:NavBarItem>
</DataTemplate>
- <DataTemplate DataType="vm:ClosedWalletViewModel">
- <StackPanel>
+ <TreeDataTemplate DataType="vm:ClosedWalletViewModel" ItemsSource="{Binding Items}">
<c:NavBarItem>
<StackPanel Orientation="Horizontal" Spacing="20">
<PathIcon Data="{StaticResource web_asset_regular}" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</c:NavBarItem>
- <ListBox>
- <ListBoxItem>
- <c:NavBarItem>
- <StackPanel Orientation="Horizontal" Spacing="20">
- <PathIcon Data="{StaticResource add_circle_regular}" />
- <TextBlock Text="Send" />
- </StackPanel>
- </c:NavBarItem>
- </ListBoxItem>
- <ListBoxItem>
- <c:NavBarItem>
- <StackPanel Orientation="Horizontal" Spacing="20">
- <PathIcon Data="{StaticResource add_circle_regular}" />
- <TextBlock Text="Receive" />
- </StackPanel>
- </c:NavBarItem>
- </ListBoxItem>
- </ListBox>
- </StackPanel>
- </DataTemplate>
+ </TreeDataTemplate>
</UserControl.DataTemplates>
<DockPanel Margin="1">
<StackPanel DockPanel.Dock="Top" Margin="0 20 0 0">
<ListBox Items="{Binding BottomItems}" SelectedItem="{Binding SelectedItem}" />
</StackPanel>
- <ListBox Items="{Binding Items}" SelectedItem="{Binding SelectedItem}" />
+ <TreeView Items="{Binding Items}" SelectedItem="{Binding SelectedItem}" />
</DockPanel>
</UserControl>

demo navbar working as a tree.