Fix for animations and adding ButtonSegmentedStyle

Author: niels9001

components/SegmentedControl/samples/SegmentedControl.md

@@ -35,6 +35,6 @@ The `Segmented` control is best used with 2-5 items and does not support overflo
 
 ## Other styles
 
-The `Segmented` control contains various additional styles, to match the look and feel of your application. The `PillSegmentedStyle` matches a modern `Pivot` and `NavigationView` style.
+The `Segmented` control contains various additional styles, to match the look and feel of your application. The `PivotSegmentedStyle` matches a modern `Pivot` style while the `ButtonSegmentedStyle` represents buttons.
 
 > [!SAMPLE SegmentedControlStylesSample]

components/SegmentedControl/samples/SegmentedControlStylesSample.xaml

@@ -31,18 +31,21 @@
                    Text="PivotSegmentedStyle" />
         <labs:Segmented SelectedIndex="0"
                         SelectionMode="{x:Bind local:SegmentedControlStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}"
-                        Style="{StaticResource PivotSegmentedStyle}">
-            <labs:SegmentedItem ToolTipService.ToolTip="Day view">
+                        Style="{StaticResource ButtonSegmentedStyle}">
+            <labs:SegmentedItem Content="Day"
+                                ToolTipService.ToolTip="Day view">
                 <labs:SegmentedItem.Icon>
                     <FontIcon Glyph="&#xE161;" />
                 </labs:SegmentedItem.Icon>
             </labs:SegmentedItem>
-            <labs:SegmentedItem ToolTipService.ToolTip="Week view">
+            <labs:SegmentedItem Content="Week"
+                                ToolTipService.ToolTip="Week view">
                 <labs:SegmentedItem.Icon>
                     <FontIcon Glyph="&#xE162;" />
                 </labs:SegmentedItem.Icon>
             </labs:SegmentedItem>
-            <labs:SegmentedItem ToolTipService.ToolTip="Month view">
+            <labs:SegmentedItem Content="Month"
+                                ToolTipService.ToolTip="Month view">
                 <labs:SegmentedItem.Icon>
                     <FontIcon Glyph="&#xE163;" />
                 </labs:SegmentedItem.Icon>

components/SegmentedControl/src/Segmented/Segmented.xaml

@@ -1,4 +1,4 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:labs="using:CommunityToolkit.Labs.WinUI"
                     xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
@@ -31,6 +31,7 @@
     </ResourceDictionary.ThemeDictionaries>
 
     <x:Double x:Key="SegmentedItemSpacing">1</x:Double>
+    <x:Double x:Key="ButtonItemSpacing">2</x:Double>
 
     <Style BasedOn="{StaticResource DefaultSegmentedStyle}"
            TargetType="labs:Segmented" />
@@ -95,4 +96,24 @@
             </Setter>
         </Style.Setters>
     </Style>
+
+    <Style x:Key="ButtonSegmentedStyle"
+           BasedOn="{StaticResource DefaultSegmentedStyle}"
+           TargetType="labs:Segmented">
+        <Style.Setters>
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="Transparent" />
+            <Setter Property="BorderThickness" Value="0" />
+            <Setter Property="Padding" Value="0" />
+            <Setter Property="ItemContainerStyle" Value="{StaticResource ButtonSegmentedItemStyle}" />
+            <Setter Property="ItemsPanel">
+                <Setter.Value>
+                    <ItemsPanelTemplate>
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="{ThemeResource ButtonItemSpacing}" />
+                    </ItemsPanelTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style.Setters>
+    </Style>
 </ResourceDictionary>