MercuryConverter/UI/Views/Selection/Selection.axaml

<Panel 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"
        xmlns:local="clr-namespace:MercuryConverter.UI.Views"
        x:Class="MercuryConverter.UI.Views.Selection"

        xmlns:data="clr-namespace:MercuryConverter.Data"
>
    <DockPanel>
        <!-- Sidebar -->
        <TabControl Margin="8 8 0 0" Width="250" DockPanel.Dock="Right">
            <TabControl.Resources>
                <ResourceDictionary>
                    <Thickness x:Key="TabItemHeaderMargin">12 0 12 15</Thickness>
                    <Thickness x:Key="TabItemMargin">0 0 0 0</Thickness>
                </ResourceDictionary>
            </TabControl.Resources>

            <TabItem Header="Info" FontSize="16">
                <StackPanel Name="SelectionInfo">
                    <Image Name="InfoImageJacket" Margin="24 0 24 0" Source="/Assets/imgs/jacket-placeholder.png"/>
                    <TextBlock Name="InfoNameText" Text="Name" FontWeight="Bold" HorizontalAlignment="Center" Margin="0 10 0 0"/>
                    <TextBlock Name="InfoArtistText" Text="Artist" HorizontalAlignment="Center"/>
                    <TextBlock Name="InfoSourceText" Text="Source" HorizontalAlignment="Center"/>
                </StackPanel>
            </TabItem>
            <TabItem Header="Filters" FontSize="16">
                <StackPanel>
                    <!-- Sources Filter -->
                    <TextBlock Text="Sources" FontWeight="Bold" Margin="0 0 0 4"/>
                    <StackPanel Margin="10 0 0 0" Name="FilterSourceContainer"/>
                    <!-- Categories Filter -->
                    <TextBlock Text="Categories" FontWeight="Bold" Margin="0 20 0 4"/>
                    <StackPanel Margin="10 0 0 0" Name="FilterCategoryContainer"/>
                </StackPanel>
            </TabItem>
        </TabControl>
        <!-- Song Listing Table -->
        <DockPanel>
            <DockPanel Margin="0 4 0 8" DockPanel.Dock="Top">
                <TextBox Watermark="Search for title, artist, designer..."/>
            </DockPanel>
            <UserControl Background="{DynamicResource DataGridContentBackground}">
                <DataGrid Name="ListingTable" IsReadOnly="True" SelectionMode="Extended" ItemsSource="{x:Static data:Database.Songs}">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="ID" Width="90" Binding="{Binding Id}"/>
                        <DataGridTextColumn Header="Title" Width="*" Binding="{Binding Name}"/>
                        <DataGridTextColumn Header="Artist" Width="*" Binding="{Binding Artist}"/>
                        <DataGridTextColumn Header="Source" Width="150" Binding="{Binding SourceName}" SortMemberPath="Source"/>
                    </DataGrid.Columns>
                </DataGrid>
            </UserControl>
        </DockPanel>
    </DockPanel>
</Panel>