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

<UserControl
    x:Class="Semi.Avalonia.Demo.Pages.SplitViewDemo"
    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:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    d:DesignHeight="1000"
    d:DesignWidth="800"
    x:DataType="vm:SplitViewDemoViewModel"
    mc:Ignorable="d">
    <Design.DataContext>
        <vm:SplitViewDemoViewModel />
    </Design.DataContext>
    <Border>
        <Grid ColumnDefinitions="*,400">
            <Border
                Grid.Column="1"
                Margin="10,0,0,0"
                VerticalAlignment="Top">
                <Grid ColumnDefinitions="Auto, *" RowDefinitions="*, *, *, *, *, *">
                    <Label
                        Grid.Row="0"
                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="IsPaneOpen" />
                    <ToggleSwitch
                        Name="PaneOpenButton"
                        Grid.Row="0"
                        Grid.Column="1" />

                    <Label
                        Grid.Row="1"
                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="UseLightDismissOverlayMode" />
                    <ToggleSwitch
                        Name="UseLightDismissOverlayModeButton"
                        Grid.Row="1"
                        Grid.Column="1" />

                    <Label
                        Grid.Row="2"
                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="Placement" />
                    <ComboBox 
                        Grid.Row="2" 
                        Grid.Column="1" 
                        Name="PanelPlacementSelector"
                        HorizontalAlignment="Stretch"
                        ItemsSource="{x:Static vm:SplitViewDemoViewModel.Placements}"
                        SelectedItem="{x:Static SplitViewPanePlacement.Left}"
                        />
                    <Label
                        Grid.Row="3"
                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="DisplayMode" />
                    <ComboBox
                        Name="DisplayModeSelector"
                        Grid.Row="3"
                        Grid.Column="1"
                        HorizontalAlignment="Stretch"
                        ItemsSource="{x:Static vm:SplitViewDemoViewModel.DisplayModes}"
                        SelectedItem="{x:Static SplitViewDisplayMode.CompactInline}" />

                    <Label
                        Grid.Row="4"
                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="{Binding #CompactPaneLengthSlider.Value, StringFormat='{}CompactPaneLength: {0}'}" />
                    <Slider
                        Name="CompactPaneLengthSlider"
                        Grid.Row="4"
                        Grid.Column="1"
                        IsSnapToTickEnabled="True"
                        Maximum="128"
                        Minimum="0"
                        TickFrequency="1"
                        Value="48" />

                    <Label
                        Grid.Row="5"
                        Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="{Binding #OpenPaneLengthSlider.Value, StringFormat='{}OpenPaneLength: {0}'}" />
                    <Slider
                        Name="OpenPaneLengthSlider"
                        Grid.Row="5"
                        Grid.Column="1"
                        IsSnapToTickEnabled="True"
                        Maximum="500"
                        Minimum="128"
                        TickFrequency="1"
                        Value="256" />
                </Grid>
            </Border>
            <SplitView
                Grid.Column="0"
                Name="SplitView"
                CompactPaneLength="{Binding #CompactPaneLengthSlider.Value}"
                DisplayMode="{Binding #DisplayModeSelector.SelectedItem}"
                IsPaneOpen="{Binding #PaneOpenButton.IsChecked, Mode=TwoWay}"
                OpenPaneLength="{Binding #OpenPaneLengthSlider.Value}"
                PanePlacement="{Binding #PanelPlacementSelector.SelectedItem}"
                UseLightDismissOverlayMode="{Binding #UseLightDismissOverlayModeButton.IsChecked}">
                <SplitView.Background>
                    <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                        <GradientStop Offset="0" Color="#6b4c1b" />
                        <GradientStop Offset="1" Color="#291e10" />
                    </LinearGradientBrush>
                </SplitView.Background>
                <SplitView.Pane>
                    <Grid RowDefinitions="Auto,*,Auto">
                        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="8 12">
                            <ToggleSwitch
                                Content="{StaticResource SemiIconSidebar}"
                                IsChecked="{Binding #SplitView.IsPaneOpen}"
                                Theme="{DynamicResource IconBorderlessToggleSwitch}" />
                            <TextBlock
                                Name="PaneHeader"
                                VerticalAlignment="Center"
                                Margin="8 0"
                                FontWeight="Bold"
                                Text="Playlist" />
                        </StackPanel>
                        
                        <ListBox Grid.Row="1" ItemsSource="{Binding Songs}" />
                        
                    </Grid>
                </SplitView.Pane>

                <Panel>
                    <Panel.Styles>
                        <Style Selector="Image#AlbumCover">
                            <Style.Animations>
                                <Animation IterationCount="Infinite" Duration="0:0:40">
                                    <KeyFrame Cue="0%">
                                        <Setter Property="RotateTransform.Angle" Value="0" />
                                    </KeyFrame>
                                    <KeyFrame Cue="100%">
                                        <Setter Property="RotateTransform.Angle" Value="360" />
                                    </KeyFrame>
                                </Animation>
                            </Style.Animations>
                        </Style>
                    </Panel.Styles>
                    <Image
                        Name="AlbumCover"
                        Width="200"
                        Height="200"
                        Source="/Assets/WORLD.png" />
                    <Arc
                        Width="290"
                        Height="290"
                        StartAngle="0"
                        StrokeJoin="Round"
                        StrokeLineCap="Round"
                        StrokeThickness="45"
                        SweepAngle="360">
                        <Arc.Stroke>
                            <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
                                <GradientStop Offset="0" Color="#010101" />
                                <GradientStop Offset="0.5" Color="#363636" />
                                <GradientStop Offset="1" Color="#010101" />
                            </LinearGradientBrush>
                        </Arc.Stroke>
                    </Arc>
                    <Arc
                        Width="294"
                        Height="294"
                        StartAngle="0"
                        Stroke="Black"
                        StrokeJoin="Round"
                        StrokeLineCap="Round"
                        StrokeThickness="4"
                        SweepAngle="360" />
                    <Arc
                        Width="310"
                        Height="310"
                        Opacity="0.1"
                        StartAngle="0"
                        Stroke="#C6CACD"
                        StrokeJoin="Round"
                        StrokeLineCap="Round"
                        StrokeThickness="10"
                        SweepAngle="360" />
                </Panel>
            </SplitView>
        </Grid>
    </Border>
</UserControl>