Merge pull request #1112 from cBrain-dk/focusvisual

Focusvisual
fluentribbon · Mar 16, 2023 · 1a320c1 · 1a320c1
2 parents 7136d33 + e64467d
commit 1a320c1
Show file tree

Hide file tree

Showing 19 changed files with 69 additions and 27 deletions.
diff --git a/Fluent.Ribbon/Controls/QuickAccessMenuItem.cs b/Fluent.Ribbon/Controls/QuickAccessMenuItem.cs
@@ -237,6 +237,11 @@ public static bool IsSupported(UIElement? element)
             RibbonControl.Bind(element, result, nameof(UIElement.IsEnabled), UIElement.IsEnabledProperty, BindingMode.OneWay);
         }
 
+        if (result.TryFindResource("Fluent.Ribbon.Styles.FocusVisual") is Style tightFocusVisual)
+        {
+            result.FocusVisualStyle = tightFocusVisual;
+        }
+
         return result;
     }
 

diff --git a/Fluent.Ribbon/Themes/Controls/BackstageTabControl.xaml b/Fluent.Ribbon/Themes/Controls/BackstageTabControl.xaml
@@ -58,7 +58,7 @@
            TargetType="{x:Type Fluent:Button}">
         <Setter Property="Fluent:RibbonProperties.IconSize" Value="Small" />
         <Setter Property="Fluent:RibbonProperties.MouseOverBackground" Value="{DynamicResource Fluent.Ribbon.Brushes.BackstageTabItem.MouseOver.Background}" />
-        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.ControlStyleEmptyFocus}" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Foreground" Value="{DynamicResource Fluent.Ribbon.Brushes.IdealForeground}" />
         <Setter Property="Height" Value="38" />
         <Setter Property="Margin" Value="0" />
@@ -114,7 +114,7 @@
     <Style x:Key="Fluent.Ribbon.Styles.BackstageBackButton"
            TargetType="{x:Type Button}">
         <Setter Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.Backstage.BackButton.Background}" />
-        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.ControlStyleEmptyFocus}" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Foreground" Value="{DynamicResource Fluent.Ribbon.Brushes.Backstage.BackButton.Foreground}" />
         <Setter Property="Height" Value="48" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />

diff --git a/Fluent.Ribbon/Themes/Controls/BackstageTabItem.xaml b/Fluent.Ribbon/Themes/Controls/BackstageTabItem.xaml
@@ -65,7 +65,7 @@
         <Setter Property="Background" Value="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Fluent:BackstageTabControl}}}" />
         <Setter Property="Fluent:RibbonProperties.IsSelectedBackground" Value="{DynamicResource Fluent.Ribbon.Brushes.BackstageTabItem.Selected.Background}" />
         <Setter Property="Fluent:RibbonProperties.MouseOverBackground" Value="{DynamicResource Fluent.Ribbon.Brushes.BackstageTabItem.MouseOver.Background}" />
-        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.ControlStyleEmptyFocus}" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Foreground" Value="{DynamicResource Fluent.Ribbon.Brushes.Black}" />
         <Setter Property="Height" Value="38" />
         <Setter Property="Margin" Value="0" />

diff --git a/Fluent.Ribbon/Themes/Controls/Button.xaml b/Fluent.Ribbon/Themes/Controls/Button.xaml
@@ -249,6 +249,7 @@
         <Setter Property="HeaderTemplate" Value="{DynamicResource Fluent.Ribbon.DataTemplates.Button.Header}" />
         <Setter Property="Height" Value="68" />
         <Setter Property="SnapsToDevicePixels" Value="False" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.Button}" />
         <Setter Property="Width" Value="Auto" />
         <Style.Triggers>

diff --git a/Fluent.Ribbon/Themes/Controls/CheckBox.xaml b/Fluent.Ribbon/Themes/Controls/CheckBox.xaml
@@ -238,6 +238,7 @@
         <Setter Property="Margin" Value="2 2 2 2" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.RibbonCheckBox}" />
         <Setter Property="ToolTipService.ShowDuration" Value="30000" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Style.Triggers>
             <Trigger Property="IsSimplified" Value="True">
                 <Setter Property="Fluent:RibbonProperties.IconSize" Value="Medium" />

diff --git a/Fluent.Ribbon/Themes/Controls/ComboBox.xaml b/Fluent.Ribbon/Themes/Controls/ComboBox.xaml
@@ -260,11 +260,26 @@
                 <Setter TargetName="PART_EditableTextBox" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.MouseOver.Background}" />
             </Trigger>
 
-            <Trigger Property="IsKeyboardFocusWithin" Value="True">
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="IsKeyboardFocusWithin" Value="True" />
+                    <Condition Property="IsEditable" Value="False" />
+                </MultiTrigger.Conditions>
                 <Setter TargetName="PART_ContentBorder" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.Button.MouseOver.Background}" />
                 <Setter TargetName="PART_ContentBorder" Property="BorderBrush" Value="{DynamicResource Fluent.Ribbon.Brushes.Button.MouseOver.Border}" />
                 <Setter TargetName="PART_EditableTextBox" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.MouseOver.Background}" />
-            </Trigger>
+            </MultiTrigger>
+
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="IsKeyboardFocusWithin" Value="True" />
+                    <Condition Property="IsEditable" Value="True" />
+                </MultiTrigger.Conditions>
+                <Setter TargetName="PART_ContentBorder" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.Focus.Background}" />
+                <Setter TargetName="PART_ContentBorder" Property="BorderBrush" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.Focus.Border}" />
+                <Setter TargetName="PART_EditableTextBox" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.Focus.Background}" />
+            </MultiTrigger>
+
             <Trigger Property="IsGrouping" Value="true">
                 <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
             </Trigger>
@@ -285,7 +300,6 @@
 
     <Style TargetType="{x:Type Fluent:ComboBox}">
         <Setter Property="Fluent:RibbonProperties.IconSize" Value="Small" />
-        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.ControlStyleEmptyFocus}" />
         <Setter Property="Foreground" Value="{DynamicResource Fluent.Ribbon.Brushes.LabelText}" />
         <Setter Property="HeaderTemplate" Value="{DynamicResource Fluent.Ribbon.DataTemplates.ComboBox.Header}" />
         <Setter Property="Height" Value="22" />
@@ -295,6 +309,7 @@
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.RibbonCombobox}" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Style.Triggers>
             <Trigger Property="ItemContainerStyleSelector" Value="{x:Null}">
                 <Setter Property="ItemContainerStyle" Value="{DynamicResource Fluent.Ribbon.Styles.ComboBoxItem}" />

diff --git a/Fluent.Ribbon/Themes/Controls/ComboBoxItem.xaml b/Fluent.Ribbon/Themes/Controls/ComboBoxItem.xaml
@@ -36,5 +36,6 @@
            TargetType="{x:Type ComboBoxItem}">
         <Setter Property="Padding" Value="3" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.ComboBoxItem}" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
     </Style>
 </ResourceDictionary>
diff --git a/Fluent.Ribbon/Themes/Controls/DropDownButton.xaml b/Fluent.Ribbon/Themes/Controls/DropDownButton.xaml
@@ -56,6 +56,7 @@
         <Setter Property="SnapsToDevicePixels" Value="False" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.RibbonDropDownButton}" />
         <Setter Property="Width" Value="Auto" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Style.Triggers>
             <Trigger Property="Size" Value="Large">
                 <Setter Property="Fluent:RibbonProperties.IconSize" Value="Large" />

diff --git a/...bbon/Themes/Controls/EmptyFocusStyle.xaml → ...t.Ribbon/Themes/Controls/FocusStyles.xaml b/...bbon/Themes/Controls/EmptyFocusStyle.xaml → ...t.Ribbon/Themes/Controls/FocusStyles.xaml
@@ -4,6 +4,7 @@
            TargetType="{x:Type Control}">
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.ControlFocusEmpty}" />
     </Style>
+
     <ControlTemplate x:Key="Fluent.Ribbon.Templates.ControlFocusEmpty"
                      TargetType="{x:Type Control}">
         <Rectangle Stroke="Transparent">
@@ -12,4 +13,20 @@
             </Rectangle.Fill>
         </Rectangle>
     </ControlTemplate>
+
+    <Style x:Key="Fluent.Ribbon.Styles.FocusVisual.Border" TargetType="{x:Type Rectangle}">
+        <Setter Property="StrokeThickness" Value="2" />
+        <Setter Property="Stroke" Value="{DynamicResource Fluent.Ribbon.Brushes.Black}" />
+        <Setter Property="SnapsToDevicePixels" Value="True" />
+    </Style>
+
+    <Style x:Key="Fluent.Ribbon.Styles.FocusVisual">
+        <Setter Property="Control.Template">
+            <Setter.Value>
+                <ControlTemplate>
+                    <Rectangle Style="{DynamicResource Fluent.Ribbon.Styles.FocusVisual.Border}" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>
diff --git a/Fluent.Ribbon/Themes/Controls/GalleryItem.xaml b/Fluent.Ribbon/Themes/Controls/GalleryItem.xaml
@@ -49,7 +49,7 @@
 
     <Style x:Key="Fluent.Ribbon.Styles.GalleryItem"
            TargetType="{x:Type Fluent:GalleryItem}">
-        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.GalleryItem}" />
     </Style>
 </ResourceDictionary>
diff --git a/Fluent.Ribbon/Themes/Controls/MenuItem.xaml b/Fluent.Ribbon/Themes/Controls/MenuItem.xaml
@@ -467,6 +467,7 @@
         <Setter Property="Foreground" Value="{DynamicResource Fluent.Ribbon.Brushes.LabelText}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.MenuItem}" />
         <Style.Triggers>
             <MultiTrigger>

diff --git a/Fluent.Ribbon/Themes/Controls/RadioButton.xaml b/Fluent.Ribbon/Themes/Controls/RadioButton.xaml
@@ -182,23 +182,7 @@
         <Setter Property="ContentTemplate" Value="{Binding Path=HeaderTemplate, RelativeSource={RelativeSource Self}, Mode=TwoWay}" />
         <Setter Property="ContentTemplateSelector" Value="{Binding Path=HeaderTemplateSelector, RelativeSource={RelativeSource Self}, Mode=TwoWay}" />
         <Setter Property="Fluent:RibbonProperties.IconSize" Value="Small" />
-        <Setter Property="FocusVisualStyle">
-            <Setter.Value>
-                <Style>
-                    <Setter Property="Control.Template">
-                        <Setter.Value>
-                            <ControlTemplate>
-                                <Rectangle Margin="1"
-                                           SnapsToDevicePixels="true"
-                                           Stroke="{DynamicResource Fluent.Ribbon.Brushes.Black}"
-                                           StrokeDashArray="1 2"
-                                           StrokeThickness="1" />
-                            </ControlTemplate>
-                        </Setter.Value>
-                    </Setter>
-                </Style>
-            </Setter.Value>
-        </Setter>
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Foreground" Value="{DynamicResource Fluent.Ribbon.Brushes.LabelText}" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.RibbonRadioButton}" />
         <Setter Property="ToolTipService.ShowDuration" Value="30000" />

diff --git a/Fluent.Ribbon/Themes/Controls/RibbonGroupBox.xaml b/Fluent.Ribbon/Themes/Controls/RibbonGroupBox.xaml
@@ -66,6 +66,7 @@
         <Setter Property="HeaderTemplateSelector" Value="{Binding Source={x:Static templateSelectors:RibbonGroupBoxHeaderTemplateSelector.Instance}}" />
         <Setter Property="Height" Value="Auto" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.RibbonGroupBox}" />
         <Setter Property="Width" Value="Auto" />
         <Style.Triggers>

diff --git a/Fluent.Ribbon/Themes/Controls/RibbonTabItem.xaml b/Fluent.Ribbon/Themes/Controls/RibbonTabItem.xaml
@@ -134,6 +134,9 @@
             <Trigger Property="IsSelected" Value="True">
                 <Setter Property="Fluent:RibbonProperties.MouseOverForeground" Value="{DynamicResource Fluent.Ribbon.Brushes.RibbonTabItem.Selected.MouseOver.Foreground}" />
             </Trigger>
+            <Trigger Property="IsKeyboardFocused" Value="True">
+                <Setter Property="ActiveTabBorderBrush" Value="{DynamicResource Fluent.Ribbon.Brushes.Black}" />
+            </Trigger>
             <MultiDataTrigger>
                 <MultiDataTrigger.Conditions>
                     <Condition Binding="{Binding IsContextual, RelativeSource={RelativeSource Self}}" Value="True" />

diff --git a/Fluent.Ribbon/Themes/Controls/RibbonTextBox.xaml b/Fluent.Ribbon/Themes/Controls/RibbonTextBox.xaml
@@ -78,9 +78,9 @@
                 <Setter TargetName="PART_ContentHost" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.MouseOver.Background}" />
             </Trigger>
             <Trigger Property="IsKeyboardFocusWithin" Value="True">
-                <Setter TargetName="PART_ContentBorder" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.MouseOver.Background}" />
-                <Setter TargetName="PART_ContentBorder" Property="BorderBrush" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.MouseOver.Border}" />
-                <Setter TargetName="PART_ContentHost" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.MouseOver.Background}" />
+                <Setter TargetName="PART_ContentBorder" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.Focus.Background}" />
+                <Setter TargetName="PART_ContentBorder" Property="BorderBrush" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.Focus.Border}" />
+                <Setter TargetName="PART_ContentHost" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.Focus.Background}" />
             </Trigger>
         </ControlTemplate.Triggers>
     </ControlTemplate>

diff --git a/Fluent.Ribbon/Themes/Controls/Spinner.xaml b/Fluent.Ribbon/Themes/Controls/Spinner.xaml
@@ -209,6 +209,13 @@
                 <Setter TargetName="path" Property="Visibility" Value="Visible" />
                 <Setter TargetName="path1" Property="Visibility" Value="Visible" />
             </Trigger>
+            <Trigger Property="IsKeyboardFocusWithin" Value="True">
+                <Setter TargetName="PART_ContentBorder" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.Focus.Background}" />
+                <Setter TargetName="PART_ContentBorder" Property="BorderBrush" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.Focus.Border}" />
+                <Setter TargetName="PART_TextBox" Property="Background" Value="{DynamicResource Fluent.Ribbon.Brushes.TextBox.Focus.Background}" />
+                <Setter TargetName="path" Property="Visibility" Value="Visible" />
+                <Setter TargetName="path1" Property="Visibility" Value="Visible" />
+            </Trigger>
         </ControlTemplate.Triggers>
     </ControlTemplate>
 

diff --git a/Fluent.Ribbon/Themes/Controls/SplitButton.xaml b/Fluent.Ribbon/Themes/Controls/SplitButton.xaml
@@ -13,6 +13,7 @@
         <Setter Property="Height" Value="68" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="SnapsToDevicePixels" Value="False" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.RibbonSplitButton}" />
         <Setter Property="Width" Value="Auto" />
         <Style.Triggers>
@@ -320,6 +321,7 @@
            TargetType="{x:Type Fluent:ToggleButton}">
         <Setter Property="Fluent:KeyTip.AutoPlacement" Value="{Binding Path=(Fluent:KeyTip.AutoPlacement), RelativeSource={RelativeSource AncestorType={x:Type Fluent:SplitButton}}}" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.RibbonInnerButton}" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Style.Triggers>

diff --git a/Fluent.Ribbon/Themes/Controls/ToggleButton.xaml b/Fluent.Ribbon/Themes/Controls/ToggleButton.xaml
@@ -17,6 +17,7 @@
         <Setter Property="Foreground" Value="{DynamicResource Fluent.Ribbon.Brushes.LabelText}" />
         <Setter Property="HeaderTemplate" Value="{DynamicResource Fluent.Ribbon.DataTemplates.Button.Header}" />
         <Setter Property="Height" Value="68" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.FocusVisual}" />
         <Setter Property="Template" Value="{DynamicResource Fluent.Ribbon.Templates.RibbonToggleButton}" />
         <Setter Property="Width" Value="Auto" />
         <Style.Triggers>

diff --git a/Fluent.Ribbon/Themes/Themes/Theme.Template.xaml b/Fluent.Ribbon/Themes/Themes/Theme.Template.xaml
@@ -252,6 +252,8 @@
     <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.TextBox.Selection" Color="{x:Static SystemColors.HighlightColor}" options:Freeze="True" />
     <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.TextBox.MouseOver.Background" Color="{StaticResource Fluent.Ribbon.Colors.White}" options:Freeze="True" />
     <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.TextBox.MouseOver.Border" Color="{StaticResource Fluent.Ribbon.Colors.Accent40}" options:Freeze="True" />
+    <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.TextBox.Focus.Background" Color="{StaticResource Fluent.Ribbon.Colors.White}" options:Freeze="True" />
+    <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.TextBox.Focus.Border" Color="{StaticResource Fluent.Ribbon.Colors.AccentBase}" options:Freeze="True" />
     <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.TextBox.Disabled.Background" Color="{StaticResource Fluent.Ribbon.Colors.Gray10}" options:Freeze="True" />
     <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.TextBox.Disabled.Border" Color="{StaticResource Fluent.Ribbon.Colors.Gray8}" options:Freeze="True" />