Cleaning up Themes.

Renamed ErrorBrushLight to ErrorLightBrush.
ListBoxItem - Removed hardcoded Colors/Brushes, added additional sytling.
Removed ListBoxItem Style Selector from AutoCompleteBox (inherrited).
CalendarButton - Removed hardcoded Colors/Brushes.
DropDownItem - Removed hardcoded Colors/Brushes, added additional sytling.
ScrollBar - Removed hardcoded Colors/Brushes.
Added ListBox to ControlCatalog.
Slider bug fix (hopefully).

samples/ControlCatalog/ControlCatalog.csproj

@@ -33,6 +33,15 @@
     <ProjectReference Include="..\..\src\Avalonia.Styling\Avalonia.Styling.csproj" />
     <ProjectReference Include="..\..\src\Avalonia.Themes.Default\Avalonia.Themes.Default.csproj" />
   </ItemGroup>
+
+  <ItemGroup>
+    <None Update="Pages\ListBoxPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </None>
+    <None Update="Pages\TreeViewPage - Copy.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </None>
+  </ItemGroup>
   
   <Import Project="..\..\build\Serilog.props" />
 </Project>

samples/ControlCatalog/MainView.xaml

@@ -20,8 +20,9 @@
     <TabItem Header="Expander"><pages:ExpanderPage/></TabItem>
     <TabItem Header="Image"><pages:ImagePage/></TabItem>
     <TabItem Header="LayoutTransformControl"><pages:LayoutTransformControlPage/></TabItem>
+    <TabItem Header="ListBox"><pages:ListBoxPage/></TabItem>
     <TabItem Header="Menu"><pages:MenuPage/></TabItem>
-	  <TabItem Header="NumericUpDown"><pages:NumericUpDownPage/></TabItem>
+	<TabItem Header="NumericUpDown"><pages:NumericUpDownPage/></TabItem>
     <TabItem Header="ProgressBar"><pages:ProgressBarPage/></TabItem>
     <TabItem Header="RadioButton"><pages:RadioButtonPage/></TabItem>
     <TabItem Header="Slider"><pages:SliderPage/></TabItem>

samples/ControlCatalog/Pages/ListBoxPage.xaml

@@ -0,0 +1,13 @@
+<UserControl xmlns="https://github.com/avaloniaui">
+  <StackPanel Orientation="Vertical" Spacing="4">
+    <TextBlock Classes="h1">ListBox</TextBlock>
+    <TextBlock Classes="h2">Hosts a collection of ListBoxItem.</TextBlock>
+
+    <StackPanel Orientation="Horizontal"
+              Margin="0,16,0,0"
+              HorizontalAlignment="Center"
+              Spacing="16">
+      <ListBox Items="{Binding}" Width="250" Height="350"></ListBox>
+    </StackPanel>
+  </StackPanel>
+</UserControl>

samples/ControlCatalog/Pages/ListBoxPage.xaml.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Linq;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace ControlCatalog.Pages
+{
+    public class ListBoxPage : UserControl
+    {
+        public ListBoxPage()
+        {
+            this.InitializeComponent();
+            DataContext = Enumerable.Range(1, 10).Select(i => $"Item {i}" )
+                .ToArray();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+
+    }
+}

samples/ControlCatalog/Pages/NumericUpDownPage.xaml

@@ -14,7 +14,7 @@
         <CheckBox Grid.Row="1" Grid.Column="1" IsChecked="{Binding #upDown.IsReadOnly}" VerticalAlignment="Center" Margin="2"/>
 
         <TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" Margin="2">AllowSpin:</TextBlock>
-        <CheckBox Grid.Row="2" Grid.Column="1" IsChecked="{Binding #upDown.AllowSpin}" IsEnabled="{Binding #upDown.!IsReadOnly}" VerticalAlignment="Center" Margin="2"/>
+        <CheckBox Grid.Row="2" Grid.Column="1" IsChecked="{Binding #upDown.AllowSpin}" VerticalAlignment="Center" Margin="2"/>
 
         <TextBlock Grid.Row="3" Grid.Column="0" VerticalAlignment="Center" Margin="2">ClipValueToMinMax:</TextBlock>
         <CheckBox Grid.Row="3" Grid.Column="1" IsChecked="{Binding #upDown.ClipValueToMinMax}" VerticalAlignment="Center" Margin="2"/>
@@ -77,4 +77,4 @@
     </StackPanel>
 
   </StackPanel>
-</UserControl>
+</UserControl>

src/Avalonia.Controls/Slider.cs

@@ -171,11 +171,7 @@ namespace Avalonia.Controls
         /// <param name="value">Value that want to snap to closest Tick.</param>
         private void MoveToNextTick(double value)
         {
-            double next = SnapToTick(Math.Max(Minimum, Math.Min(Maximum, value)));
+            Value = SnapToTick(Math.Max(Minimum, Math.Min(Maximum, value)));
-            if (next != value)
-            {
-                Value = next;
-            }
         }
 
         /// <summary>
@@ -194,4 +190,4 @@ namespace Avalonia.Controls
             return value;
         }
     }
-}
+}

src/Avalonia.Themes.Default/Accents/BaseLight.xaml

@@ -2,23 +2,49 @@
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib">
   <Style.Resources>
-    <SolidColorBrush x:Key="ThemeBackgroundBrush">#FFFFFFFF</SolidColorBrush>
+      
-    <SolidColorBrush x:Key="ThemeBorderLightBrush">#FFAAAAAA</SolidColorBrush>
+    <Color x:Key="ThemeAccentColor">#CC119EDA</Color>
-    <SolidColorBrush x:Key="ThemeBorderMidBrush">#FF888888</SolidColorBrush>
+    <Color x:Key="ThemeAccentColor2">#99119EDA</Color>
-    <SolidColorBrush x:Key="ThemeBorderDarkBrush">#FF333333</SolidColorBrush>
+    <Color x:Key="ThemeAccentColor3">#66119EDA</Color>
-    <SolidColorBrush x:Key="ThemeControlLightBrush">#FFFFFFFF</SolidColorBrush>
+    <Color x:Key="ThemeAccentColor4">#33119EDA</Color>
-    <SolidColorBrush x:Key="ThemeControlMidBrush">#FFAAAAAA</SolidColorBrush>
+      
-    <SolidColorBrush x:Key="ThemeControlDarkBrush">#FF888888</SolidColorBrush>
+    <Color x:Key="ThemeBackgroundColor">#FFFFFFFF</Color>
-    <SolidColorBrush x:Key="ThemeForegroundBrush">#FF000000</SolidColorBrush>
+    <Color x:Key="ThemeBorderLightColor">#FFAAAAAA</Color>
-    <SolidColorBrush x:Key="ThemeForegroundLightBrush">#FF808080</SolidColorBrush>
+    <Color x:Key="ThemeBorderMidColor">#FF888888</Color>
+    <Color x:Key="ThemeBorderDarkColor">#FF333333</Color>
+    <Color x:Key="ThemeControlLightColor">#FFFFFFFF</Color>
+    <Color x:Key="ThemeControlMidColor">#FFAAAAAA</Color>
+    <Color x:Key="ThemeControlDarkColor">#FF888888</Color>
+    <Color x:Key="ThemeControlHighlightLowColor">#FFF0F0F0</Color>
+    <Color x:Key="ThemeControlHighlightMidColor">#FFD0D0D0</Color>
+    <Color x:Key="ThemeControlHighlightDarkColor">#FF808080</Color>
+    <Color x:Key="ThemeForegroundColor">#FF000000</Color>
+    <Color x:Key="ThemeForegroundLightColor">#FF808080</Color>
+      
+    <Color x:Key="HighlightColor">#FF086F9E</Color>
+    <Color x:Key="ErrorColor">#FFFF0000</Color>
+    <Color x:Key="ErrorLightColor">#10FF0000</Color>
 
-    <SolidColorBrush x:Key="HighlightBrush">#FF086F9E</SolidColorBrush>    
+    <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{DynamicResource ThemeBackgroundColor}"></SolidColorBrush>
-    <SolidColorBrush x:Key="ThemeAccentBrush">#CC119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeBorderLightBrush" Color="{DynamicResource ThemeBorderLightColor}"></SolidColorBrush>
-    <SolidColorBrush x:Key="ThemeAccentBrush2">#99119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeBorderMidBrush" Color="{DynamicResource ThemeBorderMidColor}"></SolidColorBrush>
-    <SolidColorBrush x:Key="ThemeAccentBrush3">#66119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeBorderDarkBrush" Color="{DynamicResource ThemeBorderDarkColor}"></SolidColorBrush>
-    <SolidColorBrush x:Key="ThemeAccentBrush4">#33119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlLightBrush" Color="{DynamicResource ThemeControlLightColor}"></SolidColorBrush>
-    <SolidColorBrush x:Key="ErrorBrush">Red</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlMidBrush" Color="{DynamicResource ThemeControlMidColor}"></SolidColorBrush>
-    <SolidColorBrush x:Key="ErrorBrushLight">#10ff0000</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlDarkBrush" Color="{DynamicResource ThemeControlDarkColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlHighlightLowBrush" Color="{DynamicResource ThemeControlHighlightLowColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlHighlightMidBrush" Color="{DynamicResource ThemeControlHighlightMidColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlHighlightDarkBrush" Color="{DynamicResource ThemeControlHighlightDarkColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeForegroundBrush" Color="{DynamicResource ThemeForegroundColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeForegroundLightBrush" Color="{DynamicResource ThemeForegroundLightColor}"></SolidColorBrush>
+      
+    <SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource HighlightColor}"></SolidColorBrush>    
+    <SolidColorBrush x:Key="ThemeAccentBrush" Color="{DynamicResource ThemeAccentColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeAccentBrush2" Color="{DynamicResource ThemeAccentColor2}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeAccentBrush3" Color="{DynamicResource ThemeAccentColor3}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeAccentBrush4" Color="{DynamicResource ThemeAccentColor4}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ErrorBrush" Color="{DynamicResource ErrorColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="ErrorLightBrush" Color="{DynamicResource ErrorLightColor}"></SolidColorBrush>
 
     <Thickness x:Key="ThemeBorderThickness">2</Thickness>
     <sys:Double x:Key="ThemeDisabledOpacity">0.5</sys:Double>
@@ -27,4 +53,4 @@
     <sys:Double x:Key="FontSizeNormal">12</sys:Double>
     <sys:Double x:Key="FontSizeLarge">16</sys:Double>
   </Style.Resources>
-</Style>
+</Style>

src/Avalonia.Themes.Default/AutoCompleteBox.xaml

@@ -36,8 +36,4 @@
       </ControlTemplate>
     </Setter>
   </Style>
-  
+</Styles>
-  <Style Selector="AutoCompleteBox ListBoxItem:pointerover">
-    <Setter Property="Background" Value="#ffd0d0d0"/>
-  </Style>
-</Styles>

src/Avalonia.Themes.Default/CalendarButton.xaml

@@ -7,6 +7,7 @@
 
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="CalendarButton">
+    <Setter Property="Foreground" Value="{DynamicResource ThemeBorderDarkBrush}" />
     <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
     <Setter Property="FontSize" Value="{DynamicResource FontSizeSmall}" />
     <Setter Property="HorizontalContentAlignment" Value="Center" />
@@ -28,7 +29,7 @@
 
           <!--Focusable="False"-->
           <ContentControl Name="Content"
-                          Foreground="#FF333333"
+                          Foreground="{TemplateBinding Foreground}"
                           ContentTemplate="{TemplateBinding ContentTemplate}"
                           Content="{TemplateBinding Content}"
                           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -77,4 +78,4 @@
   <Style Selector="CalendarButton:btnfocused /template/ Rectangle#FocusVisual">
     <Setter Property="IsVisible" Value="True"/>
   </Style>
-</Styles>
+</Styles>

src/Avalonia.Themes.Default/DataValidationErrors.xaml

@@ -24,7 +24,7 @@
               Background="#00FFFFFF">
         <Canvas.Styles>
           <Style Selector="ToolTip">
-            <Setter Property="Background" Value="{DynamicResource ErrorBrushLight}"/>
+            <Setter Property="Background" Value="{DynamicResource ErrorLightBrush}"/>
             <Setter Property="BorderBrush" Value="{DynamicResource ErrorBrush}"/>
           </Style>
         </Canvas.Styles>
@@ -35,4 +35,4 @@
       </Canvas>
     </DataTemplate>
   </Setter>
-</Style>
+</Style>

src/Avalonia.Themes.Default/DropDownItem.xaml

@@ -18,10 +18,24 @@
       </ControlTemplate>
     </Setter>
   </Style>
+
+  <Style Selector="DropDownItem:pointerover /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>
+  </Style>
+    
   <Style Selector="DropDownItem:selected /template/ ContentPresenter">
-    <Setter Property="Background" Value="#fff0f0f0"/>
+    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
   </Style>
-  <Style Selector="DropDownItem:pointerover /template/ ContentPresenter">
+    
-    <Setter Property="Background" Value="#ffd0d0d0"/>
+  <Style Selector="DropDownItem:selected:focus /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
+  </Style>
+    
+  <Style Selector="DropDownItem:selected:pointerover /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
+  </Style>
+
+  <Style Selector="DropDownItem:selected:focus:pointerover /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/>
   </Style>
-</Styles>
+</Styles>

src/Avalonia.Themes.Default/ListBoxItem.xaml

@@ -1,6 +1,9 @@
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="ListBoxItem">
     <Setter Property="Background" Value="Transparent"/>
+    <Setter Property="BorderBrush" Value="Transparent"/>
+    <Setter Property="BorderThickness" Value="0"/>
+    <Setter Property="Padding" Value="2 1"/>
     <Setter Property="Template">
       <ControlTemplate>
         <ContentPresenter Name="PART_ContentPresenter"
@@ -15,10 +18,24 @@
       </ControlTemplate>
     </Setter>
   </Style>
+    
+  <Style Selector="ListBoxItem:pointerover /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>
+  </Style>
+    
   <Style Selector="ListBoxItem:selected /template/ ContentPresenter">
-    <Setter Property="Background" Value="#fff0f0f0"/>
+    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
   </Style>
+    
   <Style Selector="ListBoxItem:selected:focus /template/ ContentPresenter">
-    <Setter Property="Background" Value="#ffd0d0d0"/>
+    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
+  </Style>
+    
+  <Style Selector="ListBoxItem:selected:pointerover /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
+  </Style>
+
+  <Style Selector="ListBoxItem:selected:focus:pointerover /template/ ContentPresenter">
+    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/>
   </Style>
-</Styles>
+</Styles>

src/Avalonia.Themes.Default/ScrollBar.xaml

@@ -10,7 +10,7 @@
                                       Grid.Column="0">
                             <Path Data="M 0,4 C0,4 0,6 0,6 0,6 3.5,2.5 3.5,2.5 3.5,2.5 7,6 7,6 7,6 7,4 7,4 7,4 3.5,0.5 3.5,0.5 3.5,0.5 0,4 0,4 z"
                                   Stretch="Uniform"
-                                  Fill="Gray" />
+                                  Fill="{DynamicResource ThemeForegroundLightBrush}" />
                         </RepeatButton>
                         <Track Grid.Row="1"
                                Grid.Column="1"
@@ -41,7 +41,7 @@
                                       Grid.Column="2">
                             <Path Data="M 0,2.5 C0,2.5 0,0.5 0,0.5 0,0.5 3.5,4 3.5,4 3.5,4 7,0.5 7,0.5 7,0.5 7,2.5 7,2.5 7,2.5 3.5,6 3.5,6 3.5,6 0,2.5 0,2.5 z"
                                   Stretch="Uniform"
-                                  Fill="Gray" />
+                                  Fill="{DynamicResource ThemeForegroundLightBrush}" />
                         </RepeatButton>
                     </Grid>
                 </Border>
@@ -61,7 +61,7 @@
                                       Grid.Column="0">
                             <Path Data="M 3.18,7 C3.18,7 5,7 5,7 5,7 1.81,3.5 1.81,3.5 1.81,3.5 5,0 5,0 5,0 3.18,0 3.18,0 3.18,0 0,3.5 0,3.5 0,3.5 3.18,7 3.18,7 z"
                                   Stretch="Uniform"
-                                  Fill="Gray" />
+                                  Fill="{DynamicResource ThemeForegroundLightBrush}" />
                         </RepeatButton>
                         <Track Grid.Row="1"
                                Grid.Column="1"
@@ -92,7 +92,7 @@
                                       Grid.Column="2">
                             <Path Data="M 1.81,7 C1.81,7 0,7 0,7 0,7 3.18,3.5 3.18,3.5 3.18,3.5 0,0 0,0 0,0 1.81,0 1.81,0 1.81,0 5,3.5 5,3.5 5,3.5 1.81,7 1.81,7 z"
                                   Stretch="Uniform"
-                                  Fill="Gray" />
+                                  Fill="{DynamicResource ThemeForegroundLightBrush}" />
                         </RepeatButton>
                     </Grid>
                 </Border>
@@ -124,4 +124,4 @@
             </ControlTemplate>
         </Setter>
     </Style>
-</Styles>
+</Styles>