Segmented Control Items Color Animation Issue

[HEIC-to-JPEG-Dev]

Describe the bug

If the SegmentedItems have a background set. When the cursor goes from one item to another, they flash different gradients. I'm assuming there is a PointerExit/Enter and a hidden border that's causing it.

Steps to reproduce

Example XAML

<controls:Segmented 
	Margin="0,40,0,0" HorizontalAlignment="Center" VerticalAlignment="Top"
	Style="{StaticResource ButtonSegmentedStyle}" 
	BorderThickness="0" BorderBrush="{ThemeResource CardStrokeColorDefault}" 
	SelectedIndex="0" SelectionMode="Single" >

	<controls:SegmentedItem Content="Button1" Width="120"	Height="32" Padding="16,2,16,4" IsTabStop="False" Background="{ThemeResource SystemFillColorSuccessBackground}" Margin="0,0,4,0" />
	<controls:SegmentedItem Content="Button2" Width="120"	Height="32" Padding="16,2,16,4" IsTabStop="False" Background="{ThemeResource SystemFillColorSuccessBackground}" Margin="0,0,4,0" />
	<controls:SegmentedItem Content="Button3" Width="120"	Height="32" Padding="16,2,16,4" IsTabStop="False" Background="{ThemeResource SystemFillColorSuccessBackground}" Margin="0,0,4,0" />

</controls:Segmented>

Expected behavior

The controls should behave the same regardless of any background they have.

Screenshots

The "flashing" is not possible to capture in a screenshot

Code Platform

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 10 21H2 (Build 19044)
• Windows 10 22H2 (Build 19045)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Windows 10, version 2104 (Build 20348)
• Windows 11, version 22H2 (Build 22000)
• Other (specify)

Other SDK version

No response

Visual Studio Version

Preview

Visual Studio Build Number

Version 17.9.0 Preview 2.0

Device form factor

Desktop

Additional context

No response

Help us help you

No, I'm unable to contribute a solution.

[AndrewKeepCoding]

I'm able to reproduce this issue:

Recording.2025-12-22.160229.mp4

It seems that the BackgroundTransition in following code is causing the flashing. It's likely conflicting with the VisualState change.

<Grid x:Name="PART_Root"
        VerticalAlignment="{TemplateBinding VerticalAlignment}"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        Control.IsTemplateFocusTarget="True"
        CornerRadius="{TemplateBinding CornerRadius}">
    <win:Grid.BackgroundTransition>
        <win:BrushTransition Duration="0:0:0.083" />
    </win:Grid.BackgroundTransition>

[AndrewKeepCoding]

We can expose a new resource to be able to override the BackgroundTransition:

SegmentedItem.xaml

<win:BrushTransition x:Key="SegmentedItemBackgroundBrushTransition" Duration="0:0:0.083" />

and just override it:

<controls:Segmented SelectedIndex="0" SelectionMode="Single">
    <controls:Segmented.Resources>
        <win:BrushTransition x:Key="SegmentedItemBackgroundBrushTransition" Duration="0:0:0.000" />
    </controls:Segmented.Resources>
    <controls:SegmentedItem
        Background="Blue"
        Content="Item 1"
        Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
    <controls:SegmentedItem
        Background="Blue"
        Content="Item 2"
        Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
    <controls:SegmentedItem
        Background="Blue"
        Content="Item 3 with a long label"
        Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
    <controls:SegmentedItem
        Background="Blue"
        Content="Item 4"
        Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
</controls:Segmented>

[AndrewKeepCoding]

Can I go ahead and create a PR for this?
FYI @Arlodotexe @michael-hawker

[michael-hawker]

FYI @niels9001 in case he has any insights too from creating the control.