More UI improvements

This commit is contained in:
TheXamlGuy
2024-06-25 23:08:45 +01:00
parent 37cd8b476c
commit 1e56b09b0a
13 changed files with 132 additions and 59 deletions
@@ -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>
-10
View File
@@ -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">
@@ -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>
@@ -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>
@@ -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>
-2
View File
@@ -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>
@@ -15,14 +15,12 @@
VerticalAlignment="Center"
FontFamily="{DynamicResource FluentThemeFontFamily}"
FontSize="18"
Foreground="{DynamicResource IconForegroundBrush}"
IsVisible="{Binding !Value}"
Text="&#xEF61;" />
<TextBlock
VerticalAlignment="Center"
FontFamily="{DynamicResource FluentThemeFontFamily}"
FontSize="18"
Foreground="{DynamicResource IconForegroundBrush}"
IsVisible="{Binding Value}"
Text="&#xEF60;" />
</Grid>
@@ -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}" />
@@ -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
+1 -1
View File
@@ -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"
+127 -9
View File
@@ -23,21 +23,139 @@
<Grid RowDefinitions="*,Auto">
<ListBox
Grid.Row="0"
Margin="1,0,1,0"
HorizontalAlignment="Stretch"
Margin="1,2,1,0"
HorizontalAlignment="Center"
ItemTemplate="{ReflectionBinding Template}"
ItemsSource="{Binding}"
SelectedItem="{Binding SelectedItem}">
<ListBox.Resources>
<StaticResource x:Key="ListViewItemBackgroundSelected" ResourceKey="SubtleFillColorTransparentBrush" />
<x:Double x:Key="WalletItemSize">40</x:Double>
<CornerRadius x:Key="WalletItemCornerRadius">40</CornerRadius>
<ControlTheme x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<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>
<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.Styles>
<Style Selector="ListBoxItem">
<Setter Property="MinWidth" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="2,0,2,0" />
</Style>
</ListBox.Styles>
<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>
@@ -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>
+3 -16
View File
@@ -5,10 +5,8 @@
xmlns:ui="using:FluentAvalonia.UI.Controls"
xmlns:vm="using:Wallet"
x:DataType="vm:WalletNavigationViewModel"
ListBoxExtension.IsItemInvokedEnabled="True">
<ListBoxItem.Resources>
<SolidColorBrush x:Key="StarredIconForegroundBrush" Color="#FFEDB120" />
</ListBoxItem.Resources>
ListBoxExtension.IsItemInvokedEnabled="True"
ToolTip.Tip="{Binding Name}">
<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, *">
<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>
<PersonPicture Height="40" DisplayName="{Binding Name}" />
</ListBoxItem>