super polish the navbar.
MODIFY
WalletWasabi.Fluent/Controls/NavBarItem.cs
WalletWasabi.Fluent/Controls/NavBarItem.cs
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Mixins;
+using Avalonia.Controls.Primitives;
namespace WalletWasabi.Fluent.Controls
{
- public class NavBarItem : ContentControl
+ public class NavBarItem : TemplatedControl
{
/// <summary>
/// Defines the <see cref="IsSelected"/> property.
@@ -12,6 +13,12 @@ namespace WalletWasabi.Fluent.Controls
public static readonly StyledProperty<bool> IsSelectedProperty =
AvaloniaProperty.Register<NavBarItem, bool>(nameof(IsSelected));
+ public static readonly StyledProperty<IconElement> IconProperty =
+ AvaloniaProperty.Register<NavBarItem, IconElement>(nameof(Icon));
+
+ public static readonly StyledProperty<string> HeaderProperty =
+ AvaloniaProperty.Register<NavBarItem, string>(nameof(Header));
+
/// <summary>
/// Initializes static members of the <see cref="NavBarItem"/> class.
/// </summary>
@@ -30,5 +37,17 @@ namespace WalletWasabi.Fluent.Controls
get { return GetValue(IsSelectedProperty); }
set { SetValue(IsSelectedProperty, value); }
}
+
+ public IconElement Icon
+ {
+ get => GetValue(IconProperty);
+ set => SetValue(IconProperty, value);
+ }
+
+ public string Header
+ {
+ get => GetValue(HeaderProperty);
+ set => SetValue(HeaderProperty, value);
+ }
}
}

MODIFY
WalletWasabi.Fluent/Controls/NavBarItem.xaml
WalletWasabi.Fluent/Controls/NavBarItem.xaml
<Style Selector="c|NavBarItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="{StaticResource ListBoxItemPadding}" />
- <Setter Property="HorizontalContentAlignment" Value="Left" />
- <Setter Property="VerticalContentAlignment" Value="Center" />
- <Setter Property="BorderThickness" Value="2 0 0 0 " />
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">
<Panel>
-
+ <Border x:Name="Indicator" BorderThickness="2 0 0 0" />
<Rectangle x:Name="PressedBackground" IsHitTestVisible="False" />
- <ContentPresenter Name="PART_ContentPresenter"
+ <Border Name="PART_ContentPresenter"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
- ContentTemplate="{TemplateBinding ContentTemplate}"
- Content="{TemplateBinding Content}"
- Padding="{TemplateBinding Padding}"
- VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
- HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
-
+ Padding="{TemplateBinding Padding}">
+ <Panel>
+ <Panel Width="45" HorizontalAlignment="Left">
+ <ContentPresenter HorizontalAlignment="Left" Content="{TemplateBinding Icon}" />
+ </Panel>
+ <TextBlock Text="{TemplateBinding Header}" Margin="50 0 0 0" />
+ </Panel>
+ </Border>
</Panel>
</Border>
</ControlTemplate>
</Style>
<!-- Pressed State -->
- <Style Selector="c|NavBarItem:pressed /template/ Border">
+ <Style Selector="c|NavBarItem:pressed /template/ Border#Indicator">
<Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorLight1}"/>
</Style>
<Style Selector="c|NavBarItem:pressed /template/ ContentPresenter">
</Style>
<!-- Selected State -->
- <Style Selector="c|NavBarItem:selected /template/ Border">
+ <Style Selector="c|NavBarItem:selected /template/ Border#Indicator">
<Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}"/>
</Style>
<Style Selector="c|NavBarItem:selected /template/ ContentPresenter">

MODIFY
WalletWasabi.Fluent/Icons/Icons.xaml
WalletWasabi.Fluent/Icons/Icons.xaml
<PathIcon Data="{StaticResource web_asset_regular}" />
<PathIcon Data="{StaticResource home_regular}" />
<PathIcon Data="{StaticResource add_circle_regular}" />
+ <PathIcon Data="{StaticResource navigation_regular}" />
<PathIcon Data="{StaticResource arrow_left_regular}" />
</StackPanel>
</Design.PreviewWith>

MODIFY
WalletWasabi.Fluent/Views/MainView.axaml
WalletWasabi.Fluent/Views/MainView.axaml
xmlns:behaviors="clr-namespace:WalletWasabi.Fluent.Behaviors;assembly=WalletWasabi.Fluent"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="WalletWasabi.Fluent.Views.MainView" TextBlock.Foreground="#A3A3A3">
- <SplitView>
+ <SplitView CompactPaneLength="46">
<i:Interaction.Behaviors>
<behaviors:SplitViewAutoBehavior ToggleAction="{Binding NavBar.ToggleAction, Mode=OneWayToSource}"
CollapseOnClickAction="{Binding NavBar.CollapseOnClickAction, Mode=OneWayToSource}"
<Border Background="#212121" BoxShadow="0 1 4 #131313" IsHitTestVisible="False" />
<DockPanel>
<local:StatusBar DockPanel.Dock="Bottom" DataContext="{Binding StatusBar}" VerticalAlignment="Bottom" Height="32" TextBlock.FontSize="12" />
- <Panel Margin="20 20 20 0">
+ <Panel Margin="20 10 20 0">
<DockPanel>
- <StackPanel Orientation="Horizontal" Spacing="20" VerticalAlignment="Top">
+ <StackPanel Orientation="Horizontal" Spacing="20" DockPanel.Dock="Top">
<Button Command="{Binding NavBar.GoBack}" Background="Transparent" IsVisible="{Binding NavBar.IsBackButtonVisible}">
<PathIcon Data="{StaticResource arrow_left_regular}" />
</Button>
<vl:ScreenViewLocator />
</rxui:RoutedViewHost.ViewLocator>
<rxui:RoutedViewHost.PageTransition>
- <CrossFade Duration="0:0:0.1" />
+ <CrossFade Duration="0:0:0.25" />
</rxui:RoutedViewHost.PageTransition>
<rxui:RoutedViewHost.DefaultContent>
<TextBlock Text="Default content"

MODIFY
WalletWasabi.Fluent/Views/NavBar.axaml
WalletWasabi.Fluent/Views/NavBar.axaml
xmlns:c="clr-namespace:WalletWasabi.Fluent.Controls"
xmlns:behaviors="clr-namespace:WalletWasabi.Fluent.Behaviors;assembly=WalletWasabi.Fluent"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
- x:Class="WalletWasabi.Fluent.Views.NavBar">
+ x:Class="WalletWasabi.Fluent.Views.NavBar" UseLayoutRounding="False">
<UserControl.Styles>
+ <Style Selector="PathIcon">
+ <Setter Property="Margin" Value="1 0 0 0" />
+ </Style>
<Style Selector="Separator">
<Setter Property="Background" Value="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Margin" Value="-16 0 0 0" />
</Style>
<Style Selector=":is(Button).NavButton">
- <Setter Property="Width" Value="46" />
- <Setter Property="Height" Value="46" />
+ <Setter Property="Width" Value="45" />
+ <Setter Property="Height" Value="45" />
</Style>
<Style Selector=":is(Button).NavButton /template/ ContentPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
+ <Style Selector="c|NavBarItem">
+ <Setter Property="IsSelected" Value="{Binding IsSelected}" />
+ <Setter Property="Header" Value="{Binding Title}" />
+ </Style>
</UserControl.Styles>
<UserControl.DataTemplates>
<DataTemplate DataType="vm:HomePageViewModel">
- <c:NavBarItem IsSelected="{Binding IsSelected}">
- <StackPanel Orientation="Horizontal" Spacing="20">
+ <c:NavBarItem>
+ <c:NavBarItem.Icon>
<PathIcon Data="{StaticResource home_regular}" />
- <TextBlock Text="Home" />
- </StackPanel>
+ </c:NavBarItem.Icon>
</c:NavBarItem>
</DataTemplate>
<DataTemplate DataType="vm:SettingsPageViewModel">
- <c:NavBarItem IsSelected="{Binding IsSelected}">
- <StackPanel Orientation="Horizontal" Spacing="20">
+ <c:NavBarItem>
+ <c:NavBarItem.Icon>
<PathIcon Data="{StaticResource settings_regular}" />
- <TextBlock Text="Settings" />
- </StackPanel>
+ </c:NavBarItem.Icon>
</c:NavBarItem>
</DataTemplate>
<DataTemplate DataType="vm:AddWalletPageViewModel">
- <c:NavBarItem IsSelected="{Binding IsSelected}">
- <StackPanel Orientation="Horizontal" Spacing="20">
- <PathIcon Data="{StaticResource add_circle_regular}" />
- <TextBlock Text="Add Wallet" />
- </StackPanel>
+ <c:NavBarItem>
+ <c:NavBarItem.Icon>
+ <PathIcon Data="{StaticResource home_regular}" />
+ </c:NavBarItem.Icon>
</c:NavBarItem>
</DataTemplate>
<TreeDataTemplate DataType="vm:ClosedWalletViewModel" ItemsSource="{Binding Items}">
- <c:NavBarItem IsSelected="{Binding IsSelected}">
- <StackPanel Orientation="Horizontal" Spacing="20">
+ <c:NavBarItem>
+ <c:NavBarItem.Icon>
<PathIcon Data="{StaticResource web_asset_regular}" />
- <TextBlock Text="{Binding Title}" />
- </StackPanel>
+ </c:NavBarItem.Icon>
</c:NavBarItem>
</TreeDataTemplate>
</UserControl.DataTemplates>
- <DockPanel Margin="1">
- <StackPanel DockPanel.Dock="Top">
- <Button Classes="NavButton" Command="{Binding GoBack}" IsVisible="{Binding IsBackButtonVisible}">
- <PathIcon Data="{StaticResource arrow_left_regular}" />
- </Button>
- </StackPanel>
+ <DockPanel>
<StackPanel DockPanel.Dock="Top">
- <StackPanel Orientation="Horizontal" Spacing="5">
+ <StackPanel Orientation="Horizontal" Spacing="10">
<Button Classes="NavButton" Command="{Binding DoToggleAction}">
<PathIcon Data="{StaticResource navigation_regular}" />
</Button>

super polish the navbar.