Browse Source

Set visual focus for arrow key navigation within combobox

Ruben 6 months ago
parent
commit
003cb82356

+ 12 - 1
src/PicView.Avalonia/PicViewTheme/Controls/ComboBox.axaml

@@ -11,6 +11,7 @@
         <Setter Property="MinHeight" Value="20" />
         <Setter Property="PlaceholderForeground" Value="{StaticResource MainTextColorFaded}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+        <Setter Property="KeyboardNavigation.TabNavigation" Value="Continue" />
         <Setter Property="Template">
             <ControlTemplate>
                 <DockPanel LastChildFill="true">
@@ -100,6 +101,7 @@
                 </DockPanel>
             </ControlTemplate>
         </Setter>
+
         <Style Selector="^:pointerover /template/ Border#LeftBorder">
             <Setter Property="BorderBrush" Value="{DynamicResource SecondaryBorderColor}" />
         </Style>
@@ -125,6 +127,16 @@
             <Setter Property="Opacity" Value="{StaticResource ThemeDisabledOpacity}" />
         </Style>
 
+        <Style Selector="^:focus /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource SecondaryAccentColor}" />
+        </Style>
+        <Style Selector="^:focus:not(:selected) /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource SecondaryAccentColor}" />
+        </Style>
+        <Style Selector="^:selected:focus /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource AccentColor}" />
+        </Style>
+
         <Style Selector="^:dropdownopen /template/ Border#LeftBorder">
             <Setter Property="BorderBrush" Value="{DynamicResource SecondaryBorderColor}" />
         </Style>
@@ -138,6 +150,5 @@
             <Setter Property="BorderBrush" Value="{DynamicResource TertiaryBorderColor}" />
             <Setter Property="Opacity" Value=".4" />
         </Style>
-
     </ControlTheme>
 </ResourceDictionary>

+ 5 - 0
src/PicView.Avalonia/PicViewTheme/Controls/ComboBoxItem.axaml

@@ -37,5 +37,10 @@
         <Style Selector="^:selected:focus:pointerover /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource AccentColor}" />
         </Style>
+
+        <Style Selector="^:focus-within /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource SecondaryAccentColor}" />
+            <Setter Property="BorderThickness" Value="1" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>