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

<Page
    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:CommunityToolkit.WinUI.Controls"
    xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
    xmlns:custom="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library"
    xmlns:toolkitconverters="using:CommunityToolkit.WinUI.UI.Converters"
    xmlns:ui="using:CommunityToolkit.WinUI"
    x:Name="RootPage"
    AutomationProperties.LandmarkType="Main"
    mc:Ignorable="d">
    <Page.Resources>
        <converters:ImageResizerFitToStringConverter x:Key="ImageResizerFitToStringConverter" />
        <converters:ImageResizerUnitToStringConverter x:Key="ImageResizerUnitToStringConverter" />
        <toolkitconverters:BoolToObjectConverter
            x:Key="BoolToComboBoxIndexConverter"
            FalseValue="1"
            TrueValue="0" />
    </Page.Resources>
    <custom:SettingsPageControl x:Uid="ImageResizer" ModuleImageSource="ms-appx:///Assets/Settings/Modules/ImageResizer.png">
        <custom:SettingsPageControl.ModuleContent>
            <StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <controls:SettingsCard
                    x:Uid="ImageResizer_EnableToggle"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/FluentIcons/FluentIconsImageResizer.png}"
                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured, Converter={StaticResource BoolNegationConverter}}">
                    <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
                </controls:SettingsCard>

                <InfoBar
                    x:Uid="GPO_IsSettingForced"
                    IsClosable="False"
                    IsOpen="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured}"
                    IsTabStop="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured}"
                    Severity="Informational" />

                <custom:SettingsGroup x:Uid="ImageResizer_CustomSizes" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                    <controls:SettingsCard x:Uid="ImageResizer_Presets" HeaderIcon="{ui:FontIcon Glyph=&#xE792;}">
                        <Button
                            x:Uid="ImageResizer_AddSizeButton"
                            Click="AddSizeButton_Click"
                            Style="{ThemeResource AccentButtonStyle}" />
                    </controls: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">
                                <controls:SettingsCard Header="{x:Bind Name, Mode=OneWay}">
                                    <controls:SettingsCard.Resources>
                                        <x:Double x:Key="SettingsCardLeftIndention">42</x:Double>
                                    </controls:SettingsCard.Resources>
                                    <controls: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}" />
                                            <TextBlock
                                                Margin="0,5,4,0"
                                                AutomationProperties.AccessibilityView="Raw"
                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                FontSize="10"
                                                Style="{ThemeResource SecondaryTextStyle}"
                                                Text="&#xE947;"
                                                Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
                                            <TextBlock
                                                Margin="0,0,4,0"
                                                FontWeight="SemiBold"
                                                Style="{ThemeResource SecondaryTextStyle}"
                                                Text="{x:Bind Height, Mode=OneWay}"
                                                Visibility="{x:Bind Path=EnableEtraBoxes, 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>
                                    </controls:SettingsCard.Description>
                                    <StackPanel
                                        Grid.Column="2"
                                        HorizontalAlignment="Right"
                                        Orientation="Horizontal"
                                        Spacing="8">
                                        <Button
                                            x:Uid="EditButton"
                                            Width="40"
                                            Height="36"
                                            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 Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

                                                        <ComboBox
                                                            x:Uid="ImageResizer_Fit"
                                                            Width="240"
                                                            HorizontalAlignment="Left"
                                                            SelectedIndex="{x:Bind Path=Fit, Mode=TwoWay}">
                                                            <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">
                                                            <NumberBox
                                                                x:Uid="ImageResizer_Width"
                                                                Width="116"
                                                                Minimum="0"
                                                                SpinButtonPlacementMode="Compact"
                                                                Value="{x:Bind Path=Width, Mode=TwoWay}" />

                                                            <NumberBox
                                                                x:Uid="ImageResizer_Height"
                                                                Width="116"
                                                                Minimum="0"
                                                                SpinButtonPlacementMode="Compact"
                                                                Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"
                                                                Value="{x:Bind Path=Height, Mode=TwoWay}" />

                                                        </StackPanel>
                                                        <ComboBox
                                                            x:Uid="ImageResizer_Size"
                                                            Width="240"
                                                            SelectedIndex="{Binding Path=Unit, Mode=TwoWay}">
                                                            <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:Name="RemoveButton"
                                            x:Uid="RemoveButton"
                                            Width="40"
                                            Height="36"
                                            Click="DeleteCustomSize"
                                            CommandParameter="{Binding Id}"
                                            Content="&#xE74D;"
                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                            Style="{StaticResource SubtleButtonStyle}">
                                            <ToolTipService.ToolTip>
                                                <TextBlock x:Uid="RemoveTooltip" />
                                            </ToolTipService.ToolTip>
                                        </Button>
                                    </StackPanel>
                                </controls:SettingsCard>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </custom:SettingsGroup>

                <custom:SettingsGroup x:Uid="Encoding" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                    <controls:SettingsCard x:Uid="ImageResizer_FallBackEncoderText">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=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>
                    </controls:SettingsCard>

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

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

                    <controls:SettingsCard x:Uid="ImageResizer_TIFFCompression">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.TiffCompressOption}">
                            <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>
                    </controls:SettingsCard>
                </custom:SettingsGroup>

                <custom:SettingsGroup x:Uid="File" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                    <controls:SettingsCard x:Uid="ImageResizer_FilenameFormatHeader">
                        <StackPanel Orientation="Horizontal" Spacing="4">
                            <TextBox
                                x:Uid="ImageResizer_FilenameFormatPlaceholder"
                                MinWidth="{StaticResource SettingActionControlMinWidth}"
                                Text="{x:Bind Mode=TwoWay, Path=ViewModel.FileName}" />
                            <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>
                    </controls:SettingsCard>

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

        </custom:SettingsPageControl.ModuleContent>

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