<ui:Page
    x:Class="ModernWpf.SampleApp.ControlPages.SplitViewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:sc="clr-namespace:SamplesCommon;assembly=SamplesCommon"
    xmlns:local="clr-namespace:ModernWpf.SampleApp.ControlPages"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Page.Resources>
        <DataTemplate x:Key="NavLinkItemTemplate">
            <StackPanel
                Orientation="Horizontal"
                Margin="2,0,0,0"
                AutomationProperties.Name="{Binding Label, Mode=OneTime}">
                <ui:SymbolIcon Symbol="{Binding Symbol, Mode=OneTime}" />
                <TextBlock
                    Text="{Binding Label, Mode=OneTime}"
                    Margin="24,0,0,0"
                    VerticalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

    <ScrollViewer>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="SystemControlBackgroundChromeMediumLowBrush" />
                <VisualState x:Name="Red">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="splitView" Storyboard.TargetProperty="PaneBackground">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <SolidColorBrush Color="Red" />
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Blue">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="splitView" Storyboard.TargetProperty="PaneBackground">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <SolidColorBrush Color="Blue" />
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Green">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="splitView" Storyboard.TargetProperty="PaneBackground">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <SolidColorBrush Color="Green" />
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ui:SimpleStackPanel Style="{StaticResource ControlPageContentPanelStyle}">
            <sc:ControlExample HeaderText="A basic SplitView.">

                <Grid
                    Height="300"
                    VerticalAlignment="Top">
                    <ui:SplitView
                        x:Name="splitView"
                        PaneBackground="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}"
                        IsPaneOpen="{Binding ElementName=togglePaneButton, Path=IsChecked, Mode=TwoWay}"
                        OpenPaneLength="{Binding ElementName=openPaneLengthSlider, Path=Value}"
                        CompactPaneLength="{Binding ElementName=compactPaneLengthSlider, Path=Value}"
                        DisplayMode="CompactOverlay"
                        IsTabStop="False">
                        <ui:SplitView.Pane>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <TextBlock
                                    Text="PANE CONTENT"
                                    x:Name="PaneHeader"
                                    Margin="60,12,0,0"
                                    Style="{StaticResource BaseTextBlockStyle}" />
                                <ui:ListView
                                    x:Name="NavLinksList"
                                    Margin="0,12,0,0"
                                    IsSelectionEnabled="False"
                                    Grid.Row="1"
                                    VerticalAlignment="Stretch"
                                    ItemClick="NavLinksList_ItemClick"
                                    IsItemClickEnabled="True"
                                    ItemsSource="{Binding NavLinks}"
                                    ItemTemplate="{StaticResource NavLinkItemTemplate}" />
                                <StackPanel
                                    Orientation="Horizontal"
                                    Grid.Row="2"
                                    Margin="14,24,0,24">
                                    <ui:SymbolIcon Symbol="Setting" />
                                    <TextBlock
                                        Text="Settings"
                                        Margin="24,0,0,0"
                                        VerticalAlignment="Center" />
                                </StackPanel>
                            </Grid>
                        </ui:SplitView.Pane>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <TextBlock
                                Text="SPLITVIEW CONTENT"
                                Margin="12,12,0,0"
                                Style="{StaticResource BaseTextBlockStyle}" />
                            <TextBlock
                                x:Name="content"
                                Grid.Row="1"
                                Margin="12,12,0,0"
                                Style="{StaticResource BodyTextBlockStyle}" />
                        </Grid>
                    </ui:SplitView>
                </Grid>

                <sc:ControlExample.Options>
                    <StackPanel>
                        <ToggleButton
                            x:Name="togglePaneButton"
                            IsChecked="True"
                            Content="IsPaneOpen" />

                        <ui:ToggleSwitch
                            OffContent="Left"
                            OnContent="Right"
                            Header="Placement"
                            Toggled="PanePlacement_Toggled"
                            Margin="0,12,0,0"
                            MinWidth="120" />

                        <ComboBox
                            x:Name="displayModeCombobox"
                            SelectionChanged="displayModeCombobox_SelectionChanged"
                            Width="196"
                            SelectedIndex="0"
                            Margin="0,4,0,0"
                            VerticalAlignment="Center"
                            ui:ControlHelper.Header="DisplayMode">
                            <ComboBoxItem>Inline</ComboBoxItem>
                            <ComboBoxItem>CompactInline</ComboBoxItem>
                            <ComboBoxItem>Overlay</ComboBoxItem>
                            <ComboBoxItem>CompactOverlay</ComboBoxItem>
                        </ComboBox>

                        <ComboBox
                            x:Name="paneBackgroundCombobox"
                            Width="196"
                            SelectedIndex="0"
                            VerticalAlignment="Center"
                            ui:ControlHelper.Header="PaneBackground"
                            Margin="0,12,0,0"
                            SelectionChanged="paneBackgroundCombobox_SelectionChanged">
                            <ComboBoxItem>SystemControlBackgroundChromeMediumLowBrush</ComboBoxItem>
                            <ComboBoxItem>Red</ComboBoxItem>
                            <ComboBoxItem>Blue</ComboBoxItem>
                            <ComboBoxItem>Green</ComboBoxItem>
                        </ComboBox>

                        <Slider
                            x:Name="openPaneLengthSlider"
                            ui:ControlHelper.Header="OpenPaneLength"
                            Value="256"
                            Minimum="128"
                            Maximum="500"
                            Width="196"
                            AutoToolTipPlacement="TopLeft"
                            IsSnapToTickEnabled="True"
                            TickFrequency="8"
                            Margin="0,12,0,0" />

                        <Slider
                            x:Name="compactPaneLengthSlider"
                            ui:ControlHelper.Header="CompactPaneLength"
                            Value="48"
                            Minimum="24"
                            Maximum="128"
                            Width="196"
                            AutoToolTipPlacement="TopLeft"
                            IsSnapToTickEnabled="True"
                            TickFrequency="8" />
                    </StackPanel>
                </sc:ControlExample.Options>
            </sc:ControlExample>
        </ui:SimpleStackPanel>
    </ScrollViewer>
</ui:Page>
