Skip to content

[STYLE] Updated focus visuals #282

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

Open
mou-haz wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[STYLE] Updated focus visuals #282

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
288b8b8
Improved focus visuals
mou-haz Jul 11, 2025
96b1018
calendarview tab focus visuals
mou-haz Sep 18, 2025
0f39d51
CalendarView keyboard focus behavior
mou-haz Sep 18, 2025
4a29435
update ErrorTextBlock to match winui
mou-haz Sep 23, 2025
40c9a03
fix: revert settingsexpander to using ElevationBorder
mou-haz Nov 4, 2025
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
7 changes: 4 additions & 3 deletions ...UI.WPF.Modern.Controls/Controls/Community/SettingsControls/SettingsCard/SettingsCard.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
</ResourceDictionary>

</ControlTemplate.Resources>
<ui:ElevationBorder x:Name="PART_RootBorder"
<Border x:Name="PART_RootBorder"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}"
MaxWidth="{TemplateBinding MaxWidth}"
Expand All @@ -88,7 +88,8 @@
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding ui:ControlHelper.CornerRadius}">
CornerRadius="{TemplateBinding ui:ControlHelper.CornerRadius}"
ui:FocusVisualHelper.IsTemplateFocusTarget="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<ui:VisualStateGroupListener.Listener>
Expand Down Expand Up @@ -382,7 +383,7 @@
ToolTipService.ToolTip="{TemplateBinding ActionIconToolTip}" />
</Viewbox>
</Grid>
</ui:ElevationBorder>
</Border>


<ControlTemplate.Triggers>
Expand Down
7 changes: 4 additions & 3 deletions ...odern.Controls/Controls/Community/SettingsControls/SettingsExpander/SettingsExpander.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,14 @@
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">

<ui:ElevationBorder
<Border
x:Name="Background"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding chelper:ControlHelper.CornerRadius}"
SnapsToDevicePixels="True">
SnapsToDevicePixels="True"
ui:FocusVisualHelper.IsTemplateFocusTarget="True">
<Border
x:Name="Border"
Padding="{TemplateBinding Padding}"
Expand Down Expand Up @@ -116,7 +117,7 @@
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

</ui:ElevationBorder>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Background" Property="Background" Value="{DynamicResource ButtonBackgroundPointerOver}" />
Expand Down
8 changes: 5 additions & 3 deletions source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBar/CommandBar.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
-->
<ContentControl
x:Name="ContentControl"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Expand Down Expand Up @@ -76,14 +77,15 @@
IsChecked="{Binding Path=IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
IsEnabled="{TemplateBinding HasOverflowItems}"
Style="{DynamicResource EllipsisButton}"
ui:FocusVisualHelper.IsTemplateFocusTarget="True"
Visibility="{TemplateBinding EffectiveOverflowButtonVisibility}">
<ui:FontIcon
x:Name="EllipsisIcon"
Height="{DynamicResource AppBarExpandButtonCircleDiameter}"
VerticalAlignment="Center"
FontFamily="{DynamicResource FluentSystemIcons}"
FontFamily="{DynamicResource SymbolThemeFontFamily}"
FontSize="20"
Glyph="&#xE826;" />
Glyph="&#xE712;" />
</ToggleButton>
<Rectangle
x:Name="HighContrastBorder"
Expand Down Expand Up @@ -129,6 +131,7 @@
</primitives:CommandBarOverflowPresenter.Resources>
<primitives:CommandBarOverflowPanel
x:Name="PART_ToolBarOverflowPanel"
Margin="{DynamicResource CommandBarOverflowPresenterMargin}"
FocusVisualStyle="{x:Null}"
Focusable="true"
KeyboardNavigation.DirectionalNavigation="Cycle"
Expand Down Expand Up @@ -210,7 +213,6 @@
SnapsToDevicePixels="True">
<Border Padding="{TemplateBinding Padding}" CornerRadius="{TemplateBinding CornerRadius}">
<ui:ScrollViewerEx
Padding="{DynamicResource CommandBarOverflowPresenterMargin}"
Content="{TemplateBinding Content}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Expand Down
1 change: 1 addition & 0 deletions source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/HyperlinkButton/HyperlinkButton.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding ui:ControlHelper.CornerRadius}"
ui:FocusVisualHelper.IsTemplateFocusTarget="True"
SnapsToDevicePixels="True">
<Border
x:Name="Border"
Expand Down
1 change: 1 addition & 0 deletions source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/RadioMenuItem/RadioMenuItem.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutItemRevealBorderThickness}" />
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
<Setter Property="Padding" Value="{DynamicResource MenuFlyoutItemThemePadding}" />
<Setter Property="ui:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
Expand Down
6 changes: 3 additions & 3 deletions source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/TimePicker/TimePicker.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
<Setter Property="UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" />
<Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="0,0,0,5" />
<Setter Property="ui:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="MaxHeight" Value="{DynamicResource LoopingSelectorMaxHeight}"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
Expand All @@ -99,7 +99,7 @@
Focusable="false"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Hidden">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="0,-3,0,0"/>
</ScrollViewer>
<RepeatButton
x:Name="UpButton"
Expand Down Expand Up @@ -394,7 +394,7 @@
Grid.ColumnSpan="7"
Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}"
IsHitTestVisible="False"
Margin="4,6,4,0"
Margin="4,2,4,2"
VerticalAlignment="Center"
BorderThickness="0"
CornerRadius="{TemplateBinding CornerRadius}"
Expand Down
4 changes: 3 additions & 1 deletion source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/ToggleSwitch/ToggleSwitch.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
<Setter Property="MinWidth" Value="{DynamicResource ToggleSwitchThemeMinWidth}" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
<Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="-7,-3,-7,-3" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ToggleSwitch">
Expand Down Expand Up @@ -123,6 +124,8 @@
Visibility="Collapsed" />
<Grid
Grid.Row="1"
ui:FocusVisualHelper.IsTemplateFocusTarget="True"
ui:ControlHelper.CornerRadius="{TemplateBinding CornerRadius}"
HorizontalAlignment="Left"
VerticalAlignment="Top">

Expand All @@ -144,7 +147,6 @@
Grid.RowSpan="3"
Grid.ColumnSpan="5"
Margin="0,5"
ui:FocusVisualHelper.IsTemplateFocusTarget="True"
Background="{DynamicResource ToggleSwitchContainerBackground}"
CornerRadius="{TemplateBinding CornerRadius}" />
<ui:ContentPresenterEx
Expand Down
1 change: 1 addition & 0 deletions source/iNKORE.UI.WPF.Modern.Gallery/Controls/ControlExample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<sys:Double x:Key="ExampleMaxWidth">1000</sys:Double>

<Style TargetType="local:ControlExample">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ControlExample">
Expand Down
80 changes: 76 additions & 4 deletions source/iNKORE.UI.WPF.Modern/Controls/Helpers/FocusVisualHelper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;
using iNKORE.UI.WPF.Helpers;

namespace iNKORE.UI.WPF.Modern.Controls.Helpers
{
Expand Down Expand Up @@ -163,6 +164,20 @@ public static void SetFocusVisualSecondaryThickness(FrameworkElement element, Th

#endregion

#region FocusVisualPrimaryCornerRadius

public static CornerRadius GetFocusVisualPrimaryCornerRadius(FrameworkElement element) => (CornerRadius)element.GetValue(FocusVisualPrimaryCornerRadiusProperty);
private static void SetFocusVisualPrimaryCornerRadius(FrameworkElement element, CornerRadius value) => element.SetValue(FocusVisualPrimaryCornerRadiusProperty, value);

public static readonly DependencyProperty FocusVisualPrimaryCornerRadiusProperty =
DependencyProperty.RegisterAttached(
"FocusVisualPrimaryCornerRadius",
typeof(CornerRadius),
typeof(FocusVisualHelper),
new FrameworkPropertyMetadata(new CornerRadius(0)));

#endregion

#region FocusVisualMargin

/// <summary>
Expand Down Expand Up @@ -393,7 +408,7 @@ static void ShowFocusVisual(Control control, FrameworkElement target)
{
HideFocusVisual();

AdornerLayer adornerlayer = AdornerLayer.GetAdornerLayer(target);
AdornerLayer adornerlayer = GetAdornerLayer(target);
if (adornerlayer == null)
return;

Expand All @@ -414,6 +429,17 @@ static void ShowFocusVisual(Control control, FrameworkElement target)
}
}

static AdornerLayer? GetAdornerLayer(FrameworkElement element)
{
var scrollPresenter = element.FindAscendant<ScrollContentPresenter>();
if (scrollPresenter?.Parent is AdornerDecorator adornerDecorator)
{
return adornerDecorator.AdornerLayer;
}

return AdornerLayer.GetAdornerLayer(element);
}

static void OnControlIsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
((Control)sender).IsVisibleChanged -= OnControlIsVisibleChanged;
Expand Down Expand Up @@ -483,11 +509,13 @@ private static void OnFocusVisualIsVisibleChanged(object sender, DependencyPrope
}
else
{
var focusVisualMargin = GetFocusVisualMargin(focusedElement);
ApplyCornerRadiusToFocusVisual(focusVisual, focusedElement, focusVisualMargin);
TransferValue(focusedElement, focusVisual, FocusVisualPrimaryBrushProperty);
TransferValue(focusedElement, focusVisual, FocusVisualPrimaryThicknessProperty);
TransferValue(focusedElement, focusVisual, FocusVisualSecondaryBrushProperty);
TransferValue(focusedElement, focusVisual, FocusVisualSecondaryThicknessProperty);
focusVisual.Margin = GetFocusVisualMargin(focusedElement);
focusVisual.Margin = focusVisualMargin;
}

SetFocusedElement(focusVisual, focusedElement);
Expand All @@ -510,6 +538,39 @@ private static void OnFocusVisualIsVisibleChanged(object sender, DependencyPrope
}
}

private static void ApplyCornerRadiusToFocusVisual(Control focusVisual, FrameworkElement focusedElement, Thickness focusVisualMargin)
{
var cornerRadius = GetCornerRadiusForFocusedElement(focusedElement);
if (cornerRadius is CornerRadius focusedCornerRadius && focusedCornerRadius != default)
{
var focusVisualCornerRadius = new CornerRadius(
GetSumIfSourceIsNonZero(focusedCornerRadius.TopLeft, -(focusVisualMargin.Left + focusVisualMargin.Top) / 2),
GetSumIfSourceIsNonZero(focusedCornerRadius.TopRight, -(focusVisualMargin.Right + focusVisualMargin.Top) / 2),
GetSumIfSourceIsNonZero(focusedCornerRadius.BottomLeft, -(focusVisualMargin.Left + focusVisualMargin.Bottom) / 2),
GetSumIfSourceIsNonZero(focusedCornerRadius.BottomRight, -(focusVisualMargin.Right + focusVisualMargin.Bottom) / 2));

ControlHelper.SetCornerRadius(focusVisual, focusVisualCornerRadius);
var topLeftRadius = GetSumIfSourceIsNonZero(focusVisualCornerRadius.TopLeft, GetFocusVisualSecondaryThickness(focusedElement).Left);
var topRightRadius = GetSumIfSourceIsNonZero(focusVisualCornerRadius.TopRight, GetFocusVisualSecondaryThickness(focusedElement).Right);
var bottomRightRadius = GetSumIfSourceIsNonZero(focusVisualCornerRadius.BottomLeft, GetFocusVisualSecondaryThickness(focusedElement).Left);
var bottomLeftRadius = GetSumIfSourceIsNonZero(focusVisualCornerRadius.BottomRight, GetFocusVisualSecondaryThickness(focusedElement).Right);

SetFocusVisualPrimaryCornerRadius(focusVisual, new CornerRadius(topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius));
}
}

private static CornerRadius? GetCornerRadiusForFocusedElement(FrameworkElement focusedElement)
{
var cornerRadiusTarget = focusedElement.GetValue(TemplateFocusTargetProperty) as FrameworkElement;
cornerRadiusTarget ??= focusedElement;
return cornerRadiusTarget switch
{
var _ when cornerRadiusTarget.GetValue(Border.CornerRadiusProperty) is CornerRadius borderResult && borderResult != default => borderResult,
var _ when cornerRadiusTarget.GetValue(ControlHelper.CornerRadiusProperty) is CornerRadius controlResult => controlResult,
_ => null
};
}

private static void TransferValue(DependencyObject source, DependencyObject target, DependencyProperty dp)
{
if (!source.HasDefaultValue(dp))
Expand All @@ -518,6 +579,12 @@ private static void TransferValue(DependencyObject source, DependencyObject targ
}
}

private static double GetSumIfSourceIsNonZero(double source, double adjustment) => source switch
{
0 => 0,
_ => source + adjustment
};

private sealed class FocusVisualAdorner : Adorner
{
public FocusVisualAdorner(Control focusedElement, UIElement adornedElement, Style focusVisualStyle) : base(adornedElement)
Expand All @@ -531,13 +598,18 @@ public FocusVisualAdorner(Control focusedElement, UIElement adornedElement, Styl
Control control = new Control();
SetIsSystemFocusVisual(control, false);
control.Style = focusVisualStyle;
control.Margin = GetFocusVisualMargin(focusedElement);

var focusVisualMargin = GetFocusVisualMargin(focusedElement);
control.Margin = focusVisualMargin;

ApplyCornerRadiusToFocusVisual(control, focusedElement, focusVisualMargin);

TransferValue(focusedElement, control, FocusVisualPrimaryBrushProperty);
TransferValue(focusedElement, control, FocusVisualPrimaryThicknessProperty);
TransferValue(focusedElement, control, FocusVisualSecondaryBrushProperty);
TransferValue(focusedElement, control, FocusVisualSecondaryThicknessProperty);
_adorderChild = control;
IsClipEnabled = true;
IsClipEnabled = false;
IsHitTestVisible = false;
IsEnabled = false;
AddVisualChild(_adorderChild);
Expand Down
Loading
Loading