BetterLyrics/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/LyricsWindowSettingsControl.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="BetterLyrics.WinUI3.Controls.LyricsWindowSettingsControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:constants="using:BetterLyrics.WinUI3.Constants"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:dev="using:DevWinUI"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:uc="using:BetterLyrics.WinUI3.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">

    <Grid>

        <Grid x:Name="DisplayGrid" SizeChanged="DisplayGrid_SizeChanged">
            <ScrollViewer Style="{StaticResource SettingsScrollViewerStyle}">
                <Grid Style="{StaticResource SettingsGridStyle}">

                    <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <TextBlock
                                x:Uid="SettingsPageRecordedWindowStatus"
                                Grid.Column="0"
                                Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                            <Button
                                Grid.Column="2"
                                Margin="0,30,0,0"
                                Command="{x:Bind ViewModel.OpenConfigPanelCommand}"
                                Style="{StaticResource AccentButtonStyle}">
                                <TextBlock x:Uid="LyricsWindowSettingsControlCurrentLyricsWindowConfig" />
                            </Button>
                        </Grid>

                        <StackPanel Orientation="Horizontal" Spacing="3">

                            <!--  Create from templates  -->
                            <Button Content="{ui:FontIcon FontSize=16, FontFamily={StaticResource IconFontFamily}, Glyph=&#xE710;}" Style="{StaticResource GhostButtonStyle}">
                                <ToolTipService.ToolTip>
                                    <ToolTip x:Uid="SettingsPageCreateFromTemplates" />
                                </ToolTipService.ToolTip>
                                <Button.Flyout>
                                    <MenuFlyout>
                                        <MenuFlyoutItem x:Uid="SettingsPageStandardMode" Command="{x:Bind ViewModel.CreateStandardLyricsWindowStatusCommand}" />
                                        <MenuFlyoutItem x:Uid="SettingsPageDesktopMode" Command="{x:Bind ViewModel.CreateTransparentLyricsWindowStatusCommand}" />
                                        <MenuFlyoutItem x:Uid="SettingsPageDockedMode" Command="{x:Bind ViewModel.CreateDockedLyricsWindowStatusCommand}" />
                                        <MenuFlyoutItem x:Uid="SettingsPageFullscreenMode" Command="{x:Bind ViewModel.CreateFullLyricsWindowStatusCommand}" />
                                        <MenuFlyoutItem x:Uid="SettingsPageNarrowMode" Command="{x:Bind ViewModel.CreateNarrowLyricsWindowStatusCommand}" />
                                    </MenuFlyout>
                                </Button.Flyout>
                            </Button>

                            <!--  Import  -->
                            <Button
                                Click="ImportButton_Click"
                                Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                      FontSize=16,
                                                      Glyph=&#xE74B;}"
                                Style="{StaticResource GhostButtonStyle}">
                                <ToolTipService.ToolTip>
                                    <ToolTip x:Uid="SettingsPageImport" />
                                </ToolTipService.ToolTip>
                            </Button>

                            <!--  Sharing hub  -->
                            <HyperlinkButton x:Uid="SettingsPageShareHub" NavigateUri="{x:Bind constants:Link.ShareHub}" />

                        </StackPanel>

                        <StackPanel
                            Padding="24,0"
                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                            CornerRadius="4"
                            Spacing="16"
                            Visibility="{Binding ElementName=LyricsWindowManagerExpander, Path=IsExpanded, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">

                            <ListView
                                x:Name="WindowStatusListView"
                                Padding="0,12"
                                CornerRadius="4"
                                ItemsSource="{x:Bind ViewModel.AppSettings.WindowBoundsRecords, Mode=OneWay}"
                                SelectedItem="{x:Bind ViewModel.LiveStates.LyricsWindowStatus, Mode=TwoWay}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <controls:WrapPanel HorizontalSpacing="0" VerticalSpacing="0" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel
                                            Padding="0,10"
                                            RightTapped="StackPanel_RightTapped"
                                            Spacing="6">
                                            <StackPanel.ContextFlyout>
                                                <MenuBarItemFlyout>
                                                    <MenuFlyoutItem
                                                        x:Uid="LyricsWindowSettingsControlSetDefault"
                                                        Click="SetDefaultMenuFlyoutItem_Click"
                                                        IsEnabled="{Binding IsDefault, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}" />
                                                    <MenuFlyoutItem x:Uid="SettingsPageCreateFromCurrent" Click="CopyMenuFlyoutItem_Click" />
                                                    <MenuFlyoutItem x:Uid="LyricsWindowSettingsControlShare" Click="ShareMenuFlyoutItem_Click" />
                                                    <MenuFlyoutItem
                                                        x:Uid="SettingsPageDelete"
                                                        Click="DeleteMenuFlyoutItem_Click"
                                                        IsEnabled="{Binding IsDefault, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}" />
                                                </MenuBarItemFlyout>
                                            </StackPanel.ContextFlyout>
                                            <uc:DemoWindowGrid LyricsWindowStatus="{Binding}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackPanel>

                    </StackPanel>

                </Grid>
            </ScrollViewer>
        </Grid>

        <Grid
            x:Name="ConfigGrid"
            Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"
            Opacity="{x:Bind ViewModel.IsConfigPanelOpened, Mode=OneWay, Converter={StaticResource BoolToOpacityConverter}}"
            Translation="{x:Bind ViewModel.ConfigPanelTranslation, Mode=OneWay}">
            <Grid.OpacityTransition>
                <ScalarTransition />
            </Grid.OpacityTransition>
            <Grid.TranslationTransition>
                <Vector3Transition />
            </Grid.TranslationTransition>

            <Grid Padding="36,0" Style="{StaticResource SettingsGridStyle}">
                <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock
                            x:Uid="LyricsWindowSettingsControlCurrentLyricsWindowConfig"
                            Grid.Column="0"
                            Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <Button
                            Grid.Column="2"
                            Margin="0,30,0,0"
                            Command="{x:Bind ViewModel.CloseConfigPanelCommand}"
                            Content="{ui:FontIcon FontSize=16,
                                                  FontFamily={StaticResource IconFontFamily},
                                                  Glyph=&#xE711;}"
                            Style="{StaticResource AccentButtonStyle}" />
                    </Grid>

                    <Pivot SelectionChanged="Pivot_SelectionChanged">

                        <PivotItem Tag="General">
                            <PivotItem.Header>
                                <TextBlock
                                    x:Uid="AppSettingsControlGeneral"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource BodyTextBlockStyle}" />
                            </PivotItem.Header>
                        </PivotItem>

                        <PivotItem Tag="Layout">
                            <PivotItem.Header>
                                <TextBlock
                                    x:Uid="SettingsPageLayout"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource BodyTextBlockStyle}" />
                            </PivotItem.Header>
                        </PivotItem>

                        <PivotItem Tag="AlbumArtStyle">
                            <PivotItem.Header>
                                <TextBlock
                                    x:Uid="SettingsPageAlbumStyle"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource BodyTextBlockStyle}" />
                            </PivotItem.Header>
                        </PivotItem>

                        <PivotItem Tag="LyricsStyle">
                            <PivotItem.Header>
                                <TextBlock
                                    x:Uid="SettingsPageLyricsStyle"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource BodyTextBlockStyle}" />
                            </PivotItem.Header>
                        </PivotItem>

                        <PivotItem Tag="LyricsEffect">
                            <PivotItem.Header>
                                <TextBlock
                                    x:Uid="SettingsPageLyricsEffect"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource BodyTextBlockStyle}" />
                            </PivotItem.Header>
                        </PivotItem>

                        <PivotItem Tag="LyricsBackground">
                            <PivotItem.Header>
                                <TextBlock
                                    x:Uid="SettingsPageBackgroundOverlay"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource BodyTextBlockStyle}" />
                            </PivotItem.Header>
                        </PivotItem>

                    </Pivot>

                </StackPanel>
            </Grid>

            <controls:SwitchPresenter Margin="0,110,0,0" Value="{x:Bind ViewModel.ListViewSelectedItemTag, Mode=OneWay}">
                <controls:SwitchPresenter.ContentTransitions>
                    <TransitionCollection>
                        <PopupThemeTransition />
                    </TransitionCollection>
                </controls:SwitchPresenter.ContentTransitions>

                <!--  Window  -->
                <controls:Case Value="General">
                    <ScrollViewer Style="{StaticResource SettingsScrollViewerStyle}">
                        <Grid Style="{StaticResource SettingsGridStyle}">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                                <dev:SettingsCard x:Uid="SettingsPageConfigName" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8AC;}">
                                    <StackPanel
                                        Margin="0,6,0,0"
                                        Orientation="Horizontal"
                                        Spacing="6">
                                        <TextBox Text="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.Name, Mode=TwoWay}" TextWrapping="Wrap" />
                                        <Button Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, FontSize=12, Glyph=&#xE8FB;}" Style="{StaticResource GhostButtonStyle}" />
                                    </StackPanel>
                                </dev:SettingsCard>

                                <dev:SettingsExpander
                                    x:Uid="SettingsPageWorkArea"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE78B;}"
                                    IsExpanded="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=TwoWay}" />
                                    <dev:SettingsExpander.Items>
                                        <dev:SettingsCard x:Uid="SettingsPageWorkAreaHeight" IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
                                            <uc:ExtendedSlider
                                                Default="64"
                                                Maximum="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.MonitorBounds.Height, Mode=OneWay}"
                                                Minimum="64"
                                                Unit="px"
                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.DockHeight, Mode=TwoWay}" />
                                        </dev:SettingsCard>

                                        <dev:SettingsCard x:Uid="SettingsPageDockPlacement" IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
                                            <ComboBox SelectedIndex="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.DockPlacement, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                                <ComboBoxItem x:Uid="SettingsPageDockPlacementTop" />
                                                <ComboBoxItem x:Uid="SettingsPageDockPlacementBottom" />
                                            </ComboBox>
                                        </dev:SettingsCard>

                                        <dev:SettingsCard x:Uid="SettingsPageDockMonitor" IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
                                            <StackPanel Orientation="Horizontal" Spacing="6">
                                                <ComboBox ItemsSource="{x:Bind ViewModel.MonitorDeviceNames, Mode=OneWay}" SelectedItem="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.MonitorDeviceName, Mode=TwoWay}" />
                                                <Button
                                                    Command="{x:Bind ViewModel.RefreshMonitorDeviceNamesCommand}"
                                                    Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                                          FontSize=12,
                                                                          Glyph=&#xE72C;}"
                                                    Style="{StaticResource GhostButtonStyle}" />
                                            </StackPanel>
                                        </dev:SettingsCard>

                                    </dev:SettingsExpander.Items>
                                </dev:SettingsExpander>

                                <dev:SettingsExpander
                                    x:Uid="SettingsPageAdaptEnvColor"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE88F;}"
                                    IsExpanded="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAdaptToEnvironment, Mode=OneWay}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAdaptToEnvironment, Mode=TwoWay}" />
                                    <dev:SettingsExpander.Items>
                                        <dev:SettingsCard
                                            x:Uid="SettingsPageEnvColorSample"
                                            Header="Environment color sample mode"
                                            IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAdaptToEnvironment, Mode=OneWay}">
                                            <ComboBox SelectedIndex="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.EnvironmentSampleMode, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                                <ComboBoxItem x:Uid="SettingsPageEnvColorSampleBelow" />
                                                <ComboBoxItem x:Uid="SettingsPageEnvColorSampleAbove" />
                                                <ComboBoxItem x:Uid="SettingsPageEnvColorSampleInner" />
                                                <ComboBoxItem x:Uid="SettingsPageEnvColorSampleEdge" />
                                            </ComboBox>
                                        </dev:SettingsCard>
                                    </dev:SettingsExpander.Items>
                                </dev:SettingsExpander>

                                <dev:SettingsExpander
                                    x:Uid="SettingsPageWindowBounds"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xF16B;}"
                                    IsExpanded="True">
                                    <dev:SettingsExpander.Items>
                                        <dev:SettingsCard Header="X">
                                            <NumberBox
                                                SmallChange="10"
                                                SpinButtonPlacementMode="Inline"
                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.WindowX, Mode=TwoWay}" />
                                        </dev:SettingsCard>
                                        <dev:SettingsCard Header="Y">
                                            <NumberBox
                                                SmallChange="10"
                                                SpinButtonPlacementMode="Inline"
                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.WindowY, Mode=TwoWay}" />
                                        </dev:SettingsCard>
                                        <dev:SettingsCard x:Uid="SettingsPageWidth">
                                            <NumberBox
                                                SmallChange="10"
                                                SpinButtonPlacementMode="Inline"
                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.WindowWidth, Mode=TwoWay}" />
                                        </dev:SettingsCard>
                                        <dev:SettingsCard x:Uid="SettingsPageHeight">
                                            <NumberBox
                                                SmallChange="10"
                                                SpinButtonPlacementMode="Inline"
                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.WindowHeight, Mode=TwoWay}" />
                                        </dev:SettingsCard>
                                    </dev:SettingsExpander.Items>
                                </dev:SettingsExpander>

                                <dev:SettingsExpander
                                    x:Uid="SettingsPageAOT"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE718;}"
                                    IsExpanded="True">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAlwaysOnTop, Mode=TwoWay}" />
                                    <dev:SettingsExpander.Items>
                                        <dev:SettingsCard x:Uid="SettingsPageForceAlwaysOnTop" IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAlwaysOnTop, Mode=OneWay}">
                                            <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAlwaysOnTopPolling, Mode=TwoWay}" />
                                        </dev:SettingsCard>
                                    </dev:SettingsExpander.Items>
                                </dev:SettingsExpander>

                                <dev:SettingsCard x:Uid="SettingsPageHideWindow" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xED1A;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AutoShowOrHideWindow, Mode=TwoWay}" />
                                </dev:SettingsCard>

                                <dev:SettingsCard x:Uid="SettingsPageShowInSwitchers" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE7C4;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsShownInSwitchers, Mode=TwoWay}" />
                                </dev:SettingsCard>

                                <dev:SettingsCard x:Uid="SettingsPageClickThrough" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE7C9;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsClickThrough, Mode=TwoWay}" />
                                </dev:SettingsCard>

                                <dev:SettingsCard x:Uid="SettingsPageBorderless" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8B2;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsBorderless, Mode=TwoWay}" />
                                </dev:SettingsCard>

                                <dev:SettingsCard x:Uid="SettingsPageDragArea" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEB41;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.TitleBarArea, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageTitleBarAreaNone" />
                                        <ComboBoxItem x:Uid="SettingsPageTitleBarAreaTop" />
                                        <ComboBoxItem x:Uid="SettingsPageTitleBarAreaWhole" />
                                    </ComboBox>
                                </dev:SettingsCard>

                            </StackPanel>
                        </Grid>
                    </ScrollViewer>
                </controls:Case>

                <!--  Layout  -->
                <controls:Case Value="Layout">
                    <ScrollViewer Style="{StaticResource SettingsScrollViewerStyle}">
                        <Grid Style="{StaticResource SettingsGridStyle}">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                                <dev:SettingsExpander x:Uid="SettingsPageDisplayTypeSwitcher" IsExpanded="True">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsDisplayType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="MainPageAlbumArtOnly" />
                                        <ComboBoxItem x:Uid="MainPageLyriscOnly" />
                                        <ComboBoxItem x:Uid="MainPageSplitView" />
                                    </ComboBox>
                                    <dev:SettingsExpander.Items>
                                        <dev:SettingsCard x:Uid="SettingsPageLayoutOrientation">
                                            <ComboBox SelectedIndex="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                                <ComboBoxItem x:Uid="SettingsPageLayoutOrientationHorizontal" />
                                                <ComboBoxItem x:Uid="SettingsPageLayoutOrientationVertical" />
                                            </ComboBox>
                                        </dev:SettingsCard>
                                    </dev:SettingsExpander.Items>
                                </dev:SettingsExpander>

                            </StackPanel>
                        </Grid>
                    </ScrollViewer>
                </controls:Case>

                <!--  Album art area style  -->
                <controls:Case Value="AlbumArtStyle">
                    <uc:AlbumArtLayoutSettingsControl AlbumArtLayoutSettings="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings, Mode=OneWay}" />
                </controls:Case>

                <!--  Lyrics style  -->
                <controls:Case Value="LyricsStyle">
                    <uc:LyricsStyleSettingsControl LyricsStyleSettings="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsStyleSettings, Mode=OneWay}" />
                </controls:Case>

                <!--  Lyrics  effect  -->
                <controls:Case Value="LyricsEffect">
                    <uc:LyricsEffectSettingsControl LyricsEffectSettings="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsEffectSettings, Mode=OneWay}" />
                </controls:Case>

                <!--  Lyrics background  -->
                <controls:Case Value="LyricsBackground">
                    <uc:LyricsBackgroundSettingsControl LyricsBackgroundSettings="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsBackgroundSettings, Mode=OneWay}" />
                </controls:Case>

            </controls:SwitchPresenter>

        </Grid>

    </Grid>
</UserControl>