diff --git a/components/ColorPicker/src/ColorPicker.xaml b/components/ColorPicker/src/ColorPicker.xaml
index 5d1b87a8..284eb7b2 100644
--- a/components/ColorPicker/src/ColorPicker.xaml
+++ b/components/ColorPicker/src/ColorPicker.xaml
@@ -1,52 +1,51 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
-    xmlns:contract8Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,8)"
-    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
-    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
-    xmlns:localconverters="using:CommunityToolkit.WinUI.Controls"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:primitives="using:CommunityToolkit.WinUI.Controls.Primitives"
-    xmlns:ui="using:CommunityToolkit.WinUI"
-    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:winuiprimitives="using:Microsoft.UI.Xaml.Controls.Primitives">
-
-    <SolidColorBrush x:Key="CheckerboardColor0" Color="Transparent" />
-    <SolidColorBrush x:Key="CheckerboardColor1" Color="#FFd4d4d4" />
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
+                    xmlns:contract8Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,8)"
+                    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+                    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
+                    xmlns:localconverters="using:CommunityToolkit.WinUI.Controls"
+                    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+                    xmlns:primitives="using:CommunityToolkit.WinUI.Controls.Primitives"
+                    xmlns:ui="using:CommunityToolkit.WinUI"
+                    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:winuiprimitives="using:Microsoft.UI.Xaml.Controls.Primitives">
+
+    <SolidColorBrush x:Key="CheckerboardColor0"
+                     Color="Transparent" />
+    <SolidColorBrush x:Key="CheckerboardColor1"
+                     Color="#FFd4d4d4" />
     <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
     <localconverters:ColorToHexConverter x:Key="ColorToHexConverter" />
 
     <localconverters:ContrastBrushConverter x:Key="ContrastBrushConverter" />
     <animations:ImplicitAnimationSet x:Name="ShowTransitions">
-        <animations:OffsetAnimation
-            EasingMode="EaseOut"
-            From="0,24,0"
-            To="0"
-            Duration="0:0:0.4" />
-        <animations:OpacityAnimation
-            EasingMode="EaseOut"
-            From="0"
-            To="1"
-            Duration="0:0:0.2" />
+        <animations:OffsetAnimation EasingMode="EaseOut"
+                                    From="0,24,0"
+                                    To="0"
+                                    Duration="0:0:0.4" />
+        <animations:OpacityAnimation EasingMode="EaseOut"
+                                     From="0"
+                                     To="1"
+                                     Duration="0:0:0.2" />
     </animations:ImplicitAnimationSet>
     <animations:ImplicitAnimationSet x:Name="HideTransitions">
-        <animations:OffsetAnimation
-            EasingMode="EaseOut"
-            From="0"
-            To="0,24,0"
-            Duration="0:0:0.2" />
-        <animations:OpacityAnimation
-            EasingMode="EaseOut"
-            From="1"
-            To="0"
-            Duration="0:0:0.1" />
+        <animations:OffsetAnimation EasingMode="EaseOut"
+                                    From="0"
+                                    To="0,24,0"
+                                    Duration="0:0:0.2" />
+        <animations:OpacityAnimation EasingMode="EaseOut"
+                                     From="1"
+                                     To="0"
+                                     Duration="0:0:0.1" />
     </animations:ImplicitAnimationSet>
 
 
-    <Style BasedOn="{StaticResource DefaultColorPickerStyle}" TargetType="controls:ColorPicker" />
+    <Style BasedOn="{StaticResource DefaultColorPickerStyle}"
+           TargetType="controls:ColorPicker" />
 
-    <Style x:Key="DefaultColorPickerStyle" TargetType="controls:ColorPicker">
+    <Style x:Key="DefaultColorPickerStyle"
+           TargetType="controls:ColorPicker">
         <Style.Setters>
             <Setter Property="Width" Value="360" />
             <Setter Property="Height" Value="472" />
@@ -60,262 +59,20 @@
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="controls:ColorPicker">
-                        <Grid
-                            Padding="{TemplateBinding Padding}"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Background="{TemplateBinding Background}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}"
-                            RowSpacing="12">
+                        <Grid Padding="{TemplateBinding Padding}"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                              Background="{TemplateBinding Background}"
+                              BorderBrush="{TemplateBinding BorderBrush}"
+                              BorderThickness="{TemplateBinding BorderThickness}"
+                              CornerRadius="{TemplateBinding CornerRadius}"
+                              RowSpacing="12">
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="Auto" />
                                 <RowDefinition Height="Auto" />
                                 <RowDefinition Height="Auto" />
                             </Grid.RowDefinitions>
 
-                            <controls:Segmented
-                                x:Name="ColorPanelSelector"
-                                Grid.Row="1"
-                                HorizontalAlignment="Stretch"
-                                SelectedIndex="0">
-                                <controls:SegmentedItem
-                                    x:Name="SpectrumItem"
-                                    AutomationProperties.Name="Spectrum"
-                                    Icon="{ui:FontIcon Glyph=&#xE76D;}" />
-                                <controls:SegmentedItem
-                                    x:Name="PaletteItem"
-                                    AutomationProperties.Name="Palette"
-                                    Icon="{ui:FontIcon Glyph=&#xE790;}" />
-                                <controls:SegmentedItem
-                                    x:Name="ChannelsItem"
-                                    AutomationProperties.Name="Channels"
-                                    Icon="{ui:FontIcon Glyph=&#xE9E9;}" />
-                            </controls:Segmented>
-
-                            <controls:SwitchPresenter
-                                x:Name="ContentContainer"
-                                Grid.Row="2"
-                                Value="{Binding ElementName=ColorPanelSelector, Path=SelectedItem.Name}">
-                                <controls:Case Value="SpectrumItem">
-                                    <Grid
-                                        HorizontalAlignment="Stretch"
-                                        animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
-                                        animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="Auto" />
-                                            <ColumnDefinition Width="*" />
-                                            <ColumnDefinition Width="Auto" />
-                                        </Grid.ColumnDefinitions>
-                                        <primitives:ColorPickerSlider
-                                            x:Name="ColorSpectrumThirdDimensionSlider"
-                                            HorizontalAlignment="Center"
-                                            Margin="0,0,12,0"
-                                            VerticalAlignment="Stretch"
-                                            Orientation="Vertical" />
-                                        <!--  Keep in mind the spectrum is always HSV  -->
-                                        <!--  This must also not be named 'ColorSpectrum' to differentiate from the base class  -->
-                                        <Viewbox
-                                            HorizontalAlignment="Stretch"
-                                            VerticalAlignment="Stretch"
-                                      
-                                            Grid.Column="1">
-
-                                            <winuiprimitives:ColorSpectrum
-                                                x:Name="ColorSpectrumControl"
-                                                Grid.Column="1"
-                                                MinWidth="256"
-                                                MinHeight="256"
-                                                win:AutomationProperties.Name="Third Dimension"
-                                                Components="{TemplateBinding ColorSpectrumComponents}"
-                                                CornerRadius="{StaticResource ControlCornerRadius}"
-                                                MaxHue="{TemplateBinding MaxHue}"
-                                                MaxSaturation="{TemplateBinding MaxSaturation}"
-                                                MaxValue="{TemplateBinding MaxValue}"
-                                                MinHue="{TemplateBinding MinHue}"
-                                                MinSaturation="{TemplateBinding MinSaturation}"
-                                                MinValue="{TemplateBinding MinValue}"
-                                                Shape="{TemplateBinding ColorSpectrumShape}" />
-                                        </Viewbox>
-
-
-                                        <primitives:ColorPickerSlider
-                                            x:Name="ColorSpectrumAlphaSlider"
-                                            Grid.Column="2"
-                                            Margin="12,0,0,0"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Stretch"
-                                            win:AutomationProperties.Name="Alpha Channel"
-                                            Orientation="Vertical" />
-                                    </Grid>
-                                </controls:Case>
-                                <controls:Case Value="PaletteItem">
-                                    <Grid HorizontalAlignment="Stretch">
-                                        <GridView
-                                            Margin="0"
-                                            Padding="0"
-                                            animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
-                                            animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
-                                            ItemsSource="{TemplateBinding CustomPaletteColors}"
-                                            SelectedValue="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Color, Mode=TwoWay}"
-                                            SelectionMode="Single"
-                                            Tag="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Color, Mode=OneWay}">
-                                            <GridView.ItemsPanel>
-                                                <ItemsPanelTemplate>
-                                                    <controls:UniformGrid ui:FrameworkElementExtensions.AncestorType="controls:ColorPicker" Columns="{Binding (ui:FrameworkElementExtensions.Ancestor).CustomPaletteColumnCount, RelativeSource={RelativeSource Self}}" />
-                                                </ItemsPanelTemplate>
-                                            </GridView.ItemsPanel>
-                                            <GridView.ItemContainerStyle>
-                                                <Style BasedOn="{StaticResource DefaultGridViewItemStyle}" TargetType="GridViewItem">
-                                                    <Setter Property="Padding" Value="0" />
-                                                    <Setter Property="Margin" Value="1" />
-                                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-                                                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
-                                                </Style>
-                                            </GridView.ItemContainerStyle>
-                                            <GridView.ItemTemplate>
-                                                <DataTemplate>
-                                                    <Grid
-                                                        HorizontalAlignment="Stretch"
-                                                        VerticalAlignment="Stretch"
-                                                        win:AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                                                        ToolTipService.ToolTip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}">
-                                                        <Grid.Background>
-                                                            <SolidColorBrush Color="{Binding}" />
-                                                        </Grid.Background>
-                                                    </Grid>
-                                                </DataTemplate>
-                                            </GridView.ItemTemplate>
-                                        </GridView>
-                                    </Grid>
-                                </controls:Case>
-                                <controls:Case Value="ChannelsItem">
-                                    <Grid
-                                        HorizontalAlignment="Stretch"
-                                        animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
-                                        animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
-                                        ColumnSpacing="24"
-                                        RowSpacing="12">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="120" />
-                                            <ColumnDefinition Width="*" />
-                                        </Grid.ColumnDefinitions>
-                                        <Grid.RowDefinitions>
-                                            <RowDefinition />
-                                            <RowDefinition />
-                                            <RowDefinition />
-                                            <RowDefinition />
-                                            <RowDefinition />
-                                        </Grid.RowDefinitions>
-                                        <!--  Top color model & Hex input  -->
-
-                                        <!--  Content RGB/HSV names are hard-coded in ColorPicker as well  -->
-                                        <!--  ToggleButtons are styled to look like a 'SegmentedControl' or 'ButtonGroup'  -->
-                                        <ComboBox
-                                            x:Name="ColorModeComboBox"
-                                            HorizontalAlignment="Stretch"
-                                            SelectedIndex="0">
-                                            <ComboBoxItem>RGB</ComboBoxItem>
-                                            <ComboBoxItem>HSV</ComboBoxItem>
-                                        </ComboBox>
-
-
-                                        <!--  Name must NOT match what is in ColorPicker 'HexTextBox'  -->
-                                        <TextBox
-                                            x:Name="HexInputTextBox"
-                                            Grid.Column="1"
-                                            Height="32"
-                                            HorizontalAlignment="Stretch"
-                                            win:AutomationProperties.Name="Hexadecimal Color Input"
-                                            CharacterCasing="Upper"
-                                            PlaceholderText="#"
-                                            Style="{StaticResource ColorInputTextBoxStyle}" />
-
-
-                                        <!--  Color channel editing controls  -->
-                                        <!--  Channel 1 RGB:Red HSV:Hue  -->
-
-                                        <muxc:NumberBox
-                                            x:Name="Channel1NumberBox"
-                                            Grid.Row="1"
-                                            VerticalAlignment="Center"
-                                            win:AutomationProperties.Name="Red Channel"
-                                            PlaceholderText="R"
-                                            Style="{StaticResource ColorInputNumberBoxStyle}" />
-                                        <primitives:ColorPickerSlider
-                                            x:Name="Channel1Slider"
-                                            Grid.Row="1"
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Stretch"
-                                            VerticalAlignment="Center"
-                                            win:AutomationProperties.Name="Red Channel" />
-
-                                        <!--  Channel 2 RGB:Green HSV:Saturation  -->
-
-                                        <muxc:NumberBox
-                                            x:Name="Channel2NumberBox"
-                                            Grid.Row="2"
-                                            VerticalAlignment="Center"
-                                            win:AutomationProperties.Name="Green Channel"
-                                            PlaceholderText="G"
-                                            Style="{StaticResource ColorInputNumberBoxStyle}" />
-
-                                        <primitives:ColorPickerSlider
-                                            x:Name="Channel2Slider"
-                                            Grid.Row="2"
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Stretch"
-                                            VerticalAlignment="Center"
-                                            win:AutomationProperties.Name="Green Channel" />
-
-
-                                        <!--  Channel 3 RGB:Blue HSV:Value  -->
-                                        <muxc:NumberBox
-                                            x:Name="Channel3NumberBox"
-                                            Grid.Row="3"
-                                            VerticalAlignment="Center"
-                                            win:AutomationProperties.Name="Blue Channel"
-                                            PlaceholderText="B"
-                                            Style="{StaticResource ColorInputNumberBoxStyle}" />
-
-                                        <primitives:ColorPickerSlider
-                                            x:Name="Channel3Slider"
-                                            Grid.Row="3"
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Stretch"
-                                            VerticalAlignment="Center"
-                                            win:AutomationProperties.Name="Blue Channel" />
-
-
-                                        <!--  Alpha channel  -->
-
-                                        <muxc:NumberBox
-                                            x:Name="AlphaChannelNumberBox"
-                                            Grid.Row="4"
-                                            VerticalAlignment="Center"
-                                            win:AutomationProperties.Name="Alpha Channel"
-                                            PlaceholderText="A"
-                                            Style="{StaticResource ColorInputNumberBoxStyle}" />
-
-                                        <primitives:ColorPickerSlider
-                                            x:Name="AlphaChannelSlider"
-                                            Grid.Row="4"
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Stretch"
-                                            VerticalAlignment="Center"
-                                            win:AutomationProperties.Name="Alpha Channel" />
-
-                                    </Grid>
-                                </controls:Case>
-                            </controls:SwitchPresenter>
-                            <Grid
-                                x:Name="ColorPreviewGrid"
-                                Grid.Row="0"
-                                Height="32">
-                                <primitives:ColorPreviewer x:Name="ColorPreviewer" ShowAccentColors="{TemplateBinding ShowAccentColors}" />
-                            </Grid>
-
                             <VisualStateManager.VisualStateGroups>
 
                                 <VisualStateGroup x:Name="CommonStates">
@@ -462,6 +219,225 @@
                                 </VisualStateGroup>
 
                             </VisualStateManager.VisualStateGroups>
+
+                            <controls:Segmented x:Name="ColorPanelSelector"
+                                                Grid.Row="1"
+                                                HorizontalAlignment="Stretch"
+                                                SelectedIndex="0">
+                                <controls:SegmentedItem x:Name="SpectrumItem"
+                                                        AutomationProperties.Name="Spectrum"
+                                                        Icon="{ui:FontIcon Glyph=&#xE76D;}" />
+                                <controls:SegmentedItem x:Name="PaletteItem"
+                                                        AutomationProperties.Name="Palette"
+                                                        Icon="{ui:FontIcon Glyph=&#xE790;}" />
+                                <controls:SegmentedItem x:Name="ChannelsItem"
+                                                        AutomationProperties.Name="Channels"
+                                                        Icon="{ui:FontIcon Glyph=&#xE9E9;}" />
+                            </controls:Segmented>
+
+                            <controls:SwitchPresenter x:Name="ContentContainer"
+                                                      Grid.Row="2"
+                                                      Value="{Binding ElementName=ColorPanelSelector, Path=SelectedItem.Name}">
+                                <controls:Case Value="SpectrumItem">
+                                    <Grid HorizontalAlignment="Stretch"
+                                          animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
+                                          animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="Auto" />
+                                            <ColumnDefinition Width="*" />
+                                            <ColumnDefinition Width="Auto" />
+                                        </Grid.ColumnDefinitions>
+                                        <primitives:ColorPickerSlider x:Name="ColorSpectrumThirdDimensionSlider"
+                                                                      Margin="0,0,12,0"
+                                                                      HorizontalAlignment="Center"
+                                                                      VerticalAlignment="Stretch"
+                                                                      Orientation="Vertical" />
+                                        <!--  Keep in mind the spectrum is always HSV  -->
+                                        <!--  This must also not be named 'ColorSpectrum' to differentiate from the base class  -->
+                                        <Viewbox Grid.Column="1"
+                                                 HorizontalAlignment="Stretch"
+                                                 VerticalAlignment="Stretch">
+
+                                            <winuiprimitives:ColorSpectrum x:Name="ColorSpectrumControl"
+                                                                           Grid.Column="1"
+                                                                           MinWidth="256"
+                                                                           MinHeight="256"
+                                                                           win:AutomationProperties.Name="Third Dimension"
+                                                                           Components="{TemplateBinding ColorSpectrumComponents}"
+                                                                           CornerRadius="{StaticResource ControlCornerRadius}"
+                                                                           MaxHue="{TemplateBinding MaxHue}"
+                                                                           MaxSaturation="{TemplateBinding MaxSaturation}"
+                                                                           MaxValue="{TemplateBinding MaxValue}"
+                                                                           MinHue="{TemplateBinding MinHue}"
+                                                                           MinSaturation="{TemplateBinding MinSaturation}"
+                                                                           MinValue="{TemplateBinding MinValue}"
+                                                                           Shape="{TemplateBinding ColorSpectrumShape}" />
+                                        </Viewbox>
+
+
+                                        <primitives:ColorPickerSlider x:Name="ColorSpectrumAlphaSlider"
+                                                                      Grid.Column="2"
+                                                                      Margin="12,0,0,0"
+                                                                      HorizontalAlignment="Center"
+                                                                      VerticalAlignment="Stretch"
+                                                                      win:AutomationProperties.Name="Alpha Channel"
+                                                                      Orientation="Vertical" />
+                                    </Grid>
+                                </controls:Case>
+                                <controls:Case Value="PaletteItem">
+                                    <Grid HorizontalAlignment="Stretch">
+                                        <GridView Margin="0"
+                                                  Padding="0"
+                                                  animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
+                                                  animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
+                                                  ItemsSource="{TemplateBinding CustomPaletteColors}"
+                                                  SelectedValue="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Color, Mode=TwoWay}"
+                                                  SelectionMode="Single"
+                                                  Tag="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Color, Mode=OneWay}">
+                                            <GridView.ItemsPanel>
+                                                <ItemsPanelTemplate>
+                                                    <controls:UniformGrid ui:FrameworkElementExtensions.AncestorType="controls:ColorPicker"
+                                                                          Columns="{Binding (ui:FrameworkElementExtensions.Ancestor).CustomPaletteColumnCount, RelativeSource={RelativeSource Self}}" />
+                                                </ItemsPanelTemplate>
+                                            </GridView.ItemsPanel>
+                                            <GridView.ItemContainerStyle>
+                                                <Style BasedOn="{StaticResource DefaultGridViewItemStyle}"
+                                                       TargetType="GridViewItem">
+                                                    <Setter Property="Padding" Value="0" />
+                                                    <Setter Property="Margin" Value="1" />
+                                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+                                                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
+                                                </Style>
+                                            </GridView.ItemContainerStyle>
+                                            <GridView.ItemTemplate>
+                                                <DataTemplate>
+                                                    <Grid HorizontalAlignment="Stretch"
+                                                          VerticalAlignment="Stretch"
+                                                          win:AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                                          ToolTipService.ToolTip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}">
+                                                        <Grid.Background>
+                                                            <SolidColorBrush Color="{Binding}" />
+                                                        </Grid.Background>
+                                                    </Grid>
+                                                </DataTemplate>
+                                            </GridView.ItemTemplate>
+                                        </GridView>
+                                    </Grid>
+                                </controls:Case>
+                                <controls:Case Value="ChannelsItem">
+                                    <Grid HorizontalAlignment="Stretch"
+                                          animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
+                                          animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
+                                          ColumnSpacing="24"
+                                          RowSpacing="12">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="120" />
+                                            <ColumnDefinition Width="*" />
+                                        </Grid.ColumnDefinitions>
+                                        <Grid.RowDefinitions>
+                                            <RowDefinition />
+                                            <RowDefinition />
+                                            <RowDefinition />
+                                            <RowDefinition />
+                                            <RowDefinition />
+                                        </Grid.RowDefinitions>
+                                        <!--  Top color model & Hex input  -->
+
+                                        <!--  Content RGB/HSV names are hard-coded in ColorPicker as well  -->
+                                        <!--  ToggleButtons are styled to look like a 'SegmentedControl' or 'ButtonGroup'  -->
+                                        <ComboBox x:Name="ColorModeComboBox"
+                                                  HorizontalAlignment="Stretch"
+                                                  SelectedIndex="0">
+                                            <ComboBoxItem>RGB</ComboBoxItem>
+                                            <ComboBoxItem>HSV</ComboBoxItem>
+                                        </ComboBox>
+
+
+                                        <!--  Name must NOT match what is in ColorPicker 'HexTextBox'  -->
+                                        <TextBox x:Name="HexInputTextBox"
+                                                 Grid.Column="1"
+                                                 Height="32"
+                                                 HorizontalAlignment="Stretch"
+                                                 win:AutomationProperties.Name="Hexadecimal Color Input"
+                                                 CharacterCasing="Upper"
+                                                 PlaceholderText="#"
+                                                 Style="{StaticResource ColorInputTextBoxStyle}" />
+
+
+                                        <!--  Color channel editing controls  -->
+                                        <!--  Channel 1 RGB:Red HSV:Hue  -->
+
+                                        <muxc:NumberBox x:Name="Channel1NumberBox"
+                                                        Grid.Row="1"
+                                                        VerticalAlignment="Center"
+                                                        win:AutomationProperties.Name="Red Channel"
+                                                        PlaceholderText="R"
+                                                        Style="{StaticResource ColorInputNumberBoxStyle}" />
+                                        <primitives:ColorPickerSlider x:Name="Channel1Slider"
+                                                                      Grid.Row="1"
+                                                                      Grid.Column="1"
+                                                                      HorizontalAlignment="Stretch"
+                                                                      VerticalAlignment="Center"
+                                                                      win:AutomationProperties.Name="Red Channel" />
+
+                                        <!--  Channel 2 RGB:Green HSV:Saturation  -->
+
+                                        <muxc:NumberBox x:Name="Channel2NumberBox"
+                                                        Grid.Row="2"
+                                                        VerticalAlignment="Center"
+                                                        win:AutomationProperties.Name="Green Channel"
+                                                        PlaceholderText="G"
+                                                        Style="{StaticResource ColorInputNumberBoxStyle}" />
+
+                                        <primitives:ColorPickerSlider x:Name="Channel2Slider"
+                                                                      Grid.Row="2"
+                                                                      Grid.Column="1"
+                                                                      HorizontalAlignment="Stretch"
+                                                                      VerticalAlignment="Center"
+                                                                      win:AutomationProperties.Name="Green Channel" />
+
+
+                                        <!--  Channel 3 RGB:Blue HSV:Value  -->
+                                        <muxc:NumberBox x:Name="Channel3NumberBox"
+                                                        Grid.Row="3"
+                                                        VerticalAlignment="Center"
+                                                        win:AutomationProperties.Name="Blue Channel"
+                                                        PlaceholderText="B"
+                                                        Style="{StaticResource ColorInputNumberBoxStyle}" />
+
+                                        <primitives:ColorPickerSlider x:Name="Channel3Slider"
+                                                                      Grid.Row="3"
+                                                                      Grid.Column="1"
+                                                                      HorizontalAlignment="Stretch"
+                                                                      VerticalAlignment="Center"
+                                                                      win:AutomationProperties.Name="Blue Channel" />
+
+
+                                        <!--  Alpha channel  -->
+
+                                        <muxc:NumberBox x:Name="AlphaChannelNumberBox"
+                                                        Grid.Row="4"
+                                                        VerticalAlignment="Center"
+                                                        win:AutomationProperties.Name="Alpha Channel"
+                                                        PlaceholderText="A"
+                                                        Style="{StaticResource ColorInputNumberBoxStyle}" />
+
+                                        <primitives:ColorPickerSlider x:Name="AlphaChannelSlider"
+                                                                      Grid.Row="4"
+                                                                      Grid.Column="1"
+                                                                      HorizontalAlignment="Stretch"
+                                                                      VerticalAlignment="Center"
+                                                                      win:AutomationProperties.Name="Alpha Channel" />
+
+                                    </Grid>
+                                </controls:Case>
+                            </controls:SwitchPresenter>
+                            <Grid x:Name="ColorPreviewGrid"
+                                  Grid.Row="0"
+                                  Height="32">
+                                <primitives:ColorPreviewer x:Name="ColorPreviewer"
+                                                           ShowAccentColors="{TemplateBinding ShowAccentColors}" />
+                            </Grid>
                         </Grid>
                     </ControlTemplate>
                 </Setter.Value>
@@ -469,7 +445,8 @@
         </Style.Setters>
     </Style>
 
-    <Style x:Key="ColorInputTextBoxStyle" TargetType="TextBox">
+    <Style x:Key="ColorInputTextBoxStyle"
+           TargetType="TextBox">
         <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
         <Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
         <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
@@ -495,71 +472,81 @@
                 <ControlTemplate TargetType="TextBox">
                     <Grid>
                         <Grid.Resources>
-                            <Style x:Name="DeleteButtonStyle" TargetType="Button">
+                            <Style x:Name="DeleteButtonStyle"
+                                   TargetType="Button">
                                 <Setter Property="Template">
                                     <Setter.Value>
                                         <ControlTemplate TargetType="Button">
-                                            <Grid
-                                                x:Name="ButtonLayoutGrid"
-                                                Margin="{ThemeResource TextBoxInnerButtonMargin}"
-                                                Background="{ThemeResource TextControlButtonBackground}"
-                                                BackgroundSizing="{TemplateBinding BackgroundSizing}"
-                                                BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
-                                                BorderThickness="{TemplateBinding BorderThickness}"
-                                                CornerRadius="{TemplateBinding CornerRadius}">
-                                                <TextBlock
-                                                    x:Name="GlyphElement"
-                                                    HorizontalAlignment="Center"
-                                                    VerticalAlignment="Center"
-                                                    AutomationProperties.AccessibilityView="Raw"
-                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                                    FontSize="{ThemeResource TextBoxIconFontSize}"
-                                                    FontStyle="Normal"
-                                                    Foreground="{ThemeResource TextControlButtonForeground}"
-                                                    Text="&#xE894;" />
+                                            <Grid x:Name="ButtonLayoutGrid"
+                                                  Margin="{ThemeResource TextBoxInnerButtonMargin}"
+                                                  Background="{ThemeResource TextControlButtonBackground}"
+                                                  BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                                                  BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
+                                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                                  CornerRadius="{TemplateBinding CornerRadius}">
                                                 <VisualStateManager.VisualStateGroups>
                                                     <VisualStateGroup x:Name="CommonStates">
                                                         <VisualState x:Name="Normal" />
 
                                                         <VisualState x:Name="PointerOver">
                                                             <Storyboard>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}" />
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid"
+                                                                                               Storyboard.TargetProperty="Background">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                            Value="{ThemeResource TextControlButtonBackgroundPointerOver}" />
                                                                 </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" />
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid"
+                                                                                               Storyboard.TargetProperty="BorderBrush">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                            Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" />
                                                                 </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}" />
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
+                                                                                               Storyboard.TargetProperty="Foreground">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                            Value="{ThemeResource TextControlButtonForegroundPointerOver}" />
                                                                 </ObjectAnimationUsingKeyFrames>
                                                             </Storyboard>
                                                         </VisualState>
 
                                                         <VisualState x:Name="Pressed">
                                                             <Storyboard>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}" />
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid"
+                                                                                               Storyboard.TargetProperty="Background">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                            Value="{ThemeResource TextControlButtonBackgroundPressed}" />
                                                                 </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}" />
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid"
+                                                                                               Storyboard.TargetProperty="BorderBrush">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                            Value="{ThemeResource TextControlButtonBorderBrushPressed}" />
                                                                 </ObjectAnimationUsingKeyFrames>
-                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
-                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}" />
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
+                                                                                               Storyboard.TargetProperty="Foreground">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                            Value="{ThemeResource TextControlButtonForegroundPressed}" />
                                                                 </ObjectAnimationUsingKeyFrames>
                                                             </Storyboard>
                                                         </VisualState>
 
                                                         <VisualState x:Name="Disabled">
                                                             <Storyboard>
-                                                                <DoubleAnimation
-                                                                    Storyboard.TargetName="ButtonLayoutGrid"
-                                                                    Storyboard.TargetProperty="Opacity"
-                                                                    To="0"
-                                                                    Duration="0" />
+                                                                <DoubleAnimation Storyboard.TargetName="ButtonLayoutGrid"
+                                                                                 Storyboard.TargetProperty="Opacity"
+                                                                                 To="0"
+                                                                                 Duration="0" />
                                                             </Storyboard>
                                                         </VisualState>
                                                     </VisualStateGroup>
                                                 </VisualStateManager.VisualStateGroups>
+                                                <TextBlock x:Name="GlyphElement"
+                                                           HorizontalAlignment="Center"
+                                                           VerticalAlignment="Center"
+                                                           AutomationProperties.AccessibilityView="Raw"
+                                                           FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                           FontSize="{ThemeResource TextBoxIconFontSize}"
+                                                           FontStyle="Normal"
+                                                           Foreground="{ThemeResource TextControlButtonForeground}"
+                                                           Text="&#xE894;" />
                                             </Grid>
                                         </ControlTemplate>
                                     </Setter.Value>
@@ -573,96 +560,6 @@
                             <RowDefinition Height="Auto" />
                         </Grid.RowDefinitions>
 
-                        <ContentPresenter
-                            x:Name="HeaderContentPresenter"
-                            Grid.Row="0"
-                            Grid.Column="0"
-                            Grid.ColumnSpan="2"
-                            Margin="{ThemeResource TextBoxTopHeaderMargin}"
-                            VerticalAlignment="Top"
-                            x:DeferLoadStrategy="Lazy"
-                            Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            FontWeight="Normal"
-                            Foreground="{ThemeResource TextControlHeaderForeground}"
-                            TextWrapping="Wrap"
-                            Visibility="Collapsed" />
-
-                        <Grid Grid.Row="1" Grid.ColumnSpan="2">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
-                            </Grid.ColumnDefinitions>
-
-
-                            <Border
-                                x:Name="BorderElement"
-                                Grid.ColumnSpan="3"
-                                MinWidth="{TemplateBinding MinWidth}"
-                                MinHeight="{TemplateBinding MinHeight}"
-                                Background="{TemplateBinding Background}"
-                                BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{TemplateBinding BorderThickness}"
-                                Control.IsTemplateFocusTarget="True"
-                                CornerRadius="{TemplateBinding CornerRadius}" />
-                            <ScrollViewer
-                                x:Name="ContentElement"
-                                Grid.Column="1"
-                                Margin="{TemplateBinding BorderThickness}"
-                                Padding="{TemplateBinding Padding}"
-                                AutomationProperties.AccessibilityView="Raw"
-                                Foreground="{TemplateBinding Foreground}"
-                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
-                                IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
-                                IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
-                                IsTabStop="False"
-                                IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
-                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
-                                VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
-                                ZoomMode="Disabled" />
-                            <Border
-                                x:Name="PlaceholderContainerElement"
-                                MinWidth="24"
-                                Margin="1"
-                                Background="{ThemeResource ControlAltFillColorTertiaryBrush}"
-                                BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
-                                BorderThickness="0,0,1,0">
-                                <TextBlock
-                                    x:Name="PlaceholderTextBlock"
-                                    Padding="6,5,6,6"
-                                    HorizontalAlignment="Center"
-                                    VerticalAlignment="Center"
-                                    Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
-                                    IsHitTestVisible="False"
-                                    Text="{TemplateBinding PlaceholderText}" />
-                            </Border>
-
-                            <Button
-                                x:Name="DeleteButton"
-                                Grid.Column="2"
-                                Width="30"
-                                Padding="{ThemeResource HelperButtonThemePadding}"
-                                VerticalAlignment="Stretch"
-                                AutomationProperties.AccessibilityView="Raw"
-                                BorderThickness="{TemplateBinding BorderThickness}"
-                                CornerRadius="{TemplateBinding CornerRadius}"
-                                FontSize="{TemplateBinding FontSize}"
-                                IsTabStop="False"
-                                Style="{StaticResource DeleteButtonStyle}"
-                                Visibility="Collapsed" />
-                        </Grid>
-                        <ContentPresenter
-                            x:Name="DescriptionPresenter"
-                            Grid.Row="2"
-                            Grid.Column="0"
-                            Grid.ColumnSpan="2"
-                            x:Load="False"
-                            AutomationProperties.AccessibilityView="Raw"
-                            Content="{TemplateBinding Description}"
-                            Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
-
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal" />
@@ -670,26 +567,38 @@
                                 <VisualState x:Name="Disabled">
 
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlBackgroundDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlBorderBrushDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlForegroundDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderContainerElement" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ControlAltFillColorDisabledBrush}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderContainerElement"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ControlAltFillColorDisabledBrush}" />
                                         </ObjectAnimationUsingKeyFrames>
                                         <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>-->
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundDisabled}}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundDisabled}}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
@@ -697,17 +606,23 @@
                                 <VisualState x:Name="PointerOver">
 
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlBorderBrushPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlBackgroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
                                         <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundPointerOver}}" />
                                        </ObjectAnimationUsingKeyFrames>-->
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlForegroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
@@ -717,17 +632,25 @@
                                         <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundFocused}}" />
                                        </ObjectAnimationUsingKeyFrames>-->
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlBackgroundFocused}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlBorderBrushFocused}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderThemeThicknessFocused}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
+                                                                       Storyboard.TargetProperty="BorderThickness">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlBorderThemeThicknessFocused}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource TextControlForegroundFocused}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
@@ -737,7 +660,8 @@
                                 <VisualState x:Name="ButtonVisible">
 
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton"
+                                                                       Storyboard.TargetProperty="Visibility">
                                             <DiscreteObjectKeyFrame KeyTime="0">
                                                 <DiscreteObjectKeyFrame.Value>
                                                     <Visibility>Visible</Visibility>
@@ -751,6 +675,90 @@
                             </VisualStateGroup>
 
                         </VisualStateManager.VisualStateGroups>
+
+                        <ContentPresenter x:Name="HeaderContentPresenter"
+                                          Grid.Row="0"
+                                          Grid.Column="0"
+                                          Grid.ColumnSpan="2"
+                                          Margin="{ThemeResource TextBoxTopHeaderMargin}"
+                                          VerticalAlignment="Top"
+                                          x:DeferLoadStrategy="Lazy"
+                                          Content="{TemplateBinding Header}"
+                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                          FontWeight="Normal"
+                                          Foreground="{ThemeResource TextControlHeaderForeground}"
+                                          TextWrapping="Wrap"
+                                          Visibility="Collapsed" />
+
+                        <Grid Grid.Row="1"
+                              Grid.ColumnSpan="2">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+
+
+                            <Border x:Name="BorderElement"
+                                    Grid.ColumnSpan="3"
+                                    MinWidth="{TemplateBinding MinWidth}"
+                                    MinHeight="{TemplateBinding MinHeight}"
+                                    Background="{TemplateBinding Background}"
+                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderThickness="{TemplateBinding BorderThickness}"
+                                    Control.IsTemplateFocusTarget="True"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+                            <ScrollViewer x:Name="ContentElement"
+                                          Grid.Column="1"
+                                          Margin="{TemplateBinding BorderThickness}"
+                                          Padding="{TemplateBinding Padding}"
+                                          AutomationProperties.AccessibilityView="Raw"
+                                          Foreground="{TemplateBinding Foreground}"
+                                          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
+                                          IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                          IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
+                                          IsTabStop="False"
+                                          IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
+                                          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
+                                          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
+                                          ZoomMode="Disabled" />
+                            <Border x:Name="PlaceholderContainerElement"
+                                    MinWidth="24"
+                                    Margin="1"
+                                    Background="{ThemeResource ControlAltFillColorTertiaryBrush}"
+                                    BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
+                                    BorderThickness="0,0,1,0">
+                                <TextBlock x:Name="PlaceholderTextBlock"
+                                           Padding="6,5,6,6"
+                                           HorizontalAlignment="Center"
+                                           VerticalAlignment="Center"
+                                           Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
+                                           IsHitTestVisible="False"
+                                           Text="{TemplateBinding PlaceholderText}" />
+                            </Border>
+
+                            <Button x:Name="DeleteButton"
+                                    Grid.Column="2"
+                                    Width="30"
+                                    Padding="{ThemeResource HelperButtonThemePadding}"
+                                    VerticalAlignment="Stretch"
+                                    AutomationProperties.AccessibilityView="Raw"
+                                    BorderThickness="{TemplateBinding BorderThickness}"
+                                    CornerRadius="{TemplateBinding CornerRadius}"
+                                    FontSize="{TemplateBinding FontSize}"
+                                    IsTabStop="False"
+                                    Style="{StaticResource DeleteButtonStyle}"
+                                    Visibility="Collapsed" />
+                        </Grid>
+                        <ContentPresenter x:Name="DescriptionPresenter"
+                                          Grid.Row="2"
+                                          Grid.Column="0"
+                                          Grid.ColumnSpan="2"
+                                          x:Load="False"
+                                          AutomationProperties.AccessibilityView="Raw"
+                                          Content="{TemplateBinding Description}"
+                                          Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
@@ -758,10 +766,9 @@
     </Style>
 
     <!--  These are 1:1 copies of the default NumberBox-related styles, only change is the InputBox.Style  -->
-    <Style
-        x:Name="NumberBoxSpinButtonStyle"
-        BasedOn="{StaticResource DefaultRepeatButtonStyle}"
-        TargetType="RepeatButton">
+    <Style x:Name="NumberBoxSpinButtonStyle"
+           BasedOn="{StaticResource DefaultRepeatButtonStyle}"
+           TargetType="RepeatButton">
         <Style.Setters>
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="MinWidth" Value="34" />
@@ -773,7 +780,8 @@
         </Style.Setters>
     </Style>
 
-    <Style x:Name="NumberBoxPopupSpinButtonStyle" TargetType="RepeatButton">
+    <Style x:Name="NumberBoxPopupSpinButtonStyle"
+           TargetType="RepeatButton">
         <Style.Setters>
             <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
             <Setter Property="IsTabStop" Value="False" />
@@ -783,7 +791,8 @@
             <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
         </Style.Setters>
     </Style>
-    <Style x:Key="ColorInputNumberBoxStyle" TargetType="muxc:NumberBox">
+    <Style x:Key="ColorInputNumberBoxStyle"
+           TargetType="muxc:NumberBox">
         <Setter Property="IsTabStop" Value="False" />
         <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
         <Setter Property="SelectionFlyout" Value="{StaticResource TextControlCommandBarSelectionFlyout}" />
@@ -799,18 +808,24 @@
                             <ResourceDictionary>
                                 <ResourceDictionary.ThemeDictionaries>
                                     <ResourceDictionary x:Key="Light">
-                                        <StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="TextControlBorderBrush" />
-                                        <StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="TextControlBorderBrush" />
+                                        <StaticResource x:Key="RepeatButtonBorderBrushPointerOver"
+                                                        ResourceKey="TextControlBorderBrush" />
+                                        <StaticResource x:Key="RepeatButtonBorderBrushPressed"
+                                                        ResourceKey="TextControlBorderBrush" />
                                     </ResourceDictionary>
 
                                     <ResourceDictionary x:Key="Dark">
-                                        <StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="TextControlBorderBrush" />
-                                        <StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="TextControlBorderBrush" />
+                                        <StaticResource x:Key="RepeatButtonBorderBrushPointerOver"
+                                                        ResourceKey="TextControlBorderBrush" />
+                                        <StaticResource x:Key="RepeatButtonBorderBrushPressed"
+                                                        ResourceKey="TextControlBorderBrush" />
                                     </ResourceDictionary>
 
                                     <ResourceDictionary x:Key="HighContrast">
-                                        <StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
-                                        <StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
+                                        <StaticResource x:Key="RepeatButtonBorderBrushPointerOver"
+                                                        ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
+                                        <StaticResource x:Key="RepeatButtonBorderBrushPressed"
+                                                        ResourceKey="SystemControlHighlightTransparentBrush" />
                                     </ResourceDictionary>
                                 </ResourceDictionary.ThemeDictionaries>
                             </ResourceDictionary>
@@ -827,105 +842,6 @@
                             <ColumnDefinition Width="Auto" />
                             <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
-
-                        <ContentPresenter
-                            x:Name="HeaderContentPresenter"
-                            Grid.ColumnSpan="3"
-                            Margin="{ThemeResource TextBoxTopHeaderMargin}"
-                            VerticalAlignment="Top"
-                            x:DeferLoadStrategy="Lazy"
-                            Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            FontFamily="{TemplateBinding FontFamily}"
-                            FontSize="{TemplateBinding FontSize}"
-                            FontWeight="Normal"
-                            Foreground="{ThemeResource TextControlHeaderForeground}"
-                            TextWrapping="Wrap"
-                            Visibility="Collapsed" />
-
-                        <TextBox
-                            x:Name="InputBox"
-                            Grid.Row="1"
-                            Padding="{TemplateBinding Padding}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}"
-                            FontFamily="{TemplateBinding FontFamily}"
-                            FontSize="{TemplateBinding FontSize}"
-                            FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}"
-                            InputScope="{TemplateBinding InputScope}"
-                            PlaceholderText="{TemplateBinding PlaceholderText}"
-                            PreventKeyboardDisplayOnProgrammaticFocus="{TemplateBinding PreventKeyboardDisplayOnProgrammaticFocus}"
-                            SelectionFlyout="{TemplateBinding SelectionFlyout}"
-                            SelectionHighlightColor="{TemplateBinding SelectionHighlightColor}"
-                            Style="{StaticResource ColorInputTextBoxStyle}"
-                            TextAlignment="{TemplateBinding TextAlignment}"
-                            TextReadingOrder="{TemplateBinding TextReadingOrder}" />
-
-                        <Popup
-                            x:Name="UpDownPopup"
-                            Grid.Row="1"
-                            Grid.Column="1"
-                            HorizontalAlignment="Left"
-                            contract8Present:ShouldConstrainToRootBounds="False"
-                            HorizontalOffset="{ThemeResource NumberBoxPopupHorizonalOffset}"
-                            VerticalOffset="{ThemeResource NumberBoxPopupVerticalOffset}">
-
-                            <Grid
-                                x:Name="PopupContentRoot"
-                                Background="{ThemeResource NumberBoxPopupBackground}"
-                                BorderBrush="{ThemeResource NumberBoxPopupBorderBrush}"
-                                BorderThickness="{ThemeResource NumberBoxPopupBorderThickness}"
-                                CornerRadius="{ThemeResource OverlayCornerRadius}">
-
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="*" />
-                                    <RowDefinition Height="*" />
-                                </Grid.RowDefinitions>
-
-                                <RepeatButton
-                                    x:Name="PopupUpSpinButton"
-                                    Content="&#xE70E;"
-                                    Style="{StaticResource NumberBoxPopupSpinButtonStyle}" />
-
-                                <RepeatButton
-                                    x:Name="PopupDownSpinButton"
-                                    Grid.Row="1"
-                                    Content="&#xE70D;"
-                                    Style="{StaticResource NumberBoxPopupSpinButtonStyle}" />
-                            </Grid>
-                        </Popup>
-
-                        <RepeatButton
-                            x:Name="UpSpinButton"
-                            Grid.Row="1"
-                            Grid.Column="1"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            Content="&#xE70E;"
-                            CornerRadius="0"
-                            FontSize="{TemplateBinding FontSize}"
-                            Style="{StaticResource NumberBoxSpinButtonStyle}"
-                            Visibility="Collapsed" />
-
-                        <RepeatButton
-                            x:Name="DownSpinButton"
-                            Grid.Row="1"
-                            Grid.Column="2"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            Content="&#xE70D;"
-                            CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}"
-                            FontSize="{TemplateBinding FontSize}"
-                            Style="{StaticResource NumberBoxSpinButtonStyle}"
-                            Visibility="Collapsed" />
-
-                        <ContentPresenter
-                            x:Name="DescriptionPresenter"
-                            Grid.Row="2"
-                            Grid.ColumnSpan="3"
-                            AutomationProperties.AccessibilityView="Raw"
-                            Content="{TemplateBinding Description}"
-                            Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal" />
@@ -973,6 +889,96 @@
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
+
+                        <ContentPresenter x:Name="HeaderContentPresenter"
+                                          Grid.ColumnSpan="3"
+                                          Margin="{ThemeResource TextBoxTopHeaderMargin}"
+                                          VerticalAlignment="Top"
+                                          x:DeferLoadStrategy="Lazy"
+                                          Content="{TemplateBinding Header}"
+                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                          FontFamily="{TemplateBinding FontFamily}"
+                                          FontSize="{TemplateBinding FontSize}"
+                                          FontWeight="Normal"
+                                          Foreground="{ThemeResource TextControlHeaderForeground}"
+                                          TextWrapping="Wrap"
+                                          Visibility="Collapsed" />
+
+                        <TextBox x:Name="InputBox"
+                                 Grid.Row="1"
+                                 Padding="{TemplateBinding Padding}"
+                                 BorderBrush="{TemplateBinding BorderBrush}"
+                                 BorderThickness="{TemplateBinding BorderThickness}"
+                                 CornerRadius="{TemplateBinding CornerRadius}"
+                                 FontFamily="{TemplateBinding FontFamily}"
+                                 FontSize="{TemplateBinding FontSize}"
+                                 FontWeight="{TemplateBinding FontWeight}"
+                                 Foreground="{TemplateBinding Foreground}"
+                                 InputScope="{TemplateBinding InputScope}"
+                                 PlaceholderText="{TemplateBinding PlaceholderText}"
+                                 PreventKeyboardDisplayOnProgrammaticFocus="{TemplateBinding PreventKeyboardDisplayOnProgrammaticFocus}"
+                                 SelectionFlyout="{TemplateBinding SelectionFlyout}"
+                                 SelectionHighlightColor="{TemplateBinding SelectionHighlightColor}"
+                                 Style="{StaticResource ColorInputTextBoxStyle}"
+                                 TextAlignment="{TemplateBinding TextAlignment}"
+                                 TextReadingOrder="{TemplateBinding TextReadingOrder}" />
+
+                        <Popup x:Name="UpDownPopup"
+                               Grid.Row="1"
+                               Grid.Column="1"
+                               HorizontalAlignment="Left"
+                               contract8Present:ShouldConstrainToRootBounds="False"
+                               HorizontalOffset="{ThemeResource NumberBoxPopupHorizonalOffset}"
+                               VerticalOffset="{ThemeResource NumberBoxPopupVerticalOffset}">
+
+                            <Grid x:Name="PopupContentRoot"
+                                  Background="{ThemeResource NumberBoxPopupBackground}"
+                                  BorderBrush="{ThemeResource NumberBoxPopupBorderBrush}"
+                                  BorderThickness="{ThemeResource NumberBoxPopupBorderThickness}"
+                                  CornerRadius="{ThemeResource OverlayCornerRadius}">
+
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="*" />
+                                    <RowDefinition Height="*" />
+                                </Grid.RowDefinitions>
+
+                                <RepeatButton x:Name="PopupUpSpinButton"
+                                              Content="&#xE70E;"
+                                              Style="{StaticResource NumberBoxPopupSpinButtonStyle}" />
+
+                                <RepeatButton x:Name="PopupDownSpinButton"
+                                              Grid.Row="1"
+                                              Content="&#xE70D;"
+                                              Style="{StaticResource NumberBoxPopupSpinButtonStyle}" />
+                            </Grid>
+                        </Popup>
+
+                        <RepeatButton x:Name="UpSpinButton"
+                                      Grid.Row="1"
+                                      Grid.Column="1"
+                                      BorderBrush="{TemplateBinding BorderBrush}"
+                                      Content="&#xE70E;"
+                                      CornerRadius="0"
+                                      FontSize="{TemplateBinding FontSize}"
+                                      Style="{StaticResource NumberBoxSpinButtonStyle}"
+                                      Visibility="Collapsed" />
+
+                        <RepeatButton x:Name="DownSpinButton"
+                                      Grid.Row="1"
+                                      Grid.Column="2"
+                                      BorderBrush="{TemplateBinding BorderBrush}"
+                                      Content="&#xE70D;"
+                                      CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                                      FontSize="{TemplateBinding FontSize}"
+                                      Style="{StaticResource NumberBoxSpinButtonStyle}"
+                                      Visibility="Collapsed" />
+
+                        <ContentPresenter x:Name="DescriptionPresenter"
+                                          Grid.Row="2"
+                                          Grid.ColumnSpan="3"
+                                          AutomationProperties.AccessibilityView="Raw"
+                                          Content="{TemplateBinding Description}"
+                                          Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
diff --git a/components/ColorPicker/src/ColorPreviewer.xaml b/components/ColorPicker/src/ColorPreviewer.xaml
index b0d43fbf..1b7ab1b9 100644
--- a/components/ColorPicker/src/ColorPreviewer.xaml
+++ b/components/ColorPicker/src/ColorPreviewer.xaml
@@ -1,10 +1,9 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
-    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
-    xmlns:primitives="using:CommunityToolkit.WinUI.Controls.Primitives"
-    xmlns:ui="using:CommunityToolkit.WinUI">
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+                    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
+                    xmlns:primitives="using:CommunityToolkit.WinUI.Controls.Primitives"
+                    xmlns:ui="using:CommunityToolkit.WinUI">
 
     <Style TargetType="primitives:ColorPreviewer">
         <Setter Property="BorderThickness" Value="1" />
@@ -13,32 +12,52 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="primitives:ColorPreviewer">
-                    <Grid
-                        x:Name="RootGrid"
-                        Height="{TemplateBinding Height}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid x:Name="RootGrid"
+                          Height="{TemplateBinding Height}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid.Resources>
                             <controls:AccentColorConverter x:Key="AccentColor" />
                             <converters:BoolToVisibilityConverter x:Key="BoolToVisibility" />
                         </Grid.Resources>
                         <Grid.ColumnDefinitions>
-                            <ColumnDefinition x:Name="N1PreviewColumn" Width="1*" />
-                            <ColumnDefinition x:Name="N2PreviewColumn" Width="1*" />
+                            <ColumnDefinition x:Name="N1PreviewColumn"
+                                              Width="1*" />
+                            <ColumnDefinition x:Name="N2PreviewColumn"
+                                              Width="1*" />
                             <ColumnDefinition Width="3*" />
-                            <ColumnDefinition x:Name="P1PreviewColumn" Width="1*" />
-                            <ColumnDefinition x:Name="P2PreviewColumn" Width="1*" />
+                            <ColumnDefinition x:Name="P1PreviewColumn"
+                                              Width="1*" />
+                            <ColumnDefinition x:Name="P2PreviewColumn"
+                                              Width="1*" />
                         </Grid.ColumnDefinitions>
-                        <Border
-                            x:Name="CheckeredBackgroundBorder"
-                            Grid.ColumnSpan="5"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch" />
-                        <Border
-                            x:Name="N2PreviewBorder"
-                            CornerRadius="4,0,0,4"
-                            Tag="-2">
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="AccentColorStates">
+                                <VisualState x:Name="AccentColorsVisible" />
+                                <VisualState x:Name="AccentColorsCollapsed">
+                                    <VisualState.Setters>
+                                        <Setter Target="N2PreviewBorder.Visibility" Value="Collapsed" />
+                                        <Setter Target="N1PreviewBorder.Visibility" Value="Collapsed" />
+                                        <Setter Target="P1PreviewBorder.Visibility" Value="Collapsed" />
+                                        <Setter Target="P2PreviewBorder.Visibility" Value="Collapsed" />
+
+                                        <Setter Target="PreviewBorder.CornerRadius" Value="4" />
+                                        <Setter Target="N1PreviewColumn.Width" Value="Auto" />
+                                        <Setter Target="N2PreviewColumn.Width" Value="Auto" />
+                                        <Setter Target="P1PreviewColumn.Width" Value="Auto" />
+                                        <Setter Target="P2PreviewColumn.Width" Value="Auto" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                        <Border x:Name="CheckeredBackgroundBorder"
+                                Grid.ColumnSpan="5"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch" />
+                        <Border x:Name="N2PreviewBorder"
+                                CornerRadius="4,0,0,4"
+                                Tag="-2">
                             <Border.Background>
                                 <SolidColorBrush Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='-2'}" />
                             </Border.Background>
@@ -47,15 +66,15 @@
                             </Border.BackgroundTransition>
                         </Border>
 
-                        <Border
-                            x:Name="N1PreviewBorder"
-                            Grid.Column="1"
-                            Tag="-1">
+                        <Border x:Name="N1PreviewBorder"
+                                Grid.Column="1"
+                                Tag="-1">
                             <Border.Background>
                                 <SolidColorBrush Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='-1'}" />
                             </Border.Background>
                         </Border>
-                        <Border x:Name="PreviewBorder" Grid.Column="2">
+                        <Border x:Name="PreviewBorder"
+                                Grid.Column="2">
                             <Border.Background>
                                 <SolidColorBrush Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='0'}" />
                             </Border.Background>
@@ -64,10 +83,9 @@
                             </Border.BackgroundTransition>
                         </Border>
 
-                        <Border
-                            x:Name="P1PreviewBorder"
-                            Grid.Column="3"
-                            Tag="1">
+                        <Border x:Name="P1PreviewBorder"
+                                Grid.Column="3"
+                                Tag="1">
                             <Border.Background>
                                 <SolidColorBrush Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='1'}" />
                             </Border.Background>
@@ -75,11 +93,10 @@
                                 <BrushTransition Duration="0:0:0.083" />
                             </Border.BackgroundTransition>
                         </Border>
-                        <Border
-                            x:Name="P2PreviewBorder"
-                            Grid.Column="4"
-                            CornerRadius="0,4,4,0"
-                            Tag="2">
+                        <Border x:Name="P2PreviewBorder"
+                                Grid.Column="4"
+                                CornerRadius="0,4,4,0"
+                                Tag="2">
                             <Border.Background>
                                 <SolidColorBrush Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='2'}" />
                             </Border.Background>
@@ -87,25 +104,6 @@
                                 <BrushTransition Duration="0:0:0.083" />
                             </Border.BackgroundTransition>
                         </Border>
-                        <VisualStateManager.VisualStateGroups>
-                            <VisualStateGroup x:Name="AccentColorStates">
-                                <VisualState x:Name="AccentColorsVisible" />
-                                <VisualState x:Name="AccentColorsCollapsed">
-                                    <VisualState.Setters>
-                                        <Setter Target="N2PreviewBorder.Visibility" Value="Collapsed" />
-                                        <Setter Target="N1PreviewBorder.Visibility" Value="Collapsed" />
-                                        <Setter Target="P1PreviewBorder.Visibility" Value="Collapsed" />
-                                        <Setter Target="P2PreviewBorder.Visibility" Value="Collapsed" />
-
-                                        <Setter Target="PreviewBorder.CornerRadius" Value="4" />
-                                        <Setter Target="N1PreviewColumn.Width" Value="Auto" />
-                                        <Setter Target="N2PreviewColumn.Width" Value="Auto" />
-                                        <Setter Target="P1PreviewColumn.Width" Value="Auto" />
-                                        <Setter Target="P2PreviewColumn.Width" Value="Auto" />
-                                    </VisualState.Setters>
-                                </VisualState>
-                            </VisualStateGroup>
-                        </VisualStateManager.VisualStateGroups>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>