UI work

App.axaml

@@ -1,11 +1,41 @@
 <Application xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="MercuryConverter.App"
+            x:Class="MercuryConverter.App"
-             RequestedThemeVariant="Default">
+            RequestedThemeVariant="Default">
-             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
+            <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
 
     <Application.Styles>
-        <FluentTheme />
+        <!-- <FluentTheme /> -->
+        <FluentTheme>
+            <FluentTheme.Palettes>
+                <ColorPaletteResources x:Key="Light" Accent="#ffb85add" AltHigh="White" AltLow="White" AltMedium="White" AltMediumHigh="White" AltMediumLow="White" BaseHigh="Black" BaseLow="#ffa1aeff" BaseMedium="#ff5a71c0" BaseMediumHigh="#ff2b4996" BaseMediumLow="#ff435dab" ChromeAltLow="#ff2b4996" ChromeBlackHigh="Black" ChromeBlackLow="#ffa1aeff" ChromeBlackMedium="#ff2b4996" ChromeBlackMediumLow="#ff5a71c0" ChromeDisabledHigh="#ffa1aeff" ChromeDisabledLow="#ff5a71c0" ChromeGray="#ff435dab" ChromeHigh="#ffa1aeff" ChromeLow="#ffd9e1ff" ChromeMedium="#ffced7ff" ChromeMediumLow="#ffd9e1ff" ChromeWhite="White" ListLow="#ffced7ff" ListMedium="#ffa1aeff" RegionColor="#ffccdbff" />
+                <ColorPaletteResources x:Key="Dark" Accent="#ff9b21dd" AltHigh="Black" AltLow="Black" AltMedium="Black" AltMediumHigh="Black" AltMediumLow="Black" BaseHigh="White" BaseLow="#994736b0" BaseMedium="#eba49be0" BaseMediumHigh="#ffbbb4ec" BaseMediumLow="#c27568c8" ChromeAltLow="#ffbbb4ec" ChromeBlackHigh="Black" ChromeBlackLow="#ffbbb4ec" ChromeBlackMedium="Black" ChromeBlackMediumLow="Black" ChromeDisabledHigh="#994736b0" ChromeDisabledLow="#eba49be0" ChromeGray="#d68d82d4" ChromeHigh="#d68d82d4" ChromeLow="#eb101272" ChromeMedium="#d61e1b82" ChromeMediumLow="#ad392da1" ChromeWhite="White" ListLow="#d61e1b82" ListMedium="#994736b0" RegionColor="#ff1c1f46" />
+            </FluentTheme.Palettes>
+            <Style Selector="DataGrid:focus DataGridCell:current /template/ Grid#FocusVisual"> 
+                <Setter Property="IsVisible" Value="False" /> 
+            </Style> 
+        </FluentTheme>
+
         <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
     </Application.Styles>
+
+    <Application.Resources>
+        <ResourceDictionary>
+            <!-- Theming -->
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceDictionary x:Key="Light">
+                    <SolidColorBrush x:Key="ExpanderHeaderBackgroundPointerOver">#40FFFFFF</SolidColorBrush>
+                    <SolidColorBrush x:Key="DataGridContentBackground">#40FFFFFF</SolidColorBrush>
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="Dark">
+                    <SolidColorBrush x:Key="ExpanderHeaderBackgroundPointerOver">#20000000</SolidColorBrush>
+                    <SolidColorBrush x:Key="DataGridContentBackground">#20000000</SolidColorBrush>
+                </ResourceDictionary>
+            </ResourceDictionary.ThemeDictionaries>
+            <!-- Component Override -->
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="Overrides/Expander.axaml"/>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
 </Application>

Data/Song/Song.cs

@@ -9,15 +9,14 @@ public class Song
     /// <summary>
     /// Format: `Snn-nnn` where `n` is a digit.
     /// </summary>
-    public required string id;
+    public required string Id { get; set;}
-    public required string name;
+    public required string Name { get; set; }
-    public required string rubi;
+    public required string Artist { get; set; }
-    public required string artist;
+    public required string Source { get; set; }
-    public required string copyright;
+    public string rubi;
-    public required string tempo;
+    public string copyright;
-    public required string version;
+    public string tempo;
-    public required int genreId;
+    public int genreId;
-    public required string game;
+    public string jacket;
-    public required string jacket;
     public Chart?[] charts = { null, null, null, null };
 }

MainWindow.axaml

@@ -8,23 +8,24 @@
         x:Class="MercuryConverter.MainWindow"
         Title="MercuryConverter"
         Width="1024" Height="800"
+        MinWidth="800" MinHeight="600"
         ExtendClientAreaToDecorationsHint="True"
 >
-    <StackPanel>
+    <!-- Components -->
-        <DockPanel LastChildFill="False">
+    <DockPanel>
-            <Menu Name="MenuBar" DockPanel.Dock="Left">
+        <Menu Name="MenuBar" DockPanel.Dock="Top">
-                <MenuItem Header="File">
+            <MenuItem Header="File">
-                    <MenuItem Header="Open Data Folder..." />
+                <MenuItem Header="Open Data Folder..." />
-                </MenuItem>
+            </MenuItem>
-            </Menu>
+        </Menu>
-        </DockPanel>
+
         <TabControl>
             <TabItem Header="selection">
                 <UserControl Name="SelectionControl"/>
             </TabItem>
             <TabItem Header="export">
-                
             </TabItem>
         </TabControl>
-    </StackPanel>
+
+    </DockPanel>
 </Window>

MainWindow.axaml.cs

@@ -7,18 +7,6 @@ using MercuryConverter.Views;
 
 public partial class MainWindow : Window
 {
-    public string RunType
-    {
-        get
-        {
-            if (Design.IsDesignMode)
-            {
-                return "In Design!";
-            }
-            return "In Runtime.";
-        }
-    }
-
     public MainWindow()
     {
         InitializeComponent();
@@ -28,7 +16,6 @@ public partial class MainWindow : Window
         {
             RequestedThemeVariant = ThemeVariant.Dark;
         }
-        // LblPlatform.Content = RunType;
 
         // Setup tab views
         SelectionControl.Content = new Selection();

MercuryConverter.csproj

@@ -5,7 +5,7 @@
     <Nullable>enable</Nullable>
     <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
     <ApplicationManifest>app.manifest</ApplicationManifest>
-    <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+    <AvaloniaUseCompiledBindingsByDefault>false</AvaloniaUseCompiledBindingsByDefault>
   </PropertyGroup>
 
   <ItemGroup>
@@ -20,4 +20,8 @@
       <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
     </PackageReference>
   </ItemGroup>
+
+  <ItemGroup>
+    <AvaloniaResource Include="Assets\**"/>
+  </ItemGroup>
 </Project>

Overrides/Expander.axaml

@@ -0,0 +1,336 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Orientation="Vertical" Spacing="20" Width="350" Height="600">
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Up" Header="Expand Up">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Down" Header="Expand Down">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Left" Header="Expand Left">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Right" Header="Expand Right">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Up">
+          <Expander.Header>
+            <Grid ColumnDefinitions="*, Auto">
+              <TextBlock Grid.Column="0" Text="Control" />
+              <TextBlock Grid.Column="1" Text="Header" />
+            </Grid>
+          </Expander.Header>
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander ExpandDirection="Up" Header="Rounded" CornerRadius="25">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <!-- Shared header/content -->
+  <x:Double x:Key="ExpanderMinHeight">48</x:Double>
+
+  <!-- Header -->
+  <HorizontalAlignment x:Key="ExpanderHeaderHorizontalContentAlignment">Stretch</HorizontalAlignment>
+  <VerticalAlignment x:Key="ExpanderHeaderVerticalContentAlignment">Center</VerticalAlignment>
+  <Thickness x:Key="ExpanderHeaderPadding">16,0,0,0</Thickness>
+  <Thickness x:Key="ExpanderHeaderBorderThickness">0</Thickness>
+  <Thickness x:Key="ExpanderChevronBorderThickness">0</Thickness>
+  <Thickness x:Key="ExpanderChevronMargin">20,0,8,0</Thickness>
+  <x:Double x:Key="ExpanderChevronButtonSize">32</x:Double>
+
+  <!-- Content -->
+  <Thickness x:Key="ExpanderContentPadding">8</Thickness>
+  <Thickness x:Key="ExpanderContentLeftBorderThickness">0,0,0,0</Thickness>
+  <Thickness x:Key="ExpanderContentUpBorderThickness">0,0,0,0</Thickness>
+  <Thickness x:Key="ExpanderContentRightBorderThickness">0,0,0,0</Thickness>
+  <Thickness x:Key="ExpanderContentDownBorderThickness">0,0,0,0</Thickness>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonTheme" TargetType="ToggleButton">
+    <Setter Property="Background" Value="{DynamicResource ExpanderHeaderBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ExpanderHeaderBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderHeaderBorderThickness}" />
+    <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderForeground}" />
+    <Setter Property="Padding" Value="{DynamicResource ExpanderHeaderPadding}" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="HorizontalContentAlignment" Value="{DynamicResource ExpanderHeaderHorizontalContentAlignment}" />
+    <Setter Property="VerticalContentAlignment" Value="{DynamicResource ExpanderHeaderVerticalContentAlignment}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border x:Name="ToggleButtonBackground"
+                CornerRadius="{TemplateBinding CornerRadius}"
+                Background="#00ffffff"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}">
+          <Grid x:Name="ToggleButtonGrid"
+                ColumnDefinitions="*,Auto">
+            <ContentPresenter x:Name="PART_ContentPresenter"
+                              Content="{TemplateBinding Content}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                              Foreground="{TemplateBinding Foreground}"
+                              Margin="{TemplateBinding Padding}"/>
+            <Border x:Name="ExpandCollapseChevronBorder"
+                    Grid.Column="1"
+                    Width="{DynamicResource ExpanderChevronButtonSize}"
+                    Height="{DynamicResource ExpanderChevronButtonSize}"
+                    Margin="{DynamicResource ExpanderChevronMargin}"
+                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                    BorderBrush="{DynamicResource ExpanderChevronBorderBrush}"
+                    BorderThickness="{DynamicResource ExpanderChevronBorderThickness}"
+                    Background="">
+              <Path x:Name="ExpandCollapseChevron"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    RenderTransformOrigin="50%,50%"
+                    Stretch="None"
+                    Stroke="{DynamicResource ExpanderChevronForeground}"
+                    StrokeThickness="1">
+                <Path.RenderTransform>
+                  <RotateTransform />
+                </Path.RenderTransform>
+              </Path>
+            </Border>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^[Tag=expanded] /template/ Path#ExpandCollapseChevron">
+      <Style.Animations>
+        <Animation FillMode="Both" Duration="0:0:0.0625">
+          <KeyFrame Cue="100%">
+            <Setter Property="RotateTransform.Angle" Value="180" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+
+    <Style Selector="^[Tag=collapsed] /template/ Path#ExpandCollapseChevron">
+      <Style.Animations>
+        <Animation FillMode="Both" Duration="0:0:0.0625">
+          <KeyFrame Cue="0%">
+            <Setter Property="RotateTransform.Angle" Value="180" />
+          </KeyFrame>
+          <KeyFrame Cue="100%">
+            <Setter Property="RotateTransform.Angle" Value="0" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+
+    <!-- PointerOver -->
+    <Style Selector="^:pointerover /template/ Border#ToggleButtonBackground">
+      <Setter Property="Background" Value="{DynamicResource ExpanderHeaderBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderHeaderBorderBrushPointerOver}" />
+    </Style>
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderForegroundPointerOver}" />
+    </Style>
+    <Style Selector="^:pointerover /template/ Border#ExpandCollapseChevronBorder">
+      <Setter Property="Background" Value="" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderChevronBorderBrushPointerOver}" />
+    </Style>
+    <Style Selector="^:pointerover /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Stroke" Value="{DynamicResource ExpanderChevronForegroundPointerOver}" />
+    </Style>
+
+    <!-- Pressed -->
+    <Style Selector="^:pressed /template/ Border#ToggleButtonBackground">
+      <Setter Property="Background" Value="{DynamicResource ExpanderHeaderBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderHeaderBorderBrushPressed}" />
+    </Style>
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderForegroundPressed}" />
+    </Style>
+    <Style Selector="^:pressed /template/ Border#ExpandCollapseChevronBorder">
+      <Setter Property="Background" Value="" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderChevronBorderBrushPressed}" />
+    </Style>
+    <Style Selector="^:pressed /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Stroke" Value="{DynamicResource ExpanderChevronForegroundPressed}" />
+    </Style>
+
+    <!-- Disabled -->
+    <Style Selector="^:disabled /template/ Border#ToggleButtonBackground">
+      <Setter Property="Background" Value="{DynamicResource ExpanderHeaderBackgroundDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderHeaderBorderBrushDisabled}" />
+    </Style>
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderForegroundDisabled}" />
+    </Style>
+    <Style Selector="^:disabled /template/ Border#ExpandCollapseChevronBorder">
+      <Setter Property="Background" Value="" />
+      <Setter Property="BorderBrush" Value="" />
+    </Style>
+    <Style Selector="^:disabled /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Stroke" Value="{DynamicResource ExpanderChevronForegroundDisabled}" />
+    </Style>
+
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonUpTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 0 7 L 7 0 L 14 7" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonDownTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 0 0 L 7 7 L 14 0" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonLeftTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 7 0 L 0 7 L 7 14" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonRightTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 0 0 L 7 7 L 0 14" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type Expander}" TargetType="Expander">
+    <Setter Property="IsTabStop" Value="False"/>
+    <Setter Property="MinWidth" Value="{DynamicResource FlyoutThemeMinWidth}" />
+    <Setter Property="MinHeight" Value="{DynamicResource ExpanderMinHeight}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ExpanderContentBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentDownBorderThickness}" />
+    <Setter Property="Padding" Value="{DynamicResource ExpanderContentPadding}" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel MinWidth="{TemplateBinding MinWidth}"
+                   MaxWidth="{TemplateBinding MaxWidth}">
+          <ToggleButton x:Name="ExpanderHeader"
+                        MinHeight="{TemplateBinding MinHeight}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        IsEnabled="{TemplateBinding IsEnabled}"
+                        Content="{TemplateBinding Header}"
+                        ContentTemplate="{TemplateBinding HeaderTemplate}"
+                        IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+          <Border x:Name="ExpanderContent"
+                  IsVisible="{TemplateBinding IsExpanded, Mode=TwoWay}"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  MinHeight="{TemplateBinding MinHeight}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Padding="{TemplateBinding Padding}">
+            <ContentPresenter x:Name="PART_ContentPresenter"
+                              Content="{TemplateBinding Content}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Foreground="{TemplateBinding Foreground}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+          </Border>
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^ /template/ ToggleButton#ExpanderHeader:pressed">
+      <Setter Property="RenderTransform" Value="{x:Null}" />
+    </Style>
+
+    <Style Selector="^:left /template/ ToggleButton#ExpanderHeader, ^:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="VerticalAlignment" Value="Stretch" />
+    </Style>
+
+    <Style Selector="^:expanded /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Tag" Value="expanded" />
+    </Style>
+
+    <Style Selector="^:not(:expanded) /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius}" />
+      <Setter Property="Tag" Value="collapsed" />
+    </Style>
+    <Style Selector="^:expanded:up /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:up /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:down /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:down /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:left /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:left /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:right /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+    </Style>
+
+    <Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Right" />
+    </Style>
+    <Style Selector="^:up /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Bottom" />
+    </Style>
+    <Style Selector="^:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Left" />
+    </Style>
+    <Style Selector="^:down /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Top" />
+    </Style>
+
+    <Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{DynamicResource FluentExpanderToggleButtonLeftTheme}" />
+    </Style>
+    <Style Selector="^:up /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{DynamicResource FluentExpanderToggleButtonUpTheme}" />
+    </Style>
+    <Style Selector="^:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{DynamicResource FluentExpanderToggleButtonRightTheme}" />
+    </Style>
+    <Style Selector="^:down /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{DynamicResource FluentExpanderToggleButtonDownTheme}" />
+    </Style>
+
+    <Style Selector="^:left /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentLeftBorderThickness}" />
+    </Style>
+    <Style Selector="^:up /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentUpBorderThickness}" />
+    </Style>
+    <Style Selector="^:right /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentRightBorderThickness}" />
+    </Style>
+    <Style Selector="^:down /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentDownBorderThickness}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

Views/Selection/Selection.axaml

@@ -7,25 +7,25 @@
 >
     <DockPanel>
         <ContentControl Name="SelectionInfo" DockPanel.Dock="Right" Width="250">
-            <Label Content="SelectionInfo"/>
+            <StackPanel Margin="12">
+                <Image Source="/Assets/jacket-placeholder.png"/>
+            </StackPanel>
         </ContentControl>
-        <StackPanel>
+        <DockPanel Margin="0 0 8 0">
-            <Expander HorizontalAlignment="Stretch" BorderThickness="0">
+            <DockPanel Margin="0 0 0 8" DockPanel.Dock="Top">
-                <Expander.Header>
+                <ComboBox DockPanel.Dock="Right" Width="160" PlaceholderText="Source filter" Name="SourceFilter"/>
-                    Search/Filter
+                <TextBox Margin="0 0 8 0" Watermark="Search for title, artist, charter..."/>
-                </Expander.Header>
+            </DockPanel>
-                <StackPanel Name="Filter">
+            <UserControl Background="{DynamicResource DataGridContentBackground}">
-                    <TextBox />
+                <DataGrid Name="ListingTable" IsReadOnly="True" SelectionMode="Extended" ItemsSource="{Binding SongCollection}">
-                </StackPanel>
+                    <DataGrid.Columns>
-            </Expander>
+                        <DataGridTextColumn Header="ID" Width="90" Binding="{Binding Id}"/>
-            <DataGrid Name="ListingTable">
+                        <DataGridTextColumn Header="Title" Width="*" Binding="{Binding Name}"/>
-                <DataGrid.Columns>
+                        <DataGridTextColumn Header="Artist" Width="*" Binding="{Binding Artist}"/>
-                    <DataGridTextColumn Header="ID"/>
+                        <DataGridTextColumn Header="Source" Width="150" Binding="{Binding Source}"/>
-                    <DataGridTextColumn Header="Title"/>
+                    </DataGrid.Columns>
-                    <DataGridTextColumn Header="Artist"/>
+                </DataGrid>
-                    <DataGridTextColumn Header="Source"/>
+            </UserControl>
-                </DataGrid.Columns>
+        </DockPanel>
-            </DataGrid>
-        </StackPanel>
     </DockPanel>
 </Panel>

Views/Selection/Selection.axaml.cs

@@ -1,15 +1,38 @@
 using System;
+using System.Collections.ObjectModel;
 using System.Collections.Specialized;
 using Avalonia.Controls;
+using MercuryConverter.Data;
 
 namespace MercuryConverter.Views;
 
 public partial class Selection : Panel
 {
+    public static ObservableCollection<Song> SongCollection { get; } = new();
     public Selection()
     {
         InitializeComponent();
-        Database.Songs.CollectionChanged += OnSongsChg;
+        ListingTable.SelectionMode = DataGridSelectionMode.Extended;
+        SourceFilter.ItemsSource = new string[]{
+            "",
+            Consts.NUM_SOURCE[1],
+            Consts.NUM_SOURCE[2],
+            Consts.NUM_SOURCE[3],
+            Consts.NUM_SOURCE[4],
+            Consts.NUM_SOURCE[5],
+        };
+        
+        SongCollection.CollectionChanged += OnSongsChg;
+        DataContext = this;
+
+        // test data
+        SongCollection.Add(
+            new Song { Id = "S00-000", Name = "A Name", Artist = "An Artist", Source = Consts.NUM_SOURCE[2] }
+        );
+        SongCollection.Add(
+            new Song { Id = "S00-000", Name = "A Name", Artist = "An Artist", Source = Consts.NUM_SOURCE[3] }
+        );
+
     }
 
     private void OnSongsChg(object? sender, NotifyCollectionChangedEventArgs e)
@@ -19,17 +42,17 @@ public partial class Selection : Panel
         if (e.NewItems != null)
         {
             Console.WriteLine("Added...");
-            foreach (Data.Song added in e.NewItems)
+            foreach (Song added in e.NewItems)
             {
-                Console.WriteLine($"[{added.id}] {added.artist} - {added.name}");
+                Console.WriteLine($"[{added.Id}] {added.Artist} - {added.Name}");
             }
         }
         if (e.OldItems != null)
         {
             Console.WriteLine("Removed...");
-            foreach (Data.Song rem in e.OldItems)
+            foreach (Song rem in e.OldItems)
             {
-                Console.WriteLine($"[{rem.id}] {rem.artist} - {rem.name}");
+                Console.WriteLine($"[{rem.Id}] {rem.Artist} - {rem.Name}");
             }
         } 
     }