drop down default focus problem
Posted: 02 Apr 2021, 19:12
Hello,
We're having issues with default focus in drop downs with keyboard and controller:
- When entering screen / panel I press A or Return to open the drop down.
- Drop down shows, but Inspector doesn't show PopupLayer
- Note no highlight. Nav with keyboard or controller doesn't work.
- Mouse over highlight works
- Clicking with the Mouse selects a value
- Now A/Enter on keyboard opens the drop down and highlight is visible, PopupLayer is in Inspector / things work as expected.
Question: Is this a problem with our style? Or something else is going on?
Our dropdown definition:
Note that adding SelectedIndex="0" to <ComboBox .. > makes things work perfectly, however, we're need to make the initial value blank (force user selection vs mash "enter" to skip through stuff) and selectedIndex seems to overwite Placeholder text.
Our Style definition:
We're having issues with default focus in drop downs with keyboard and controller:
- When entering screen / panel I press A or Return to open the drop down.
- Drop down shows, but Inspector doesn't show PopupLayer
- Note no highlight. Nav with keyboard or controller doesn't work.
- Mouse over highlight works
- Clicking with the Mouse selects a value
- Now A/Enter on keyboard opens the drop down and highlight is visible, PopupLayer is in Inspector / things work as expected.
Question: Is this a problem with our style? Or something else is going on?
Our dropdown definition:
Code: Select all
<ComboBox x:Name="Colors" noesis:Text.Placeholder="Pick a color" Margin="-200,0,0,0" Width="150" HorizontalAlignment="Left" >
<ComboBox.Style>
<Style TargetType="ComboBox" BasedOn="{StaticResource DropdownComboBoxStyle}">
</Style>
</ComboBox.Style>
<ComboBoxItem Content="Red"/>
<ComboBoxItem Content="Green"/>
<ComboBoxItem Content="Blue"/>
</ComboBox>Code: Select all
<ComboBox x:Name="Colors" noesis:Text.Placeholder="Pick a color" Margin="-200,0,0,0" Width="150" HorizontalAlignment="Left" SelectedIndex="0" >
...
... Code: Select all
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
xmlns:System="clr-namespace:System;assembly=mscorlib"
x:Name="ComboBoxes"
>
<ControlTemplate x:Key="DropdownToggleButton" TargetType="{x:Type ToggleButton}">
<Rectangle x:Name="Rectangle" Fill="{TemplateBinding Background}" Opacity="0.15" RadiusX="4" RadiusY="4" />
</ControlTemplate>
<Style x:Key="DropdownBoxItem" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border
x:Name="Border"
Padding="20"
SnapsToDevicePixels="true"
Background="{DynamicResource ColorBrush.light.ui-fill.resting}"
>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter
Property="Background"
Value="{DynamicResource ColorBrush.light.ui-fill.highlight}"
TargetName="Border"
/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter
Property="Background"
Value="{DynamicResource ColorBrush.light.ui-fill.highlight}"
TargetName="Border"
/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="StringItemTemplate">
<TextBlock Text="{Binding DropdownText}" />
</DataTemplate>
<DataTemplate x:Key="MonthItemTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding DropdownText}" />
<TextBlock Text=" - " />
<TextBlock Text="{Binding DropdownSubtext}" />
</StackPanel>
</DataTemplate>
<ControlTemplate x:Key="DropdownComboBox" TargetType="{x:Type ComboBox}">
<Border x:Name="border" BorderBrush="#5E0BC4E2" Margin="-9" BorderThickness="5" CornerRadius="12" Padding="4">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25">
<VisualTransition.GeneratedEasingFunction>
<QuarticEase EasingMode="EaseOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
Storyboard.TargetName="border"
>
<EasingColorKeyFrame KeyTime="0" Value="#000BC4E2" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25" To="Focused">
<VisualTransition.GeneratedEasingFunction>
<QuadraticEase EasingMode="EaseOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
<VisualTransition From="Focused" GeneratedDuration="0:0:0.25">
<VisualTransition.GeneratedEasingFunction>
<QuadraticEase EasingMode="EaseOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
Storyboard.TargetName="border"
>
<EasingColorKeyFrame KeyTime="0" Value="#000BC4E2" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Focused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<TextBlock
x:Name="Placeholder"
Text="{Binding (noesis:Text.Placeholder), RelativeSource={RelativeSource TemplatedParent}}"
Margin="23"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Focusable="False"
Padding="0,0,0,20"
>
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontFamily" Value="Mark Pro" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Foreground" Value="{DynamicResource ColorBrush.dark.text-secondary}" />
</Style>
</TextBlock.Style>
</TextBlock>
<ToggleButton
Template="{StaticResource DropdownToggleButton}"
ClickMode="Press"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Focusable="False"
>
<i:Interaction.Triggers>
<ei:KeyTrigger Key="Return" FiredOn="KeyDown">
<i:Interaction.Behaviors>
<ei:ConditionBehavior>
<ei:ConditionalExpression>
<ei:ComparisonCondition LeftOperand="{Binding IsFocused, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Operator="Equal" RightOperand="True" />
</ei:ConditionalExpression>
</ei:ConditionBehavior>
</i:Interaction.Behaviors>
<noesis:SetFocusAction />
<ei:ChangePropertyAction PropertyName="IsChecked" Value="True" />
</ei:KeyTrigger>
<noesis:GamepadTrigger FiredOn="ButtonDown" Button="Accept">
<i:Interaction.Behaviors>
<ei:ConditionBehavior>
<ei:ConditionalExpression>
<ei:ComparisonCondition LeftOperand="{Binding IsFocused, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Operator="Equal" RightOperand="True" />
</ei:ConditionalExpression>
</ei:ConditionBehavior>
</i:Interaction.Behaviors>
<noesis:SetFocusAction />
<ei:ChangePropertyAction PropertyName="IsChecked" Value="True" />
</noesis:GamepadTrigger>
</i:Interaction.Triggers>
</ToggleButton>
<ContentPresenter
x:Name="ContentSite"
IsHitTestVisible="False"
Margin="23,43,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
>
<ContentPresenter.Style>
<Style TargetType="ContentPresenter">
<Setter
Property="ContentTemplate"
Value="{Binding SelectionBoxItemTemplate, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
/>
<Style.Triggers>
<DataTrigger
Binding="{Binding Path=ItemTemplate, RelativeSource={RelativeSource TemplatedParent}}"
Value="{StaticResource MonthItemTemplate}"
>
<Setter Property="ContentTemplate" Value="{StaticResource StringItemTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Style>
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" />
<Popup x:Name="PART_Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}">
<Grid
x:Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
>
<Border x:Name="DropDownBorder" BorderThickness="1" CornerRadius="15">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource Color.light.ui-fill.resting}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource Color.light.ui-fill.resting}" />
</Border.Background>
</Border>
<ScrollViewer Margin="0,6,0,6" SnapsToDevicePixels="True" Padding="0,6">
<ScrollViewer.Resources>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<ScrollContentPresenter
CanContentScroll="{TemplateBinding CanContentScroll}"
Margin="{TemplateBinding Padding}"
/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ScrollViewer.Resources>
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</Border>
</ControlTemplate>
<Style x:Key="DropdownComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="FontFamily" Value="Mark Pro" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="22" />
<Setter Property="Foreground" Value="{DynamicResource ColorBrush.dark.text-primary}" />
<Setter Property="Background" Value="{DynamicResource ColorBrush.dark.ui-fill.resting}" />
<Setter Property="Template" Value="{StaticResource DropdownComboBox}" />
<Setter Property="ItemTemplate" Value="{StaticResource StringItemTemplate}" />
<Setter Property="ItemContainerStyle" Value="{StaticResource DropdownBoxItem}" />
<Setter Property="MaxDropDownHeight" Value="350" />
<Setter Property="noesis:StyleInteraction.Triggers">
<Setter.Value>
<noesis:StyleTriggerCollection>
<i:EventTrigger EventName="SelectionChanged">
<noesis:SetFocusAction />
</i:EventTrigger>
</noesis:StyleTriggerCollection>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>