BetterLyrics/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/PlaybackSettingsControl.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="BetterLyrics.WinUI3.Controls.PlaybackSettingsControl"
    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:globalization="using:Windows.Globalization"
    xmlns:helper="using:BetterLyrics.WinUI3.Helper"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:BetterLyrics.WinUI3.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:BetterLyrics.WinUI3.Models"
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">

    <Grid ColumnSpacing="6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0" RowSpacing="18">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <interactivity:Interaction.Behaviors>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo.Count, Mode=OneWay}"
                    ComparisonCondition="NotEqual"
                    Value="0">
                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                </interactivity:DataTriggerBehavior>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo.Count, Mode=OneWay}"
                    ComparisonCondition="Equal"
                    Value="0">
                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                </interactivity:DataTriggerBehavior>
            </interactivity:Interaction.Behaviors>

            <!--  播放源列表  -->
            <ListView
                x:Name="MediaSourceProvidersListView"
                Grid.Row="0"
                AllowDrop="True"
                CanDragItems="True"
                CanReorderItems="True"
                DragItemsCompleted="MediaSourceProvidersListView_DragItemsCompleted"
                ItemsSource="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo, Mode=OneWay}"
                ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                ScrollViewer.HorizontalScrollMode="Enabled"
                ScrollViewer.VerticalScrollBarVisibility="Disabled"
                ScrollViewer.VerticalScrollMode="Disabled"
                SelectedItem="{x:Bind ViewModel.SelectedMediaSourceProvider, Mode=TwoWay}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsStackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="models:MediaSourceProviderInfo">
                        <StackPanel Orientation="Horizontal" Spacing="6">
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{Binding Provider, Mode=OneWay}" />
                            </ToolTipService.ToolTip>
                            <FontIcon
                                FontFamily="Segoe UI Symbol"
                                FontSize="12"
                                Glyph="&#x283F;" />
                            <Grid
                                Width="16"
                                Height="16"
                                CornerRadius="4">
                                <ImageIcon Source="{Binding LogoPath}" />
                            </Grid>
                            <TextBlock
                                MaxWidth="200"
                                Text="{Binding DisplayName, Mode=OneWay}"
                                TextWrapping="Wrap" />
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

            <ScrollViewer Grid.Row="1" Style="{StaticResource SettingsScrollViewerStyle}">
                <Grid Style="{StaticResource SettingsGridStyle}">
                    <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                        <dev:SettingsCard x:Uid="SettingsPageMediaSourceProvidersConfig">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.SelectedMediaSourceProvider.IsEnabled, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <dev:SettingsCard x:Uid="SettingsPageLastFMTrack" IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.SelectedMediaSourceProvider.IsLastFMTrackEnabled, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <dev:SettingsCard x:Uid="SettingsPageDiscordPresence">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.SelectedMediaSourceProvider.IsDiscordPresenceEnabled, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <!--  LX music server  -->
                        <dev:SettingsCard x:Uid="SettingsPageLXMusicServer" Visibility="{x:Bind ViewModel.SelectedMediaSourceProvider.IsLXMusic, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">
                            <Grid ColumnSpacing="6">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBox
                                    x:Uid="SettingsPageLXMusicServerInput"
                                    Grid.Column="0"
                                    IsEnabled="{x:Bind ViewModel.IsLXMusicServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
                                    Text="{x:Bind ViewModel.AppSettings.GeneralSettings.LXMusicServer, Mode=TwoWay}"
                                    TextWrapping="Wrap" />
                                <Button
                                    x:Uid="SettingsPageServerTestButton"
                                    Grid.Column="1"
                                    Command="{x:Bind ViewModel.LXMusicServerTestCommand}"
                                    IsEnabled="{x:Bind ViewModel.IsLXMusicServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}" />
                            </Grid>
                        </dev:SettingsCard>

                        <!--  时间轴相关配置  -->
                        <dev:SettingsExpander x:Uid="SettingsPageLyricsTimeline" IsExpanded="True">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.SelectedMediaSourceProvider.IsTimelineSyncEnabled, Mode=TwoWay}" />
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard x:Uid="SettingsPageLyricsTimelineThreshold" IsEnabled="{x:Bind ViewModel.SelectedMediaSourceProvider.IsTimelineSyncEnabled, Mode=OneWay}">
                                    <local:ExtendedSlider
                                        Frequency="100"
                                        Maximum="1000"
                                        Minimum="0"
                                        ResetButtonVisibility="Collapsed"
                                        Unit="ms"
                                        Value="{x:Bind ViewModel.SelectedMediaSourceProvider.TimelineSyncThreshold, Mode=TwoWay}" />
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>
                        <dev:SettingsExpander x:Uid="MainPagePositionOffsetSlider" IsExpanded="True">
                            <local:ExtendedSlider
                                x:Uid="SettingsPagePositionOffsetReset"
                                Default="0"
                                Frequency="100"
                                Maximum="5000"
                                Minimum="-5000"
                                Unit="ms"
                                Value="{x:Bind ViewModel.SelectedMediaSourceProvider.PositionOffset, Mode=TwoWay}" />
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard x:Uid="LyricsPagePositionOffsetHint">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.SelectedMediaSourceProvider.ResetPositionOffsetOnSongChanged, Mode=TwoWay}" />
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>

                        <!--  专辑封面源配置  -->
                        <TextBlock x:Uid="SettingsPageAlbumArtSearchProvidersConfig" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <ListView
                            x:Name="AlbumArtSearchProvidersListView"
                            AllowDrop="True"
                            CanDragItems="True"
                            CanReorderItems="True"
                            DragItemsCompleted="AlbumArtSearchProvidersListView_DragItemsCompleted"
                            ItemContainerStyle="{StaticResource ListViewStretchedItemContainerStyle}"
                            ItemsSource="{x:Bind ViewModel.SelectedMediaSourceProvider.AlbumArtSearchProvidersInfo, Mode=OneWay}"
                            SelectionMode="None">
                            <ListView.OpacityTransition>
                                <ScalarTransition />
                            </ListView.OpacityTransition>
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="models:AlbumArtSearchProviderInfo">
                                    <dev:SettingsCard Header="{Binding Provider, Converter={StaticResource AlbumArtSearchProviderToDisplayNameConverter}, Mode=OneWay}">
                                        <dev:SettingsCard.HeaderIcon>
                                            <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#x283F;" />
                                        </dev:SettingsCard.HeaderIcon>
                                        <ToggleSwitch IsOn="{Binding IsEnabled, Mode=TwoWay}" />
                                    </dev:SettingsCard>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

                        <!--  歌词源配置  -->
                        <TextBlock x:Uid="SettingsPageLyricsSearchProvidersConfig" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsCard x:Uid="SettingsPageLyricsSearchType">
                            <ComboBox SelectedIndex="{x:Bind ViewModel.SelectedMediaSourceProvider.LyricsSearchType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                <ComboBoxItem x:Uid="SettingsPageLyricsSearchSequential" />
                                <ComboBoxItem x:Uid="SettingsPageLyricsSearchBestMatch" />
                            </ComboBox>
                        </dev:SettingsCard>
                        <dev:SettingsCard x:Uid="SettingsPageMatchingThreshold">
                            <local:ExtendedSlider
                                Default="0"
                                Maximum="100"
                                Minimum="0"
                                Unit="%"
                                Value="{x:Bind ViewModel.SelectedMediaSourceProvider.MatchingThreshold, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <ListView
                            x:Name="LyricsSearchProvidersListView"
                            AllowDrop="True"
                            CanDragItems="True"
                            CanReorderItems="True"
                            DragItemsCompleted="LyricsSearchProvidersListView_DragItemsCompleted"
                            ItemsSource="{x:Bind ViewModel.SelectedMediaSourceProvider.LyricsSearchProvidersInfo, Mode=OneWay}"
                            SelectionMode="None">
                            <ListView.OpacityTransition>
                                <ScalarTransition />
                            </ListView.OpacityTransition>
                            <ListView.ItemContainerStyle>
                                <Style TargetType="ListViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                    <Setter Property="Margin" Value="0" />
                                    <Setter Property="Padding" Value="0" />
                                </Style>
                            </ListView.ItemContainerStyle>
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="models:LyricsSearchProviderInfo">
                                    <Grid>
                                        <dev:SettingsExpander Header="{Binding Provider, Converter={StaticResource LyricsSearchProviderToDisplayNameConverter}, Mode=OneWay}" IsExpanded="{Binding IsMatchingThresholdOverwritten, Mode=OneWay}">
                                            <dev:SettingsExpander.HeaderIcon>
                                                <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#x283F;" />
                                            </dev:SettingsExpander.HeaderIcon>
                                            <ToggleSwitch IsOn="{Binding IsEnabled, Mode=TwoWay}" />
                                            <dev:SettingsExpander.Items>
                                                <dev:SettingsCard x:Uid="SettingsPageOverwriteMatchingThreshold">
                                                    <ToggleSwitch IsOn="{Binding IsMatchingThresholdOverwritten, Mode=TwoWay}" />
                                                </dev:SettingsCard>
                                                <dev:SettingsCard x:Uid="SettingsPageMatchingThreshold" IsEnabled="{Binding IsMatchingThresholdOverwritten, Mode=OneWay}">
                                                    <local:ExtendedSlider
                                                        Default="0"
                                                        Maximum="100"
                                                        Minimum="0"
                                                        Unit="%"
                                                        Value="{Binding MatchingThreshold, Mode=TwoWay}" />
                                                </dev:SettingsCard>
                                            </dev:SettingsExpander.Items>
                                        </dev:SettingsExpander>
                                        <Grid
                                            Width="48"
                                            HorizontalAlignment="Left"
                                            Background="{ThemeResource ControlStrokeColorDefaultBrush}"
                                            CornerRadius="4,0,0,4"
                                            Opacity="0">
                                            <interactivity:Interaction.Behaviors>
                                                <interactivity:EventTriggerBehavior EventName="PointerEntered">
                                                    <interactivity:ChangePropertyAction PropertyName="Opacity" Value="1" />
                                                </interactivity:EventTriggerBehavior>
                                                <interactivity:EventTriggerBehavior EventName="PointerExited">
                                                    <interactivity:ChangePropertyAction PropertyName="Opacity" Value="0" />
                                                </interactivity:EventTriggerBehavior>
                                            </interactivity:Interaction.Behaviors>
                                            <Grid.OpacityTransition>
                                                <ScalarTransition />
                                            </Grid.OpacityTransition>
                                            <ToolTipService.ToolTip>
                                                <ToolTip x:Uid="SettingsPageHoldDragSort" />
                                            </ToolTipService.ToolTip>
                                        </Grid>
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

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

        </Grid>

        <StackPanel
            Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Spacing="12">
            <interactivity:Interaction.Behaviors>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo.Count, Mode=OneWay}"
                    ComparisonCondition="Equal"
                    Value="0">
                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                </interactivity:DataTriggerBehavior>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo.Count, Mode=OneWay}"
                    ComparisonCondition="NotEqual"
                    Value="0">
                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                </interactivity:DataTriggerBehavior>
            </interactivity:Interaction.Behaviors>
            <Image MaxWidth="200" Source="/Assets/Leaf.png" />
            <TextBlock
                x:Uid="SettingsPagePlaybackNotFound"
                HorizontalAlignment="Center"
                Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
        </StackPanel>
        <Grid Grid.Column="1">
            <ScrollViewer Style="{StaticResource SettingsScrollViewerStyle}">
                <Grid Style="{StaticResource SettingsGridStyle}">
                    <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                        <!--  Realtime info  -->
                        <TextBlock x:Uid="SettingsPageRealtimeStatus" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                        <!--  Playback source info  -->
                        <Expander
                            x:Uid="SettingsPagePlaybackStatus"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Left">
                            <StackPanel Spacing="6">
                                <local:PropertyRow x:Uid="SettingsPagePlaybackSource" Value="{x:Bind ViewModel.MediaSessionsService.CurrentMediaSourceProviderInfo.DisplayName, Mode=OneWay}" />
                                <local:PropertyRow x:Uid="SettingsPagePlaybackSourceID" Value="{x:Bind ViewModel.MediaSessionsService.CurrentSongInfo.PlayerId, TargetNullValue=N/A, Mode=OneWay}" />
                            </StackPanel>
                        </Expander>

                        <!--  Song info  -->
                        <Expander
                            x:Uid="SettingsPageSongStatus"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Left">
                            <StackPanel Spacing="6">
                                <local:PropertyRow x:Uid="SettingsPageSongTitle" Value="{x:Bind ViewModel.MediaSessionsService.CurrentSongInfo.Title, TargetNullValue=N/A, Mode=OneWay}" />
                                <local:PropertyRow x:Uid="SettingsPageArtist" Value="{x:Bind ViewModel.MediaSessionsService.CurrentSongInfo.DisplayArtists, TargetNullValue=N/A, Mode=OneWay}" />
                                <local:PropertyRow x:Uid="SettingsPageAlbum" Value="{x:Bind ViewModel.MediaSessionsService.CurrentSongInfo.Album, TargetNullValue=N/A, Mode=OneWay}" />
                                <local:PropertyRow
                                    x:Uid="LyricsSearchControlDurauion"
                                    Unit="s"
                                    Value="{x:Bind ViewModel.MediaSessionsService.CurrentSongInfo.Duration, TargetNullValue=N/A, Mode=OneWay}" />
                            </StackPanel>
                        </Expander>

                        <!--  Search result info  -->
                        <Expander
                            x:Uid="SettingsPageSearchResultStatus"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Left">
                            <StackPanel Spacing="6">
                                <local:PropertyRow x:Uid="SettingsPageSongTitle" Value="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.Title, TargetNullValue=N/A, Mode=OneWay}" />
                                <local:PropertyRow x:Uid="SettingsPageArtist" Value="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.DisplayArtists, TargetNullValue=N/A, Mode=OneWay}" />
                                <local:PropertyRow x:Uid="SettingsPageAlbum" Value="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.Album, TargetNullValue=N/A, Mode=OneWay}" />
                                <local:PropertyRow
                                    x:Uid="LyricsSearchControlDurauion"
                                    Unit="s"
                                    Value="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.Duration, TargetNullValue=N/A, Mode=OneWay}" />
                                <local:PropertyRow
                                    x:Uid="LyricsPageLyricsProviderPrefix"
                                    Link="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.Reference, Mode=OneWay}"
                                    ToolTipService.ToolTip="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.Reference, TargetNullValue=N/A, Mode=OneWay}"
                                    Value="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.ProviderIfFound, Mode=OneWay, Converter={StaticResource LyricsSearchProviderToDisplayNameConverter}}" />
                                <local:PropertyRow x:Uid="LyricsPageTranslationProviderPrefix" Value="{x:Bind ViewModel.MediaSessionsService.TranslationSearchProvider, Mode=OneWay, Converter={StaticResource TranslationSearchProviderToDisplayNameConverter}}" />
                                <local:PropertyRow
                                    x:Uid="LyricsPageMatchPercentage"
                                    Unit="%"
                                    Value="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.MatchPercentage, Mode=OneWay}" />
                                <local:PropertyRow
                                    x:Uid="LyricsPageCachePath"
                                    Link="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.SelfPath, TargetNullValue=N/A, Mode=OneWay}"
                                    ToolTipService.ToolTip="{x:Bind ViewModel.MediaSessionsService.CurrentLyricsSearchResult.SelfPath, TargetNullValue=N/A, Mode=OneWay}" />
                            </StackPanel>
                        </Expander>

                        <dev:SettingsCard x:Uid="SettingsPageForceWordByWordEffect">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.GeneralSettings.IsForceWordByWordEffect, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <!--  Lyrics translation  -->
                        <TextBlock x:Uid="SettingsPageTranslation" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsExpander x:Uid="LyricsPageTranslationEnabled" IsExpanded="True">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsTranslationEnabled, Mode=TwoWay}" />
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard x:Uid="SettingsPageTargetLanguage" IsEnabled="{x:Bind ViewModel.AppSettings.TranslationSettings.IsTranslationEnabled, Mode=OneWay}">
                                    <ComboBox ItemsSource="{x:Bind helper:LanguageHelper.SupportedTranslationTargetLanguages}" SelectedIndex="{x:Bind ViewModel.SelectedTargetLanguageIndex, Mode=TwoWay}">
                                        <ComboBox.ItemTemplate>
                                            <DataTemplate x:DataType="models:ExtendedLanguage">
                                                <StackPanel Orientation="Horizontal" Spacing="6">
                                                    <TextBlock Text="{x:Bind Name}" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </ComboBox.ItemTemplate>
                                    </ComboBox>
                                </dev:SettingsCard>
                                <dev:SettingsCard x:Uid="SettingsPageTranslationConfig" IsEnabled="{x:Bind ViewModel.AppSettings.TranslationSettings.IsTranslationEnabled, Mode=OneWay}">
                                    <dev:SettingsCard.Description>
                                        <HyperlinkButton Content="https://github.com/LibreTranslate/LibreTranslate" NavigateUri="https://github.com/LibreTranslate/LibreTranslate" />
                                    </dev:SettingsCard.Description>
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsLibreTranslateEnabled, Mode=TwoWay}" />
                                </dev:SettingsCard>
                                <dev:SettingsCard x:Uid="SettingsPageLibreTranslateServer" IsEnabled="{x:Bind ViewModel.AppSettings.TranslationSettings.IsLibreTranslateEnabled, Mode=OneWay}">
                                    <StackPanel Orientation="Horizontal" Spacing="12">
                                        <TextBox
                                            x:Uid="LibreTranslateServerTextBox"
                                            IsEnabled="{x:Bind ViewModel.IsLibreTranslateServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
                                            Text="{x:Bind ViewModel.AppSettings.TranslationSettings.LibreTranslateServer, Mode=TwoWay}" />
                                        <Button
                                            x:Uid="SettingsPageServerTestButton"
                                            Command="{x:Bind ViewModel.LibreTranslateServerTestCommand}"
                                            IsEnabled="{x:Bind ViewModel.IsLibreTranslateServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}" />
                                    </StackPanel>
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>

                        <!--  Lyrics phonetic  -->
                        <TextBlock x:Uid="SettingsPagePhonetic" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsExpander x:Uid="SettingsPageChinese" IsExpanded="{x:Bind ViewModel.AppSettings.TranslationSettings.IsChineseRomanizationEnabled, Mode=OneWay}">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsChineseRomanizationEnabled, Mode=TwoWay}" />
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard IsEnabled="{x:Bind ViewModel.AppSettings.TranslationSettings.IsChineseRomanizationEnabled, Mode=OneWay}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.AppSettings.TranslationSettings.ChineseRomanization, Converter={StaticResource EnumToIntConverter}, Mode=TwoWay}">
                                        <ComboBoxItem x:Uid="SettingsPagePinyin" />
                                        <ComboBoxItem x:Uid="SettingsPageJyutping" />
                                    </ComboBox>
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>
                        <dev:SettingsCard x:Uid="SettingsPageJapanese">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsJapaneseRomanizationEnabled, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <!--  中文简体繁体偏好  -->
                        <TextBlock x:Uid="SettingsPageChineseLyrics" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsCard x:Uid="SettingsPageChinesePreference">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsTraditionalChineseEnabled, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <!--  Last.fm  -->
                        <TextBlock x:Uid="SettingsPageLastFM" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsExpander
                            x:Uid="SettingsPageLastFMManager"
                            HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/LastFM.png}"
                            IsExpanded="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                            <StackPanel Orientation="Horizontal" Spacing="6">
                                <Button
                                    x:Uid="SettingsPageLastFMAuth"
                                    Command="{x:Bind ViewModel.LastFMAuthCommand}"
                                    IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}" />
                                <Button
                                    x:Uid="SettingsPageLastFMUnAuth"
                                    Command="{x:Bind ViewModel.LastFMUnAuthCommand}"
                                    IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}" />
                            </StackPanel>
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard x:Uid="SettingsPageLastFMUsername" IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                                    <HyperlinkButton Content="{x:Bind ViewModel.LastFMUser.Name, Mode=OneWay}" NavigateUri="{x:Bind ViewModel.LastFMUser.Url, Mode=OneWay}" />
                                </dev:SettingsCard>
                                <dev:SettingsCard x:Uid="SettingsPageLastFMPlaycount" IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                                    <TextBlock Text="{x:Bind ViewModel.LastFMUser.Playcount, Mode=OneWay}" />
                                </dev:SettingsCard>
                                <dev:SettingsCard x:Uid="SettingsPageLastFMRegistered" IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                                    <TextBlock Text="{x:Bind ViewModel.LastFMUser.Registered.ToLongDateString(), Mode=OneWay}" />
                                </dev:SettingsCard>
                                <dev:SettingsCard IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                                    <Button x:Uid="SettingsPageLastFMRefresh" Command="{x:Bind ViewModel.LastFMRefreshCommand}" />
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>

                        <!--  amll-ttml-db  -->
                        <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" Text="amll-ttml-db" />
                        <dev:SettingsCard x:Uid="SettingsPageAmllTtmlDbBaseUrl">
                            <Grid ColumnSpacing="6">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBox
                                    Grid.Column="0"
                                    Text="{x:Bind ViewModel.AppSettings.GeneralSettings.AmllTtmlDbBaseUrl, Mode=TwoWay}"
                                    TextWrapping="Wrap" />
                                <Button
                                    Grid.Column="1"
                                    Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                          FontSize=12,
                                                          Glyph=&#xE8FB;}"
                                    Style="{StaticResource GhostButtonStyle}" />
                            </Grid>
                        </dev:SettingsCard>

                        <!--  Apple Music token  -->
                        <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" Text="Apple Muisc media-user-token" />
                        <dev:SettingsCard
                            Background="{ThemeResource SystemFillColorCautionBackgroundBrush}"
                            Description="Use at your own risk"
                            Foreground="{ThemeResource SystemFillColorCautionBrush}"
                            Header="WARNING">
                            <Grid ColumnSpacing="6">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBox
                                    Grid.Column="0"
                                    PlaceholderText="media-user-token"
                                    Text="{x:Bind ViewModel.AppleMusicMediaUserToken, Mode=TwoWay}"
                                    TextWrapping="Wrap" />
                                <HyperlinkButton
                                    Grid.Column="1"
                                    Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                          FontSize=12,
                                                          Glyph=&#xE897;}"
                                    NavigateUri="{x:Bind constants:Link.AppleMusicCfg}" />
                                <Button
                                    Grid.Column="2"
                                    Command="{x:Bind ViewModel.SaveAppleMusicMediaUserTokenCommand}"
                                    Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                          FontSize=12,
                                                          Glyph=&#xE8FB;}"
                                    Style="{StaticResource GhostButtonStyle}" />
                            </Grid>
                        </dev:SettingsCard>

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

</UserControl>