Semi.Avalonia/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml

<UserControl
    x:Class="Semi.Avalonia.Demo.Pages.PaletteDemo"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Design.DataContext>
        <viewModels:PaletteDemoViewModel />
    </Design.DataContext>
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <SplitView
        Name="splitView"
        CompactPaneLength="50"
        DisplayMode="CompactInline"
        IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
        OpenPaneLength="300"
        PanePlacement="Right">
        <SplitView.Pane>
            <StackPanel>
                <ToggleButton
                    Name="toggle"
                    HorizontalAlignment="Right"
                    Theme="{DynamicResource BorderlessToggleButton}">
                    <PathIcon
                        Width="16"
                        Height="16"
                        Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
                </ToggleButton>
                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
                    <StackPanel DataContext="{Binding SelectedColor}" Spacing="8">
                        <Border
                            Height="30"
                            HorizontalAlignment="Stretch"
                            Background="{Binding Color}"
                            CornerRadius="3" />
                        <Label Classes="Code" Content="{Binding ResourceKey}" />
                        <TextBlock Text="{Binding Color}" />
                    </StackPanel>
                </Border>
            </StackPanel>

        </SplitView.Pane>
        <SplitView.Content>
            <ScrollViewer>
                <StackPanel>
                    <TabControl>
                        <TabItem Header="Light">
                            <ItemsControl Margin="16" Items="{Binding LightSeries}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate x:DataType="viewModels:ColorSeries">
                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate x:DataType="viewModels:ColorItemViewModel">
                                                    <controls:ColorItemControl
                                                        Background="{Binding Color}"
                                                        ColorName="{Binding Name}"
                                                        Foreground="{Binding TextColor}"
                                                        Hex="{Binding Hex}" />
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </TabItem>
                        <TabItem Header="Dark">
                            <ItemsControl Margin="16" Items="{Binding DarkSeries}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate x:DataType="viewModels:ColorSeries">
                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate x:DataType="viewModels:ColorItemViewModel">
                                                    <controls:ColorItemControl
                                                        Background="{Binding Color}"
                                                        ColorName="{Binding Name}"
                                                        Foreground="{Binding TextColor}"
                                                        Hex="{Binding Hex}" />
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </TabItem>
                    </TabControl>
                </StackPanel>
            </ScrollViewer>
        </SplitView.Content>
    </SplitView>
</UserControl>