Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced FocusVisual for various controls #1112

Merged
merged 7 commits into from
Mar 16, 2023
Merged

Enhanced FocusVisual for various controls #1112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
32df1c9
Update the FocusVisualStyle for components to use a more clear indic…
cbra-caa Mar 6, 2023
5d7914a
Update the border for text components to use a more clear indicator t…
cbra-caa Mar 6, 2023
fab1d10
Use DynamicResource instead of static for styles so they can be overw…
cbra-caa Mar 10, 2023
9abfc66
QuickAccessItems now use the tight style to match their spacing
cbra-caa Mar 10, 2023
5fe293c
Changed the visual marking of the RibbonTabItem to follow Office flow…
cbra-caa Mar 10, 2023
2c6b3ea
Tighten up the focusvisual style to only be within the control - and …
cbra-caa Mar 10, 2023
e64467d
Merge branch 'develop' into focusvisual
cbra-caa Mar 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions Fluent.Ribbon/Controls/QuickAccessMenuItem.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
4 changes: 2 additions & 2 deletions Fluent.Ribbon/Themes/Controls/BackstageTabControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion Fluent.Ribbon/Themes/Controls/BackstageTabItem.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
1 change: 1 addition & 0 deletions Fluent.Ribbon/Themes/Controls/Button.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions Fluent.Ribbon/Themes/Controls/CheckBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
21 changes: 18 additions & 3 deletions Fluent.Ribbon/Themes/Controls/ComboBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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" />
Expand All @@ -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}" />
Expand Down
1 change: 1 addition & 0 deletions Fluent.Ribbon/Themes/Controls/ComboBoxItem.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions Fluent.Ribbon/Themes/Controls/DropDownButton.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
17 changes: 17 additions & 0 deletions ...bbon/Themes/Controls/EmptyFocusStyle.xaml → ...t.Ribbon/Themes/Controls/FocusStyles.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
2 changes: 1 addition & 1 deletion Fluent.Ribbon/Themes/Controls/GalleryItem.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions Fluent.Ribbon/Themes/Controls/MenuItem.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
18 changes: 1 addition & 17 deletions Fluent.Ribbon/Themes/Controls/RadioButton.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
1 change: 1 addition & 0 deletions Fluent.Ribbon/Themes/Controls/RibbonGroupBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions Fluent.Ribbon/Themes/Controls/RibbonTabItem.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
6 changes: 3 additions & 3 deletions Fluent.Ribbon/Themes/Controls/RibbonTextBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions Fluent.Ribbon/Themes/Controls/Spinner.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 2 additions & 0 deletions Fluent.Ribbon/Themes/Controls/SplitButton.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions Fluent.Ribbon/Themes/Controls/ToggleButton.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions Fluent.Ribbon/Themes/Themes/Theme.Template.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />

Expand Down