PowerToys/src/settings-ui/Microsoft.PowerToys.Settings.UI/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:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"    
    xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library"
    xmlns:viewModels="using:Microsoft.PowerToys.Settings.UI.Library.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" 
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    AutomationProperties.LandmarkType="Main">

    <Page.Resources>
        <!--<viewModel:ImageResizerViewModel x:Key="ViewModel"/>-->
    </Page.Resources>

    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LayoutVisualStates">
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="SmallLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                        <Setter Target="SidePanel.Width" Value="Auto"/>
                        <Setter Target="ImageResizerView.(Grid.Row)" Value="1" />
                        <Setter Target="ImageResizerView.Margin" Value="0" />
                        <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                        <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                        <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
                        <Setter Target="AboutTitle.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Vertical" x:Name="ImageResizerView"
                    Margin="0,0,48,0">

            <ToggleSwitch x:Uid="ImageResizer_EnableToggle"
                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>

            <TextBlock x:Uid="ImageResizer_CustomSizes"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>

            <ListView x:Name="ImagesSizesListView" 
                      x:Uid="ImagesSizesListView"
                      ItemsSource="{x:Bind ViewModel.Sizes, Mode=TwoWay}"
                      Padding="0,0,0,24"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                      SelectionMode="None"
                      ScrollViewer.HorizontalScrollMode="Enabled"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      ScrollViewer.IsHorizontalRailEnabled="True"
                      ContainerContentChanging="ImagesSizesListView_ContainerContentChanging">

                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                        <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}"/>
                        <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}"/>
                        <Setter Property="TabNavigation" Value="Local"/>
                        <Setter Property="IsHoldingEnabled" Value="True"/>
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="VerticalContentAlignment" Value="Center"/>
                        <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
                        <Setter Property="MinHeight" Value="0"/>
                        <Setter Property="AllowDrop" Value="False"/>
                        <Setter Property="UseSystemFocusVisuals" Value="True"/>
                        <Setter Property="FocusVisualMargin" Value="0"/>
                        <Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}"/>
                        <Setter Property="FocusVisualPrimaryThickness" Value="2"/>
                        <Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}"/>
                        <Setter Property="FocusVisualSecondaryThickness" Value="1"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListViewItem">
                                    <ListViewItemPresenter 
                                        CheckBrush="{ThemeResource ListViewItemCheckBrush}" 
                                        ContentMargin="{TemplateBinding Padding}" 
                                        CheckMode="{ThemeResource ListViewItemCheckMode}" 
                                        ContentTransitions="{TemplateBinding ContentTransitions}" 
                                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}" 
                                        DragForeground="{ThemeResource ListViewItemDragForeground}" 
                                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                                        DragBackground="{ThemeResource ListViewItemDragBackground}" 
                                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                                        FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}" 
                                        FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}" 
                                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}" 
                                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}" 
                                        FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}" 
                                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}" 
                                        FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}" 
                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                        Control.IsTemplateFocusTarget="True" 
                                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}" 
                                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}" 
                                        PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}" 
                                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}" 
                                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}" 
                                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}" 
                                        SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}" 
                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:Name="SingleLineDataTemplate" x:DataType="models:ImageSize" >
                        <StackPanel Name="ImageResizer_Configurations" x:Uid="ImageResizer_Configurations" Orientation="Horizontal" Padding="0" Spacing="4">
                            <TextBox Name="ImageResizer_Name"
                                     x:Uid="ImageResizer_Name"
                                     Text="{x:Bind Path=Name, Mode=TwoWay}" 
                                     Width="90"
                                     VerticalAlignment="Center"
                                     Margin="{StaticResource SmallTopMargin}"/>

                            <ComboBox Name="ImageResizer_Fit_Property"
                                      x:Uid="ImageResizer_Fit_Property"
                                      SelectedIndex="{x:Bind Path=Fit, Mode=TwoWay}"
                                      Width="90"
                                      VerticalAlignment="Center"
                                      Margin="{StaticResource SmallTopMargin}">
                                <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fill" />
                                <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fit" />
                                <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Stretch" />
                            </ComboBox>

                            <muxc:NumberBox Name="ImageResizer_Width_Property"
                                            x:Uid="ImageResizer_Width_Property"
                                            Value="{x:Bind Path=Width, Mode=TwoWay}" 
                                            Minimum="0"
                                            MinWidth="68"
                                            SpinButtonPlacementMode="Compact"
                                            VerticalAlignment="Center"
                                            Margin="{StaticResource SmallTopMargin}"/>

                            <TextBlock Name="ImageResizer_Times_Symbol"
                                       x:Uid="ImageResizer_Times_Symbol"
                                       Text="&#xE711;"
                                       FontFamily="Segoe MDL2 Assets"
                                       TextAlignment="Center"
                                       VerticalAlignment="Center"
                                       Margin="{StaticResource SmallTopMargin}" 
                                       Opacity="{x:Bind Path=ExtraBoxOpacity, Mode=OneWay}"                                    
                                       Width="25"/>

                            <muxc:NumberBox Name="ImageResizer_Height_Property"
                                            x:Uid="ImageResizer_Height_Property"
                                            Value="{x:Bind Path=Height, Mode=TwoWay}" 
                                            MinWidth="68"
                                            Minimum="0"
                                            VerticalAlignment="Center"
                                            SpinButtonPlacementMode="Compact"
                                            Opacity="{x:Bind Path=ExtraBoxOpacity, Mode=OneWay}"
                                            IsEnabled="{x:Bind Path=EnableEtraBoxes, Mode=OneWay}"
                                            Margin="{StaticResource SmallTopMargin}"/>

                            <ComboBox Name="ImageResizer_Size_Property"
                                      x:Uid="ImageResizer_Size_Property"
                                      SelectedIndex="{Binding Path=Unit, Mode=TwoWay}"
                                      MinWidth="120"
                                      VerticalAlignment="Center"
                                      Margin="{StaticResource SmallTopMargin}">
                                <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>
                            <Button x:Name="RemoveButton"
                                    x:Uid="RemoveButton"
                                    Background="Transparent"
                                    FontFamily="Segoe MDL2 Assets"
                                    Width="34"
                                    Content="&#xE74D;"
                                    VerticalAlignment="Center"
                                    Margin="{StaticResource SmallTopMargin}" 
                                    UseLayoutRounding="False"
                                    Click="DeleteCustomSize"
                                    CommandParameter="{Binding Id}">
                                <ToolTipService.ToolTip>
                                    <TextBlock x:Uid="RemoveTooltip"/>
                                </ToolTipService.ToolTip>
                            </Button>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>


            <StackPanel Orientation="Horizontal">
                <AppBarButton Icon="Add"
                              x:Name="AddSizeButton"
                              Style="{StaticResource AddItemAppBarButtonStyle}"
                              IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" 
                              x:Uid="ImageResizer_AddSizeButton"
                              Click="AddSizeButton_Click"
                              Margin="{StaticResource AddItemButtonMargin}"
                              
                          />
            </StackPanel>

            <TextBlock x:Uid="Encoding"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>

            <ComboBox x:Uid="ImageResizer_FallBackEncoderText"
                          SelectedIndex="{x:Bind Path=ViewModel.Encoder, Mode=TwoWay}"
                          MinWidth="240"
                          Margin="{StaticResource SmallTopMargin}"
                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                <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>

            <muxc:NumberBox x:Uid="ImageResizer_Encoding"
                            Minimum="0"
                            Maximum="100"
                            Value="{x:Bind Mode=TwoWay, Path=ViewModel.JPEGQualityLevel}"
                            MinWidth="240"
                            Margin="{StaticResource SmallTopMargin}"
                            SpinButtonPlacementMode="Compact"
                            HorizontalAlignment="Left"
                            IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                            AutomationProperties.LabeledBy="{Binding ElementName=ImageResizer_Encoding}"
                            />

            <ComboBox x:Uid="ImageResizer_PNGInterlacing"
                          SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.PngInterlaceOption}"
                          MinWidth="240"
                          Margin="{StaticResource SmallTopMargin}"
                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                <ComboBoxItem x:Uid="Default"/>
                <ComboBoxItem x:Uid="On"/>
                <ComboBoxItem x:Uid="Off"/>
            </ComboBox>

            <ComboBox x:Uid="ImageResizer_TIFFCompression"
                          SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.TiffCompressOption}"
                          MinWidth="240"
                          Margin="{StaticResource SmallTopMargin}"
                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                <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>

            <TextBlock x:Uid="File"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>

            <TextBox Text="{x:Bind Mode=TwoWay, Path=ViewModel.FileName}"
                      HorizontalAlignment="Left"
                      MinWidth="240"
                      x:Uid="ImageResizer_FilenameFormatPlaceholder"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                      Margin="{StaticResource SmallTopMargin}"
                      AutomationProperties.LabeledBy="{Binding ElementName=ImageResizer_FilenameFormatHeader}"
                      AutomationProperties.HelpText="{Binding ElementName=FileFormatTextBlock, Path=Text}"
                     >
                <TextBox.Header>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Name="ImageResizer_FilenameFormatHeader"
                            x:Uid="ImageResizer_FilenameFormatHeader"
                            Margin="0,0,0,0"
                            Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
                        <TextBlock Text="&#xE946;"
                           FontFamily="Segoe MDL2 Assets"
                           Margin="4,4,0,0"/>
                    </StackPanel>
                </TextBox.Header>
                <ToolTipService.ToolTip>
                    <TextBlock x:Name="FileFormatTextBlock">
                        <Run x:Uid="ImageResizer_FileFormatDescription"/>
                        <LineBreak/>
                        <LineBreak/>
                        <Run Text="%1" FontWeight="Bold" />
                        <Run Text=" - "/>
                        <Run x:Uid="ImageResizer_Formatting_Filename" />
                        <LineBreak/>
                        <Run Text="%2" FontWeight="Bold" />
                        <Run Text=" - "/>
                        <Run x:Uid="ImageResizer_Formatting_Sizename"/>
                        <LineBreak/>
                        <Run Text="%3" FontWeight="Bold" />
                        <Run Text=" - "/>
                        <Run x:Uid="ImageResizer_Formatting_SelectedWidth"/>
                        <LineBreak/>
                        <Run Text="%4" FontWeight="Bold" />
                        <Run Text=" - "/>
                        <Run x:Uid="ImageResizer_Formatting_SelectedHeight"/>
                        <LineBreak/>
                        <Run Text="%5" FontWeight="Bold" />
                        <Run Text=" - "/>
                        <Run x:Uid="ImageResizer_Formatting_ActualWidth"/>
                        <LineBreak/>
                        <Run Text="%6" FontWeight="Bold" />
                        <Run Text=" - "/>
                        <Run x:Uid="ImageResizer_Formatting_ActualHeight"/>
                    </TextBlock>
                </ToolTipService.ToolTip>
            </TextBox>

            <CheckBox x:Uid="ImageResizer_UseOriginalDate"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.KeepDateModified}"/>
        </StackPanel>

        <RelativePanel x:Name="SidePanel" 
                    HorizontalAlignment="Left"
                    Width="{StaticResource SidePanelWidth}"
                    Grid.Column="1">
            <StackPanel x:Name="DescriptionPanel">
                <TextBlock x:Uid="About_ImageResizer" x:Name="AboutTitle" Grid.ColumnSpan="2"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Margin="{StaticResource XSmallBottomMargin}"/>
                <TextBlock x:Uid="ImageResizer_Description"
                           TextWrapping="Wrap"
                           Grid.Row="1" />
            </StackPanel>

            <Border x:Name="AboutImage"
                    CornerRadius="4"
                    Grid.Row="2"
                    MaxWidth="240"
                    HorizontalAlignment="Left"
                    Margin="{StaticResource SmallTopBottomMargin}"
                    RelativePanel.Below="DescriptionPanel">
                <HyperlinkButton x:Uid="ImageResizer_ImageHyperlinkToDocs">
                    <Image x:Uid="ImageResizer_Image" Source="ms-appx:///Assets/Modules/ImageResizer.png" />
                </HyperlinkButton>
            </Border>

            <StackPanel x:Name="LinksPanel"
                        Margin="0,1,0,0"
                        RelativePanel.Below="AboutImage"
                        Orientation="Vertical" >
                <HyperlinkButton x:Uid="ImageResizer_ImageHyperlinkToDocs">
                    <TextBlock x:Uid="Module_overview" />
                </HyperlinkButton>
                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
                    <TextBlock x:Uid="Give_Feedback" />
                </HyperlinkButton>

                <TextBlock 
                x:Uid="AttributionTitle"
                Style="{StaticResource SettingsGroupTitleStyle}"/>

                <HyperlinkButton Margin="0,-3,0,0"
                NavigateUri="https://github.com/bricelam/ImageResizer/">
                    <TextBlock Text="Brice Lambson's ImageResizer" TextWrapping="Wrap" />
                </HyperlinkButton>
            </StackPanel>
        </RelativePanel>
    </Grid>
</Page>