Proposal:Will the WinUI team bring other control template styles to the SelectorBar control in the future?

[Gaoyifei1011]

Proposal: Will the WinUI team bring other control template styles to the SelectorBar control in the future?

Summary

Rationale

Currently, in Winui 3 1.5, the WinUI team has added a new SelectorBar control that looks and functions similar to the PivotSegmentedStyle in the Segmented control in the community toolkit. Other control template styles are included in the Segmented control in the community toolkit. Will any other styles be provided for the SelectorBar control in a future release?
目前，在 Winui 3 1.5 时，WinUI 团队新添加了一个 SelectorBar 控件，这个控件的外观和功能类似于社区工具包 Segmented 控件的 PivotSegmentedStyle，在社区工具包的 Segmented 控件还包括其他控件模板样式，未来版本中是否会为 SelectorBar 控件提供 Segmented 控件其他的样式呢？

https://learn.microsoft.com/zh-cn/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.selectorbar?view=windows-app-sdk-1.5

Scope

Capability	Priority
This proposal will allow developers to accomplish W	Must
This proposal will allow end users to accomplish X	Should
This proposal will allow developers to accomplish Y	Could
This proposal will allow end users to accomplish Z	Won't

Important Notes

ScreenShots

Open Questions

[Gaoyifei1011]

I tried to port styles from community toolkit,however it seems that overriding template or styles is not possible. (Mybe bug? Idont know) when i want to edit template i get unhandeled exception crash.

The wrapper it uses internally is not listviewbase but itemsview (winui3 specific)

[ghost1372]

I tried to port styles from community toolkit,however it seems that overriding template or styles is not possible. (Mybe bug? Idont know) when i want to edit template i get unhandeled exception crash.

The wrapper it uses internally is not listviewbase but itemsview (winui3 specific)

I used a copy paste from winui 3 v1.5 source code, give it a try and see is it working or not?
Also i think it is better to mentation this issue in community call discussion page so tomorrow they can answer it.

[Gaoyifei1011]

I used a copy paste from winui 3 v1.5 source code, give it a try and see is it working or not? Also i think it is better to mentation this issue in community call discussion page so tomorrow they can answer it.

Thanks a lot

[ghost1372]

Hi @Gaoyifei1011
I ported CommunityToolkit Segmented Style to SelectorBar 😁
I Added:

• Vertical Style
• MultiSelect

Also we can play with ItemsView Layout and we can add more options (currently ItemsView Layout is StackLayout)

there is two known issue:

• When Selecting Items I feel that the items are moving a little...
• HorizontalAlignment="Stretch" does not working as expected:

invalid Stretch Mode:

this is valid Stretch Mode:

for Stretch Mode there is EqualPanel in CommunityToolkit, But since we are using ItemsView, it seems that we cannot use this panel and I think we should use other layouts.

https://github.com/CommunityToolkit/Windows/blob/7c3a55230711585e581aa10b6b70c9db88f79d18/components/Segmented/src/Segmented/Segmented.xaml#L59

Can you Fix this two Bug?

https://github.com/ghost1372/App5

[Gaoyifei1011]

Hi @Gaoyifei1011 I ported CommunityToolkit Segmented Style to SelectorBar 😁 I Added:

• Vertical Style
• MultiSelect

Also we can play with ItemsView Layout and we can add more options (currently ItemsView Layout is StackLayout)

there is two known issue:

• When Selecting Items I feel that the items are moving a little...
• HorizontalAlignment="Stretch" does not working as expected:

invalid Stretch Mode:

this is valid Stretch Mode:

for Stretch Mode there is EqualPanel in CommunityToolkit, But since we are using ItemsView, it seems that we cannot use this panel and I think we should use other layouts.

https://github.com/CommunityToolkit/Windows/blob/7c3a55230711585e581aa10b6b70c9db88f79d18/components/Segmented/src/Segmented/Segmented.xaml#L59

Can you Fix this two Bug?

https://github.com/ghost1372/App5

Thank you very much for your contribution.
非常感谢您做出的贡献。

I checked the your code, if you want to become which of the following vaild style, you need to modify SelectorBarItem control style, corresponding DefaultSelectorBarItemStyle, Controlling their width and height is not in the SelectorBar control, but in the SelectorBarItem.
我查看了一下您的代码，如果想要变成下面的那种 vaild style，您需要修改 SelectorBarItem控件的Style，对应 DefaultSelectorBarItemStyle，控制它们宽度和高度不在 SelectorBar 控件中，而在 SelectorBarItem中。

This is a simple tweak I made. You can use the real-time visual tree to find the basic controls used inside the control and fine-tune them according to the control template.
这是我简单的做了一个微调。您可以通过实时可视化树来找到该控件内部使用到的基本控件，根据控件模板进行微调。

[ghost1372]

@Gaoyifei1011 can you upload your demo? changing column Width does not work for me🤔

[GuildOfCalamity]

I'm currently testing the SelectorBar and am also interested in reviewing this code. The documentation for the SelectorBar does not currently provide any samples.

I also noticed that SelectorBarItems seem to support Shadow properties, but when trying to set the Translation, the following error occurs:
WMC0612: The XAML Binary Format (XBF) generator reported syntax error '0x09C4' : Property Not Found

              <SelectorBar
                  SelectedItem="{x:Bind ViewModel.BarItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                  <SelectorBar.Resources>
                      <ThemeShadow x:Name="SharedShadow" />
                  </SelectorBar.Resources>
                  <SelectorBarItem
                      Icon="Sync"
                      Shadow="{StaticResource SharedShadow}"
                      Text="1"
                      Translation="0,0,32" />
              </SelectorBar>

[ghost1372]

I'm currently testing the SelectorBar and am also interested in reviewing this code. The documentation for the SelectorBar does not currently provide any samples.

I also noticed that SelectorBarItems seem to support Shadow properties, but when trying to set the Translation, the following error occurs:
WMC0612: The XAML Binary Format (XBF) generator reported syntax error '0x09C4' : Property Not Found

              <SelectorBar
                  SelectedItem="{x:Bind ViewModel.BarItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                  <SelectorBar.Resources>
                      <ThemeShadow x:Name="SharedShadow" />
                  </SelectorBar.Resources>
                  <SelectorBarItem
                      Icon="Sync"
                      Shadow="{StaticResource SharedShadow}"
                      Text="1"
                      Translation="0,0,32" />
              </SelectorBar>

It is better to create a new issue for it.

[Gaoyifei1011]

你能上传你的演示吗？更改列宽对我不起作用🤔

@Gaoyifei1011 can you upload your demo? changing column Width does not work for me🤔

<StackPanel
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Orientation="Vertical"
    Spacing="10">

    <StackPanel.Resources>
        <Style x:Key="SelectorBarItemStyle" TargetType="SelectorBarItem">
            <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
            <Setter Property="Foreground" Value="{ThemeResource SelectorBarItemForeground}" />
            <Setter Property="BorderBrush" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="{StaticResource SelectorBarItemPadding}" />
            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FocusVisualMargin" Value="{ThemeResource SelectorBarItemFocusVisualMargin}" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="MinWidth" Value="300" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="SelectorBarItem">
                        <Grid
                            x:Name="PART_ContainerRoot"
                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <!--  Placeholder for Child UIElement  -->
                            <StackPanel
                                Grid.Column="1"
                                Margin="12,6,12,3"
                                HorizontalAlignment="Center"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Orientation="Horizontal"
                                Spacing="{ThemeResource SelectorBarItemSpacing}">
                                <ContentPresenter
                                    x:Name="PART_IconVisual"
                                    Margin="{ThemeResource SelectorBarItemIconVisualMargin}"
                                    Content="{TemplateBinding Icon}"
                                    Foreground="{TemplateBinding Foreground}"
                                    RenderTransformOrigin="0.5,0.5">
                                    <ContentPresenter.RenderTransform>
                                        <ScaleTransform x:Name="IconTransform" ScaleX="{ThemeResource SelectorBarItemIconScale}" ScaleY="{ThemeResource SelectorBarItemIconScale}" />
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                                <TextBlock
                                    x:Name="PART_TextVisual"
                                    Margin="{ThemeResource SelectorBarItemTextVisualMargin}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontWeight="{TemplateBinding FontWeight}"
                                    Foreground="{TemplateBinding Foreground}"
                                    Text="{TemplateBinding Text}"
                                    TextWrapping="Wrap" />
                            </StackPanel>
                            <Rectangle
                                x:Name="PART_SelectionVisual"
                                Grid.Row="1"
                                Grid.ColumnSpan="2"
                                Margin="{ThemeResource SelectorBarItemSelectionVisualMargin}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Bottom"
                                IsHitTestVisible="False"
                                Opacity="0"
                                RadiusX="0.5"
                                RadiusY="1"
                                Style="{StaticResource SelectorBarItemPill}">
                                <Rectangle.RenderTransform>
                                    <CompositeTransform x:Name="PillTransform" ScaleX="1" />
                                </Rectangle.RenderTransform>
                            </Rectangle>
                            <Rectangle
                                x:Name="PART_CommonVisual"
                                Grid.RowSpan="2"
                                Grid.ColumnSpan="2"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Fill="{ThemeResource SelectorBarItemBackground}"
                                IsHitTestVisible="False"
                                RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
                                Stroke="{ThemeResource SelectorBarItemBorderBrush}"
                                StrokeThickness="{ThemeResource SelectorBarSelectedInnerThickness}" />

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CombinedStates">
                                    <VisualState x:Name="UnselectedNormal" />
                                    <VisualState x:Name="UnselectedPointerOver">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerRoot" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemBackgroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_TextVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="PART_ContainerRoot" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="UnselectedPressed">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerRoot" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemBackgroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_TextVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedNormal">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerRoot" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemBackgroundSelected}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_TextVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundSelected}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundSelected}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PillTransform" Storyboard.TargetProperty="ScaleX">
                                                <SplineDoubleKeyFrame
                                                    KeySpline="0,0,0,1"
                                                    KeyTime="{StaticResource ComboBoxItemScaleAnimationDuration}"
                                                    Value="4" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectionVisual" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame
                                                    KeySpline="0,0,0,1"
                                                    KeyTime="{StaticResource ComboBoxItemScaleAnimationDuration}"
                                                    Value="1" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPointerOver">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_TextVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="PART_ContainerRoot" />
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PillTransform" Storyboard.TargetProperty="ScaleX">
                                                <SplineDoubleKeyFrame
                                                    KeySpline="0,0,0,1"
                                                    KeyTime="{StaticResource ComboBoxItemScaleAnimationDuration}"
                                                    Value="4" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectionVisual" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame
                                                    KeySpline="0,0,0,1"
                                                    KeyTime="{StaticResource ComboBoxItemScaleAnimationDuration}"
                                                    Value="1" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPressed">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_TextVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="PART_ContainerRoot" />
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PillTransform" Storyboard.TargetProperty="ScaleX">
                                                <SplineDoubleKeyFrame
                                                    KeySpline="0,0,0,1"
                                                    KeyTime="{StaticResource ComboBoxItemScaleAnimationDuration}"
                                                    Value="4" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectionVisual" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame
                                                    KeySpline="0,0,0,1"
                                                    KeyTime="{StaticResource ComboBoxItemScaleAnimationDuration}"
                                                    Value="1" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled" />

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerRoot" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemBackgroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_TextVisual" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectionVisual" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SelectorBarItemDisabledPillFill}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </StackPanel.Resources>

    <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    <DropDownButton Content="Click me" />
    <HyperlinkButton>
        <HyperlinkButton.Content>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Click me" />
                <AnimatedIcon
                    Width="12"
                    Height="12"
                    Margin="8,0,0,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    AutomationProperties.AccessibilityView="Raw">
                    <animatedvisuals:AnimatedChevronDownSmallVisualSource />
                    <AnimatedIcon.FallbackIconSource>
                        <FontIconSource
                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                            FontSize="8"
                            Glyph="&#xE96E;"
                            IsTextScaleFactorEnabled="False" />
                    </AnimatedIcon.FallbackIconSource>
                </AnimatedIcon>
            </StackPanel>
        </HyperlinkButton.Content>

        <HyperlinkButton.Style>
            <Style TargetType="HyperlinkButton">
                <Setter Property="Background" Value="{ThemeResource HyperlinkButtonBackground}" />
                <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
                <Setter Property="Foreground" Value="{ThemeResource HyperlinkButtonForeground}" />
                <Setter Property="BorderBrush" Value="{ThemeResource HyperlinkButtonBorderBrush}" />
                <Setter Property="BorderThickness" Value="{ThemeResource HyperlinkButtonBorderThemeThickness}" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="UseSystemFocusVisuals" Value="True" />
                <Setter Property="FocusVisualMargin" Value="-3" />
                <Setter Property="CornerRadius" Value="4" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="HyperlinkButton">
                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Padding="{TemplateBinding Padding}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                AutomationProperties.AccessibilityView="Raw"
                                Background="{TemplateBinding Background}"
                                BackgroundSizing="{TemplateBinding BackgroundSizing}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                CornerRadius="{TemplateBinding CornerRadius}">
                                <ContentPresenter.BackgroundTransition>
                                    <BrushTransition Duration="0:0:0.083" />
                                </ContentPresenter.BackgroundTransition>

                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonForegroundPointerOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushPointerOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonForegroundPressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushPressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonForegroundDisabled}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundDisabled}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushDisabled}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </ContentPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </HyperlinkButton.Style>
    </HyperlinkButton>
    <SplitButton Content="Click me" />

    <StackPanel
        Height="30"
        BorderBrush="{ThemeResource ButtonBorderBrush}"
        BorderThickness="1"
        CornerRadius="{ThemeResource ControlCornerRadius}"
        Orientation="Horizontal">
        <Button
            VerticalAlignment="Stretch"
            VerticalContentAlignment="Center"
            BorderThickness="0,0,1,0"
            Content="Click me"
            CornerRadius="0"
            Style="{StaticResource DefaultButtonStyle}" />
        <Button
            Width="35"
            VerticalAlignment="Stretch"
            BorderThickness="0"
            CornerRadius="0">
            <Button.Content>
                <AnimatedIcon
                    Width="12"
                    Height="12"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    AutomationProperties.AccessibilityView="Raw">
                    <animatedvisuals:AnimatedChevronDownSmallVisualSource />
                    <AnimatedIcon.FallbackIconSource>
                        <FontIconSource
                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                            FontSize="8"
                            Glyph="&#xE96E;"
                            IsTextScaleFactorEnabled="False" />
                    </AnimatedIcon.FallbackIconSource>
                </AnimatedIcon>
            </Button.Content>
        </Button>
    </StackPanel>

    <SelectorBar Background="{ThemeResource SolidBackgroundFillColorBaseAltBrush}" BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
        <SelectorBar.Style>
            <Style TargetType="SelectorBar">
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="TabNavigation" Value="Once" />
                <Setter Property="Padding" Value="{ThemeResource SelectorBarPadding}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="SelectorBar">
                            <Grid
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                CornerRadius="{TemplateBinding CornerRadius}">

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <Grid.ChildrenTransitions>
                                    <TransitionCollection>
                                        <RepositionThemeTransition />
                                    </TransitionCollection>
                                </Grid.ChildrenTransitions>
                                <ItemsView
                                    x:Name="PART_ItemsView"
                                    MaxWidth="{TemplateBinding MaxWidth}"
                                    MaxHeight="{TemplateBinding MaxHeight}"
                                    Padding="{TemplateBinding Padding}"
                                    ItemsSource="{TemplateBinding Items}"
                                    TabNavigation="{TemplateBinding TabNavigation}">
                                    <ItemsView.Layout>
                                        <StackLayout Orientation="Horizontal" />
                                    </ItemsView.Layout>
                                </ItemsView>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </SelectorBar.Style>

        <SelectorBarItem
            Icon="Copy"
            Style="{StaticResource SelectorBarItemStyle}"
            Text="SelectorBar 1" />

        <SelectorBarItem
            Icon="Copy"
            Style="{StaticResource SelectorBarItemStyle}"
            Text="SelectorBar 2" />

        <SelectorBarItem
            Icon="Copy"
            Style="{StaticResource SelectorBarItemStyle}"
            Text="SelectorBar 3" />
    </SelectorBar>
</StackPanel>

There are a lot of things these days, so I'm sorry for not replying in time. This is my test code in XAML, and the actual effect is shown below. This effect is relatively simple and may need further optimization.
这几天事情比较多，没及时回信，很抱歉。这是我在 XAML 中的测试代码，实际效果如下图所示。这个效果比较简易，可能需要继续优化。

You need to pay attention to the changes in the SelectorBarItemStyle. I changed the width of the SelectorBarItem in order to make the effect more prominent. I also made a small adjustment to the position of the StackPanel where the icon text in the control belongs. I wonder if this effect meets your expectations?
您需要重点关注 SelectorBarItemStyle 里面修改的内容，为了效果显示的更突出一些，我修改了SelectorBarItem的宽度，同时对控件里面的图标文字所属的StackPanel所放的位置做了一个微调。不知道这个效果是否符合您的期望？

[GuildOfCalamity]

@Gaoyifei1011 Can you specify what animatedvisuals: is referring too? I didn't see any xmlns callouts.

[ghost1372]

@Gaoyifei1011 Can you specify what animatedvisuals: is referring too? I didn't see any xmlns callouts.

You can remove animatedvisuals: prefix

[GuildOfCalamity]

@ghost1372 I already did, but I was curious if this was a Lottie library or something similar.

[ghost1372]

animatedvisuals

not related to Lottie.

https://learn.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.animatedvisuals?view=winui-2.8

[Gaoyifei1011]

@Gaoyifei1011 Can you specify what animatedvisuals: is referring too? I didn't see any xmlns callouts.

xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"

[ghost1372]

Thank you @Gaoyifei1011
But it was not what I wanted
It seems that this is a limitation by Microsoft, which I hope will be resolved in the next versions
this is a ItemsView with a UniformGrid Layout, See how it reacts
The same setting does not work for the selectorbar

[toto45638]

Is there a way to set the ItemsPanelTemplate in SelectorBar? I want to stop using StackPanel.
If there isn’t one, I would really like to have that feature.