Theme: Improve keyboard navigation and focus behaviour

Signed-off-by: Axel Gembe <[email protected]>
tgjones · Sep 13, 2016 · 967880b · 967880b
1 parent b3bb8f5
commit 967880b
Show file tree

Hide file tree

Showing 16 changed files with 81 additions and 49 deletions.
diff --git a/src/Gemini.Demo/Modules/Shell/Views/DemoApplicationSettingsView.xaml b/src/Gemini.Demo/Modules/Shell/Views/DemoApplicationSettingsView.xaml
@@ -5,7 +5,8 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:dd="clr-namespace:Gemini.Demo.Modules.Shell.ViewModels"
     x:Class="Gemini.Demo.Modules.Shell.Views.DemoApplicationSettingsView" mc:Ignorable="d" d:DesignHeight="300"
-    d:DesignWidth="300" d:DataContext="{d:DesignInstance dd:DemoApplicationSettingsViewModel}">
+    d:DesignWidth="300" d:DataContext="{d:DesignInstance dd:DemoApplicationSettingsViewModel}"
+    IsTabStop="False">
     <Grid>
         <CheckBox IsChecked="{Binding ConfirmExit}">Confirm application exit</CheckBox>
     </Grid>

diff --git a/src/Gemini.Modules.Inspector/Themes/Generic.xaml b/src/Gemini.Modules.Inspector/Themes/Generic.xaml
@@ -39,7 +39,8 @@
 	</Style>
 
 	<Style TargetType="local:ScreenColorPicker">
-		<Setter Property="Template">
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource GeminiFocusVisualStyle}" />
+        <Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="local:ScreenColorPicker">
 					<Image Source="/Gemini.Modules.Inspector;component/Resources/eyedropper_16xLG.png" />

diff --git a/src/Gemini.Modules.Inspector/Views/InspectorView.xaml b/src/Gemini.Modules.Inspector/Views/InspectorView.xaml
@@ -16,7 +16,7 @@
     </UserControl.Resources>
         <ScrollViewer VerticalScrollBarVisibility="Auto">
         <StackPanel Orientation="Vertical">
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+            <StackPanel Focusable="False" Orientation="Horizontal" HorizontalAlignment="Right">
                 <Button Content="{l:Static p:Resources.ResetAll}"
                         ToolTip="{l:Static p:Resources.ResetToolTip}"
                         Foreground="{DynamicResource EnvironmentToolWindowText}"
@@ -25,7 +25,8 @@
                         />
             </StackPanel>
             <Grid SnapsToDevicePixels="True" UseLayoutRounding="True">
-                <ItemsControl ItemsSource="{Binding SelectedObject.Inspectors}"
+                <ItemsControl IsTabStop="False"
+                              ItemsSource="{Binding SelectedObject.Inspectors}"
                               ItemTemplateSelector="{StaticResource InspectorItemTemplateSelector}" />
             </Grid>
         </StackPanel>

diff --git a/src/Gemini/Gemini.csproj b/src/Gemini/Gemini.csproj
@@ -386,6 +386,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Themes\VS2013\Controls\Focus.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Themes\VS2013\Controls\Button.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

diff --git a/src/Gemini/Modules/MainMenu/Views/MainMenuSettingsView.xaml b/src/Gemini/Modules/MainMenu/Views/MainMenuSettingsView.xaml
@@ -9,7 +9,8 @@
     xmlns:converters="clr-namespace:Gemini.Modules.MainMenu.Converters"
     l:ErrorHandling.Mode="ReturnErrorInfoPreserveNeutral"
     x:Class="Gemini.Modules.MainMenu.Views.MainMenuSettingsView" mc:Ignorable="d" d:DesignHeight="300"
-    d:DesignWidth="300" d:DataContext="{d:DesignInstance viewModels:MainMenuSettingsViewModel}">
+    d:DesignWidth="300" d:DataContext="{d:DesignInstance viewModels:MainMenuSettingsViewModel}"
+    IsTabStop="False">
     <UserControl.Resources>
         <converters:CultureInfoNameConverter x:Key="CultureInfoNameConverter" />
     </UserControl.Resources>

diff --git a/src/Gemini/Modules/Settings/Views/SettingsView.xaml b/src/Gemini/Modules/Settings/Views/SettingsView.xaml
@@ -47,15 +47,15 @@
                 <RowDefinition Height="*" />
                 <RowDefinition Height="10" />
             </Grid.RowDefinitions>
-            
-            <ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
-                <ItemsControl HorizontalContentAlignment="Stretch"
+
+            <ScrollViewer IsTabStop="False" Grid.Row="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
+                <ItemsControl IsTabStop="False" HorizontalContentAlignment="Stretch"
                       ItemsSource="{Binding ElementName=TreeView, Path=SelectedValue}"
                       ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
                       BorderBrush="{x:Null}">
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
-                            <ContentControl cal:View.Model="{Binding}" />
+                            <ContentControl IsTabStop="False" cal:View.Model="{Binding}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>

diff --git a/src/Gemini/Themes/VS2013/BlueTheme.xaml b/src/Gemini/Themes/VS2013/BlueTheme.xaml
@@ -239,4 +239,7 @@
     <!-- Label -->
     <SolidColorBrush x:Key="Label.Static.Text" Color="#000000" />
     <SolidColorBrush x:Key="Label.Disabled.Text" Color="#A4ADBA" />
+
+    <!-- Focus style -->
+    <SolidColorBrush x:Key="FocusStyle.Brush" Color="#000000" />
 </ResourceDictionary>
diff --git a/src/Gemini/Themes/VS2013/Controls/Button.xaml b/src/Gemini/Themes/VS2013/Controls/Button.xaml
@@ -6,6 +6,7 @@
         <Setter Property="Foreground" Value="{DynamicResource EnvironmentToolWindowText}" />
         <Setter Property="BorderBrush" Value="{DynamicResource Button.Static.Border}" />
         <Setter Property="Padding" Value="3,0" />
+        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Button}">
@@ -16,6 +17,9 @@
                         <Trigger Property="IsMouseOver" Value="True">
                             <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource Button.MouseOver.Border}" />
                         </Trigger>
+                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
+                            <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource Button.MouseOver.Border}" />
+                        </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
@@ -24,11 +28,15 @@
             <Trigger Property="IsMouseOver" Value="True">
                 <Setter Property="Background" Value="{DynamicResource Button.MouseOver.Background}" />
             </Trigger>
+            <Trigger Property="IsKeyboardFocusWithin" Value="True">
+                <Setter Property="Background" Value="{DynamicResource Button.MouseOver.Background}" />
+            </Trigger>
             <Trigger Property="IsEnabled" Value="False">
                 <Setter Property="Foreground" Value="{DynamicResource EnvironmentToolWindowDisabledText}" />
                 <Setter Property="Opacity" Value="0.5" />
             </Trigger>
         </Style.Triggers>
     </Style>
+
     <Style TargetType="{x:Type Button}" BasedOn="{StaticResource GeminiButtonStyle}" />
 </ResourceDictionary>
diff --git a/src/Gemini/Themes/VS2013/Controls/CheckBox.xaml b/src/Gemini/Themes/VS2013/Controls/CheckBox.xaml
@@ -1,25 +1,16 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Style x:Key="FocusVisual">
-        <Setter Property="Control.Template">
-            <Setter.Value>
-                <ControlTemplate>
-                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource EnvironmentToolWindowText}" StrokeThickness="1" StrokeDashArray="1 2"/>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
     <Style x:Key="OptionMarkFocusVisual">
         <Setter Property="Control.Template">
             <Setter.Value>
                 <ControlTemplate>
-                    <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource EnvironmentToolWindowText}" StrokeThickness="1" StrokeDashArray="1 2"/>
+                    <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource FocusStyle.Brush}" StrokeThickness="1" StrokeDashArray="1 2"/>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
     <Style TargetType="{x:Type CheckBox}">
-        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource GeminiFocusVisual}"/>
         <Setter Property="Background" Value="{DynamicResource OptionMark.Static.Background}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource OptionMark.Static.Border}"/>
         <Setter Property="Foreground" Value="{DynamicResource EnvironmentToolWindowText}"/>

diff --git a/src/Gemini/Themes/VS2013/Controls/ColorPicker.xaml b/src/Gemini/Themes/VS2013/Controls/ColorPicker.xaml
@@ -103,6 +103,10 @@
                             <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource Button.MouseOver.Border}" />
                             <Setter TargetName="Border" Property="Background" Value="{DynamicResource Button.MouseOver.Background}" />
                         </Trigger>
+                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
+                            <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource Button.MouseOver.Border}" />
+                            <Setter TargetName="Border" Property="Background" Value="{DynamicResource Button.MouseOver.Background}" />
+                        </Trigger>
                         <Trigger Property="IsEnabled" Value="False">
                             <Setter Property="Fill" TargetName="Arrow" Value="{DynamicResource ColorPicker.Disabled.Glyph}" />
                         </Trigger>
@@ -114,12 +118,14 @@
             <Trigger Property="IsMouseOver" Value="True">
                 <Setter Property="Background" Value="{DynamicResource Button.MouseOver.Background}" />
             </Trigger>
+            <Trigger Property="IsKeyboardFocusWithin" Value="True">
+                <Setter Property="Background" Value="{DynamicResource Button.MouseOver.Background}" />
+            </Trigger>
         </Style.Triggers>
     </Style>
 
     <Style x:Key="ColorDisplayStyle" TargetType="ContentControl">
-        <Setter Property="Focusable"
-              Value="False" />
+        <Setter Property="Focusable" Value="False" />
         <Setter Property="ContentTemplate">
             <Setter.Value>
                 <DataTemplate>
@@ -158,16 +164,18 @@
         <Setter Property="BorderBrush" Value="{DynamicResource ColorPicker.Border}" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="ButtonStyle" Value="{StaticResource ColorPickerToggleButtonStyle}" />
-        <Setter Property="Focusable" Value="False" />
+        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type xctk:ColorPicker}">
                     <Grid>
                         <ToggleButton x:Name="PART_ColorPickerToggleButton"
-                                      IsTabStop="True"
+                                      IsTabStop="False"
+                                      Focusable="False"
                                       MinHeight="22"
+                                      FocusVisualStyle="{x:Null}"
                                       Background="{TemplateBinding Background}"
                                       BorderBrush="{TemplateBinding BorderBrush}"
                                       BorderThickness="{TemplateBinding BorderThickness}"
@@ -178,11 +186,11 @@
                                       IsHitTestVisible="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}"
                                       Style="{TemplateBinding ButtonStyle}">
                             <Grid Margin="2">
-                                <ContentControl x:Name="ColorOnly" Style="{StaticResource ColorDisplayStyle}" />
+                                <ContentControl x:Name="ColorOnly" IsTabStop="False" Style="{StaticResource ColorDisplayStyle}" />
 
                                 <Border x:Name="ColorAndName" Background="{DynamicResource ColorPicker.Background}" Visibility="Hidden">
                                     <StackPanel Orientation="Horizontal">
-                                        <ContentControl HorizontalAlignment="Left" Width="20" Margin="2,1,4,1" Style="{StaticResource ColorDisplayStyle}" BorderThickness="1" BorderBrush="{DynamicResource ColorPicker.Border}" />
+                                        <ContentControl IsTabStop="False" HorizontalAlignment="Left" Width="20" Margin="2,1,4,1" Style="{StaticResource ColorDisplayStyle}" BorderThickness="1" BorderBrush="{DynamicResource ColorPicker.Border}" />
                                         <TextBlock Text="{Binding SelectedColorText, RelativeSource={RelativeSource TemplatedParent}}" Foreground="{DynamicResource EnvironmentToolWindowText}" VerticalAlignment="Center" />
                                     </StackPanel>
                                 </Border>

diff --git a/src/Gemini/Themes/VS2013/Controls/ComboBox.xaml b/src/Gemini/Themes/VS2013/Controls/ComboBox.xaml
@@ -1,21 +1,12 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
-
-    <Style x:Key="FocusVisual">
-        <Setter Property="Control.Template">
-            <Setter.Value>
-                <ControlTemplate>
-                    <Rectangle StrokeDashArray="1 2" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" Margin="2"/>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
     <Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
         <Setter Property="OverridesDefaultStyle" Value="true"/>
-        <Setter Property="IsTabStop" Value="false"/>
-        <Setter Property="Focusable" Value="false"/>
+        <Setter Property="IsTabStop" Value="True"/>
+        <Setter Property="Focusable" Value="True"/>
         <Setter Property="ClickMode" Value="Press"/>
+        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ToggleButton}">
@@ -32,6 +23,13 @@
                             <Setter Property="Background" TargetName="splitBorder" Value="{DynamicResource ComboBox.MouseOver.Button.Background}"/>
                             <Setter Property="BorderBrush" TargetName="splitBorder" Value="{DynamicResource ComboBox.MouseOver.Button.Border}"/>
                         </Trigger>
+                        <Trigger Property="IsKeyboardFocusWithin" Value="true">
+                            <Setter Property="Fill" TargetName="arrow" Value="{DynamicResource ComboBox.MouseOver.Glyph}"/>
+                            <Setter Property="Background" TargetName="templateRoot" Value="{DynamicResource ComboBox.MouseOver.Background}"/>
+                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="{DynamicResource ComboBox.MouseOver.Border}"/>
+                            <Setter Property="Background" TargetName="splitBorder" Value="{DynamicResource ComboBox.MouseOver.Button.Background}"/>
+                            <Setter Property="BorderBrush" TargetName="splitBorder" Value="{DynamicResource ComboBox.MouseOver.Button.Border}"/>
+                        </Trigger>
                         <Trigger Property="IsChecked" Value="true">
                             <!-- TODO: This seems to not update at the point where the button is pressed but after the combo box closes again -->
                             <Setter Property="Fill" TargetName="arrow" Value="{DynamicResource ComboBox.Pressed.Glyph}"/>
@@ -168,7 +166,9 @@
         </ControlTemplate.Triggers>
     </ControlTemplate>
     <Style TargetType="{x:Type ComboBox}">
-        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
+        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
+        <Setter Property="Focusable" Value="False"/>
+        <Setter Property="IsTabStop" Value="False"/>
         <Setter Property="Background" Value="{DynamicResource ComboBox.Static.Background}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource ComboBox.Static.Border}"/>
         <Setter Property="Foreground" Value="{DynamicResource EnvironmentToolWindowText}"/>

diff --git a/src/Gemini/Themes/VS2013/Controls/Focus.xaml b/src/Gemini/Themes/VS2013/Controls/Focus.xaml
@@ -0,0 +1,16 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Style x:Key="GeminiFocusVisualStyle">
+        <Setter Property="Control.Template">
+            <Setter.Value>
+                <ControlTemplate>
+                    <Rectangle Margin="2"
+                               StrokeThickness="1"
+                               Stroke="{DynamicResource FocusStyle.Brush}"
+                               StrokeDashArray="1 2"
+                               SnapsToDevicePixels="True" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
diff --git a/src/Gemini/Themes/VS2013/Controls/Merged.xaml b/src/Gemini/Themes/VS2013/Controls/Merged.xaml
@@ -6,6 +6,7 @@
         <ResourceDictionary Source="ColorCanvas.xaml" />
         <ResourceDictionary Source="ColorPicker.xaml" />
         <ResourceDictionary Source="ComboBox.xaml" />
+        <ResourceDictionary Source="Focus.xaml" />
         <ResourceDictionary Source="Label.xaml" />
         <ResourceDictionary Source="Menu.xaml" />
         <ResourceDictionary Source="ScrollBar.xaml" />

diff --git a/src/Gemini/Themes/VS2013/Controls/ScrollBar.xaml b/src/Gemini/Themes/VS2013/Controls/ScrollBar.xaml
@@ -1,17 +1,8 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:local="clr-namespace:InteractiveAsia.OptiREMOTE">
-    <Style x:Key="FocusVisual">
-        <Setter Property="Control.Template">
-            <Setter.Value>
-                <ControlTemplate>
-                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
     <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
-        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource GeminiFocusVisual}"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="HorizontalContentAlignment" Value="Center"/>
         <Setter Property="VerticalContentAlignment" Value="Center"/>

diff --git a/src/Gemini/Themes/VS2013/DarkTheme.xaml b/src/Gemini/Themes/VS2013/DarkTheme.xaml
@@ -239,4 +239,7 @@
     <!-- Label -->
     <SolidColorBrush x:Key="Label.Static.Text" Color="#F1F1F1" />
     <SolidColorBrush x:Key="Label.Disabled.Text" Color="#434346" />
+
+    <!-- Focus style -->
+    <SolidColorBrush x:Key="FocusStyle.Brush" Color="#F1F1F1" />
 </ResourceDictionary>
diff --git a/src/Gemini/Themes/VS2013/LightTheme.xaml b/src/Gemini/Themes/VS2013/LightTheme.xaml
@@ -239,4 +239,7 @@
     <!-- Label -->
     <SolidColorBrush x:Key="Label.Static.Text" Color="#1E1E1E" />
     <SolidColorBrush x:Key="Label.Disabled.Text" Color="#CCCEDB" />
+
+    <!-- Focus style -->
+    <SolidColorBrush x:Key="FocusStyle.Brush" Color="#1E1E1E" />
 </ResourceDictionary>