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 4 commits
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
2 changes: 1 addition & 1 deletion 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 All @@ -37,7 +38,6 @@
<Run>
This sample requires a later version of Windows to be fully functional. Learn more about version adaptive apps:
</Run>
<Hyperlink NavigateUri="https://docs.microsoft.com/windows/uwp/debug-test-perf/version-adaptive-apps">https://docs.microsoft.com/windows/uwp/debug-test-perf/version-adaptive-apps</Hyperlink>
</TextBlock>

<Border Grid.Row="2" CornerRadius="8">
Expand Down
Loading
Loading