From 96e4fb824345b9b8135095cef9f35712740c5dde Mon Sep 17 00:00:00 2001
From: Eviral <flarive@hotmail.com>
Date: Sun, 3 Jul 2022 15:36:22 +0200
Subject: [PATCH] 0.3.0 : Sliders release

---
 .../Neumorphism.Avalonia.csproj               |   2 +-
 Neumorphism.Demo/Pages/ComboBoxesDemo.axaml   | 530 +++++++--------
 .../Pages/ProgressIndicatorDemo.axaml         |   3 +-
 Neumorphism.Demo/Pages/SlidersDemo.axaml      | 613 +++++++++---------
 4 files changed, 573 insertions(+), 575 deletions(-)

diff --git a/Neumorphism.Avalonia/Neumorphism.Avalonia.csproj b/Neumorphism.Avalonia/Neumorphism.Avalonia.csproj
index 537bcab..1a6f5b2 100644
--- a/Neumorphism.Avalonia/Neumorphism.Avalonia.csproj
+++ b/Neumorphism.Avalonia/Neumorphism.Avalonia.csproj
@@ -2,7 +2,7 @@
 
     <PropertyGroup>
         <TargetFramework>netstandard2.1</TargetFramework>
-        <VersionPrefix>0.2.1</VersionPrefix>
+        <VersionPrefix>0.3.0</VersionPrefix>
         <Title>Neumorphism.Avalonia</Title>
         <Authors>Eviral</Authors>
         <Description>Easy to use and customizable Neumorphism Design implementation for Avalonia UI framework.</Description>
diff --git a/Neumorphism.Demo/Pages/ComboBoxesDemo.axaml b/Neumorphism.Demo/Pages/ComboBoxesDemo.axaml
index 7fd0bb5..0c067fe3 100644
--- a/Neumorphism.Demo/Pages/ComboBoxesDemo.axaml
+++ b/Neumorphism.Demo/Pages/ComboBoxesDemo.axaml
@@ -8,279 +8,279 @@
              xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
              xmlns:assist="clr-namespace:Neumorphism.Avalonia.Styles.Assists;assembly=Neumorphism.Avalonia"
              x:Class="Neumorphism.Avalonia.Demo.Pages.ComboBoxesDemo">
-  
-  
-    <StackPanel Margin="16, 0" HorizontalAlignment="Stretch">
-        <TextBlock Classes="Headline4 Subheadline" Text="ComboBoxes" />
-
-        <WrapPanel HorizontalAlignment="Stretch" Margin="0,30,0,0">
-            <StackPanel>
-                <TextBlock Classes="Headline6 Subheadline2" Text="Classic comboboxes" />
-                <StackPanel Orientation="Horizontal">
-                     <showMeTheXaml:XamlDisplay UniqueId="ClassicComboBoxes0">
-                        <ComboBox PlaceholderText="Select an item">
-                            <TextBlock Text="Item 1" />
-                            <TextBlock Text="Item 2" />
-                            <TextBlock Text="Item 3" />
-                            <TextBlock Text="Item with long long text" />
-                        </ComboBox>
-                    </showMeTheXaml:XamlDisplay>
-                    <showMeTheXaml:XamlDisplay UniqueId="ClassicComboBoxes1">
-                        <ComboBox Width="500" PlaceholderText="Please select a user" Height="42" assist:ComboBoxAssist.UseFloatingWatermark="True" SelectionChanged="ClassicComboBoxes1SelectionChanged">
-							<ComboBox.Styles>
-								<Style Selector="ComboBox">
-									<Setter Property="assist:ComboBoxAssist.InnerLeftContent">
-										<Setter.Value>
-											<Template>
-												<Button Classes="no-material" Margin="8,0,8,0" Width="42" Height="42" Cursor="Arrow">
-													<avalonia:MaterialIcon Kind="UserBox" Width="24" Height="24" />
-												</Button>
-											</Template>
-										</Setter.Value>
-									</Setter>
-								</Style>
-							</ComboBox.Styles>
-							<ComboBoxItem Tag="0">
-								<TextBlock Text="John" />
-							</ComboBoxItem>
-							<ComboBoxItem Tag="1">
-								<TextBlock Text="Paul" />
-							</ComboBoxItem>
-							<ComboBoxItem Tag="2">
-								<TextBlock Text="Ringo" />
-							</ComboBoxItem>
-							<ComboBoxItem Tag="3">
-								<TextBlock Text="Georges" />
-							</ComboBoxItem>
-							<ComboBoxItem Tag="-1">
-								<TextBlock Text="None" />
-							</ComboBoxItem>
-                        </ComboBox>
-                    </showMeTheXaml:XamlDisplay>
-                    <showMeTheXaml:XamlDisplay UniqueId="ClassicComboBoxes2">
-                        <ComboBox Height="38">
-                          <ComboBoxItem>
-                              <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-                                <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Red" Margin="0,0,8,0" VerticalAlignment="Center" />
-                                <TextBlock Text="Red" VerticalAlignment="Center" />
-                              </StackPanel>
-                            </ComboBoxItem>
-                            <ComboBoxItem>
-                              <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-                                <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Blue" Margin="0,0,8,0" VerticalAlignment="Center" />
-                                <TextBlock Text="Blue" VerticalAlignment="Center" />
-                              </StackPanel>
-                            </ComboBoxItem>
-                            <ComboBoxItem>
-                              <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-                                <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Green" Margin="0,0,8,0" VerticalAlignment="Center" />
-                                <TextBlock Text="Green" VerticalAlignment="Center" />
-                              </StackPanel>
-                            </ComboBoxItem>
-                        </ComboBox>
-                    </showMeTheXaml:XamlDisplay>
-                    <showMeTheXaml:XamlDisplay UniqueId="ClassicComboBoxes3">
-                      <ComboBox IsEnabled="False" Height="32" PlaceholderText="Disabled">
-                        <TextBlock Text="John" />
-                        <TextBlock Text="Paul" />
-                        <TextBlock Text="Ringo" />
-                        <TextBlock Text="Georges" />
-                      </ComboBox>
-                    </showMeTheXaml:XamlDisplay>
-                </StackPanel>
-            </StackPanel>
-        </WrapPanel>
-
-		<WrapPanel HorizontalAlignment="Stretch" Margin="0,30,0,0">
-			<StackPanel>
-				<TextBlock Classes="Headline6 Subheadline2" Text="Outset comboboxes" />
-				<StackPanel Orientation="Horizontal">
-					<showMeTheXaml:XamlDisplay UniqueId="OutsetComboBoxes0">
-						<ComboBox Classes="Outset" PlaceholderText="Select an item">
-							<TextBlock Text="Item 1" />
-							<TextBlock Text="Item 2" />
-							<TextBlock Text="Item 3" />
-							<TextBlock Text="Item with long long text" />
-						</ComboBox>
-					</showMeTheXaml:XamlDisplay>
-					<showMeTheXaml:XamlDisplay UniqueId="OutsetComboBoxes1">
-						<ComboBox Classes="Outset" Width="500" PlaceholderText="Please select a user" Height="42" 
-								  assist:ComboBoxAssist.UseFloatingWatermark="True">
-							<ComboBox.Styles>
-								<Style Selector="ComboBox">
-									<Setter Property="assist:ComboBoxAssist.InnerLeftContent">
-										<Setter.Value>
-											<Template>
-												<Button Classes="no-material" Margin="8,0,8,0" Width="42" Height="42" Cursor="Arrow">
-													<avalonia:MaterialIcon Kind="UserBox" Width="24" Height="24" />
-												</Button>
-											</Template>
-										</Setter.Value>
-									</Setter>
-								</Style>
-							</ComboBox.Styles>
-							<ComboBoxItem>
-								<TextBlock Text="John" />
-							</ComboBoxItem>
-							<ComboBoxItem>
-								<TextBlock Text="Paul" />
-							</ComboBoxItem>
-							<ComboBoxItem>
-								<TextBlock Text="Ringo" />
-							</ComboBoxItem>
-							<ComboBoxItem>
-								<TextBlock Text="Georges" />
-							</ComboBoxItem>
-						</ComboBox>
-					</showMeTheXaml:XamlDisplay>
-					<showMeTheXaml:XamlDisplay UniqueId="OutsetComboBoxes2">
-						<ComboBox Classes="Outset" Height="38">
-							<ComboBoxItem>
-								<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-									<avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Red" Margin="0,0,8,0" VerticalAlignment="Center" />
-									<TextBlock Text="Red" VerticalAlignment="Center" />
-								</StackPanel>
-							</ComboBoxItem>
-							<ComboBoxItem>
-								<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-									<avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Blue" Margin="0,0,8,0" VerticalAlignment="Center" />
-									<TextBlock Text="Blue" VerticalAlignment="Center" />
-								</StackPanel>
-							</ComboBoxItem>
-							<ComboBoxItem>
-								<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-									<avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Green" Margin="0,0,8,0" VerticalAlignment="Center" />
-									<TextBlock Text="Green" VerticalAlignment="Center" />
-								</StackPanel>
-							</ComboBoxItem>
-						</ComboBox>
-					</showMeTheXaml:XamlDisplay>
-					<showMeTheXaml:XamlDisplay UniqueId="OutsetComboBoxes3">
-						<ComboBox Classes="Outset" IsEnabled="False" Height="32" PlaceholderText="Disabled">
-							<TextBlock Text="John" />
-							<TextBlock Text="Paul" />
-							<TextBlock Text="Ringo" />
-							<TextBlock Text="Georges" />
-						</ComboBox>
-					</showMeTheXaml:XamlDisplay>
-				</StackPanel>
-			</StackPanel>
-		</WrapPanel>
 
 
+  <StackPanel Margin="16, 0" HorizontalAlignment="Stretch">
+    <TextBlock Classes="Headline4 Subheadline" Text="ComboBoxes" />
 
-        <WrapPanel HorizontalAlignment="Stretch" Margin="0,30,0,0">
-          <StackPanel>
-            <TextBlock Classes="Headline6 Subheadline2" Text="Filled comboboxes" />
-            <StackPanel Orientation="Horizontal">
-              <showMeTheXaml:XamlDisplay UniqueId="FilledComboBoxes0">
-                <ComboBox Classes="Filled" PlaceholderText="Select an item">
-                  <TextBlock Text="Item 1" />
-                  <TextBlock Text="Item 2" />
-                  <TextBlock Text="Item 3" />
-                  <TextBlock Text="Item 4" />
-                </ComboBox>
-              </showMeTheXaml:XamlDisplay>
-              <showMeTheXaml:XamlDisplay UniqueId="FilledComboBoxes1">
-                <ComboBox Classes="Filled" PlaceholderText="Please select a user" assist:ComboBoxAssist.UseFloatingWatermark="True">
-                  <TextBlock Text="John" />
-                  <TextBlock Text="Paul" />
-                  <TextBlock Text="Ringo" />
-                  <TextBlock Text="Georges" />
-                </ComboBox>
-              </showMeTheXaml:XamlDisplay>
-              <showMeTheXaml:XamlDisplay UniqueId="FilledComboBoxes2">
-                <ComboBox Classes="Filled" Height="38">
-					        <ComboBoxItem>
-						        <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-							        <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Red" Margin="0,0,8,0" VerticalAlignment="Center" />
-							        <TextBlock Text="Red" VerticalAlignment="Center" />
-						        </StackPanel>
-					        </ComboBoxItem>
-					        <ComboBoxItem>
-						        <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-							        <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Blue" Margin="0,0,8,0" VerticalAlignment="Center" />
-							        <TextBlock Text="Blue" VerticalAlignment="Center" />
-						        </StackPanel>
-					        </ComboBoxItem>
-					        <ComboBoxItem>
-						        <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-							        <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Green" Margin="0,0,8,0" VerticalAlignment="Center" />
-							        <TextBlock Text="Green" VerticalAlignment="Center" />
-						        </StackPanel>
-					        </ComboBoxItem>
-				        </ComboBox>
-                </showMeTheXaml:XamlDisplay>
-                <showMeTheXaml:XamlDisplay UniqueId="FilledComboBoxes3">
-	                <ComboBox Classes="Filled" IsEnabled="False" PlaceholderText="Disabled">
-		                <TextBlock Text="John" />
-		                <TextBlock Text="Paul" />
-		                <TextBlock Text="Ringo" />
-		                <TextBlock Text="Georges" />
-	                </ComboBox>
-                </showMeTheXaml:XamlDisplay>
-            </StackPanel>
-          </StackPanel>
-        </WrapPanel>
+    <WrapPanel HorizontalAlignment="Stretch" Margin="0,30,0,0">
+      <StackPanel>
+        <TextBlock Classes="Headline6 Subheadline2" Text="Classic comboboxes" />
+        <StackPanel Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="ClassicComboBoxes0">
+            <ComboBox PlaceholderText="Select an item">
+              <TextBlock Text="Item 1" />
+              <TextBlock Text="Item 2" />
+              <TextBlock Text="Item 3" />
+              <TextBlock Text="Item with long long text" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="ClassicComboBoxes1">
+            <ComboBox Width="500" PlaceholderText="Please select a user" Height="42" assist:ComboBoxAssist.UseFloatingWatermark="True" SelectionChanged="ClassicComboBoxes1SelectionChanged">
+              <ComboBox.Styles>
+                <Style Selector="ComboBox">
+                  <Setter Property="assist:ComboBoxAssist.InnerLeftContent">
+                    <Setter.Value>
+                      <Template>
+                        <Button Classes="no-material" Margin="8,0,8,0" Width="42" Height="42" Cursor="Arrow">
+                          <avalonia:MaterialIcon Kind="AccountDetails" Width="24" Height="24" />
+                        </Button>
+                      </Template>
+                    </Setter.Value>
+                  </Setter>
+                </Style>
+              </ComboBox.Styles>
+              <ComboBoxItem Tag="0">
+                <TextBlock Text="John" />
+              </ComboBoxItem>
+              <ComboBoxItem Tag="1">
+                <TextBlock Text="Paul" />
+              </ComboBoxItem>
+              <ComboBoxItem Tag="2">
+                <TextBlock Text="Ringo" />
+              </ComboBoxItem>
+              <ComboBoxItem Tag="3">
+                <TextBlock Text="Georges" />
+              </ComboBoxItem>
+              <ComboBoxItem Tag="-1">
+                <TextBlock Text="None" />
+              </ComboBoxItem>
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="ClassicComboBoxes2">
+            <ComboBox Height="38">
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Red" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Red" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Blue" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Blue" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Green" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Green" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="ClassicComboBoxes3">
+            <ComboBox IsEnabled="False" Height="32" PlaceholderText="Disabled">
+              <TextBlock Text="John" />
+              <TextBlock Text="Paul" />
+              <TextBlock Text="Ringo" />
+              <TextBlock Text="Georges" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+        </StackPanel>
+      </StackPanel>
+    </WrapPanel>
 
-      <WrapPanel HorizontalAlignment="Stretch" Margin="0,30,0,0">
-        <StackPanel Margin="0,0,0,50">
-          <TextBlock Classes="Headline6 Subheadline2" Text="Outline comboboxes" />
-          <StackPanel Orientation="Horizontal">
-            <showMeTheXaml:XamlDisplay UniqueId="OutlinedComboBoxes0">
-              <ComboBox Classes="Outline" PlaceholderText="Select an item">
-                <TextBlock Text="Item 1" />
-                <TextBlock Text="Item 2" />
-                <TextBlock Text="Item 3" />
-                <TextBlock Text="Item 4" />
-              </ComboBox>
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="OutlinedComboBoxes1">
-              <ComboBox Classes="Outline" PlaceholderText="Please select a user" assist:ComboBoxAssist.UseFloatingWatermark="True">
+    <WrapPanel HorizontalAlignment="Stretch" Margin="0,30,0,0">
+      <StackPanel>
+        <TextBlock Classes="Headline6 Subheadline2" Text="Outset comboboxes" />
+        <StackPanel Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="OutsetComboBoxes0">
+            <ComboBox Classes="Outset" PlaceholderText="Select an item">
+              <TextBlock Text="Item 1" />
+              <TextBlock Text="Item 2" />
+              <TextBlock Text="Item 3" />
+              <TextBlock Text="Item with long long text" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="OutsetComboBoxes1">
+            <ComboBox Classes="Outset" Width="500" PlaceholderText="Please select a user" Height="42"
+								  assist:ComboBoxAssist.UseFloatingWatermark="True">
+              <ComboBox.Styles>
+                <Style Selector="ComboBox">
+                  <Setter Property="assist:ComboBoxAssist.InnerLeftContent">
+                    <Setter.Value>
+                      <Template>
+                        <Button Classes="no-material" Margin="8,0,8,0" Width="42" Height="42" Cursor="Arrow">
+                          <avalonia:MaterialIcon Kind="AccountCircle" Width="24" Height="24" />
+                        </Button>
+                      </Template>
+                    </Setter.Value>
+                  </Setter>
+                </Style>
+              </ComboBox.Styles>
+              <ComboBoxItem>
                 <TextBlock Text="John" />
+              </ComboBoxItem>
+              <ComboBoxItem>
                 <TextBlock Text="Paul" />
+              </ComboBoxItem>
+              <ComboBoxItem>
                 <TextBlock Text="Ringo" />
+              </ComboBoxItem>
+              <ComboBoxItem>
                 <TextBlock Text="Georges" />
-              </ComboBox>
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="OutlinedComboBoxes2">
-                <ComboBox Classes="Outline" SelectedIndex="0">
-                  <ComboBoxItem>
-                    <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-                      <avalonia:MaterialIcon Kind="SettingsOutline" Width="24" Height="24" Foreground="{DynamicResource MaterialDesignForeground}" Margin="0,0,8,0" Opacity="0.3" VerticalAlignment="Center" />
-                      <TextBlock Text="Choose" Foreground="{DynamicResource MaterialDesignForeground}" Opacity="0.5" VerticalAlignment="Center" />
-                    </StackPanel>
-                  </ComboBoxItem>
-					        <ComboBoxItem>
-						        <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-							        <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Red" Margin="0,0,8,0" VerticalAlignment="Center" />
-							        <TextBlock Text="Red" VerticalAlignment="Center" />
-						        </StackPanel>
-					        </ComboBoxItem>
-					        <ComboBoxItem>
-						        <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-							        <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Blue" Margin="0,0,8,0" VerticalAlignment="Center" />
-							        <TextBlock Text="Blue" VerticalAlignment="Center" />
-						        </StackPanel>
-					        </ComboBoxItem>
-					        <ComboBoxItem>
-						        <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
-							        <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Green" Margin="0,0,8,0" VerticalAlignment="Center" />
-							        <TextBlock Text="Green" VerticalAlignment="Center" />
-						        </StackPanel>
-					        </ComboBoxItem>
-				        </ComboBox>
-                </showMeTheXaml:XamlDisplay>
-			  <showMeTheXaml:XamlDisplay UniqueId="OutlinedComboBoxes3">
-				  <ComboBox Classes="Outline" IsEnabled="False" PlaceholderText="Disabled">
-					  <TextBlock Text="John" />
-					  <TextBlock Text="Paul" />
-					  <TextBlock Text="Ringo" />
-					  <TextBlock Text="Georges" />
-				  </ComboBox>
-			  </showMeTheXaml:XamlDisplay>
-          </StackPanel>
+              </ComboBoxItem>
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="OutsetComboBoxes2">
+            <ComboBox Classes="Outset" Height="38">
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Red" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Red" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Blue" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Blue" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Green" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Green" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="OutsetComboBoxes3">
+            <ComboBox Classes="Outset" IsEnabled="False" Height="32" PlaceholderText="Disabled">
+              <TextBlock Text="John" />
+              <TextBlock Text="Paul" />
+              <TextBlock Text="Ringo" />
+              <TextBlock Text="Georges" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+        </StackPanel>
+      </StackPanel>
+    </WrapPanel>
+
+
+
+    <WrapPanel HorizontalAlignment="Stretch" Margin="0,30,0,0">
+      <StackPanel>
+        <TextBlock Classes="Headline6 Subheadline2" Text="Filled comboboxes" />
+        <StackPanel Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="FilledComboBoxes0">
+            <ComboBox Classes="Filled" PlaceholderText="Select an item">
+              <TextBlock Text="Item 1" />
+              <TextBlock Text="Item 2" />
+              <TextBlock Text="Item 3" />
+              <TextBlock Text="Item 4" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="FilledComboBoxes1">
+            <ComboBox Classes="Filled" PlaceholderText="Please select a user" assist:ComboBoxAssist.UseFloatingWatermark="True">
+              <TextBlock Text="John" />
+              <TextBlock Text="Paul" />
+              <TextBlock Text="Ringo" />
+              <TextBlock Text="Georges" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="FilledComboBoxes2">
+            <ComboBox Classes="Filled" Height="38">
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Red" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Red" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Blue" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Blue" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Green" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Green" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="FilledComboBoxes3">
+            <ComboBox Classes="Filled" IsEnabled="False" PlaceholderText="Disabled">
+              <TextBlock Text="John" />
+              <TextBlock Text="Paul" />
+              <TextBlock Text="Ringo" />
+              <TextBlock Text="Georges" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+        </StackPanel>
+      </StackPanel>
+    </WrapPanel>
+
+    <WrapPanel HorizontalAlignment="Stretch" Margin="0,30,0,0">
+      <StackPanel Margin="0,0,0,50">
+        <TextBlock Classes="Headline6 Subheadline2" Text="Outline comboboxes" />
+        <StackPanel Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="OutlinedComboBoxes0">
+            <ComboBox Classes="Outline" PlaceholderText="Select an item">
+              <TextBlock Text="Item 1" />
+              <TextBlock Text="Item 2" />
+              <TextBlock Text="Item 3" />
+              <TextBlock Text="Item 4" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="OutlinedComboBoxes1">
+            <ComboBox Classes="Outline" PlaceholderText="Please select a user" assist:ComboBoxAssist.UseFloatingWatermark="True">
+              <TextBlock Text="John" />
+              <TextBlock Text="Paul" />
+              <TextBlock Text="Ringo" />
+              <TextBlock Text="Georges" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="OutlinedComboBoxes2">
+            <ComboBox Classes="Outline" SelectedIndex="0">
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="SettingsOutline" Width="24" Height="24" Foreground="{DynamicResource MaterialDesignForeground}" Margin="0,0,8,0" Opacity="0.3" VerticalAlignment="Center" />
+                  <TextBlock Text="Choose" Foreground="{DynamicResource MaterialDesignForeground}" Opacity="0.5" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Red" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Red" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Blue" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Blue" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+              <ComboBoxItem>
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Heart" Width="24" Height="24" Foreground="Green" Margin="0,0,8,0" VerticalAlignment="Center" />
+                  <TextBlock Text="Green" VerticalAlignment="Center" />
+                </StackPanel>
+              </ComboBoxItem>
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
+          <showMeTheXaml:XamlDisplay UniqueId="OutlinedComboBoxes3">
+            <ComboBox Classes="Outline" IsEnabled="False" PlaceholderText="Disabled">
+              <TextBlock Text="John" />
+              <TextBlock Text="Paul" />
+              <TextBlock Text="Ringo" />
+              <TextBlock Text="Georges" />
+            </ComboBox>
+          </showMeTheXaml:XamlDisplay>
         </StackPanel>
-      </WrapPanel>
+      </StackPanel>
+    </WrapPanel>
   </StackPanel>
 </UserControl>
\ No newline at end of file
diff --git a/Neumorphism.Demo/Pages/ProgressIndicatorDemo.axaml b/Neumorphism.Demo/Pages/ProgressIndicatorDemo.axaml
index 3d503d9..4eeeaa5 100644
--- a/Neumorphism.Demo/Pages/ProgressIndicatorDemo.axaml
+++ b/Neumorphism.Demo/Pages/ProgressIndicatorDemo.axaml
@@ -9,7 +9,7 @@
 							xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
 							x:Class="Neumorphism.Avalonia.Demo.Pages.ProgressIndicatorDemo">
 
-  <StackPanel Margin="16, 0">
+  <StackPanel Margin="16,0,16,50">
     <TextBlock Classes="Headline4 Subheadline" Text="Progress Indicator" />
     <WrapPanel>
       <StackPanel>
@@ -309,7 +309,6 @@
           </showMeTheXaml:XamlDisplay>
         </StackPanel>
       </StackPanel>
-      
     </WrapPanel>
   </StackPanel>
 </UserControl>
\ No newline at end of file
diff --git a/Neumorphism.Demo/Pages/SlidersDemo.axaml b/Neumorphism.Demo/Pages/SlidersDemo.axaml
index 38bf8da..65ac715 100644
--- a/Neumorphism.Demo/Pages/SlidersDemo.axaml
+++ b/Neumorphism.Demo/Pages/SlidersDemo.axaml
@@ -1,314 +1,313 @@
 <UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             xmlns:styles="clr-namespace:Neumorphism.Avalonia.Styles;assembly=Neumorphism.Avalonia"
-             xmlns:assists="clr-namespace:Neumorphism.Avalonia.Styles.Assists;assembly=Neumorphism.Avalonia"
-             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
-			 xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
-             x:Class="Neumorphism.Avalonia.Demo.Pages.SlidersDemo">
-	
-    <StackPanel Margin="16, 0">
-        <StackPanel.Styles>
-            <Style Selector="StackPanel.Content Slider">
-                <Setter Property="Maximum" Value="100" />
-                <Setter Property="Minimum" Value="0" />
-            </Style>
-            <Style Selector="StackPanel.Content TextBlock">
-                <Setter Property="VerticalAlignment" Value="Center" />
-                <Setter Property="Margin" Value="16 0" />
-				<Setter Property="TextAlignment" Value="Center" />
-                <Setter Property="Text" Value="{Binding $parent.Children[0].Content.Value, StringFormat=\{0:N0\}}" />
-            </Style>
-            <Style Selector="StackPanel.Content">
-                <Setter Property="Margin" Value="4 2" />
-            </Style>
-        </StackPanel.Styles>
-		
-		
-        <TextBlock Classes="Headline4 Subheadline" Text="Sliders" />
-		
-		
-        <WrapPanel>
-            <StackPanel>
-                <TextBlock Classes="Headline6 Subheadline2" Text="Horizontal" />
-                <StackPanel Classes="Content" Orientation="Horizontal">
-                    <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider1">
-					    <Slider Value="80"/>
-                    </showMeTheXaml:XamlDisplay>
-                    <TextBlock Width="60" />
-                </StackPanel>
-                <StackPanel Classes="Content" Orientation="Horizontal">
-                    <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider2">
-                        <Slider IsSnapToTickEnabled="True" Height="30" Value="50" TickFrequency="10" TickPlacement="BottomRight" Foreground="{DynamicResource PrimaryHueLightBrush}" assists:SliderAssist.ThumbForeground="{DynamicResource PrimaryHueLightBrush}"/>
-                    </showMeTheXaml:XamlDisplay>
-                    <TextBlock Width="60" />
-                </StackPanel>
-                <StackPanel Classes="Content" Orientation="Horizontal">
-                    <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider3">
-						<Slider IsSnapToTickEnabled="True" Classes="Accent Discrete" Width="120" Height="40" Value="50" TickFrequency="1" assists:SliderAssist.ThumbForeground="{DynamicResource SecondaryHueDarkBrush}">
-							<Slider.Styles>
-							 <Style Selector="Slider:horizontal">
-								<Setter Property="assists:SliderAssist.ThumbContent">
-									<Setter.Value>
-										<Template>
-											<avalonia:MaterialIcon Kind="VolumeHigh" Width="20" Height="20" Foreground="White" />
-										</Template>
-									</Setter.Value>
-								</Setter>
-							</Style>
-                          </Slider.Styles>
-						</Slider>
-                    </showMeTheXaml:XamlDisplay>
-                    <TextBlock Width="60" />
-                </StackPanel>
-                <StackPanel Classes="Content" Orientation="Horizontal">
-				    <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider4">
-                        <Slider Height="80" Value="30" TickFrequency="25" assists:SliderAssist.ThumbForeground="#FF5cbcd6">
-                          <Slider.Styles>
-							  <Style Selector="Slider:horizontal">
-                                  <Setter Property="Foreground">
-                                    <Setter.Value>
-                                      <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-                                        <GradientStop Offset="0" Color="#FF77dbf0" />
-                                        <GradientStop Offset="0.8" Color="#FF5cbcd6" />
-                                      </LinearGradientBrush>
-                                    </Setter.Value>
-                                  </Setter>
-                            </Style>
-							<Style Selector="Slider:horizontal">
-								<Setter Property="assists:SliderAssist.ThumbContent">
-									<Setter.Value>
-										<Template>
-    										<TextBlock Text="{Binding $parent[Slider].Value, StringFormat=\{0:N0\}, FallbackValue=0}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Foreground="White" FontSize="20"/>
-										</Template>
-									</Setter.Value>
-								</Setter>
-							</Style>
-                          </Slider.Styles>
-                        </Slider>
-                    </showMeTheXaml:XamlDisplay>
-                    <TextBlock Width="60" />
-                </StackPanel>
-                <StackPanel Classes="Content" Orientation="Horizontal">
-                    <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider5">
-                        <Slider IsEnabled="False" Value="20" IsSnapToTickEnabled="True" TickFrequency="10" TickPlacement="TopLeft" />
-                    </showMeTheXaml:XamlDisplay>
-                    <TextBlock Width="60" />
-                </StackPanel>
-            </StackPanel>
+              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+              xmlns:styles="clr-namespace:Neumorphism.Avalonia.Styles;assembly=Neumorphism.Avalonia"
+              xmlns:assists="clr-namespace:Neumorphism.Avalonia.Styles.Assists;assembly=Neumorphism.Avalonia"
+              xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+              xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
+              x:Class="Neumorphism.Avalonia.Demo.Pages.SlidersDemo">
 
-			<StackPanel Orientation="Vertical">
-				<TextBlock Classes="Headline6 Subheadline2" Text="Vertical" />
-				<StackPanel Orientation="Horizontal">
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalSlider1" Width="40" Padding="0,0,0,20">
-							<Slider Orientation="Vertical" Value="80" />
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalSlider2" Width="40" Padding="0,0,0,20">
-							<Slider IsSnapToTickEnabled="True" Height="260" Width="30" Orientation="Vertical" Value="50" TickFrequency="10" TickPlacement="BottomRight" Foreground="{DynamicResource PrimaryHueLightBrush}" assists:SliderAssist.ThumbForeground="{DynamicResource PrimaryHueLightBrush}" />
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalSlider3" Width="40" Padding="0,0,0,20">
-							<Slider IsSnapToTickEnabled="True" Height="120" Width="40" Orientation="Vertical" Classes="Accent Discrete" Value="50" TickFrequency="10" assists:SliderAssist.ThumbForeground="{DynamicResource SecondaryHueDarkBrush}">
-								<Slider.Styles>
-									<Style Selector="Slider:vertical">
-										<Setter Property="assists:SliderAssist.ThumbContent">
-											<Setter.Value>
-												<Template>
-													<avalonia:MaterialIcon Kind="VolumeHigh" Width="20" Height="20" Foreground="White" />
-												</Template>
-											</Setter.Value>
-										</Setter>
-									</Style>
-								</Slider.Styles>
-							</Slider>
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalSlider4" Width="80" Padding="0,0,0,20">
-							<Slider IsSnapToTickEnabled="True" Height="260" Width="80" Value="30" TickFrequency="10" Orientation="Vertical" assists:SliderAssist.ThumbForeground="#FF5cbcd6"
-								ToolTip.Tip="Horizontal outset slider with custom gradient color and custom size">
-								<Slider.Styles>
-									<Style Selector="Slider:vertical">
-										<Setter Property="Foreground">
-											<Setter.Value>
-												<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-													<GradientStop Offset="0.2" Color="#FF5cbcd6" />
-													<GradientStop Offset="1.0" Color="#FF77dbf0" />
-												</LinearGradientBrush>
-											</Setter.Value>
-										</Setter>
-										<Setter Property="assists:SliderAssist.ThumbContent">
-											<Setter.Value>
-												<Template>
-													<TextBlock Text="{Binding $parent[Slider].Value, StringFormat=\{0:N0\}, FallbackValue=0}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Foreground="White" FontSize="20"/>
-												</Template>
-											</Setter.Value>
-										</Setter>
-									</Style>
-								</Slider.Styles>
-							</Slider>
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalSlider5" Width="40" Padding="0,0,0,20">
-							<Slider IsEnabled="False" Value="20" Height="260" Width="20" Orientation="Vertical" IsSnapToTickEnabled="True" TickFrequency="10" TickPlacement="TopLeft" />
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-				</StackPanel>
-			</StackPanel>
-	
-			<StackPanel>
-                <TextBlock Classes="Headline6 Subheadline2" Text="Horizontal Outset" />
-                <StackPanel Classes="Content" Orientation="Horizontal">
-                    <showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider1">
-                        <Slider Classes="Outset" Value="80" ToolTip.Tip="Regular horizontal outset slider" />
-					</showMeTheXaml:XamlDisplay>
-                    <TextBlock Width="60" />
-                </StackPanel>
-                <StackPanel Classes="Content" Orientation="Horizontal">
-                    <showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider2">
-						<Slider IsSnapToTickEnabled="True" Classes="Outset" Height="30" Value="50" TickFrequency="10" TickPlacement="BottomRight" Foreground="{DynamicResource PrimaryHueLightBrush}" assists:SliderAssist.ThumbForeground="{DynamicResource PrimaryHueLightBrush}" ToolTip.Tip="Horizontal outset slider with ticks" />
-                    </showMeTheXaml:XamlDisplay>
-                    <TextBlock Width="60" />
-                </StackPanel>
-                <StackPanel Classes="Content" Orientation="Horizontal">
-                    <showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider3">
-						<Slider IsSnapToTickEnabled="True" Classes="Outset Discrete Accent" Width="120" Height="40" TickFrequency="1" Value="50" ToolTip.Tip="Horizontal outset slider with accent color and bubble">
-							<Slider.Styles>
-								<Style Selector="Slider:horizontal">
-									<Setter Property="assists:SliderAssist.ThumbContent">
-										<Setter.Value>
-											<Template>
-												<avalonia:MaterialIcon Kind="ArrowSplitVertical" Width="20" Height="20" Foreground="White" />
-											</Template>
-										</Setter.Value>
-									</Setter>
-								</Style>
-							</Slider.Styles>
-						</Slider>
-                    </showMeTheXaml:XamlDisplay>
-                    <TextBlock Width="60" />
-                </StackPanel>
-                <StackPanel Classes="Content" Orientation="Horizontal">
-                    <showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider4">
-						<Slider Height="80" Value="30" TickFrequency="25" Classes="Outset" assists:SliderAssist.ThumbForeground="#FF5cbcd6"
-								ToolTip.Tip="Horizontal outset slider with custom gradient color and custom size">
-							<Slider.Styles>
-								<Style Selector="Slider:horizontal.Outset">
-									<Setter Property="Foreground">
-										<Setter.Value>
-											<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
-												<GradientStop Offset="0" Color="#FF77dbf0" />
-												<GradientStop Offset="0.8" Color="#FF5cbcd6" />
-											</LinearGradientBrush>
-										</Setter.Value>
-									</Setter>
-								</Style>
-								<Style Selector="Slider:horizontal.Outset">
-									<Setter Property="assists:SliderAssist.ThumbContent">
-										<Setter.Value>
-											<Template>
-												<TextBlock Text="{Binding $parent[Slider].Value, StringFormat=\{0:N0\}, FallbackValue=0}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Foreground="White" FontSize="20"/>
-											</Template>
-										</Setter.Value>
-									</Setter>
-								</Style>
-							</Slider.Styles>
-						</Slider>
-                    </showMeTheXaml:XamlDisplay>
-                    <TextBlock Width="60" />
-                </StackPanel>
-				<StackPanel Classes="Content" Orientation="Horizontal">
-					<showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider5">
-						<Slider IsEnabled="False" Classes="Outset" Value="20" IsSnapToTickEnabled="True" TickFrequency="10" TickPlacement="TopLeft" ToolTip.Tip="Horizontal outset disabled slider" />
-					</showMeTheXaml:XamlDisplay>
-					<TextBlock Width="60" />
-				</StackPanel>
-            </StackPanel>
+  <StackPanel Margin="16,0,16,50">
+    <StackPanel.Styles>
+      <Style Selector="StackPanel.Content Slider">
+        <Setter Property="Maximum" Value="100" />
+        <Setter Property="Minimum" Value="0" />
+      </Style>
+      <Style Selector="StackPanel.Content > TextBlock">
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Margin" Value="16 0" />
+        <Setter Property="TextAlignment" Value="Center" />
+        <Setter Property="Text" Value="{Binding $parent.Children[0].Content.Value, StringFormat=\{0:N0\}}" />
+      </Style>
+      <Style Selector="StackPanel.Content">
+        <Setter Property="Margin" Value="4 2" />
+      </Style>
+    </StackPanel.Styles>
 
 
-			<StackPanel Orientation="Vertical">
-				<TextBlock Classes="Headline6 Subheadline2" Text="Vertical Outset" />
-				<StackPanel Orientation="Horizontal">
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider1" Width="40" Padding="0,0,0,20">
-							<Slider Classes="Outset" Orientation="Vertical" Value="80" />
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider2" Width="40" Padding="0,0,0,20">
-							<Slider Classes="Outset" IsSnapToTickEnabled="True" Height="260" Width="30" Value="50" Orientation="Vertical" TickFrequency="10" TickPlacement="BottomRight" Foreground="{DynamicResource PrimaryHueLightBrush}" assists:SliderAssist.ThumbForeground="{DynamicResource PrimaryHueLightBrush}" />
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider3" Width="40" Padding="0,0,0,20">
-							<Slider Classes="Outset Accent Discrete" IsSnapToTickEnabled="True" Height="120" Width="40" Orientation="Vertical" Value="50" TickFrequency="10">
-								<Slider.Styles>
-									<Style Selector="Slider:vertical">
-										<Setter Property="assists:SliderAssist.ThumbContent">
-											<Setter.Value>
-												<Template>
-													<avalonia:MaterialIcon Kind="ArrowSplitHorizontal" Width="20" Height="20" Foreground="White" />
-												</Template>
-											</Setter.Value>
-										</Setter>
-									</Style>
-								</Slider.Styles>
-							</Slider>
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider4" Width="80" Padding="0,0,0,20">
-							<Slider Classes="Outset" IsSnapToTickEnabled="True" Height="260" Width="80" Value="30" TickFrequency="10" Orientation="Vertical" assists:SliderAssist.ThumbForeground="#FF5cbcd6"
-								ToolTip.Tip="Horizontal outset slider with custom gradient color and custom size">
-								<Slider.Styles>
-									<Style Selector="Slider:vertical">
-										<Setter Property="Foreground">
-											<Setter.Value>
-												<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-													<GradientStop Offset="0.2" Color="#FF5cbcd6" />
-													<GradientStop Offset="1.0" Color="#FF77dbf0" />
-												</LinearGradientBrush>
-											</Setter.Value>
-										</Setter>
-										<Setter Property="assists:SliderAssist.ThumbContent">
-											<Setter.Value>
-												<Template>
-													<TextBlock Text="{Binding $parent[Slider].Value, StringFormat=\{0:N0\}, FallbackValue=0}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Foreground="White" FontSize="20"/>
-												</Template>
-											</Setter.Value>
-										</Setter>
-									</Style>
-								</Slider.Styles>
-							</Slider>
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-					<StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
-						<showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider5" Width="40" Padding="0,0,0,20">
-							<Slider Classes="Outset" IsEnabled="False" Value="20" Height="260" Width="20" Orientation="Vertical" IsSnapToTickEnabled="True" TickFrequency="10" TickPlacement="TopLeft" />
-						</showMeTheXaml:XamlDisplay>
-						<TextBlock Width="60" />
-					</StackPanel>
-				</StackPanel>
-			</StackPanel>
+    <TextBlock Classes="Headline4 Subheadline" Text="Sliders" />
 
 
-			
-        </WrapPanel>
-    </StackPanel>
+    <WrapPanel>
+      <StackPanel>
+        <TextBlock Classes="Headline6 Subheadline2" Text="Horizontal" />
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider1">
+            <Slider Value="80" ToolTip.Tip="Regular horizontal slider with no class"/>
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider2">
+            <Slider IsSnapToTickEnabled="True" Height="30" Value="50" TickFrequency="10" TickPlacement="BottomRight" Foreground="{DynamicResource PrimaryHueLightBrush}" assists:SliderAssist.ThumbForeground="{DynamicResource PrimaryHueLightBrush}" ToolTip.Tip="Regular horizontal slider with ticks"/>
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider3">
+            <Slider IsSnapToTickEnabled="True" Classes="Accent Discrete" Width="120" Height="40" Value="50" TickFrequency="1" assists:SliderAssist.ThumbForeground="{DynamicResource SecondaryHueDarkBrush}" ToolTip.Tip="Regular horizontal slider with accent color and tooltip">
+              <Slider.Styles>
+                <Style Selector="Slider:horizontal">
+                  <Setter Property="assists:SliderAssist.ThumbContent">
+                    <Setter.Value>
+                      <Template>
+                        <avalonia:MaterialIcon Kind="VolumeHigh" Width="20" Height="20" Foreground="White" />
+                      </Template>
+                    </Setter.Value>
+                  </Setter>
+                </Style>
+              </Slider.Styles>
+            </Slider>
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider4">
+            <Slider Height="80" Value="30" TickFrequency="25" assists:SliderAssist.ThumbForeground="#FF5cbcd6" ToolTip.Tip="Fully customized horizontal slider with thumb custom template">
+              <Slider.Styles>
+                <Style Selector="Slider:horizontal">
+                  <Setter Property="Foreground">
+                    <Setter.Value>
+                      <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                        <GradientStop Offset="0" Color="#FF77dbf0" />
+                        <GradientStop Offset="0.8" Color="#FF5cbcd6" />
+                      </LinearGradientBrush>
+                    </Setter.Value>
+                  </Setter>
+                </Style>
+                <Style Selector="Slider:horizontal">
+                  <Setter Property="assists:SliderAssist.ThumbContent">
+                    <Setter.Value>
+                      <Template>
+                        <TextBlock Text="{Binding $parent[Slider].Value, StringFormat=\{0:N0\}, FallbackValue=0}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Foreground="White" FontSize="20"/>
+                      </Template>
+                    </Setter.Value>
+                  </Setter>
+                </Style>
+              </Slider.Styles>
+            </Slider>
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalSlider5">
+            <Slider IsEnabled="False" Value="20" IsSnapToTickEnabled="True" TickFrequency="10" TickPlacement="TopLeft" ToolTip.Tip="Disabled horizontal slider" />
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+      </StackPanel>
+
+      <StackPanel Orientation="Vertical">
+        <TextBlock Classes="Headline6 Subheadline2" Text="Vertical" />
+        <StackPanel Orientation="Horizontal">
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalSlider1" Width="40" Padding="0,0,0,20">
+              <Slider Orientation="Vertical" Value="80" ToolTip.Tip="Regular vertical slider with no class"/>
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalSlider2" Width="40" Padding="0,0,0,20">
+              <Slider IsSnapToTickEnabled="True" Height="260" Width="30" Orientation="Vertical" Value="50" TickFrequency="10" TickPlacement="BottomRight" Foreground="{DynamicResource PrimaryHueLightBrush}" assists:SliderAssist.ThumbForeground="{DynamicResource PrimaryHueLightBrush}" ToolTip.Tip="Regular vertical slider with ticks"/>
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalSlider3" Width="40" Padding="0,0,0,20">
+              <Slider IsSnapToTickEnabled="True" Height="120" Width="40" Orientation="Vertical" Classes="Accent Discrete" Value="50" TickFrequency="10" assists:SliderAssist.ThumbForeground="{DynamicResource SecondaryHueDarkBrush}" ToolTip.Tip="Regular vertical slider with accent color and tooltip">
+                <Slider.Styles>
+                  <Style Selector="Slider:vertical">
+                    <Setter Property="assists:SliderAssist.ThumbContent">
+                      <Setter.Value>
+                        <Template>
+                          <avalonia:MaterialIcon Kind="VolumeHigh" Width="20" Height="20" Foreground="White" />
+                        </Template>
+                      </Setter.Value>
+                    </Setter>
+                  </Style>
+                </Slider.Styles>
+              </Slider>
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalSlider4" Width="80" Padding="0,0,0,20">
+              <Slider IsSnapToTickEnabled="True" Height="260" Width="80" Value="30" TickFrequency="10" Orientation="Vertical" assists:SliderAssist.ThumbForeground="#FF5cbcd6" ToolTip.Tip="Fully customized vertical slider with thumb custom template">
+                <Slider.Styles>
+                  <Style Selector="Slider:vertical">
+                    <Setter Property="Foreground">
+                      <Setter.Value>
+                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                          <GradientStop Offset="0.2" Color="#FF5cbcd6" />
+                          <GradientStop Offset="1.0" Color="#FF77dbf0" />
+                        </LinearGradientBrush>
+                      </Setter.Value>
+                    </Setter>
+                    <Setter Property="assists:SliderAssist.ThumbContent">
+                      <Setter.Value>
+                        <Template>
+                          <TextBlock Text="{Binding $parent[Slider].Value, StringFormat=\{0:N0\}, FallbackValue=0}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Foreground="White" FontSize="20"/>
+                        </Template>
+                      </Setter.Value>
+                    </Setter>
+                  </Style>
+                </Slider.Styles>
+              </Slider>
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalSlider5" Width="40" Padding="0,0,0,20">
+              <Slider IsEnabled="False" Value="20" Height="260" Width="20" Orientation="Vertical" IsSnapToTickEnabled="True" TickFrequency="10" TickPlacement="TopLeft"  ToolTip.Tip="Disabled vertical slider" />
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+        </StackPanel>
+      </StackPanel>
+
+      <StackPanel>
+        <TextBlock Classes="Headline6 Subheadline2" Text="Horizontal Outset" />
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider1">
+            <Slider Classes="Outset" Value="80" ToolTip.Tip="Horizontal outset slider" />
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider2">
+            <Slider IsSnapToTickEnabled="True" Classes="Outset" Height="30" Value="50" TickFrequency="10" TickPlacement="BottomRight" Foreground="{DynamicResource PrimaryHueLightBrush}" assists:SliderAssist.ThumbForeground="{DynamicResource PrimaryHueLightBrush}" ToolTip.Tip="Horizontal outset slider with ticks" />
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider3">
+            <Slider IsSnapToTickEnabled="True" Classes="Outset Discrete Accent" Width="120" Height="40" TickFrequency="1" Value="50" ToolTip.Tip="Horizontal outset slider with accent color and tooltip">
+              <Slider.Styles>
+                <Style Selector="Slider:horizontal">
+                  <Setter Property="assists:SliderAssist.ThumbContent">
+                    <Setter.Value>
+                      <Template>
+                        <avalonia:MaterialIcon Kind="ArrowSplitVertical" Width="20" Height="20" Foreground="White" />
+                      </Template>
+                    </Setter.Value>
+                  </Setter>
+                </Style>
+              </Slider.Styles>
+            </Slider>
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider4">
+            <Slider Height="80" Value="30" TickFrequency="25" Classes="Outset" assists:SliderAssist.ThumbForeground="#FF5cbcd6"
+								ToolTip.Tip="Fully customized horizontal outset slider with thumb custom template">
+              <Slider.Styles>
+                <Style Selector="Slider:horizontal.Outset">
+                  <Setter Property="Foreground">
+                    <Setter.Value>
+                      <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
+                        <GradientStop Offset="0" Color="#FF77dbf0" />
+                        <GradientStop Offset="0.8" Color="#FF5cbcd6" />
+                      </LinearGradientBrush>
+                    </Setter.Value>
+                  </Setter>
+                </Style>
+                <Style Selector="Slider:horizontal.Outset">
+                  <Setter Property="assists:SliderAssist.ThumbContent">
+                    <Setter.Value>
+                      <Template>
+                        <TextBlock Text="{Binding $parent[Slider].Value, StringFormat=\{0:N0\}, FallbackValue=0}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Foreground="White" FontSize="20"/>
+                      </Template>
+                    </Setter.Value>
+                  </Setter>
+                </Style>
+              </Slider.Styles>
+            </Slider>
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+        <StackPanel Classes="Content" Orientation="Horizontal">
+          <showMeTheXaml:XamlDisplay UniqueId="HorizontalOutsetSlider5">
+            <Slider IsEnabled="False" Classes="Outset" Value="20" IsSnapToTickEnabled="True" TickFrequency="10" TickPlacement="TopLeft" ToolTip.Tip="Disabled horizontal outset slider" />
+          </showMeTheXaml:XamlDisplay>
+          <TextBlock Width="60" />
+        </StackPanel>
+      </StackPanel>
+
+
+      <StackPanel Orientation="Vertical">
+        <TextBlock Classes="Headline6 Subheadline2" Text="Vertical Outset" />
+        <StackPanel Orientation="Horizontal">
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider1" Width="40" Padding="0,0,0,20">
+              <Slider Classes="Outset" Orientation="Vertical" Value="80" ToolTip.Tip="Vertical outset slider"/>
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider2" Width="40" Padding="0,0,0,20">
+              <Slider Classes="Outset" IsSnapToTickEnabled="True" Height="260" Width="30" Value="50" Orientation="Vertical" TickFrequency="10" TickPlacement="BottomRight" Foreground="{DynamicResource PrimaryHueLightBrush}" assists:SliderAssist.ThumbForeground="{DynamicResource PrimaryHueLightBrush}" ToolTip.Tip="Vertical outset slider with ticks" />
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider3" Width="40" Padding="0,0,0,20">
+              <Slider Classes="Outset Accent Discrete" IsSnapToTickEnabled="True" Height="120" Width="40" Orientation="Vertical" Value="50" TickFrequency="10" ToolTip.Tip="Vertical outset slider with accent color and tooltip">
+                <Slider.Styles>
+                  <Style Selector="Slider:vertical">
+                    <Setter Property="assists:SliderAssist.ThumbContent">
+                      <Setter.Value>
+                        <Template>
+                          <avalonia:MaterialIcon Kind="ArrowSplitHorizontal" Width="20" Height="20" Foreground="White" />
+                        </Template>
+                      </Setter.Value>
+                    </Setter>
+                  </Style>
+                </Slider.Styles>
+              </Slider>
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider4" Width="80" Padding="0,0,0,20">
+              <Slider Classes="Outset" IsSnapToTickEnabled="True" Height="260" Width="80" Value="30" TickFrequency="10" Orientation="Vertical" assists:SliderAssist.ThumbForeground="#FF5cbcd6"
+								ToolTip.Tip="Fully customized vertical outset slider with thumb custom template">
+                <Slider.Styles>
+                  <Style Selector="Slider:vertical">
+                    <Setter Property="Foreground">
+                      <Setter.Value>
+                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                          <GradientStop Offset="0.2" Color="#FF5cbcd6" />
+                          <GradientStop Offset="1.0" Color="#FF77dbf0" />
+                        </LinearGradientBrush>
+                      </Setter.Value>
+                    </Setter>
+                    <Setter Property="assists:SliderAssist.ThumbContent">
+                      <Setter.Value>
+                        <Template>
+                          <TextBlock Text="{Binding $parent[Slider].Value, StringFormat=\{0:N0\}, FallbackValue=0}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent" Foreground="White" FontSize="20"/>
+                        </Template>
+                      </Setter.Value>
+                    </Setter>
+                  </Style>
+                </Slider.Styles>
+              </Slider>
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+          <StackPanel Classes="Content" Orientation="Vertical" VerticalAlignment="Bottom">
+            <showMeTheXaml:XamlDisplay UniqueId="VerticalOutsetSlider5" Width="40" Padding="0,0,0,20">
+              <Slider Classes="Outset" IsEnabled="False" Value="20" Height="260" Width="20" Orientation="Vertical" IsSnapToTickEnabled="True" TickFrequency="10" TickPlacement="TopLeft" ToolTip.Tip="Disabled vertical outset slider" />
+            </showMeTheXaml:XamlDisplay>
+            <TextBlock Width="60" />
+          </StackPanel>
+        </StackPanel>
+      </StackPanel>
+
+
+
+    </WrapPanel>
+  </StackPanel>
 </UserControl>
\ No newline at end of file