fully ported listbox and listbox items

src/Avalonia.Themes.Fluent/ListBox.xaml

@@ -1,31 +1,43 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Style Selector="ListBox">
-  <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
-  <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
-  <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}"/>
-  <Setter Property="Padding" Value="4"/>
-  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
-  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Border Name="border" BorderBrush="{TemplateBinding BorderBrush}"
-              BorderThickness="{TemplateBinding BorderThickness}">
-        <ScrollViewer Name="PART_ScrollViewer"
-                      Background="{TemplateBinding Background}"
-                      HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                      VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
-          <ItemsPresenter Name="PART_ItemsPresenter"
-                          Items="{TemplateBinding Items}"
-                          ItemsPanel="{TemplateBinding ItemsPanel}"
-                          ItemTemplate="{TemplateBinding ItemTemplate}"
-                          Margin="{TemplateBinding Padding}"
-                          VirtualizationMode="{TemplateBinding VirtualizationMode}"/>
-        </ScrollViewer>
-      </Border>
-    </ControlTemplate>
-  </Setter>
-    </Style>
-    <Style Selector="ListBox:disabled /template/ Border#border">
-        <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
-    </Style>
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <ListBox>
+        <ListBoxItem>Test</ListBoxItem>
+        <ListBoxItem>Test</ListBoxItem>
+        <ListBoxItem>Test</ListBoxItem>
+        <ListBoxItem>Test</ListBoxItem>
+      </ListBox>
+    </Border>
+  </Design.PreviewWith>
+  <Style Selector="ListBox">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ListBoxBorderThemeThickness}" />
+    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />    
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />    
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="border" BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}">
+          <ScrollViewer Name="PART_ScrollViewer"
+                        Background="{TemplateBinding Background}"
+                        HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                        VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+            <ItemsPresenter Name="PART_ItemsPresenter"
+                            Items="{TemplateBinding Items}"
+                            ItemsPanel="{TemplateBinding ItemsPanel}"
+                            ItemTemplate="{TemplateBinding ItemTemplate}"
+                            Margin="{TemplateBinding Padding}"
+                            VirtualizationMode="{TemplateBinding VirtualizationMode}"/>
+          </ScrollViewer>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="ListBox:disabled /template/ Border#border">
+    <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+  </Style>
 </Styles>

src/Avalonia.Themes.Fluent/ListBoxItem.xaml

@@ -1,12 +1,27 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="0">
+      <ListBox>
+        <ListBoxItem IsEnabled="False">Disabled</ListBoxItem>
+        <ListBoxItem>Test</ListBoxItem>
+        <ListBoxItem>Test</ListBoxItem>
+      </ListBox>
+    </Border>
+  </Design.PreviewWith>
+  <Styles.Resources>
+    <Thickness x:Key="ListBoxItemPadding">12,9,12,12</Thickness>
+  </Styles.Resources>
   <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="Background" Value="Transparent" />
+    <Setter Property="Padding" Value="{StaticResource ListBoxItemPadding}" />
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
     <Setter Property="Template">
       <ControlTemplate>
-        <ContentPresenter Name="PART_ContentPresenter"
+        <Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">
+          <Panel>
+
+            <Rectangle x:Name="PressedBackground" IsHitTestVisible="False"  />
+            <ContentPresenter Name="PART_ContentPresenter"
                           Background="{TemplateBinding Background}"
                           BorderBrush="{TemplateBinding BorderBrush}"
                           BorderThickness="{TemplateBinding BorderThickness}"
@@ -15,27 +30,68 @@
                           Padding="{TemplateBinding Padding}"
                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+
+          </Panel>
+        </Border>
       </ControlTemplate>
     </Setter>
   </Style>
-    
+
+  <Style Selector="ListBoxItem /template/ ContentPresenter">
+    <Setter Property="TextBlock.FontWeight" Value="Normal" />
+    <Setter Property="TextBlock.FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+  </Style>
+
+  <!-- Disabled State -->  
+  <Style Selector="ListBoxItem:disabled /template/ ContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemControlDisabledBaseMediumLowBrush}"/>
+  </Style>
+  
+  <!-- PointerOver State -->
+  <Style Selector="ListBoxItem:pointerover /template/ Rectangle#PressedBackground">
+    <Setter Property="Fill" Value="{DynamicResource SystemControlHighlightListLowBrush}"/>
+  </Style>
   <Style Selector="ListBoxItem:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}"/>
+  </Style>
+
+  <!-- Pressed State -->
+  <Style Selector="ListBoxItem:pressed /template/ Rectangle#PressedBackground">
+    <Setter Property="Fill" Value="{DynamicResource SystemControlHighlightListMediumBrush}"/>
+  </Style>
+  <Style Selector="ListBoxItem:pressed /template/ ContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}"/>
+  </Style>
+
+  <!-- Selected State -->
+  <Style Selector="ListBoxItem:selected /template/ Rectangle#PressedBackground">
+    <Setter Property="Fill" Value="{DynamicResource SystemControlHighlightListAccentLowBrush}"/>
   </Style>
-    
   <Style Selector="ListBoxItem:selected /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}"/>
   </Style>
-    
-  <Style Selector="ListBoxItem:selected:focus /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
+  
+  <!-- Selected Unfocused State -->
+  <Style Selector="ListBoxItem:selected:not(:focus) /template/ Rectangle#PressedBackground">
+    <Setter Property="Fill" Value="{DynamicResource SystemControlHighlightListAccentLowBrush}"/>
+  </Style>
+  <Style Selector="ListBoxItem:selected:not(:focus) /template/ ContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}"/>
+  </Style>
+
+  <!-- Selected PointerOver State -->
+  <Style Selector="ListBoxItem:selected:pointerover /template/ Rectangle#PressedBackground">
+    <Setter Property="Fill" Value="{DynamicResource SystemControlHighlightListAccentMediumBrush}"/>
   </Style>
-    
   <Style Selector="ListBoxItem:selected:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}"/>
   </Style>
 
-  <Style Selector="ListBoxItem:selected:focus:pointerover /template/ ContentPresenter">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/>
+<!-- Selected Pressed State -->
+  <Style Selector="ListBoxItem:selected:pressed /template/ Rectangle#PressedBackground">
+    <Setter Property="Fill" Value="{DynamicResource SystemControlHighlightListAccentHighBrush}"/>
+  </Style>
+  <Style Selector="ListBoxItem:selected:pressed /template/ ContentPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemControlHighlightAltBaseHighBrush}"/>
   </Style>
 </Styles>