self impl segmented

to fix layout cycle

src/Snap.Hutao/Snap.Hutao/App.xaml

@@ -9,6 +9,8 @@
                 <ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.TokenizingTextBox/TokenizingTextBox.xaml"/>
                 <ResourceDictionary Source="ms-appx:///Control/Loading.xaml"/>
                 <ResourceDictionary Source="ms-appx:///Control/Image/CachedImage.xaml"/>
+                <ResourceDictionary Source="ms-appx:///Control/Segmented/Segmented.xaml"/>
+                <ResourceDictionary Source="ms-appx:///Control/Segmented/SegmentedItem.xaml"/>
                 <ResourceDictionary Source="ms-appx:///Control/Theme/Card.xaml"/>
                 <ResourceDictionary Source="ms-appx:///Control/Theme/Color.xaml"/>
                 <ResourceDictionary Source="ms-appx:///Control/Theme/ComboBox.xaml"/>

src/Snap.Hutao/Snap.Hutao/Control/Panel/PanelSelector.xaml

@@ -1,20 +1,21 @@
-<cwc:Segmented
+<shcs:Segmented
     x:Class="Snap.Hutao.Control.Panel.PanelSelector"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:cwc="using:CommunityToolkit.WinUI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:shcm="using:Snap.Hutao.Control.Markup"
+    xmlns:shcs="using:Snap.Hutao.Control.Segmented"
+    Style="{StaticResource DefaultSegmentedStyle}"
     mc:Ignorable="d">
 
-    <cwc:SegmentedItem
+    <shcs:SegmentedItem
         Icon="{shcm:FontIcon Glyph={StaticResource FontIconContentBulletedList}}"
         Tag="List"
         ToolTipService.ToolTip="{shcm:ResourceString Name=ControlPanelPanelSelectorDropdownListName}"/>
-    <cwc:SegmentedItem
+    <shcs:SegmentedItem
         Icon="{shcm:FontIcon Glyph={StaticResource FontIconContentGridView}}"
         Tag="Grid"
         ToolTipService.ToolTip="{shcm:ResourceString Name=ControlPanelPanelSelectorDropdownGridName}"/>
 
-</cwc:Segmented>
+</shcs:Segmented>

src/Snap.Hutao/Snap.Hutao/Control/Panel/PanelSelector.xaml.cs

@@ -1,8 +1,8 @@
 // Copyright (c) DGP Studio. All rights reserved.
 // Licensed under the MIT license.
 
-using CommunityToolkit.WinUI.Controls;
 using Microsoft.UI.Xaml;
+using Snap.Hutao.Control.Segmented;
 using Snap.Hutao.Core.Setting;
 using System.Collections.Frozen;
 
@@ -15,7 +15,7 @@ namespace Snap.Hutao.Control.Panel;
 [DependencyProperty("Current", typeof(string), List)]
 [DependencyProperty("LocalSettingKeySuffixForCurrent", typeof(string))]
 [DependencyProperty("LocalSettingKeyExtraForCurrent", typeof(string), "")]
-internal sealed partial class PanelSelector : Segmented
+internal sealed partial class PanelSelector : Segmented.Segmented
 {
     public const string List = nameof(List);
     public const string Grid = nameof(Grid);

src/Snap.Hutao/Snap.Hutao/Control/Segmented/EqualPanel.cs

@@ -0,0 +1,89 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+using System.Data;
+using Windows.Foundation;
+
+namespace Snap.Hutao.Control.Segmented;
+
+[DependencyProperty("Spacing", typeof(double), default(double), nameof(OnSpacingChanged))]
+internal partial class EqualPanel : Microsoft.UI.Xaml.Controls.Panel
+{
+    private double maxItemWidth;
+    private double maxItemHeight;
+    private int visibleItemsCount;
+
+    public EqualPanel()
+    {
+        RegisterPropertyChangedCallback(HorizontalAlignmentProperty, OnHorizontalAlignmentChanged);
+    }
+
+    protected override Size MeasureOverride(Size availableSize)
+    {
+        maxItemWidth = 0;
+        maxItemHeight = 0;
+
+        IEnumerable<UIElement> elements = Children.Where(static e => e.Visibility == Visibility.Visible);
+        visibleItemsCount = elements.Count();
+
+        foreach (UIElement child in elements)
+        {
+            child.Measure(availableSize);
+            maxItemWidth = Math.Max(maxItemWidth, child.DesiredSize.Width);
+            maxItemHeight = Math.Max(maxItemHeight, child.DesiredSize.Height);
+        }
+
+        if (visibleItemsCount > 0)
+        {
+            // Return equal widths based on the widest item
+            // In very specific edge cases the AvailableWidth might be infinite resulting in a crash.
+            if (HorizontalAlignment != HorizontalAlignment.Stretch || double.IsInfinity(availableSize.Width))
+            {
+                return new Size((maxItemWidth * visibleItemsCount) + (Spacing * (visibleItemsCount - 1)), maxItemHeight);
+            }
+            else
+            {
+                // Equal columns based on the available width, adjust for spacing
+                double totalWidth = availableSize.Width - (Spacing * (visibleItemsCount - 1));
+                maxItemWidth = totalWidth / visibleItemsCount;
+                return new Size(availableSize.Width, maxItemHeight);
+            }
+        }
+        else
+        {
+            return new Size(0, 0);
+        }
+    }
+
+    protected override Size ArrangeOverride(Size finalSize)
+    {
+        double x = 0;
+
+        // Check if there's more (little) width available - if so, set max item width to the maximum possible as we have an almost perfect height.
+        if (finalSize.Width > (visibleItemsCount * maxItemWidth) + (Spacing * (visibleItemsCount - 1)))
+        {
+            maxItemWidth = (finalSize.Width - (Spacing * (visibleItemsCount - 1))) / visibleItemsCount;
+        }
+
+        IEnumerable<UIElement> elements = Children.Where(static e => e.Visibility == Visibility.Visible);
+        foreach (UIElement child in elements)
+        {
+            child.Arrange(new Rect(x, 0, maxItemWidth, maxItemHeight));
+            x += maxItemWidth + Spacing;
+        }
+
+        return finalSize;
+    }
+
+    private static void OnSpacingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        EqualPanel panel = (EqualPanel)d;
+        panel.InvalidateMeasure();
+    }
+
+    private void OnHorizontalAlignmentChanged(DependencyObject sender, DependencyProperty dp)
+    {
+        InvalidateMeasure();
+    }
+}

src/Snap.Hutao/Snap.Hutao/Control/Segmented/Segmented.cs

@@ -0,0 +1,127 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Input;
+using Windows.System;
+
+namespace Snap.Hutao.Control.Segmented;
+
+internal partial class Segmented : ListViewBase
+{
+    private int correctSelectedIndex = -1;
+
+    public Segmented()
+    {
+        DefaultStyleKey = typeof(Segmented);
+
+        RegisterPropertyChangedCallback(SelectedIndexProperty, OnSelectedIndexChanged);
+    }
+
+    protected override DependencyObject GetContainerForItemOverride() => new SegmentedItem();
+
+    protected override bool IsItemItsOwnContainerOverride(object item)
+    {
+        return item is SegmentedItem;
+    }
+
+    protected override void OnApplyTemplate()
+    {
+        base.OnApplyTemplate();
+        if (!IsLoaded)
+        {
+            SelectedIndex = correctSelectedIndex;
+        }
+
+        PreviewKeyDown -= OnPreviewKeyDown;
+        PreviewKeyDown += OnPreviewKeyDown;
+    }
+
+    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
+    {
+        base.PrepareContainerForItemOverride(element, item);
+        if (element is SegmentedItem segmentedItem)
+        {
+            segmentedItem.Loaded += OnLoaded;
+        }
+    }
+
+    protected override void OnItemsChanged(object e)
+    {
+        base.OnItemsChanged(e);
+    }
+
+    private void OnPreviewKeyDown(object sender, KeyRoutedEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case VirtualKey.Left:
+                e.Handled = MoveFocus(true);
+                break;
+            case VirtualKey.Right:
+                e.Handled = MoveFocus(false);
+                break;
+        }
+    }
+
+    private void OnLoaded(object sender, RoutedEventArgs e)
+    {
+        if (sender is SegmentedItem segmentedItem)
+        {
+            segmentedItem.Loaded -= OnLoaded;
+        }
+    }
+
+    private bool MoveFocus(bool reverse)
+    {
+        SegmentedItem? currentContainerItem = GetCurrentContainerItem();
+
+        if (currentContainerItem is null)
+        {
+            return false;
+        }
+
+        int previousIndex = Items.IndexOf(ItemFromContainer(currentContainerItem));
+
+        if (reverse)
+        {
+            if (previousIndex > 0 && ContainerFromIndex(previousIndex - 1) is SegmentedItem newItem)
+            {
+                newItem.Focus(FocusState.Keyboard);
+                return true;
+            }
+        }
+        else
+        {
+            if (previousIndex < Items.Count - 1 && ContainerFromIndex(previousIndex + 1) is SegmentedItem newItem)
+            {
+                newItem.Focus(FocusState.Keyboard);
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    private SegmentedItem? GetCurrentContainerItem()
+    {
+        if (XamlRoot is not null)
+        {
+            return (SegmentedItem)FocusManager.GetFocusedElement(XamlRoot);
+        }
+        else
+        {
+            return (SegmentedItem)FocusManager.GetFocusedElement();
+        }
+    }
+
+    private void OnSelectedIndexChanged(DependencyObject sender, DependencyProperty dp)
+    {
+        // https://github.com/microsoft/microsoft-ui-xaml/issues/8257
+        if (correctSelectedIndex == -1 && SelectedIndex > -1)
+        {
+            correctSelectedIndex = SelectedIndex;
+        }
+    }
+}

src/Snap.Hutao/Snap.Hutao/Control/Segmented/Segmented.xaml

@@ -0,0 +1,114 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:cw="using:CommunityToolkit.WinUI"
+    xmlns:shcs="using:Snap.Hutao.Control.Segmented"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///Control/Segmented/SegmentedItem.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <StaticResource x:Key="SegmentedBackground" ResourceKey="ControlAltFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <Thickness x:Key="SegmentedBorderThickness">1</Thickness>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Light">
+            <StaticResource x:Key="SegmentedBackground" ResourceKey="ControlAltFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <Thickness x:Key="SegmentedBorderThickness">1</Thickness>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="HighContrast">
+            <StaticResource x:Key="SegmentedBackground" ResourceKey="SystemColorButtonFaceColor"/>
+            <StaticResource x:Key="SegmentedBorderBrush" ResourceKey="SystemColorHighlightColorBrush"/>
+            <Thickness x:Key="SegmentedBorderThickness">1</Thickness>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
+    <x:Double x:Key="SegmentedItemSpacing">1</x:Double>
+    <x:Double x:Key="ButtonItemSpacing">2</x:Double>
+
+    <Style BasedOn="{StaticResource DefaultSegmentedStyle}" TargetType="shcs:Segmented"/>
+
+    <Style x:Key="DefaultSegmentedStyle" TargetType="shcs:Segmented">
+        <Style.Setters>
+            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+            <Setter Property="Background" Value="{ThemeResource SegmentedBackground}"/>
+            <Setter Property="BorderBrush" Value="{ThemeResource SegmentedBorderBrush}"/>
+            <Setter Property="BorderThickness" Value="{ThemeResource SegmentedBorderThickness}"/>
+            <Setter Property="HorizontalAlignment" Value="Left"/>
+            <Setter Property="VerticalAlignment" Value="Center"/>
+            <Setter Property="SelectionMode" Value="Single"/>
+            <Setter Property="IsItemClickEnabled" Value="False"/>
+            <win:Setter Property="SingleSelectionFollowsFocus" Value="False"/>
+            <Setter Property="IsTabStop" Value="False"/>
+            <Setter Property="TabNavigation" Value="Once"/>
+            <Setter Property="ItemsPanel">
+                <Setter.Value>
+                    <ItemsPanelTemplate>
+                        <shcs:EqualPanel
+                            HorizontalAlignment="{Binding (cw:FrameworkElementExtensions.Ancestor).HorizontalAlignment, RelativeSource={RelativeSource Self}}"
+                            cw:FrameworkElementExtensions.AncestorType="shcs:Segmented"
+                            Spacing="{ThemeResource SegmentedItemSpacing}"/>
+                    </ItemsPanelTemplate>
+                </Setter.Value>
+            </Setter>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="shcs:Segmented">
+                        <Grid>
+                            <Border
+                                VerticalAlignment="Stretch"
+                                Background="{TemplateBinding Background}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                CornerRadius="{TemplateBinding CornerRadius}"/>
+                            <ItemsPresenter Margin="{TemplateBinding Padding}"/>
+                        </Grid>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style.Setters>
+    </Style>
+
+    <Style
+        x:Key="PivotSegmentedStyle"
+        BasedOn="{StaticResource DefaultSegmentedStyle}"
+        TargetType="shcs: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 PivotSegmentedItemStyle}"/>
+            <Setter Property="ItemsPanel">
+                <Setter.Value>
+                    <ItemsPanelTemplate>
+                        <StackPanel Orientation="Horizontal" Spacing="{ThemeResource SegmentedItemSpacing}"/>
+                    </ItemsPanelTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style.Setters>
+    </Style>
+
+    <Style
+        x:Key="ButtonSegmentedStyle"
+        BasedOn="{StaticResource DefaultSegmentedStyle}"
+        TargetType="shcs: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>

src/Snap.Hutao/Snap.Hutao/Control/Segmented/SegmentedItem.cs

@@ -0,0 +1,62 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Snap.Hutao.Control.Segmented;
+
+[DependencyProperty("Icon", typeof(IconElement), null, nameof(OnIconPropertyChanged))]
+internal partial class SegmentedItem : ListViewItem
+{
+    private const string IconLeftState = "IconLeft";
+    private const string IconOnlyState = "IconOnly";
+    private const string ContentOnlyState = "ContentOnly";
+
+    public SegmentedItem()
+    {
+        DefaultStyleKey = typeof(SegmentedItem);
+    }
+
+    protected override void OnApplyTemplate()
+    {
+        base.OnApplyTemplate();
+        OnIconChanged();
+        ContentChanged();
+    }
+
+    protected override void OnContentChanged(object oldContent, object newContent)
+    {
+        base.OnContentChanged(oldContent, newContent);
+        ContentChanged();
+    }
+
+    private static void OnIconPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        ((SegmentedItem)d).OnIconChanged();
+    }
+
+    private void ContentChanged()
+    {
+        if (Content is not null)
+        {
+            VisualStateManager.GoToState(this, IconLeftState, true);
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, IconOnlyState, true);
+        }
+    }
+
+    private void OnIconChanged()
+    {
+        if (Icon is not null)
+        {
+            VisualStateManager.GoToState(this, IconLeftState, true);
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, ContentOnlyState, true);
+        }
+    }
+}

src/Snap.Hutao/Snap.Hutao/Control/Segmented/SegmentedItem.xaml

@@ -0,0 +1,875 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:shcs="using:Snap.Hutao.Control.Segmented"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <!--  Background  -->
+            <StaticResource x:Key="SegmentedItemBackground" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="SegmentedItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBackgroundSelected" ResourceKey="ControlFillColorDefaultBrush"/>
+            <StaticResource x:Key="SegmentedItemBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBackgroundDisabled" ResourceKey="ControlFillColorDisabledBrush"/>
+
+            <!--  BorderBrush  -->
+            <StaticResource x:Key="SegmentedItemBorderBrush" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushSelected" ResourceKey="ControlElevationBorderBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushPressed" ResourceKey="SubtleFillColorTertiaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushDisabled" ResourceKey="ControlAltFillColorSecondaryBrush"/>
+            <!--  Foreground  -->
+            <StaticResource x:Key="SegmentedItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="SegmentedItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="SegmentedItemForegroundSelected" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="SegmentedItemForegroundPressed" ResourceKey="TextFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
+
+            <!--  Pill  -->
+            <StaticResource x:Key="SegmentedPillBackground" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="SegmentedPillBackgroundPointerOver" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedPillBackgroundPressed" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="SegmentedPillBackgroundDisabled" ResourceKey="AccentFillColorDisabledBrush"/>
+
+            <Thickness x:Key="SegmentedItemBorderThickness">1</Thickness>
+            <x:Double x:Key="SegmentedItemDisabledOpacity">0.55</x:Double>
+
+            <!--  PillSegmentedStyle  -->
+            <!--  Background  -->
+            <StaticResource x:Key="PivotItemBackground" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="PivotItemBackgroundPointerOver" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="PivotItemBackgroundSelected" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="PivotItemBackgroundPressed" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="PivotItemBackgroundDisabled" ResourceKey="ControlFillColorTransparentBrush"/>
+
+            <!--  Foreground  -->
+            <StaticResource x:Key="PivotItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="PivotItemForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush"/>
+            <StaticResource x:Key="PivotItemForegroundPressed" ResourceKey="TextFillColorTertiaryBrush"/>
+            <StaticResource x:Key="PivotItemForegroundSelected" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="PivotItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
+
+            <!--  Pill  -->
+            <StaticResource x:Key="PivotItemPillBackground" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="PivotItemPillBackgroundPointerOver" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="PivotItemPillBackgroundPressed" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="PivotItemPillBackgroundDisabled" ResourceKey="AccentFillColorDefaultBrush"/>
+
+            <!--  ButtonSegmentedStyle  -->
+            <!--  Background  -->
+            <StaticResource x:Key="ButtonItemBackground" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundPressed" ResourceKey="SubtleFillColorTertiary"/>
+            <StaticResource x:Key="ButtonItemBackgroundSelected" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundSelectedPointerOver" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundSelectedPressed" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundDisabled" ResourceKey="ControlFillColorTransparentBrush"/>
+
+            <!--  Foreground  -->
+            <StaticResource x:Key="ButtonItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundPressed" ResourceKey="TextFillColorSecondaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundSelected" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundSelectedPointerOver" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundSelectedPressed" ResourceKey="TextOnAccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Light">
+            <!--  Background  -->
+            <StaticResource x:Key="SegmentedItemBackground" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="SegmentedItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBackgroundSelected" ResourceKey="ControlFillColorDefaultBrush"/>
+            <StaticResource x:Key="SegmentedItemBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBackgroundDisabled" ResourceKey="ControlFillColorDisabledBrush"/>
+
+            <!--  BorderBrush  -->
+            <StaticResource x:Key="SegmentedItemBorderBrush" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushSelected" ResourceKey="ControlElevationBorderBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushPressed" ResourceKey="SubtleFillColorTertiaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushDisabled" ResourceKey="ControlAltFillColorSecondaryBrush"/>
+
+            <!--  Foreground  -->
+            <StaticResource x:Key="SegmentedItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="SegmentedItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="SegmentedItemForegroundSelected" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="SegmentedItemForegroundPressed" ResourceKey="TextFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
+
+            <!--  Pill  -->
+            <StaticResource x:Key="SegmentedPillBackground" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="SegmentedPillBackgroundPointerOver" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedPillBackgroundPressed" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="SegmentedPillBackgroundDisabled" ResourceKey="AccentFillColorDisabledBrush"/>
+
+            <Thickness x:Key="SegmentedItemBorderThickness">1</Thickness>
+            <x:Double x:Key="SegmentedItemDisabledOpacity">0.55</x:Double>
+
+            <!--  PillSegmentedStyle  -->
+            <!--  Background  -->
+            <StaticResource x:Key="PivotItemBackground" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="PivotItemBackgroundPointerOver" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="PivotItemBackgroundSelected" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="PivotItemBackgroundPressed" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="PivotItemBackgroundDisabled" ResourceKey="ControlFillColorTransparentBrush"/>
+
+            <!--  Foreground  -->
+            <StaticResource x:Key="PivotItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="PivotItemForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush"/>
+            <StaticResource x:Key="PivotItemForegroundPressed" ResourceKey="TextFillColorTertiaryBrush"/>
+            <StaticResource x:Key="PivotItemForegroundSelected" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="PivotItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
+
+            <!--  Pill  -->
+            <StaticResource x:Key="PivotItemPillBackground" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="PivotItemPillBackgroundPointerOver" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="PivotItemPillBackgroundPressed" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="PivotItemPillBackgroundDisabled" ResourceKey="AccentFillColorDefaultBrush"/>
+
+            <!--  ButtonSegmentedStyle  -->
+            <!--  Background  -->
+            <StaticResource x:Key="ButtonItemBackground" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundPressed" ResourceKey="SubtleFillColorTertiary"/>
+            <StaticResource x:Key="ButtonItemBackgroundSelected" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundSelectedPointerOver" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundSelectedPressed" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundDisabled" ResourceKey="ControlFillColorTransparentBrush"/>
+
+            <!--  Foreground  -->
+            <StaticResource x:Key="ButtonItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundPressed" ResourceKey="TextFillColorSecondaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundSelected" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundSelectedPointerOver" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundSelectedPressed" ResourceKey="TextOnAccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="HighContrast">
+            <!--  Background  -->
+            <StaticResource x:Key="SegmentedItemBackground" ResourceKey="SystemColorButtonFaceColor"/>
+            <StaticResource x:Key="SegmentedItemBackgroundPointerOver" ResourceKey="SystemColorHighlightColor"/>
+            <StaticResource x:Key="SegmentedItemBackgroundSelected" ResourceKey="SystemColorHighlightColor"/>
+            <StaticResource x:Key="SegmentedItemBackgroundPressed" ResourceKey="SystemColorHighlightColor"/>
+            <StaticResource x:Key="SegmentedItemBackgroundDisabled" ResourceKey="SystemControlTransparentBrush"/>
+
+            <!--  BorderBrush  -->
+            <StaticResource x:Key="SegmentedItemBorderBrush" ResourceKey="ControlAltFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushPointerOver" ResourceKey="ControlAltFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushSelected" ResourceKey="ControlElevationBorderBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushPressed" ResourceKey="ControlAltFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedItemBorderBrushDisabled" ResourceKey="ControlAltFillColorSecondaryBrush"/>
+
+            <!--  Foreground  -->
+            <StaticResource x:Key="SegmentedItemForeground" ResourceKey="SystemColorButtonTextColor"/>
+            <StaticResource x:Key="SegmentedItemForegroundPointerOver" ResourceKey="SystemColorHighlightTextColor"/>
+            <StaticResource x:Key="SegmentedItemForegroundSelected" ResourceKey="SystemColorHighlightTextColor"/>
+            <StaticResource x:Key="SegmentedItemForegroundPressed" ResourceKey="SystemColorHighlightTextColor"/>
+            <StaticResource x:Key="SegmentedItemForegroundDisabled" ResourceKey="SystemColorGrayTextColor"/>
+
+            <!--  Pill  -->
+            <StaticResource x:Key="SegmentedPillBackground" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="SegmentedPillBackgroundPointerOver" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="SegmentedPillBackgroundPressed" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="SegmentedPillBackgroundDisabled" ResourceKey="AccentFillColorDisabledBrush"/>
+
+            <Thickness x:Key="SegmentedItemBorderThickness">1</Thickness>
+            <x:Double x:Key="SegmentedItemDisabledOpacity">0.55</x:Double>
+
+            <!--  PillSegmentedStyle  -->
+            <!--  Background  -->
+            <StaticResource x:Key="PivotItemBackground" ResourceKey="SystemColorButtonFaceColor"/>
+            <StaticResource x:Key="PivotItemBackgroundPointerOver" ResourceKey="SystemColorHighlightColor"/>
+            <StaticResource x:Key="PivotItemBackgroundSelected" ResourceKey="SystemColorHighlightColor"/>
+            <StaticResource x:Key="PivotItemBackgroundPressed" ResourceKey="SystemColorHighlightColor"/>
+            <StaticResource x:Key="PivotItemBackgroundDisabled" ResourceKey="SystemColorButtonTextColor"/>
+
+            <!--  Pill  -->
+            <StaticResource x:Key="PivotItemPillBackground" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="PivotItemPillBackgroundPointerOver" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="PivotItemPillBackgroundPressed" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="PivotItemPillBackgroundDisabled" ResourceKey="AccentFillColorDefaultBrush"/>
+
+            <!--  Foreground  -->
+            <StaticResource x:Key="PivotItemForeground" ResourceKey="SystemColorButtonTextColor"/>
+            <StaticResource x:Key="PivotItemForegroundPointerOver" ResourceKey="SystemColorHighlightTextColor"/>
+            <StaticResource x:Key="PivotItemForegroundSelected" ResourceKey="SystemColorHighlightTextColor"/>
+            <StaticResource x:Key="PivotItemForegroundPressed" ResourceKey="SystemColorHighlightTextColor"/>
+            <StaticResource x:Key="PivotItemForegroundDisabled" ResourceKey="SystemColorGrayTextColor"/>
+
+            <!--  ButtonSegmentedStyle  -->
+            <!--  Background  -->
+            <StaticResource x:Key="ButtonItemBackground" ResourceKey="ControlFillColorTransparentBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundPointerOver" ResourceKey="SystemColorHighlightTextColorBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundPressed" ResourceKey="SystemColorHighlightTextColorBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundSelected" ResourceKey="SystemControlHighlightAccentBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundSelectedPointerOver" ResourceKey="SystemColorButtonTextColorBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundSelectedPressed" ResourceKey="SystemColorHighlightTextColorBrush"/>
+            <StaticResource x:Key="ButtonItemBackgroundDisabled" ResourceKey="SystemControlBackgroundBaseLowBrush"/>
+
+            <!--  Foreground  -->
+            <StaticResource x:Key="ButtonItemForeground" ResourceKey="SystemColorButtonTextColorBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundPressed" ResourceKey="SystemControlHighlightBaseHighBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundSelected" ResourceKey="SystemControlHighlightAltChromeWhiteBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundSelectedPointerOver" ResourceKey="SystemColorButtonFaceColorBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundSelectedPressed" ResourceKey="SystemColorHighlightColorBrush"/>
+            <StaticResource x:Key="ButtonItemForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush"/>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
+    <x:String x:Key="SegmentedItemScaleAnimationDuration">00:00:00.167</x:String>
+
+    <Style BasedOn="{StaticResource DefaultSegmentedItemStyle}" TargetType="shcs:SegmentedItem"/>
+
+    <shcs:SegmentedMarginConverter
+        x:Name="MarginConverter"
+        LeftItemMargin="{StaticResource LeftItemHoverMargin}"
+        MiddleItemMargin="{StaticResource MiddleItemHoverMargin}"
+        RightItemMargin="{StaticResource RightItemHoverMargin}"/>
+
+    <Thickness x:Key="LeftItemHoverMargin">3, 3, 1, 3</Thickness>
+    <Thickness x:Key="MiddleItemHoverMargin">1, 3, 1, 3</Thickness>
+    <Thickness x:Key="RightItemHoverMargin">1, 3, 3, 3</Thickness>
+    <Thickness x:Key="ButtonItemPadding">11</Thickness>
+    <Style x:Key="DefaultSegmentedItemStyle" TargetType="shcs:SegmentedItem">
+        <Style.Setters>
+            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+            <Setter Property="Background" Value="{ThemeResource SegmentedItemBackground}"/>
+            <Setter Property="BorderBrush" Value="{ThemeResource SegmentedItemBorderBrush}"/>
+            <Setter Property="BorderThickness" Value="{ThemeResource SegmentedItemBorderThickness}"/>
+            <Setter Property="Foreground" Value="{ThemeResource SegmentedItemForeground}"/>
+            <Setter Property="FontWeight" Value="Normal"/>
+            <Setter Property="TabNavigation" Value="Local"/>
+            <Setter Property="UseSystemFocusVisuals" Value="True"/>
+            <Setter Property="FocusVisualMargin" Value="-3"/>
+            <Setter Property="BackgroundSizing" Value="InnerBorderEdge"/>
+            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
+            <Setter Property="VerticalAlignment" Value="Stretch"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="shcs:SegmentedItem">
+                        <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>
+
+                            <Border
+                                x:Name="PART_Hover"
+                                Margin="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource MarginConverter}}"
+                                Background="Transparent"
+                                CornerRadius="2"
+                                RenderTransformOrigin="0.5, 0.5">
+                                <win:Border.BackgroundTransition>
+                                    <win:BrushTransition Duration="0:0:0.083"/>
+                                </win:Border.BackgroundTransition>
+                                <Border.RenderTransform>
+                                    <CompositeTransform/>
+                                </Border.RenderTransform>
+                            </Border>
+
+                            <!--  Content  -->
+                            <Grid
+                                x:Name="ContentHolder"
+                                Margin="11,0,11,0"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Stretch"
+                                ColumnSpacing="8">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="Auto"/>
+                                </Grid.ColumnDefinitions>
+                                <Viewbox
+                                    x:Name="PART_IconBox"
+                                    Width="16"
+                                    Margin="0,7,0,7"
+                                    VerticalAlignment="Center">
+                                    <ContentPresenter
+                                        x:Name="PART_IconPresenter"
+                                        win:HighContrastAdjustment="None"
+                                        Content="{TemplateBinding Icon}"
+                                        Foreground="{TemplateBinding Foreground}"/>
+                                </Viewbox>
+
+                                <ContentPresenter
+                                    x:Name="PART_ContentPresenter"
+                                    Grid.Column="1"
+                                    Margin="0,5,0,6"
+                                    VerticalAlignment="Center"
+                                    win:HighContrastAdjustment="None"
+                                    win:OpticalMarginAlignment="TrimSideBearings"
+                                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                                    Content="{TemplateBinding Content}"
+                                    ContentTransitions="{TemplateBinding ContentTransitions}"
+                                    FontWeight="{TemplateBinding FontWeight}"
+                                    Foreground="{TemplateBinding Foreground}"/>
+                                <Rectangle
+                                    x:Name="PART_Pill"
+                                    Grid.Column="1"
+                                    Width="4"
+                                    Height="3"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Bottom"
+                                    Fill="{ThemeResource SegmentedPillBackground}"
+                                    Opacity="0"
+                                    RadiusX="0.5"
+                                    RadiusY="1"
+                                    RenderTransformOrigin="0.5, 0.5">
+                                    <Rectangle.RenderTransform>
+                                        <CompositeTransform x:Name="PillTransform" ScaleX="1"/>
+                                    </Rectangle.RenderTransform>
+                                </Rectangle>
+                            </Grid>
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="SegmentedIconPositionStates">
+                                    <VisualState x:Name="IconOnLeft"/>
+                                    <VisualState x:Name="IconOnly">
+                                        <VisualState.Setters>
+                                            <Setter Target="PART_ContentPresenter.Visibility" Value="Collapsed"/>
+                                            <Setter Target="PART_Pill.(Grid.Column)" Value="0"/>
+                                            <Setter Target="ContentHolder.ColumnSpacing" Value="0"/>
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="ContentOnly">
+                                        <VisualState.Setters>
+                                            <Setter Target="PART_IconBox.Visibility" Value="Collapsed"/>
+                                            <Setter Target="ContentHolder.ColumnSpacing" Value="0"/>
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                </VisualStateGroup>
+
+                                <VisualStateGroup x:Name="CommonStates">
+                                    <VisualState x:Name="Normal"/>
+                                    <VisualState x:Name="PointerOver">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemBackgroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="Pressed">
+                                        <Storyboard>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="0.96"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="0.96"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemBackgroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="Selected">
+                                        <Storyboard>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="4"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="Opacity">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="1"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="Fill">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedPillBackground}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemBackgroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="BorderBrush">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemBorderBrushSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="PointerOverSelected">
+                                        <Storyboard>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="4"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="Opacity">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="1"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="Fill">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedPillBackgroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemBackgroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="BorderBrush">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemBorderBrushSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="PressedSelected">
+                                        <Storyboard>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="2"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="Opacity">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="1"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="Fill">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedPillBackgroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemBackgroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="BorderBrush">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemBorderBrushSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SegmentedItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                                <VisualStateGroup x:Name="DisabledStates">
+                                    <VisualState x:Name="Enabled"/>
+                                    <VisualState x:Name="Disabled">
+                                        <Storyboard>
+                                            <DoubleAnimation
+                                                Storyboard.TargetName="PART_Root"
+                                                Storyboard.TargetProperty="Opacity"
+                                                To="{ThemeResource SegmentedItemDisabledOpacity}"
+                                                Duration="0:0:0.083"/>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                            </VisualStateManager.VisualStateGroups>
+                        </Grid>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style.Setters>
+    </Style>
+
+    <Style
+        x:Key="PivotSegmentedItemStyle"
+        BasedOn="{StaticResource DefaultSegmentedItemStyle}"
+        TargetType="shcs:SegmentedItem">
+        <Style.Setters>
+            <Setter Property="Background" Value="{ThemeResource PivotItemBackground}"/>
+            <Setter Property="Foreground" Value="{ThemeResource PivotItemForeground}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="shcs:SegmentedItem">
+                        <Grid
+                            x:Name="PART_Root"
+                            Background="{TemplateBinding Background}"
+                            Control.IsTemplateFocusTarget="True"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                            <!--  Content  -->
+                            <Grid
+                                x:Name="ContentHolder"
+                                Margin="12,0,12,0"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Stretch"
+                                ColumnSpacing="8">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="Auto"/>
+                                </Grid.ColumnDefinitions>
+                                <Viewbox
+                                    x:Name="PART_IconBox"
+                                    Width="16"
+                                    Margin="0,11,0,11"
+                                    VerticalAlignment="Center">
+                                    <ContentPresenter
+                                        x:Name="PART_IconPresenter"
+                                        win:HighContrastAdjustment="None"
+                                        Content="{TemplateBinding Icon}"
+                                        Foreground="{TemplateBinding Foreground}"/>
+                                </Viewbox>
+
+                                <ContentPresenter
+                                    x:Name="PART_ContentPresenter"
+                                    Grid.Column="1"
+                                    Margin="0,9,0,10"
+                                    VerticalAlignment="Center"
+                                    win:HighContrastAdjustment="None"
+                                    win:OpticalMarginAlignment="TrimSideBearings"
+                                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                                    Content="{TemplateBinding Content}"
+                                    ContentTransitions="{TemplateBinding ContentTransitions}"
+                                    FontWeight="{TemplateBinding FontWeight}"
+                                    Foreground="{TemplateBinding Foreground}"/>
+                                <Rectangle
+                                    x:Name="PART_Pill"
+                                    Grid.Column="1"
+                                    Width="4"
+                                    Height="3"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Bottom"
+                                    Fill="{ThemeResource PivotItemPillBackground}"
+                                    Opacity="0"
+                                    RadiusX="0.5"
+                                    RadiusY="1"
+                                    RenderTransformOrigin="0.5, 0.5">
+                                    <Rectangle.RenderTransform>
+                                        <CompositeTransform x:Name="PillTransform" ScaleX="1"/>
+                                    </Rectangle.RenderTransform>
+                                </Rectangle>
+                            </Grid>
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="SegmentedIconPositionStates">
+                                    <VisualState x:Name="IconOnLeft"/>
+                                    <VisualState x:Name="IconOnly">
+                                        <VisualState.Setters>
+                                            <Setter Target="PART_ContentPresenter.Visibility" Value="Collapsed"/>
+                                            <Setter Target="PART_Pill.(Grid.Column)" Value="0"/>
+                                            <Setter Target="ContentHolder.ColumnSpacing" Value="0"/>
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="ContentOnly">
+                                        <VisualState.Setters>
+                                            <Setter Target="PART_IconBox.Visibility" Value="Collapsed"/>
+                                            <Setter Target="ContentHolder.ColumnSpacing" Value="0"/>
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                </VisualStateGroup>
+
+                                <VisualStateGroup x:Name="CommonStates">
+                                    <VisualState x:Name="Normal"/>
+                                    <VisualState x:Name="PointerOver">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemBackgroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="Pressed">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemBackgroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="Selected">
+                                        <Storyboard>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="4"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="Opacity">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="1"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemBackgroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="PointerOverSelected">
+                                        <Storyboard>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="4"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="Opacity">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="1"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemBackgroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="PressedSelected">
+                                        <Storyboard>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="2"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pill" Storyboard.TargetProperty="Opacity">
+                                                <SplineDoubleKeyFrame
+                                                    KeySpline="0,0,0,1"
+                                                    KeyTime="{ThemeResource SegmentedItemScaleAnimationDuration}"
+                                                    Value="1"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemBackgroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotItemForegroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                                <VisualStateGroup x:Name="DisabledStates">
+                                    <VisualState x:Name="Enabled"/>
+                                    <VisualState x:Name="Disabled">
+                                        <Storyboard>
+                                            <DoubleAnimation
+                                                Storyboard.TargetName="PART_Root"
+                                                Storyboard.TargetProperty="Opacity"
+                                                To="{ThemeResource SegmentedItemDisabledOpacity}"
+                                                Duration="0:0:0.083"/>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                            </VisualStateManager.VisualStateGroups>
+                        </Grid>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style.Setters>
+    </Style>
+
+    <Style
+        x:Key="ButtonSegmentedItemStyle"
+        BasedOn="{StaticResource DefaultSegmentedItemStyle}"
+        TargetType="shcs:SegmentedItem">
+        <Style.Setters>
+            <Setter Property="Background" Value="{ThemeResource ButtonItemBackground}"/>
+            <Setter Property="Foreground" Value="{ThemeResource ButtonItemForeground}"/>
+            <Setter Property="Padding" Value="{ThemeResource ButtonItemPadding}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="shcs:SegmentedItem">
+                        <Grid
+                            x:Name="PART_Root"
+                            Background="{TemplateBinding Background}"
+                            BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                            Control.IsTemplateFocusTarget="True"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                            <win:Grid.BackgroundTransition>
+                                <win:BrushTransition Duration="0:0:0.083"/>
+                            </win:Grid.BackgroundTransition>
+
+                            <!--  Content  -->
+                            <Grid
+                                x:Name="ContentHolder"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Stretch"
+                                ColumnSpacing="8">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="Auto"/>
+                                </Grid.ColumnDefinitions>
+                                <Viewbox
+                                    x:Name="PART_IconBox"
+                                    Width="16"
+                                    VerticalAlignment="Center">
+                                    <ContentPresenter
+                                        x:Name="PART_IconPresenter"
+                                        win:HighContrastAdjustment="None"
+                                        Content="{TemplateBinding Icon}"
+                                        Foreground="{TemplateBinding Foreground}"/>
+                                </Viewbox>
+
+                                <ContentPresenter
+                                    x:Name="PART_ContentPresenter"
+                                    Grid.Column="1"
+                                    VerticalAlignment="Center"
+                                    win:HighContrastAdjustment="None"
+                                    win:OpticalMarginAlignment="TrimSideBearings"
+                                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                                    Content="{TemplateBinding Content}"
+                                    ContentTransitions="{TemplateBinding ContentTransitions}"
+                                    FontWeight="{TemplateBinding FontWeight}"
+                                    Foreground="{TemplateBinding Foreground}"/>
+                            </Grid>
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="SegmentedIconPositionStates">
+                                    <VisualState x:Name="IconOnLeft"/>
+                                    <VisualState x:Name="IconOnly">
+                                        <VisualState.Setters>
+                                            <Setter Target="PART_ContentPresenter.Visibility" Value="Collapsed"/>
+                                            <Setter Target="ContentHolder.ColumnSpacing" Value="0"/>
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="ContentOnly">
+                                        <VisualState.Setters>
+                                            <Setter Target="PART_IconBox.Visibility" Value="Collapsed"/>
+                                            <Setter Target="ContentHolder.ColumnSpacing" Value="0"/>
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                </VisualStateGroup>
+
+                                <VisualStateGroup x:Name="CommonStates">
+                                    <VisualState x:Name="Normal"/>
+                                    <VisualState x:Name="PointerOver">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemBackgroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="Pressed">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemBackgroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="Selected">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemBackgroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundSelected}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="PointerOverSelected">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemBackgroundSelectedPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundSelectedPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundSelectedPointerOver}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="PressedSelected">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemBackgroundSelectedPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundSelectedPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_IconPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonItemForegroundSelectedPressed}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                                <VisualStateGroup x:Name="DisabledStates">
+                                    <VisualState x:Name="Enabled"/>
+                                    <VisualState x:Name="Disabled">
+                                        <Storyboard>
+                                            <DoubleAnimation
+                                                Storyboard.TargetName="PART_Root"
+                                                Storyboard.TargetProperty="Opacity"
+                                                To="{ThemeResource SegmentedItemDisabledOpacity}"
+                                                Duration="0:0:0.083"/>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                            </VisualStateManager.VisualStateGroups>
+                        </Grid>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style.Setters>
+    </Style>
+</ResourceDictionary>
+

src/Snap.Hutao/Snap.Hutao/Control/Segmented/SegmentedMarginConverter.cs

@@ -0,0 +1,40 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Data;
+
+namespace Snap.Hutao.Control.Segmented;
+
+[DependencyProperty("LeftItemMargin", typeof(Thickness))]
+[DependencyProperty("MiddleItemMargin", typeof(Thickness))]
+[DependencyProperty("RightItemMargin", typeof(Thickness))]
+internal partial class SegmentedMarginConverter : DependencyObject, IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, string language)
+    {
+        SegmentedItem segmentedItem = (SegmentedItem)value;
+        ItemsControl listView = ItemsControl.ItemsControlFromItemContainer(segmentedItem);
+
+        int index = listView.IndexFromContainer(segmentedItem);
+
+        if (index == 0)
+        {
+            return LeftItemMargin;
+        }
+        else if (index == listView.Items.Count - 1)
+        {
+            return RightItemMargin;
+        }
+        else
+        {
+            return MiddleItemMargin;
+        }
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, string language)
+    {
+        return value;
+    }
+}

src/Snap.Hutao/Snap.Hutao/Properties/launchSettings.json

@@ -2,7 +2,7 @@
   "profiles": {
     "Snap.Hutao": {
       "commandName": "MsixPackage",
-      "nativeDebugging": false,
+      "nativeDebugging": true,
       "doNotLaunchApp": false,
       "allowLocalNetworkLoopbackProperty": true
     },

src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj

@@ -296,7 +296,6 @@
     <PackageReference Include="CommunityToolkit.WinUI.Collections" Version="8.0.240109" />
     <PackageReference Include="CommunityToolkit.WinUI.Controls.HeaderedControls" Version="8.0.240109" />
     <PackageReference Include="CommunityToolkit.WinUI.Controls.Primitives" Version="8.0.240109" />
-    <PackageReference Include="CommunityToolkit.WinUI.Controls.Segmented" Version="8.0.240109" />
     <PackageReference Include="CommunityToolkit.WinUI.Controls.SettingsControls" Version="8.0.240109" />
     <PackageReference Include="CommunityToolkit.WinUI.Controls.TokenizingTextBox" Version="8.0.240109" />
     <PackageReference Include="CommunityToolkit.WinUI.Media" Version="8.0.240109" />

src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml

@@ -7,6 +7,7 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:shch="using:Snap.Hutao.Control.Helper"
     xmlns:shci="using:Snap.Hutao.Control.Image"
+    xmlns:shcs="using:Snap.Hutao.Control.Segmented"
     xmlns:shmmc="using:Snap.Hutao.Model.Metadata.Converter"
     mc:Ignorable="d">
 
@@ -25,11 +26,11 @@
     </UserControl.Resources>
 
     <StackPanel>
-        <cwc:Segmented
+        <shcs:Segmented
             x:Name="SkillSelectorSegmented"
             HorizontalAlignment="Stretch"
-            SelectionChanged="OnSkillSelectorSegmentedSelectionChanged"
-            ItemTemplate="{StaticResource SkillHeaderTemplate}"/>
+            ItemTemplate="{StaticResource SkillHeaderTemplate}"
+            SelectionChanged="OnSkillSelectorSegmentedSelectionChanged"/>
         <ContentPresenter Content="{x:Bind Selected, Mode=OneWay}" ContentTemplate="{x:Bind ItemTemplate}"/>
     </StackPanel>
 </UserControl>

src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml.cs

@@ -1,9 +1,9 @@
 // Copyright (c) DGP Studio. All rights reserved.
 // Licensed under the MIT license.
 
-using CommunityToolkit.WinUI.Controls;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
+using Snap.Hutao.Control.Segmented;
 using System.Collections;
 
 namespace Snap.Hutao.View.Control;

src/Snap.Hutao/Snap.Hutao/View/Control/StatisticsSegmented.xaml

@@ -1,13 +1,14 @@
-<cwc:Segmented
+<shcs:Segmented
     x:Class="Snap.Hutao.View.Control.StatisticsSegmented"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:cwc="using:CommunityToolkit.WinUI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:shcm="using:Snap.Hutao.Control.Markup"
+    xmlns:shcs="using:Snap.Hutao.Control.Segmented"
+    Style="{StaticResource DefaultSegmentedStyle}"
     mc:Ignorable="d">
-    <cwc:SegmentedItem Content="{shcm:ResourceString Name=ViewControlStatisticsSegmentedItemContentStatistics}" Icon="{shcm:FontIcon Glyph=&#xE9D2;}"/>
-    <cwc:SegmentedItem Content="{shcm:ResourceString Name=ViewControlStatisticsSegmentedItemContentProportion}" Icon="{shcm:FontIcon Glyph=&#xEB05;}"/>
-</cwc:Segmented>
+    <shcs:SegmentedItem Content="{shcm:ResourceString Name=ViewControlStatisticsSegmentedItemContentStatistics}" Icon="{shcm:FontIcon Glyph=&#xE9D2;}"/>
+    <shcs:SegmentedItem Content="{shcm:ResourceString Name=ViewControlStatisticsSegmentedItemContentProportion}" Icon="{shcm:FontIcon Glyph=&#xEB05;}"/>
+</shcs:Segmented>
 

src/Snap.Hutao/Snap.Hutao/View/Control/StatisticsSegmented.xaml.cs

@@ -1,9 +1,9 @@
 // Copyright (c) DGP Studio. All rights reserved.
 // Licensed under the MIT license.
 
-using CommunityToolkit.WinUI.Controls;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
+using Snap.Hutao.Control.Segmented;
 
 namespace Snap.Hutao.View.Control;
 

src/Snap.Hutao/Snap.Hutao/View/Guide/GuideView.xaml

@@ -8,6 +8,7 @@
     xmlns:mxi="using:Microsoft.Xaml.Interactivity"
     xmlns:shcb="using:Snap.Hutao.Control.Behavior"
     xmlns:shcm="using:Snap.Hutao.Control.Markup"
+    xmlns:shcs="using:Snap.Hutao.Control.Segmented"
     xmlns:shvg="using:Snap.Hutao.ViewModel.Guide"
     d:DataContext="{d:DesignInstance shvg:GuideViewModel}"
     mc:Ignorable="d">
@@ -188,15 +189,15 @@
         </cwc:SwitchPresenter>
         <Grid Grid.Row="1">
             <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
-                <cwc:Segmented
+                <shcs:Segmented
                     Margin="16"
                     IsHitTestVisible="False"
                     SelectedIndex="{Binding State, Mode=TwoWay}">
-                    <cwc:SegmentedItem Content="{shcm:ResourceString Name=ViewGuideStepLanguage}" Icon="{shcm:FontIcon Glyph=&#xF2B7;}"/>
-                    <cwc:SegmentedItem Content="{shcm:ResourceString Name=ViewGuideStepDocument}" Icon="{shcm:FontIcon Glyph=&#xF28B;}"/>
-                    <cwc:SegmentedItem Content="{shcm:ResourceString Name=ViewGuideStepEnvironment}" Icon="{shcm:FontIcon Glyph=&#xE81E;}"/>
-                    <cwc:SegmentedItem Content="{shcm:ResourceString Name=ViewGuideStepStaticResource}" Icon="{shcm:FontIcon Glyph=&#xE8B9;}"/>
-                </cwc:Segmented>
+                    <shcs:SegmentedItem Content="{shcm:ResourceString Name=ViewGuideStepLanguage}" Icon="{shcm:FontIcon Glyph=&#xF2B7;}"/>
+                    <shcs:SegmentedItem Content="{shcm:ResourceString Name=ViewGuideStepDocument}" Icon="{shcm:FontIcon Glyph=&#xF28B;}"/>
+                    <shcs:SegmentedItem Content="{shcm:ResourceString Name=ViewGuideStepEnvironment}" Icon="{shcm:FontIcon Glyph=&#xE81E;}"/>
+                    <shcs:SegmentedItem Content="{shcm:ResourceString Name=ViewGuideStepStaticResource}" Icon="{shcm:FontIcon Glyph=&#xE8B9;}"/>
+                </shcs:Segmented>
                 <Button
                     Command="{Binding NextOrCompleteCommand}"
                     Content="{Binding NextOrCompleteButtonText}"

src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml

@@ -14,6 +14,7 @@
     xmlns:shci="using:Snap.Hutao.Control.Image"
     xmlns:shcm="using:Snap.Hutao.Control.Markup"
     xmlns:shcp="using:Snap.Hutao.Control.Panel"
+    xmlns:shcs="using:Snap.Hutao.Control.Segmented"
     xmlns:shct="using:Snap.Hutao.Control.Text"
     xmlns:shvcom="using:Snap.Hutao.ViewModel.Complex"
     xmlns:shvcon="using:Snap.Hutao.View.Control"
@@ -628,7 +629,7 @@
                                             <ColumnDefinition Width="auto"/>
                                             <ColumnDefinition/>
                                         </Grid.ColumnDefinitions>
-                                        <cwc:Segmented
+                                        <shcs:Segmented
                                             DisplayMemberPath="Floor"
                                             ItemsSource="{Binding AvatarUsageRanks}"
                                             SelectedItem="{Binding SelectedAvatarUsageRank, Mode=TwoWay}"/>
@@ -662,7 +663,7 @@
                                             <ColumnDefinition Width="auto"/>
                                             <ColumnDefinition/>
                                         </Grid.ColumnDefinitions>
-                                        <cwc:Segmented
+                                        <shcs:Segmented
                                             DisplayMemberPath="Floor"
                                             ItemsSource="{Binding AvatarAppearanceRanks}"
                                             SelectedItem="{Binding SelectedAvatarAppearanceRank, Mode=TwoWay}"/>
@@ -691,7 +692,7 @@
                                         <RowDefinition Height="auto"/>
                                         <RowDefinition/>
                                     </Grid.RowDefinitions>
-                                    <cwc:Segmented
+                                    <shcs:Segmented
                                         Grid.Row="0"
                                         Margin="16,16,0,16"
                                         DisplayMemberPath="Floor"