From c577f6a5bdc613662ee5909b689921ebcb774129 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Thu, 28 May 2020 15:13:32 +0800
Subject: [PATCH] try making slider work

---
 src/Avalonia.Controls/Slider.cs               |  15 +-
 src/Avalonia.Themes.Fluent/Slider.xaml        | 207 +++++++++---------
 src/Avalonia.Visuals/Media/Color.cs           |   2 +
 .../Media/ColorToSolidColorBrushConverter.cs  |  36 +++
 4 files changed, 148 insertions(+), 112 deletions(-)
 create mode 100644 src/Avalonia.Visuals/Media/ColorToSolidColorBrushConverter.cs

diff --git a/src/Avalonia.Controls/Slider.cs b/src/Avalonia.Controls/Slider.cs
index e92c8faf20..9faf77d445 100644
--- a/src/Avalonia.Controls/Slider.cs
+++ b/src/Avalonia.Controls/Slider.cs
@@ -94,9 +94,18 @@ namespace Avalonia.Controls
                 _increaseButton.Click -= IncreaseClick;
             }
 
-            _decreaseButton = e.NameScope.Find<Button>("PART_DecreaseButton");
-            _track = e.NameScope.Find<Track>("PART_Track");
-            _increaseButton = e.NameScope.Find<Button>("PART_IncreaseButton");
+            // _decreaseButton = e.NameScope.Find<Button>("PART_DecreaseButton");
+
+            if (Orientation == Orientation.Horizontal)
+            {
+                _track = e.NameScope.Find<Track>("HorizontalThumb");
+            }
+            else
+            {
+                _track = e.NameScope.Find<Track>("VerticalThumb");
+            }
+
+            // _increaseButton = e.NameScope.Find<Button>("PART_IncreaseButton");
 
             if (_decreaseButton != null)
             {
diff --git a/src/Avalonia.Themes.Fluent/Slider.xaml b/src/Avalonia.Themes.Fluent/Slider.xaml
index 014095b924..523619fc5f 100644
--- a/src/Avalonia.Themes.Fluent/Slider.xaml
+++ b/src/Avalonia.Themes.Fluent/Slider.xaml
@@ -5,28 +5,27 @@
     <x:Double x:Key="SliderPostContentMargin">15</x:Double>
     <x:Double x:Key="SliderHorizontalHeight">32</x:Double>
     <x:Double x:Key="SliderVerticalWidth">32</x:Double>
-    <x:Double x:Key="SliderThumbCornerRadius">10</x:Double>
+    <Thickness x:Key="SliderThumbCornerRadius">10</Thickness>
     <x:Double x:Key="SliderHorizontalThumbWidth">20</x:Double>
     <x:Double x:Key="SliderHorizontalThumbHeight">20</x:Double>
     <x:Double x:Key="SliderVerticalThumbWidth">20</x:Double>
     <x:Double x:Key="SliderVerticalThumbHeight">20</x:Double>
   </Styles.Resources>
-  
   <!-- Disabled State -->
-  <Style Selector="Slider:disabled /template/ ContentPresenter#HeaderContentPresenter">
+  <!-- <Style Selector="Slider:disabled /template/ ContentPresenter#HeaderContentPresenter">
     <Setter Property="Foreground" Value="{DynamicResource SliderHeaderForegroundDisabled}" />
+  </Style> -->
+  <Style Selector="Slider:disabled /template/ Border#HorizontalDecreaseRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
   </Style>
-  <Style Selector="Slider:disabled /template/ Rectangle#HorizontalDecreaseRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackValueFillDisabled}" />
+  <Style Selector="Slider:disabled /template/ Border#HorizontalTrackRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
   </Style>
-  <Style Selector="Slider:disabled /template/ Rectangle#HorizontalTrackRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackFillDisabled}" />
+  <Style Selector="Slider:disabled /template/ Border#VerticalDecreaseRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
   </Style>
-  <Style Selector="Slider:disabled /template/ Rectangle#VerticalDecreaseRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackValueFillDisabled}" />
-  </Style>
-  <Style Selector="Slider:disabled /template/ Rectangle#VerticalTrackRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackFillDisabled}" />
+  <Style Selector="Slider:disabled /template/ Border#VerticalTrackRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
   </Style>
   <Style Selector="Slider:disabled /template/ Thumb#HorizontalThumb">
     <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
@@ -34,7 +33,7 @@
   <Style Selector="Slider:disabled /template/ Thumb#VerticalThumb">
     <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
   </Style>
-  <Style Selector="Slider:disabled /template/ TickBar#TopTickBar">
+  <!-- <Style Selector="Slider:disabled /template/ TickBar#TopTickBar">
     <Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
   </Style>
   <Style Selector="Slider:disabled /template/ TickBar#BottomTickBar">
@@ -45,19 +44,18 @@
   </Style>
   <Style Selector="Slider:disabled /template/ TickBar#RightTickBar">
     <Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
-  </Style>
+  </Style> -->
   <Style Selector="Slider:disabled /template/ Grid#SliderContainer">
     <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundDisabled}" />
   </Style>
-  
   <!-- Pressed State -->
-  <Style Selector="Slider:pressed /template/ Rectangle#HorizontalTrackRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackFillPressed}" />
+  <Style Selector="Slider:pressed /template/ Border#HorizontalTrackRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
   </Style>
-  <Style Selector="Slider:pressed /template/ Rectangle#HorizontalTrackRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackFillPressed}" />
+  <Style Selector="Slider:pressed /template/ Border#HorizontalTrackRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
   </Style>
-  <Style Selector="Slider:pressed /template/ Rectangle#VerticalTrackRect">
+  <Style Selector="Slider:pressed /template/ Border#VerticalTrackRect">
     <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
   </Style>
   <Style Selector="Slider:pressed /template/ Thumb#HorizontalThumb">
@@ -69,19 +67,18 @@
   <Style Selector="Slider:pressed /template/ Grid#SliderContainer">
     <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPressed}" />
   </Style>
-  <Style Selector="Slider:pressed /template/ Rectangle#HorizontalDecreaseRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackValueFillPressed}" />
+  <Style Selector="Slider:pressed /template/ Border#HorizontalDecreaseRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
   </Style>
-  <Style Selector="Slider:pressed /template/ Rectangle#VerticalDecreaseRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackValueFillPressed}" />
+  <Style Selector="Slider:pressed /template/ Border#VerticalDecreaseRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
   </Style>
-
   <!-- PointerOver State -->
-  <Style Selector="Slider:pointerover /template/ Rectangle#HorizontalTrackRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackFillPointerOver}" />
+  <Style Selector="Slider:pointerover /template/ Border#HorizontalTrackRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
   </Style>
-  <Style Selector="Slider:pointerover /template/ Rectangle#VerticalTrackRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackFillPointerOver}" />
+  <Style Selector="Slider:pointerover /template/ Border#VerticalTrackRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
   </Style>
   <Style Selector="Slider:pointerover /template/ Thumb#HorizontalThumb">
     <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
@@ -92,16 +89,15 @@
   <Style Selector="Slider:pointerover /template/ Grid#SliderContainer">
     <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
   </Style>
-  <Style Selector="Slider:pointerover /template/ Rectangle#HorizontalDecreaseRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
+  <Style Selector="Slider:pointerover /template/ Border#HorizontalDecreaseRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
   </Style>
-  <Style Selector="Slider:pointerover /template/ Rectangle#VerticalDecreaseRect">
-    <Setter Property="Fill" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
+  <Style Selector="Slider:pointerover /template/ Border#VerticalDecreaseRect">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
   </Style>
-
   <!-- TODO: We don't have an equivalent for this afaik. -->
-  <!-- <VisualState x:Name="FocusDisengaged" />
-  <VisualState x:Name="FocusEngagedHorizontal">
+  <!-- <VisualState Name="FocusDisengaged" />
+  <VisualState Name="FocusEngagedHorizontal">
     <Storyboard>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
         <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
@@ -111,7 +107,7 @@
       </ObjectAnimationUsingKeyFrames>
     </Storyboard>
   </VisualState>
-  <VisualState x:Name="FocusEngagedVertical">
+  <VisualState Name="FocusEngagedVertical">
     <Storyboard>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
         <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
@@ -120,7 +116,20 @@
         <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
       </ObjectAnimationUsingKeyFrames>
     </Storyboard>
-     -->
+     --> 
+    
+  <Style Selector="Slider:vertical /template/ Grid#VerticalTemplate">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
+  <Style Selector="Slider:vertical /template/ Grid#HorizontalTemplate">
+    <Setter Property="IsVisible" Value="False" />
+  </Style>
+  <Style Selector="Slider:horizontal /template/ Grid#HorizontalTemplate">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
+  <Style Selector="Slider:horizontal /template/ Grid#VerticalTemplate">
+    <Setter Property="IsVisible" Value="False" />
+  </Style>
 
   <Style Selector="Slider">
     <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
@@ -128,93 +137,73 @@
     <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
     <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-    <Setter Property="ManipulationMode" Value="None" />
+    <!-- TODO Non-existent properties in avalonia. -->
+    <!-- <Setter Property="ManipulationMode" Value="None" />
     <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
     <Setter Property="FocusVisualMargin" Value="-7,0,-7,0" />
-    <Setter Property="IsFocusEngagementEnabled" Value="True" />
-    <!-- NOTE: This was a contract7Present:Setter, not sure if this is correct -->
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <Setter Property="IsFocusEngagementEnabled" Value="True" /> -->
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate>
-          <Grid Margin="{TemplateBinding Padding}">
-            <Grid.Resources>
-              <Style TargetType="Thumb" x:Key="SliderThumbStyle">
+          <Border Margin="{TemplateBinding Padding}" CornerRadius="{DynamicResource ControlCornerRadius}">
+            <Border.Styles>
+              <Style Selector="Thumb.SliderThumbStyle">
                 <Setter Property="BorderThickness" Value="0" />
                 <Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
                 <Setter Property="Template">
                   <Setter.Value>
-                    <ControlTemplate TargetType="Thumb">
+                    <ControlTemplate>
                       <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
                     </ControlTemplate>
                   </Setter.Value>
                 </Setter>
               </Style>
-            </Grid.Resources>
-            <Grid.RowDefinitions>
-              <RowDefinition Height="Auto" />
-              <RowDefinition Height="*" />
-            </Grid.RowDefinitions>
-            <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontWeight="{DynamicResource SliderHeaderThemeFontWeight}"
-            Foreground="{DynamicResource SliderHeaderForeground}" Margin="{DynamicResource SliderTopHeaderMargin}" TextWrapping="Wrap" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
-            <Grid x:Name="SliderContainer" Grid.Row="1" Background="{DynamicResource SliderContainerBackground}" Control.IsTemplateFocusTarget="True">
-              <Grid x:Name="HorizontalTemplate" MinHeight="{DynamicResource SliderHorizontalHeight}">
-                <Grid.ColumnDefinitions>
-                  <ColumnDefinition Width="Auto" />
-                  <ColumnDefinition Width="Auto" />
-                  <ColumnDefinition Width="*" />
-                </Grid.ColumnDefinitions>
-                <Grid.RowDefinitions>
-                  <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
-                  <RowDefinition Height="Auto" />
-                  <RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
-                </Grid.RowDefinitions>
-                <Rectangle x:Name="HorizontalTrackRect" Fill="{TemplateBinding Background}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3"
-                contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
-                contract7NotPresent:RadiusX="{Binding Source={DynamicResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                contract7NotPresent:RadiusY="{Binding Source={DynamicResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-                <Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Row="1"
-                contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
-                contract7NotPresent:RadiusX="{Binding Source={DynamicResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                contract7NotPresent:RadiusY="{Binding Source={DynamicResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-                <TickBar x:Name="TopTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" />
-                <TickBar x:Name="HorizontalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" />
-                <TickBar x:Name="BottomTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" />
-                <Thumb x:Name="HorizontalThumb" Style="{StaticResource SliderThumbStyle}" DataContext="{TemplateBinding Value}" Height="{DynamicResource SliderHorizontalThumbHeight}" Width="{DynamicResource SliderHorizontalThumbWidth}" Grid.Row="0"
-                Grid.RowSpan="3" Grid.Column="1" FocusVisualMargin="-14,-6,-14,-6" AutomationProperties.AccessibilityView="Raw" />
-              </Grid>
-              <Grid x:Name="VerticalTemplate" MinWidth="{DynamicResource SliderVerticalWidth}" Visibility="Collapsed">
-                <Grid.RowDefinitions>
-                  <RowDefinition Height="*" />
-                  <RowDefinition Height="Auto" />
-                  <RowDefinition Height="Auto" />
-                </Grid.RowDefinitions>
-                <Grid.ColumnDefinitions>
-                  <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
-                  <ColumnDefinition Width="Auto" />
-                  <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
-                </Grid.ColumnDefinitions>
-                <Rectangle x:Name="VerticalTrackRect" Fill="{TemplateBinding Background}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3"
-                contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
-                contract7NotPresent:RadiusX="{Binding Source={DynamicResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                contract7NotPresent:RadiusY="{Binding Source={DynamicResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-                <Rectangle x:Name="VerticalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Column="1" Grid.Row="2"
-                contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
-                contract7NotPresent:RadiusX="{Binding Source={DynamicResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                contract7NotPresent:RadiusY="{Binding Source={DynamicResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-                <TickBar x:Name="LeftTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" />
-                <TickBar x:Name="VerticalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" />
-                <TickBar x:Name="RightTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Left" Margin="4,0,0,0" Grid.Column="2"
-                Grid.RowSpan="3" />
-                <Thumb x:Name="VerticalThumb" Style="{StaticResource SliderThumbStyle}" DataContext="{TemplateBinding Value}" Width="{DynamicResource SliderVerticalThumbWidth}" Height="{DynamicResource SliderVerticalThumbHeight}" Grid.Row="1"
-                Grid.Column="0" Grid.ColumnSpan="3" FocusVisualMargin="-6,-14,-6,-14" AutomationProperties.AccessibilityView="Raw" />
+            </Border.Styles>
+            <Grid RowDefinitions="Auto,*">
+              <!-- TODO removed TextBlock.TextWrapping; bind Content -> Header and ContentTemplate -> HeaderTemplate -->
+              <ContentPresenter Name="HeaderContentPresenter" Grid.Row="0" TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextBlock.Foreground="{DynamicResource SliderHeaderForeground}" Margin="{DynamicResource SliderTopHeaderMargin}"
+              IsVisible="False" />
+              <!-- TODO removed Control.IsTemplateFocusTarget -->
+              <Grid Name="SliderContainer" Grid.Row="1" Background="{DynamicResource SliderContainerBackground}">
+                <Grid Name="HorizontalTemplate" ColumnDefinitions="Auto,Auto,*" MinHeight="{DynamicResource SliderHorizontalHeight}">
+                  <Grid.RowDefinitions>
+                    <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
+                  </Grid.RowDefinitions>
+                  <Border Name="HorizontalTrackRect" Background="{TemplateBinding Background}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" CornerRadius="{Binding CornerRadius}" />
+                  <Border Name="HorizontalDecreaseRect" Background="{TemplateBinding Foreground}" Grid.Row="1" CornerRadius="{Binding CornerRadius}" />
+                  <!-- TODO TickBars are not implemented yet. -->
+                  <!--
+                <TickBar Name="TopTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" />
+                <TickBar Name="HorizontalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" />
+                <TickBar Name="BottomTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" />
+                -->
+                  <!-- TODO Removed FocusVisualMargin and AutomationProperties.AccessibilityView -->
+                  <Thumb Name="HorizontalThumb" Classes="SliderThumbStyle" DataContext="{TemplateBinding Value}" Height="{DynamicResource SliderHorizontalThumbHeight}" Width="{DynamicResource SliderHorizontalThumbWidth}" Grid.Row="0"
+                  Grid.RowSpan="3" Grid.Column="1" />
+                </Grid>
+                <Grid Name="VerticalTemplate" RowDefinitions="*,Auto,Auto" MinWidth="{DynamicResource SliderVerticalWidth}" IsVisible="False">
+                  <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
+                  </Grid.ColumnDefinitions>
+                  <Border Name="VerticalTrackRect" Background="{TemplateBinding Background}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" CornerRadius="{Binding CornerRadius}" />
+                  <Border Name="VerticalDecreaseRect" Background="{TemplateBinding Foreground}" Grid.Column="1" Grid.Row="2" CornerRadius="{Binding CornerRadius}" />
+                  <!-- TODO TickBars are not implemented yet. -->
+                  <!-- 
+                <TickBar Name="LeftTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" />
+                <TickBar Name="VerticalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" />
+                <TickBar Name="RightTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Left" Margin="4,0,0,0" Grid.Column="2" Grid.RowSpan="3" /> 
+                -->
+                  <!-- TODO Removed FocusVisualMargin and AutomationProperties.AccessibilityView-->
+                  <Thumb Name="VerticalThumb" Classes="SliderThumbStyle" DataContext="{TemplateBinding Value}" Width="{DynamicResource SliderVerticalThumbWidth}" Height="{DynamicResource SliderVerticalThumbHeight}" Grid.Row="1" Grid.Column="0"
+                  Grid.ColumnSpan="3" />
+                </Grid>
               </Grid>
             </Grid>
-          </Grid>
+          </Border>
         </ControlTemplate>
       </Setter.Value>
     </Setter>
diff --git a/src/Avalonia.Visuals/Media/Color.cs b/src/Avalonia.Visuals/Media/Color.cs
index 2e06d2578f..acacbaac36 100644
--- a/src/Avalonia.Visuals/Media/Color.cs
+++ b/src/Avalonia.Visuals/Media/Color.cs
@@ -1,4 +1,5 @@
 using System;
+using System.ComponentModel;
 using System.Globalization;
 using Avalonia.Animation.Animators;
 
@@ -7,6 +8,7 @@ namespace Avalonia.Media
     /// <summary>
     /// An ARGB color.
     /// </summary>
+    [TypeConverter(typeof(ColorToSolidColorBrushConverter))]
     public readonly struct Color : IEquatable<Color>
     {
         static Color()
diff --git a/src/Avalonia.Visuals/Media/ColorToSolidColorBrushConverter.cs b/src/Avalonia.Visuals/Media/ColorToSolidColorBrushConverter.cs
new file mode 100644
index 0000000000..fa8603c536
--- /dev/null
+++ b/src/Avalonia.Visuals/Media/ColorToSolidColorBrushConverter.cs
@@ -0,0 +1,36 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Globalization;
+using System.Linq;
+using Avalonia.Media.Immutable;
+
+namespace Avalonia.Media
+{
+    internal class ColorToSolidColorBrushConverter : TypeConverter
+    {
+        public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
+        {
+            return sourceType == typeof(string);
+        }
+
+        public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value)
+        {
+            return Color.Parse((string)value);
+        }
+        public override bool CanConvertTo(ITypeDescriptorContext context, Type destinationType)
+        {
+            return typeof(IBrush).IsAssignableFrom(destinationType);
+        }
+
+        public override object ConvertTo(ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
+        {
+            if (typeof(IBrush).IsAssignableFrom(destinationType))
+            {
+                return new ImmutableSolidColorBrush((Color)value);
+            }
+
+            return null;
+        }
+    }
+}
\ No newline at end of file