PowerToys/src/settings-ui/Settings.UI/SettingsXAML/Views/ImageResizerPage.xaml

<local:NavigablePage
    x:Class="Microsoft.PowerToys.Settings.UI.Views.ImageResizerPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library"
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
    xmlns:ui="using:CommunityToolkit.WinUI"
    x:Name="RootPage"
    AutomationProperties.LandmarkType="Main"
    mc:Ignorable="d">
    <local:NavigablePage.Resources>
        <converters:ImageResizerFitToStringConverter x:Key="ImageResizerFitToStringConverter" />
        <converters:ImageResizerFitToIntConverter x:Key="ImageResizerFitToIntConverter" />
        <converters:ImageResizerUnitToStringConverter x:Key="ImageResizerUnitToStringConverter" />
        <converters:ImageResizerUnitToIntConverter x:Key="ImageResizerUnitToIntConverter" />
        <converters:ImageResizerSizeToAccessibleTextConverter x:Key="ImageResizerSizeToAccessibleTextConverter" />
        <converters:ImageResizerDoubleToAutoConverter x:Key="ImageResizerDoubleToAutoConverter" />
        <converters:ImageResizerNumberBoxValueConverter x:Key="ImageResizerNumberBoxValueConverter" />
        <converters:ImageResizerZeroToEmptyStringNumberFormatter x:Key="ImageResizerZeroToEmptyStringNumberFormatter" />
        <tkconverters:BoolToObjectConverter
            x:Key="BoolToComboBoxIndexConverter"
            FalseValue="1"
            TrueValue="0" />
    </local:NavigablePage.Resources>
    <controls:SettingsPageControl x:Uid="ImageResizer" ModuleImageSource="ms-appx:///Assets/Settings/Modules/ImageResizer.png">
        <controls:SettingsPageControl.ModuleContent>
            <StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}">
                    <tkcontrols:SettingsCard
                        Name="ImageResizerEnableToggle"
                        x:Uid="ImageResizer_EnableToggle"
                        HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ImageResizer.png}">
                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
                    </tkcontrols:SettingsCard>
                </controls:GPOInfoControl>
                <controls:SettingsGroup x:Uid="ImageResizer_CustomSizes" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                    <tkcontrols:SettingsCard
                        Name="ImageResizerPresets"
                        x:Uid="ImageResizer_Presets"
                        HeaderIcon="{ui:FontIcon Glyph=&#xE792;}">
                        <Button
                            x:Uid="ImageResizer_AddSizeButton"
                            Click="AddSizeButton_Click"
                            Style="{ThemeResource AccentButtonStyle}" />
                    </tkcontrols:SettingsCard>
                    <ListView
                        x:Name="ImagesSizesListView"
                        x:Uid="ImagesSizesListView"
                        ContainerContentChanging="ImagesSizesListView_ContainerContentChanging"
                        ItemsSource="{x:Bind ViewModel.Sizes, Mode=TwoWay}"
                        SelectionMode="None">
                        <ListView.ItemTemplate>
                            <DataTemplate x:Name="SingleLineDataTemplate" x:DataType="models:ImageSize">
                                <tkcontrols:SettingsCard Header="{x:Bind Name, Mode=OneWay}">
                                    <tkcontrols:SettingsCard.Resources>
                                        <x:Double x:Key="SettingsCardLeftIndention">42</x:Double>
                                    </tkcontrols:SettingsCard.Resources>
                                    <tkcontrols:SettingsCard.Description>
                                        <StackPanel
                                            Grid.Row="1"
                                            Grid.Column="1"
                                            Margin="0,4,0,0"
                                            Orientation="Horizontal">
                                            <TextBlock
                                                Margin="0,0,4,0"
                                                Style="{ThemeResource SecondaryTextStyle}"
                                                Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" />
                                            <TextBlock
                                                Margin="0,0,4,0"
                                                FontWeight="SemiBold"
                                                Style="{ThemeResource SecondaryTextStyle}"
                                                Text="{x:Bind Width, Mode=OneWay, Converter={StaticResource ImageResizerDoubleToAutoConverter}, ConverterParameter=Auto}" />
                                            <TextBlock
                                                Margin="0,5,4,0"
                                                AutomationProperties.AccessibilityView="Raw"
                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                FontSize="10"
                                                Style="{ThemeResource SecondaryTextStyle}"
                                                Text="&#xE947;"
                                                Visibility="{x:Bind IsHeightUsed, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
                                            <TextBlock
                                                Margin="0,0,4,0"
                                                FontWeight="SemiBold"
                                                Style="{ThemeResource SecondaryTextStyle}"
                                                Text="{x:Bind Height, Mode=OneWay, Converter={StaticResource ImageResizerDoubleToAutoConverter}, ConverterParameter=Auto}"
                                                Visibility="{x:Bind IsHeightUsed, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
                                            <TextBlock
                                                Margin="0,0,4,0"
                                                Style="{ThemeResource SecondaryTextStyle}"
                                                Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter}, ConverterParameter=ToLower}" />
                                        </StackPanel>
                                    </tkcontrols:SettingsCard.Description>
                                    <StackPanel
                                        Grid.Column="2"
                                        HorizontalAlignment="Right"
                                        Orientation="Horizontal"
                                        Spacing="8">
                                        <Button
                                            x:Uid="ImageResizer_EditButton"
                                            Width="40"
                                            Height="36"
                                            AutomationProperties.FullDescription="{x:Bind AccessibleTextHelper, Mode=OneWay, Converter={StaticResource ImageResizerSizeToAccessibleTextConverter}, ConverterParameter='Edit'}"
                                            AutomationProperties.Name="{x:Bind Name, Mode=OneWay, Converter={StaticResource ImageResizerSizeToAccessibleTextConverter}, ConverterParameter='Edit'}"
                                            Content="&#xE70F;"
                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                            Style="{StaticResource SubtleButtonStyle}">
                                            <ToolTipService.ToolTip>
                                                <TextBlock x:Uid="EditTooltip" />
                                            </ToolTipService.ToolTip>
                                            <Button.Flyout>
                                                <Flyout x:Uid="ImageResizer_EditSize" ShouldConstrainToRootBounds="False">
                                                    <StackPanel Spacing="16">
                                                        <TextBox
                                                            x:Uid="ImageResizer_Name"
                                                            Width="240"
                                                            HorizontalAlignment="Left"
                                                            Text="{x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

                                                        <ComboBox
                                                            x:Uid="ImageResizer_Fit"
                                                            Width="240"
                                                            HorizontalAlignment="Left"
                                                            SelectedIndex="{x:Bind Fit, Mode=TwoWay, Converter={StaticResource ImageResizerFitToIntConverter}}">
                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fill" />
                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fit" />
                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Stretch" />
                                                        </ComboBox>

                                                        <StackPanel Orientation="Horizontal" Spacing="8">
                                                            <controls:ImageResizerDimensionsNumberBox
                                                                x:Uid="ImageResizer_Width"
                                                                Width="116"
                                                                Minimum="0"
                                                                SpinButtonPlacementMode="Compact"
                                                                Value="{x:Bind Width, Mode=TwoWay, Converter={StaticResource ImageResizerNumberBoxValueConverter}}" />

                                                            <controls:ImageResizerDimensionsNumberBox
                                                                x:Uid="ImageResizer_Height"
                                                                Width="116"
                                                                Minimum="0"
                                                                SpinButtonPlacementMode="Compact"
                                                                Visibility="{x:Bind IsHeightUsed, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"
                                                                Value="{x:Bind Height, Mode=TwoWay, Converter={StaticResource ImageResizerNumberBoxValueConverter}}" />
                                                        </StackPanel>

                                                        <ComboBox
                                                            x:Uid="ImageResizer_Size"
                                                            Width="240"
                                                            SelectedIndex="{Binding Unit, Mode=TwoWay, Converter={StaticResource ImageResizerUnitToIntConverter}}">
                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_CM" />
                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Inches" />
                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Percent" />
                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Pixels" />
                                                        </ComboBox>
                                                    </StackPanel>
                                                </Flyout>
                                            </Button.Flyout>
                                        </Button>

                                        <Button
                                            x:Uid="ImageResizer_RemoveButton"
                                            Width="40"
                                            Height="36"
                                            AutomationProperties.FullDescription="{x:Bind AccessibleTextHelper, Mode=OneWay, Converter={StaticResource ImageResizerSizeToAccessibleTextConverter}, ConverterParameter='Remove'}"
                                            AutomationProperties.Name="{x:Bind Name, Mode=OneWay, Converter={StaticResource ImageResizerSizeToAccessibleTextConverter}, ConverterParameter='Remove'}"
                                            Click="DeleteCustomSize"
                                            CommandParameter="{Binding Id}"
                                            Content="&#xE74D;"
                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                            Style="{StaticResource SubtleButtonStyle}">
                                            <ToolTipService.ToolTip>
                                                <TextBlock x:Uid="RemoveTooltip" />
                                            </ToolTipService.ToolTip>
                                        </Button>
                                    </StackPanel>
                                </tkcontrols:SettingsCard>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </controls:SettingsGroup>

                <controls:SettingsGroup x:Uid="Encoding" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                    <tkcontrols:SettingsCard Name="ImageResizerFallBackEncoderText" x:Uid="ImageResizer_FallBackEncoderText">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.Encoder, Mode=TwoWay}">
                            <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_PNG" />
                            <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_BMP" />
                            <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_JPEG" />
                            <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_TIFF" />
                            <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_WMPhoto" />
                            <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_GIF" />
                        </ComboBox>
                    </tkcontrols:SettingsCard>

                    <tkcontrols:SettingsCard Name="ImageResizerEncoding" x:Uid="ImageResizer_Encoding">
                        <Slider
                            MinWidth="{StaticResource SettingActionControlMinWidth}"
                            Maximum="100"
                            Minimum="0"
                            Value="{x:Bind ViewModel.JPEGQualityLevel, Mode=TwoWay}" />
                    </tkcontrols:SettingsCard>

                    <tkcontrols:SettingsCard Name="ImageResizerPNGInterlacing" x:Uid="ImageResizer_PNGInterlacing">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.PngInterlaceOption, Mode=TwoWay}">
                            <ComboBoxItem x:Uid="Default" />
                            <ComboBoxItem x:Uid="On" />
                            <ComboBoxItem x:Uid="Off" />
                        </ComboBox>
                    </tkcontrols:SettingsCard>

                    <tkcontrols:SettingsCard Name="ImageResizerTIFFCompression" x:Uid="ImageResizer_TIFFCompression">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.TiffCompressOption, Mode=TwoWay}">
                            <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Default" />
                            <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_None" />
                            <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT3" />
                            <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT4" />
                            <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_LZW" />
                            <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_RLE" />
                            <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Zip" />
                        </ComboBox>
                    </tkcontrols:SettingsCard>
                </controls:SettingsGroup>

                <controls:SettingsGroup x:Uid="File" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                    <tkcontrols:SettingsCard Name="ImageResizerFilenameFormatHeader" x:Uid="ImageResizer_FilenameFormatHeader">
                        <StackPanel Orientation="Horizontal" Spacing="4">
                            <TextBox
                                x:Uid="ImageResizer_FilenameFormatPlaceholder"
                                MinWidth="{StaticResource SettingActionControlMinWidth}"
                                Text="{x:Bind ViewModel.FileName, Mode=TwoWay}" />
                            <Button
                                x:Uid="ImageResizer_FilenameParameters"
                                Content="&#xE946;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                Style="{StaticResource SubtleButtonStyle}">
                                <Button.Flyout>
                                    <Flyout ShouldConstrainToRootBounds="False">
                                        <TextBlock x:Name="FileFormatTextBlock">
                                            <Run x:Uid="ImageResizer_FileFormatDescription" />
                                            <LineBreak />
                                            <LineBreak />
                                            <Run FontWeight="Bold" Text="%1" />
                                            <Run Text=" - " />
                                            <Run x:Uid="ImageResizer_Formatting_Filename" />
                                            <LineBreak />
                                            <Run FontWeight="Bold" Text="%2" />
                                            <Run Text=" - " />
                                            <Run x:Uid="ImageResizer_Formatting_Sizename" />
                                            <LineBreak />
                                            <Run FontWeight="Bold" Text="%3" />
                                            <Run Text=" - " />
                                            <Run x:Uid="ImageResizer_Formatting_SelectedWidth" />
                                            <LineBreak />
                                            <Run FontWeight="Bold" Text="%4" />
                                            <Run Text=" - " />
                                            <Run x:Uid="ImageResizer_Formatting_SelectedHeight" />
                                            <LineBreak />
                                            <Run FontWeight="Bold" Text="%5" />
                                            <Run Text=" - " />
                                            <Run x:Uid="ImageResizer_Formatting_ActualWidth" />
                                            <LineBreak />
                                            <Run FontWeight="Bold" Text="%6" />
                                            <Run Text=" - " />
                                            <Run x:Uid="ImageResizer_Formatting_ActualHeight" />
                                        </TextBlock>
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
                        </StackPanel>
                    </tkcontrols:SettingsCard>

                    <tkcontrols:SettingsCard Name="ImageResizerFileModifiedDate" x:Uid="ImageResizer_FileModifiedDate">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.KeepDateModified, Mode=TwoWay, Converter={StaticResource ReverseBoolToComboBoxIndexConverter}}">
                            <ComboBoxItem x:Uid="ImageResizer_UseOriginalDate" />
                            <ComboBoxItem x:Uid="ImageResizer_UseResizeDate" />
                        </ComboBox>
                    </tkcontrols:SettingsCard>
                </controls:SettingsGroup>
            </StackPanel>

        </controls:SettingsPageControl.ModuleContent>

        <controls:SettingsPageControl.PrimaryLinks>
            <controls:PageLink x:Uid="LearnMore_ImageResizer" Link="https://aka.ms/PowerToysOverview_ImageResizer" />
        </controls:SettingsPageControl.PrimaryLinks>
        <controls:SettingsPageControl.SecondaryLinks>
            <controls:PageLink Link="https://github.com/bricelam/ImageResizer/" Text="Brice Lambson's ImageResizer" />
        </controls:SettingsPageControl.SecondaryLinks>
    </controls:SettingsPageControl>
</local:NavigablePage>