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:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
    d:DesignHeight="1000"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Design.DataContext>
        <pages:SplitViewDemoViewModel />
    </Design.DataContext>
    <UserControl.Resources>
        <ResourceDictionary>
            <StreamGeometry x:Key="NavigationMenuExpandIconGlyph">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</StreamGeometry>
        </ResourceDictionary>
    </UserControl.Resources>
    <Border>
        <Grid ColumnDefinitions="*,400">
            <Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
                <Grid RowDefinitions="*, *, *, *, *, *" ColumnDefinitions="Auto, *">
                    <Label
                        Grid.Row="0" Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="IsPaneOpen" />
                    <ToggleSwitch
                        Grid.Row="0" Grid.Column="1"
                        Name="PaneOpenButton"
                        IsChecked="{Binding #SplitView.IsPaneOpen}" />

                    <Label
                        Grid.Row="1" Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="UseLightDismissOverlayMode" />
                    <ToggleSwitch
                        Grid.Row="1" Grid.Column="1"
                        Name="UseLightDismissOverlayModeButton"
                        IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />

                    <Label
                        Grid.Row="2" Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="Placement" />
                    <ToggleSwitch
                        Grid.Row="2" Grid.Column="1"
                        OffContent="Left"
                        OnContent="Right"
                        IsChecked="{Binding #SplitView.PanePlacement}" />

                    <Label
                        Grid.Row="3" Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="DisplayMode" />
                    <ComboBox
                        Grid.Row="3" Grid.Column="1"
                        Name="DisplayModeSelector"
                        HorizontalAlignment="Stretch"
                        ItemsSource="{Binding DisplayModes}"
                        SelectedIndex="{Binding #SplitView.DisplayMode}" />

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

                    <Label
                        Grid.Row="5" Grid.Column="0"
                        VerticalAlignment="Center"
                        Content="{Binding #OpenPaneLengthSlider.Value,StringFormat='{}OpenPaneLength: {0}'}" />
                    <Slider
                        Grid.Row="5" Grid.Column="1"
                        Name="OpenPaneLengthSlider"
                        Maximum="500"
                        Minimum="128"
                        TickFrequency="1"
                        IsSnapToTickEnabled="True"
                        Value="{Binding #SplitView.OpenPaneLength}" />
                </Grid>
            </Border>
            <Border
                Grid.Column="0"
                BorderBrush="{DynamicResource SemiGrey1}"
                BorderThickness="1">
                <SplitView
                    Name="SplitView"
                    DisplayMode="CompactOverlay"
                    CompactPaneLength="48"
                    OpenPaneLength="256">
                    <SplitView.Background>
                        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
                            <GradientStop Color="#6b4c1b" Offset="0" />
                            <GradientStop Color="#291e10" Offset="1" />
                        </LinearGradientBrush>
                    </SplitView.Background>
                    <SplitView.Pane>
                        <Grid RowDefinitions="Auto,*,Auto">
                            <TextBlock
                                Grid.Row="0"
                                Name="PaneHeader"
                                Margin="8,12"
                                FontWeight="Bold"
                                Text="Playlist" />
                            <ListBox
                                Grid.Row="1"
                                ItemsSource="{Binding Songs}" />
                            <ToggleSwitch
                                Grid.Row="2"
                                Theme="{DynamicResource ButtonToggleSwitch}"
                                IsChecked="{Binding #SplitView.IsPaneOpen}">
                                <ToggleSwitch.OnContent>
                                    <PathIcon
                                        Width="16"
                                        Height="16"
                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
                                </ToggleSwitch.OnContent>
                                <ToggleSwitch.OffContent>
                                    <PathIcon
                                        Width="16"
                                        Height="16"
                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
                                </ToggleSwitch.OffContent>
                            </ToggleSwitch>
                        </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
                            Source="/Assets/WORLD.png"
                            Name="AlbumCover"
                            Width="200"
                            Height="200" />
                        <Arc
                            Width="290"
                            Height="290"
                            StartAngle="0"
                            SweepAngle="360"
                            StrokeJoin="Round"
                            StrokeLineCap="Round"
                            StrokeThickness="45">
                            <Arc.Stroke>
                                <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
                                    <GradientStop Color="#010101" Offset="0" />
                                    <GradientStop Color="#363636" Offset="0.5" />
                                    <GradientStop Color="#010101" Offset="1" />
                                </LinearGradientBrush>
                            </Arc.Stroke>
                        </Arc>
                        <Arc
                            Width="294"
                            Height="294"
                            StartAngle="0"
                            SweepAngle="360"
                            StrokeJoin="Round"
                            StrokeLineCap="Round"
                            StrokeThickness="4"
                            Stroke="Black" />
                        <Arc
                            Width="310"
                            Height="310"
                            StartAngle="0"
                            SweepAngle="360"
                            StrokeJoin="Round"
                            StrokeLineCap="Round"
                            StrokeThickness="10"
                            Stroke="#C6CACD"
                            Opacity="0.1" />
                    </Panel>

                </SplitView>
            </Border>

        </Grid>
    </Border>
</UserControl>