More UI improvements

Wallet.Avalonia/ArchiveItemActionView.axaml

@@ -9,7 +9,6 @@
         Height="{StaticResource ButtonHeight}"
         VerticalAlignment="Center"
         Command="{Binding InvokeCommand}"
-        Foreground="{DynamicResource IconForegroundBrush}"
         HotKey="Delete"
         ToolTip.Tip="Archive">
         <TextBlock
@@ -17,7 +16,6 @@
             VerticalAlignment="Center"
             FontFamily="{DynamicResource FluentThemeFontFamily}"
             FontSize="18"
-            Foreground="{DynamicResource IconForegroundBrush}"
             Text="&#xE073;" />
     </Button>
 </UserControl>

Wallet.Avalonia/BackActionView.axaml

@@ -10,28 +10,18 @@
             <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{DynamicResource SubtleFillColorSecondary}" />
             <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{DynamicResource SubtleFillColorTertiary}" />
             <Thickness x:Key="ButtonBorderThemeThickness">0</Thickness>
-            <ResourceDictionary.ThemeDictionaries>
-                <ResourceDictionary x:Key="Light">
-                    <SolidColorBrush x:Key="IconForegroundBrush" Color="#AB000000" />
-                </ResourceDictionary>
-                <ResourceDictionary x:Key="Dark">
-                    <SolidColorBrush x:Key="IconForegroundBrush" Color="#ABFFFFFF" />
-                </ResourceDictionary>
-            </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
     <Button
         Width="{StaticResource ButtonWidth}"
         Height="{StaticResource ButtonHeight}"
         VerticalAlignment="Center"
-        Foreground="{DynamicResource IconForegroundBrush}"
         ToolTip.Tip="Back">
         <TextBlock
             Margin="0,3,0,0"
             VerticalAlignment="Center"
             FontFamily="{DynamicResource FluentThemeFontFamily}"
             FontSize="16"
-            Foreground="{DynamicResource IconForegroundBrush}"
             Text="&#xE0F5;" />
         <Interaction.Behaviors>
             <EventTriggerBehavior EventName="Click">

Wallet.Avalonia/ConfirmItemActionView.axaml

@@ -9,14 +9,12 @@
         Height="{StaticResource ButtonHeight}"
         VerticalAlignment="Center"
         Command="{Binding InvokeCommand}"
-        Foreground="{DynamicResource IconForegroundBrush}"
         ToolTip.Tip="Save">
         <TextBlock
             Margin="0,3,0,0"
             VerticalAlignment="Center"
             FontFamily="{DynamicResource FluentThemeFontFamily}"
             FontSize="18"
-            Foreground="{DynamicResource IconForegroundBrush}"
             Text="&#xE3EA;" />
     </Button>
 </UserControl>

Wallet.Avalonia/DeleteItemActionView.axaml

@@ -9,14 +9,12 @@
         Height="{StaticResource ButtonHeight}"
         VerticalAlignment="Center"
         Command="{Binding InvokeCommand}"
-        Foreground="{DynamicResource IconForegroundBrush}"
         ToolTip.Tip="Delete">
         <TextBlock
             Margin="0,3,0,0"
             VerticalAlignment="Center"
             FontFamily="{DynamicResource FluentThemeFontFamily}"
             FontSize="18"
-            Foreground="{DynamicResource IconForegroundBrush}"
             Text="&#xE5B9;" />
     </Button>
 </UserControl>

Wallet.Avalonia/DismissItemActionView.axaml

@@ -9,14 +9,12 @@
         Height="{StaticResource ButtonHeight}"
         VerticalAlignment="Center"
         Command="{Binding InvokeCommand}"
-        Foreground="{DynamicResource IconForegroundBrush}"
         ToolTip.Tip="Cancel">
         <TextBlock
             Margin="0,3,0,0"
             VerticalAlignment="Center"
             FontFamily="{DynamicResource FluentThemeFontFamily}"
             FontSize="18"
-            Foreground="{DynamicResource IconForegroundBrush}"
             Text="&#xE607;" />
     </Button>
 </UserControl>

Wallet.Avalonia/EditItemActionView.axaml

@@ -9,14 +9,12 @@
         Height="{StaticResource ButtonHeight}"
         VerticalAlignment="Center"
         Command="{Binding InvokeCommand}"
-        Foreground="{DynamicResource IconForegroundBrush}"
         ToolTip.Tip="Edit">
         <TextBlock
             Margin="0,3,0,0"
             VerticalAlignment="Center"
             FontFamily="{DynamicResource FluentThemeFontFamily}"
             FontSize="18"
-            Foreground="{DynamicResource IconForegroundBrush}"
             Text="&#xE759;" />
     </Button>
 </UserControl>

Wallet.Avalonia/FavouriteItemActionView.axaml

@@ -15,14 +15,12 @@
                 VerticalAlignment="Center"
                 FontFamily="{DynamicResource FluentThemeFontFamily}"
                 FontSize="18"
-                Foreground="{DynamicResource IconForegroundBrush}"
                 IsVisible="{Binding !Value}"
                 Text="" />
             <TextBlock
                 VerticalAlignment="Center"
                 FontFamily="{DynamicResource FluentThemeFontFamily}"
                 FontSize="18"
-                Foreground="{DynamicResource IconForegroundBrush}"
                 IsVisible="{Binding Value}"
                 Text="&#xEF60;" />
         </Grid>

Wallet.Avalonia/ItemCategoryNavigationView.axaml

@@ -13,7 +13,7 @@
     <Grid Background="Transparent" ColumnDefinitions="Auto,*">
         <PersonPicture
             Grid.Column="0"
-            Height="34"
+            Height="40"
             DisplayName="{Binding Name}" />
         <StackPanel Grid.Column="1" Margin="12,12,6,12">
             <TextBlock Text="{Binding Name}" />

Wallet.Avalonia/ItemCommandHeaderView.axaml

@@ -12,14 +12,6 @@
             <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{DynamicResource SubtleFillColorSecondary}" />
             <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{DynamicResource SubtleFillColorTertiary}" />
             <Thickness x:Key="ButtonBorderThemeThickness">0</Thickness>
-            <ResourceDictionary.ThemeDictionaries>
-                <ResourceDictionary x:Key="Light">
-                    <SolidColorBrush x:Key="IconForegroundBrush" Color="#AB000000" />
-                </ResourceDictionary>
-                <ResourceDictionary x:Key="Dark">
-                    <SolidColorBrush x:Key="IconForegroundBrush" Color="#ABFFFFFF" />
-                </ResourceDictionary>
-            </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
     <ItemsControl

Wallet.Avalonia/ItemNavigationView.axaml

@@ -26,7 +26,7 @@
     </Interaction.Behaviors>
     <Grid Background="Transparent" ColumnDefinitions="40,*">
         <Grid Grid.Column="0">
-            <PersonPicture Height="32" DisplayName="{Binding Name}" />
+            <PersonPicture Height="40" DisplayName="{Binding Name}" />
             <TextBlock
                 Margin="0,0,2,12"
                 HorizontalAlignment="Right"

Wallet.Avalonia/MainView.axaml

@@ -23,21 +23,139 @@
             <Grid RowDefinitions="*,Auto">
                 <ListBox
                     Grid.Row="0"
-                    Margin="1,0,1,0"
+                    Margin="1,2,1,0"
-                    HorizontalAlignment="Stretch"
+                    HorizontalAlignment="Center"
                     ItemTemplate="{ReflectionBinding Template}"
                     ItemsSource="{Binding}"
                     SelectedItem="{Binding SelectedItem}">
                     <ListBox.Resources>
                         <StaticResource x:Key="ListViewItemBackgroundSelected" ResourceKey="SubtleFillColorTransparentBrush" />
-                    </ListBox.Resources>
+                        <x:Double x:Key="WalletItemSize">40</x:Double>
-                    <ListBox.Styles>
+                        <CornerRadius x:Key="WalletItemCornerRadius">40</CornerRadius>
-                        <Style Selector="ListBoxItem">
+                        <ControlTheme x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
-                            <Setter Property="MinWidth" Value="0" />
+                            <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
-                            <Setter Property="Padding" Value="0" />
+                            <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-                            <Setter Property="Margin" Value="2,0,2,0" />
+                            <Setter Property="Background" Value="{DynamicResource ListViewItemBackground}" />
+                            <Setter Property="Foreground" Value="{DynamicResource ListViewItemForeground}" />
+                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+                            <Setter Property="VerticalContentAlignment" Value="Center" />
+                            <Setter Property="Width" Value="{StaticResource WalletItemSize}" />
+                            <Setter Property="Height" Value="{StaticResource WalletItemSize}" />
+                            <Setter Property="MinHeight" Value="{StaticResource WalletItemSize}" />
+                            <Setter Property="MinWidth" Value="{StaticResource WalletItemSize}" />
+                            <Setter Property="CornerRadius" Value="{StaticResource WalletItemCornerRadius}" />
+                            <Setter Property="Template">
+                                <ControlTemplate>
+                                    <Panel>
+                                        <Border
+                                            x:Name="PART_ContentBorder"
+                                            Background="{TemplateBinding Background}"
+                                            BorderBrush="{TemplateBinding BorderBrush}"
+                                            BorderThickness="{TemplateBinding BorderThickness}"
+                                            CornerRadius="{TemplateBinding CornerRadius}">
+                                            <Grid>
+                                                <ContentPresenter
+                                                    Name="PART_ContentPresenter"
+                                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                    Content="{TemplateBinding Content}"
+                                                    ContentTemplate="{TemplateBinding ContentTemplate}" />
+                                                <Border
+                                                    Name="SelectionIndicator"
+                                                    BorderBrush="{DynamicResource AccentFillColorDefaultBrush}"
+                                                    BorderThickness="3"
+                                                    CornerRadius="{TemplateBinding CornerRadius}"
+                                                    IsVisible="False"
+                                                    UseLayoutRounding="False" />
+                                            </Grid>
+                                        </Border>
+                                    </Panel>
+                                </ControlTemplate>
+                            </Setter>
+                            <Style Selector="^:disabled">
+                                <Setter Property="Opacity" Value="0.5" />
                             </Style>
-                    </ListBox.Styles>
+                            <Style Selector="^:pointerover">
+                                <Style Selector="^ /template/ Border#PART_ContentBorder">
+                                    <Setter Property="Background" Value="{DynamicResource ListViewItemBackgroundPointerOver}" />
+                                </Style>
+                                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                                    <Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundPointerOver}" />
+                                </Style>
+                            </Style>
+                            <Style Selector="^:pressed">
+                                <Style Selector="^ /template/ Border#PART_ContentBorder">
+                                    <Setter Property="Background" Value="{DynamicResource ListViewItemBackgroundPressed}" />
+                                </Style>
+                                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                                    <Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundPressed}" />
+                                </Style>
+                            </Style>
+                            <Style Selector="^:selected">
+                                <Style Selector="^ /template/ Border#PART_ContentBorder">
+                                    <Setter Property="Background" Value="{DynamicResource ListViewItemBackgroundSelected}" />
+                                </Style>
+                                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                                    <Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundSelected}" />
+                                </Style>
+                                <Style Selector="^ /template/ Border#SelectionIndicator">
+                                    <Setter Property="IsVisible" Value="True" />
+                                </Style>
+                                <Style Selector="^:not(:focus) /template/ Border#PART_ContentBorder">
+                                    <Setter Property="Background" Value="{DynamicResource ListViewItemBackgroundSelected}" />
+                                </Style>
+                                <Style Selector="^:not(:focus) /template/ ContentPresenter#PART_ContentPresenter">
+                                    <Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundSelected}" />
+                                </Style>
+                                <Style Selector="^:pointerover">
+                                    <Style Selector="^ /template/ Border#PART_ContentBorder">
+                                        <Setter Property="Background" Value="{DynamicResource ListViewItemBackgroundSelectedPointerOver}" />
+                                    </Style>
+                                    <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                                        <Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundSelectedPointerOver}" />
+                                    </Style>
+                                    <Style Selector="^ /template/ Border#SelectionIndicator">
+                                        <Setter Property="BorderBrush" Value="{DynamicResource ListViewItemSelectionIndicatorPointerOverBrush}" />
+                                    </Style>
+                                </Style>
+                                <Style Selector="^:pressed">
+                                    <Style Selector="^ /template/ Border#PART_ContentBorder">
+                                        <Setter Property="Background" Value="{DynamicResource ListViewItemBackgroundSelectedPressed}" />
+                                    </Style>
+                                    <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                                        <Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundSelectedPressed}" />
+                                    </Style>
+                                </Style>
+                                <Style Selector="^:disabled /template/ Border#SelectionIndicator">
+                                    <Setter Property="BorderBrush" Value="{DynamicResource ListViewItemSelectionIndicatorDisabledBrush}" />
+                                </Style>
+                            </Style>
+                        </ControlTheme>
+                    </ListBox.Resources>
+                    <ListBox.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Spacing="6">
+                                <StackPanel.Styles>
+                                    <Style Selector="StackPanel.Closed">
+                                        <Setter Property="Orientation" Value="Vertical" />
+                                    </Style>
+                                    <Style Selector="StackPanel.Opened">
+                                        <Setter Property="Orientation" Value="Horizontal" />
+                                    </Style>
+                                </StackPanel.Styles>
+                                <Interaction.Behaviors>
+                                    <DataTriggerBehavior Binding="{Binding $parent[NavigationView].IsPaneOpen}" Value="True">
+                                        <AddClassAction ClassName="Opened" RemoveIfExists="True" />
+                                        <RemoveClassAction ClassName="Closed" />
+                                    </DataTriggerBehavior>
+                                    <DataTriggerBehavior Binding="{Binding $parent[NavigationView].IsPaneOpen}" Value="False">
+                                        <AddClassAction ClassName="Closed" RemoveIfExists="True" />
+                                        <RemoveClassAction ClassName="Opened" />
+                                    </DataTriggerBehavior>
+                                </Interaction.Behaviors>
+                            </StackPanel>
+                        </ItemsPanelTemplate>
+                    </ListBox.ItemsPanel>
                 </ListBox>
                 <NavigationViewItemSeparator Grid.Row="1" />
             </Grid>

Wallet.Avalonia/UnarchiveItemActionView.axaml

@@ -9,13 +9,11 @@
         Height="{StaticResource ButtonHeight}"
         VerticalAlignment="Center"
         Command="{Binding InvokeCommand}"
-        Foreground="{DynamicResource IconForegroundBrush}"
         ToolTip.Tip="Restore">
         <TextBlock
             VerticalAlignment="Center"
             FontFamily="{DynamicResource FluentThemeFontFamily}"
             FontSize="18"
-            Foreground="{DynamicResource IconForegroundBrush}"
             Text="&#xE075;" />
     </Button>
 </UserControl>

Wallet.Avalonia/WalletNavigationView.axaml

@@ -5,10 +5,8 @@
     xmlns:ui="using:FluentAvalonia.UI.Controls"
     xmlns:vm="using:Wallet"
     x:DataType="vm:WalletNavigationViewModel"
-    ListBoxExtension.IsItemInvokedEnabled="True">
+    ListBoxExtension.IsItemInvokedEnabled="True"
-    <ListBoxItem.Resources>
+    ToolTip.Tip="{Binding Name}">
-        <SolidColorBrush x:Key="StarredIconForegroundBrush" Color="#FFEDB120" />
-    </ListBoxItem.Resources>
     <Interaction.Behaviors>
         <DataTriggerBehavior Binding="{Binding IsOpened}" Value="False">
             <ConditionAction>
@@ -35,16 +33,5 @@
             </ConditionAction>
         </AttachedEventTriggerBehaviour>
     </Interaction.Behaviors>
-    <Grid Margin="0,2,0,2" ColumnDefinitions="Auto, *">
+    <PersonPicture Height="40" DisplayName="{Binding Name}" />
-        <Grid
-            Grid.Column="0"
-            Width="40"
-            HorizontalAlignment="Center"
-            VerticalAlignment="Center">
-            <PersonPicture Height="30" DisplayName="{Binding Name}" />
-        </Grid>
-        <Grid Grid.Column="1" Margin="{StaticResource NavigationViewItemContentPresenterMargin}">
-            <TextBlock VerticalAlignment="Center" Text="{Binding Name}" />
-        </Grid>
-    </Grid>
 </ListBoxItem>