BetterLyrics/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/LyricsStyleSettingsControl.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="BetterLyrics.WinUI3.Controls.LyricsStyleSettingsControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    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:local="using:BetterLyrics.WinUI3.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">

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

                    <!--  Lyrics style  -->

                    <TextBlock x:Uid="SettingsPageLyricsStyle" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                    <dev:SettingsCard x:Uid="SettingsPageLyricsAlignment" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E3;}">
                        <ComboBox SelectedIndex="{x:Bind LyricsStyleSettings.LyricsAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                            <ComboBoxItem x:Uid="SettingsPageLeft" />
                            <ComboBoxItem x:Uid="SettingsPageCenter" />
                            <ComboBoxItem x:Uid="SettingsPageRight" />
                        </ComboBox>
                    </dev:SettingsCard>

                    <dev:SettingsCard x:Uid="SettingsPageLyricsCenterTopOffset" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE78A;}">
                        <local:ExtendedSlider
                            Default="50"
                            Maximum="99"
                            Minimum="1"
                            Unit="%"
                            Value="{x:Bind LyricsStyleSettings.PlayingLineTopOffset, Mode=TwoWay}" />
                    </dev:SettingsCard>

                    <dev:SettingsCard x:Uid="SettingsPageLyricsLineSpacingFactor" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xF579;}">
                        <local:ExtendedSlider
                            x:Uid="SettingsPageLyricsLineSpacingFactorSlider"
                            Default="0.5"
                            Frequency="0.1"
                            Maximum="2"
                            Minimum="0"
                            Unit="x"
                            Value="{x:Bind LyricsStyleSettings.LyricsLineSpacingFactor, Mode=TwoWay}" />
                    </dev:SettingsCard>

                    <dev:SettingsExpander x:Uid="SettingsPageLyricsFontFamily" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8D2;}">
                        <dev:SettingsExpander.Items>
                            <dev:SettingsCard x:Uid="SettingsPageCJK">
                                <local:FontFamilyAutoSuggestBox SelectedFontFamily="{x:Bind LyricsStyleSettings.LyricsCJKFontFamily, Mode=TwoWay}" />
                            </dev:SettingsCard>
                            <dev:SettingsCard x:Uid="SettingsPageWesternChar">
                                <local:FontFamilyAutoSuggestBox SelectedFontFamily="{x:Bind LyricsStyleSettings.LyricsWesternFontFamily, Mode=TwoWay}" />
                            </dev:SettingsCard>
                        </dev:SettingsExpander.Items>
                    </dev:SettingsExpander>

                    <dev:SettingsCard x:Uid="SettingsPageLyricsFontWeight" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8DD;}">
                        <ComboBox SelectedIndex="{x:Bind LyricsStyleSettings.LyricsFontWeight, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                            <ComboBoxItem x:Uid="SettingsPageLyricsThin" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsExtraLight" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsLight" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsSemiLight" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsNormal" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsMedium" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsSemiBold" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsBold" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsExtraBold" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsBlack" />
                            <ComboBoxItem x:Uid="SettingsPageLyricsExtraBlack" />
                        </ComboBox>
                    </dev:SettingsCard>

                    <dev:SettingsCard x:Uid="SettingsPageLyricsFontStrokeWidth" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEC12;}">
                        <local:ExtendedSlider
                            Default="0"
                            Maximum="10"
                            Minimum="0"
                            Value="{x:Bind LyricsStyleSettings.LyricsFontStrokeWidth, Mode=TwoWay}" />
                    </dev:SettingsCard>

                    <!--  字体颜色  -->
                    <dev:SettingsExpander x:Uid="SettingsPageFontColor" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8D3;}">
                        <dev:SettingsExpander.Items>
                            <dev:SettingsCard x:Uid="SettingsPageStrokeFontColor">
                                <ComboBox SelectedIndex="{x:Bind LyricsStyleSettings.LyricsStrokeFontColorType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                    <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveColored" />
                                    <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveGrayed" />
                                    <ComboBoxItem x:Uid="SettingsPageLyricsFontColorCustom" />
                                </ComboBox>
                            </dev:SettingsCard>

                            <dev:SettingsCard HorizontalContentAlignment="Left">
                                <interactivity:Interaction.Behaviors>
                                    <interactivity:DataTriggerBehavior
                                        Binding="{x:Bind LyricsStyleSettings.LyricsStrokeFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                        ComparisonCondition="Equal"
                                        Value="2">
                                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                                    </interactivity:DataTriggerBehavior>
                                    <interactivity:DataTriggerBehavior
                                        Binding="{x:Bind LyricsStyleSettings.LyricsStrokeFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                        ComparisonCondition="NotEqual"
                                        Value="2">
                                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                                    </interactivity:DataTriggerBehavior>
                                </interactivity:Interaction.Behaviors>
                                <ColorPicker
                                    ColorSpectrumShape="Box"
                                    IsAlphaEnabled="True"
                                    IsAlphaSliderVisible="True"
                                    IsAlphaTextInputVisible="True"
                                    IsColorChannelTextInputVisible="True"
                                    IsColorSliderVisible="True"
                                    IsHexInputVisible="True"
                                    IsMoreButtonVisible="True"
                                    Color="{x:Bind LyricsStyleSettings.LyricsCustomStrokeFontColor, Mode=TwoWay}" />
                            </dev:SettingsCard>

                            <dev:SettingsCard x:Uid="SettingsPageLyricsBgFontColor">
                                <ComboBox SelectedIndex="{x:Bind LyricsStyleSettings.LyricsBgFontColorType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                    <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveColored" />
                                    <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveGrayed" />
                                    <ComboBoxItem x:Uid="SettingsPageLyricsFontColorCustom" />
                                </ComboBox>
                            </dev:SettingsCard>

                            <dev:SettingsCard>
                                <interactivity:Interaction.Behaviors>
                                    <interactivity:DataTriggerBehavior
                                        Binding="{x:Bind LyricsStyleSettings.LyricsBgFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                        ComparisonCondition="Equal"
                                        Value="2">
                                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                                    </interactivity:DataTriggerBehavior>
                                    <interactivity:DataTriggerBehavior
                                        Binding="{x:Bind LyricsStyleSettings.LyricsBgFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                        ComparisonCondition="NotEqual"
                                        Value="2">
                                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                                    </interactivity:DataTriggerBehavior>
                                </interactivity:Interaction.Behaviors>
                                <ColorPicker
                                    ColorSpectrumShape="Box"
                                    IsAlphaEnabled="True"
                                    IsAlphaSliderVisible="True"
                                    IsAlphaTextInputVisible="True"
                                    IsColorChannelTextInputVisible="True"
                                    IsColorSliderVisible="True"
                                    IsHexInputVisible="True"
                                    IsMoreButtonVisible="True"
                                    Color="{x:Bind LyricsStyleSettings.LyricsCustomBgFontColor, Mode=TwoWay}" />
                            </dev:SettingsCard>

                            <dev:SettingsCard x:Uid="SettingsPageLyricsFgFontColor">
                                <ComboBox SelectedIndex="{x:Bind LyricsStyleSettings.LyricsFgFontColorType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                    <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveColored" />
                                    <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveGrayed" />
                                    <ComboBoxItem x:Uid="SettingsPageLyricsFontColorCustom" />
                                </ComboBox>
                            </dev:SettingsCard>

                            <dev:SettingsCard>
                                <interactivity:Interaction.Behaviors>
                                    <interactivity:DataTriggerBehavior
                                        Binding="{x:Bind LyricsStyleSettings.LyricsFgFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                        ComparisonCondition="Equal"
                                        Value="2">
                                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                                    </interactivity:DataTriggerBehavior>
                                    <interactivity:DataTriggerBehavior
                                        Binding="{x:Bind LyricsStyleSettings.LyricsFgFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                        ComparisonCondition="NotEqual"
                                        Value="2">
                                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                                    </interactivity:DataTriggerBehavior>
                                </interactivity:Interaction.Behaviors>
                                <ColorPicker
                                    ColorSpectrumShape="Box"
                                    IsAlphaEnabled="True"
                                    IsAlphaSliderVisible="True"
                                    IsAlphaTextInputVisible="True"
                                    IsColorChannelTextInputVisible="True"
                                    IsColorSliderVisible="True"
                                    IsHexInputVisible="True"
                                    IsMoreButtonVisible="True"
                                    Color="{x:Bind LyricsStyleSettings.LyricsCustomFgFontColor, Mode=TwoWay}" />
                            </dev:SettingsCard>
                        </dev:SettingsExpander.Items>
                    </dev:SettingsExpander>

                    <!--  字体大小  -->
                    <dev:SettingsExpander x:Uid="SettingsPageLyricsFontSize" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E9;}">
                        <dev:SettingsExpander.Items>
                            <dev:SettingsCard x:Uid="SettingsPageAutoAdjust">
                                <ToggleSwitch IsOn="{x:Bind LyricsStyleSettings.IsDynamicLyricsFontSize, Mode=TwoWay}" />
                            </dev:SettingsCard>
                            <dev:SettingsCard x:Uid="SettingsPagePhoneticText" IsEnabled="{x:Bind LyricsStyleSettings.IsDynamicLyricsFontSize, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}">
                                <local:ExtendedSlider
                                    Frequency="2"
                                    Maximum="256"
                                    Minimum="12"
                                    ResetButtonVisibility="Collapsed"
                                    Value="{x:Bind LyricsStyleSettings.PhoneticLyricsFontSize, Mode=TwoWay}" />
                            </dev:SettingsCard>
                            <dev:SettingsCard x:Uid="SettingsPageOriginalText" IsEnabled="{x:Bind LyricsStyleSettings.IsDynamicLyricsFontSize, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}">
                                <local:ExtendedSlider
                                    Frequency="2"
                                    Maximum="256"
                                    Minimum="12"
                                    ResetButtonVisibility="Collapsed"
                                    Value="{x:Bind LyricsStyleSettings.OriginalLyricsFontSize, Mode=TwoWay}" />
                            </dev:SettingsCard>
                            <dev:SettingsCard x:Uid="SettingsPageTranslatedText" IsEnabled="{x:Bind LyricsStyleSettings.IsDynamicLyricsFontSize, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}">
                                <local:ExtendedSlider
                                    Frequency="2"
                                    Maximum="256"
                                    Minimum="12"
                                    ResetButtonVisibility="Collapsed"
                                    Value="{x:Bind LyricsStyleSettings.TranslatedLyricsFontSize, Mode=TwoWay}" />
                            </dev:SettingsCard>
                        </dev:SettingsExpander.Items>
                    </dev:SettingsExpander>

                    <!--  字体不透明度  -->
                    <dev:SettingsExpander x:Uid="SettingsPageLyricsOpacity" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEF20;}">
                        <dev:SettingsExpander.Items>
                            <dev:SettingsCard x:Uid="SettingsPagePhoneticText">
                                <local:ExtendedSlider
                                    Default="60"
                                    Frequency="1"
                                    Maximum="100"
                                    Minimum="0"
                                    Value="{x:Bind LyricsStyleSettings.PhoneticLyricsOpacity, Mode=TwoWay}" />
                            </dev:SettingsCard>
                            <dev:SettingsCard x:Uid="SettingsPageOriginalText">
                                <local:ExtendedSlider
                                    Default="30"
                                    Frequency="1"
                                    Maximum="100"
                                    Minimum="0"
                                    Value="{x:Bind LyricsStyleSettings.OriginalLyricsOpacity, Mode=TwoWay}" />
                            </dev:SettingsCard>
                            <dev:SettingsCard x:Uid="SettingsPageTranslatedText">
                                <local:ExtendedSlider
                                    Default="60"
                                    Frequency="1"
                                    Maximum="100"
                                    Minimum="0"
                                    Value="{x:Bind LyricsStyleSettings.TranslatedLyricsOpacity, Mode=TwoWay}" />
                            </dev:SettingsCard>
                        </dev:SettingsExpander.Items>
                    </dev:SettingsExpander>

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