[Fluent UX] Image Resizer

[crutkas]

PowerToys should do its best to look like a system level integration. Image Resize is a great example of where we can be but needs a little bit more polish.

Latest Fluent Design concept by @niels9001

WinUi 2.6 (UWP) source code here: https://github.com/niels9001/imageresizerux

[bricelam]

My inspiration was always a multi-page task dialog. I'd mock up a UI using the TaskDialogIndirect function and copy the look into XAML. I hope that API gets a Fluent refresh too...

[zeealeid]

Here's my attempt!

Maybe make it resemble the UWP Photos app? :)

If multiple images are selected, maybe present them in a grid? :)

[crutkas]

Wow!!!!

[enricogior]

Here's my attempt!

Hard to make it any better than this!

[niels9001]

@zeealeid Looks stunning, love it <3!

@crutkas Can we use XAML Island for this feature as well? I'd be happy to start some XAML work to turn @zeealeid's concept into reality!

[crutkas]

We should be able to do it without even an island with WinUI 3. In theory settings will be same way

[crutkas]

If we do the work inside a 19h1 xaml island now, we could ship this at Build with winui3

[niels9001]

I made a working XAML proto based on @zeealeid's awesome UX concept. I made some changes to the proposed gridview.

Maybe a listview could show some relevant information such as filenames and the ability to de-select images? Additionally, information such as the original dimensions (and the new ones?) could be shown as well.

Light theme:

UX alignment with PowerRenamer?
It would be nice to have a common UX for these configuration/action windows within PowerToys. Since we're also working on bringing Fluent to the PowerRename powertoy (issue #1053), aligning the two might be useful?

XAML can be found in this repo. Happy to port the right stuff over once we have a working XAML Island project.

[mdtauk]

Where it says "Ignore the orientation of pictures" is this the equivalent of "Constraining Proportions", where width or height is set automatically to maintain the aspect ratio when entering a value?

[crutkas]

Where it says "Ignore the orientation of pictures" is this the equivalent of "Constraining Proportions", where width or height is set automatically to maintain the aspect ratio when entering a value?

think that is the actual verbiage there now. @bricelam would be able to verify

[bricelam]

Not exactly. You can’t “constrain” the values in the UI since every image may be a different aspect ratio. Instead it has Fill, Fit, and Stretch to maintain the original ratio, crop, or stretch.

Ignore orientations is for when you have several photos where some are landscape and some are portrait. If it’s checked and you specify 1024x768, the portrait ones will be 768x1024. If it’s not checked, they’ll be 576x768.

[hawkerm]

It'd be great as part of this improved UX to have an option/mode for interactive crop. I'm going through a bunch of photos from my camera now to optimize them for a digital picture frame. This means adjusting the aspect ratio of every photo and re-framing each image.

If I could set the resolution/settings for my final output, but then just speed through each image and move and resize a crop region with the fixed aspect ratio around to get the frame I want for that image and click next, that'd be great!

There's an Image Cropper component in the Windows Community Toolkit which could handle the UX for the crop.

[mdtauk]

@hawkerm IMO, this is starting to overlap the Photos app's capabilities. Image Resizer is a batch process for multiple selected images - unless you are proposing a batch crop operation - it may be better to keep the suggestions for batch processes, rather than something designed for single image selections.

[hawkerm]

@mdtauk this is still about batch processing. I want all the photos I've selected to have an aspect ration of 16:9 or in my case a specific size of 1280x800. However, if the image isn't already in the right aspect ratio and thus can't be scaled without some crop (or just an option to review all anyway),

I want to quickly just be able to 1) choose that crop - be it a segment slid out of the original photo or extracting a partial inner part of the photo, then 2) click next and have it automatically apply and scale and move to the next.

With Photos, I'd still have to 1) navigate to each photo, 2) hit the crop button, 3) select the aspect ratio (and I don't even get to see/choose what the actual pixel resolution of the output I'm making is there), and then 4) click the save button...

[niels9001]

I agree with @hawkerm on this one. Having some more features (like cropping) would be super nice.

The other day I wanted to crop desktop screenshots, so I could remove the taskbar. Had to do this manually, which was cumbersome.

I also want to propose a 'custom' variant: just a slider so I can make pictures 25% smaller. This is handy in situations where large images (such as my 4k resolution screenshots) are too big to share. Having a quick slider/UI to decrease the width manually without define exact pixel sizes (while keeping the aspect ratio) would be great.

[mdtauk]

@niels9001 In that case, the cropping interface from the toolkit would need to be reconsidered. You can't guarantee every image being cropped will be of the same size and aspect ratio.

The values for each edge should probably be referenced as a minus value.

Pixel values or percentages make the most sense.

Would there be a visualisation of what the new image sizes will be for the list of images about to be processed?

If a crop and resize operation is taking place at the same time, does the resized size chosen, affect the image before or after the crop?

[niels9001]

Yeah, it would require a lot of thinking. Not sure if this is in scope at all.

If we move towards WinUI with the ImageResizer UI, let's make sure we design a UI that can be extended later on with additional features.

[crutkas]

It'd be great as part of this improved UX to have an option/mode for interactive crop. I'm going through a bunch of photos from my camera now to optimize them for a digital picture frame. This means adjusting the aspect ratio of every photo and re-framing each image.

If I could set the resolution/settings for my final output, but then just speed through each image and move and resize a crop region with the fixed aspect ratio around to get the frame I want for that image and click next, that'd be great!

There's an Image Cropper component in the Windows Community Toolkit which could handle the UX for the crop.

Good idea but out of scope here for this issue . Please create a new issue.

[niels9001]

Here's an updated mock-up for ImageResizer based on my previous concept.

Would be nice if we can somehow predict what the new file size would be and preview that. This also takes into account that whatever changes you make (on the selected template) can be saved as a preset by ticking the CheckBox.

[zeealeid]

I'm in love with it. This looks great 👌

[crutkas]

I've been thinking about this for a bit. Should the list be on the left or right? I feel like the UX is flipped. Is there another spot we can point to for reference?

The main work here is left based, where most spots in the UX it is right based in Windows.

[niels9001]

I've been thinking about this for a bit. Should the list be on the left or right? I feel like the UX is flipped. Is there another spot we can point to for reference?

The main work here is left based, where most spots in the UX it is right based in Windows.

I think that makes sense. You mean something like the earlier concepts posted, right?

We can easily swap them around. I'm looking for a similiar example - only thing I can come up with are the properties panels in e.g. Blend, Visual Studio.
In a minimized state, we can hide the entire preview pane and only show the config bar.

[niels9001]

@niels9001 Have you found time to look at my input in your fork? Just curious.

This is currently not actively worked on due to WinUI limitations - I'll make sure to look at any outstanding PRs if we continue any work - seems like good suggestions to enhance. Might be useful to come up with a spec beforehand as well, to determine what additional (UX) features we'd like to enable.

[niels9001]

Here's my latest take on Image Resizer vNext. Mostly a UI refresh adopting W11 Fluent, while adding a new feature: the ability to easily tweak a preset and save it within the editor itself.

WinUi 2.6 (UWP) source code here: https://github.com/niels9001/imageresizerux

[niels9001]

@CleanCodeDeveloper Moving the WinUI discussing to this topic :).

1.0.1 seems ro solve quite some bugs, with 1.0.2 incoming according toTwitter. Also 1.1 should launch before July (based on the announcements made in the Community call and roadmap) so it might be nice to try to see if it holds up?

[CleanCodeDeveloper]

it might be nice to try to see if it holds up?

Okay, I'm in. Are the mockup up-to-date? There is one open PR in your repo (https://github.com/niels9001/imageresizerux).

I really like the simplicity of your latest mock up (#1053 (comment)) and would vote to implement it like this.

[niels9001]

it might be nice to try to see if it holds up?

Okay, I'm in. Are the mockup up-to-date? There is one open PR in your repo (https://github.com/niels9001/imageresizerux).

I really like the simplicity of your latest mock up (#1053 (comment)) and would vote to implement it like this.

Yup, that repo contains the latest code!

[CleanCodeDeveloper]

My idea was to add a ImageResizer.Logic and a ImageResizer.WinUI3 project. The logic project will contain the everything from the previous ImageresizerUI project except the UI/XAML stuff. Your mockups would be added to the WinUI3 project.

Not as easy as I thought it would be.

ImageResizer uses a lot of stuff from System.Windows.Media.Imaging (PresentationCore.dll)

There are a lot of changes regarding Encoders. We had separate encoders classes before

new BmpBitmapEncoder();
new GifBitmapEncoder();
new JpegBitmapEncoder();
new PngBitmapEncoder();
new TiffBitmapEncoder();
new WmpBitmapEncoder();

But now it is only BitmapEncoder which seems to be able to encode everything but the API is entirely different.

Other classes I badly miss are

TransformedBitmap();
BitmapMetadata();
BitmapSource();
CroppedBitmap();

My desperate attempt can be found here:
https://github.com/CleanCodeDeveloper/PowerToys/tree/imageresizer-winui3-migration

[bricelam]

+1 Switching from WPF to Windows.Graphics.Imaging is a big chunk of work. Especially given its async-only nature.

I also suspect we can get a significant perf improvement by using a custom SynchronizationContext since resizing is about 50% CPU and 50% I/O.

PowerToys/src/modules/imageresizer/ui/Models/ResizeBatch.cs

Lines 58 to 61 in 52709dd

	// TODO: If we ever switch to Windows.Graphics.Imaging, we can get a lot more throughput by using the async
	// APIs and a custom SynchronizationContext
	Parallel.ForEach(
	Files,

[niels9001]

Here's my latest take on Image Resizer vNext. Mostly a UI refresh adopting W11 Fluent, while adding a new feature: the ability to easily tweak a preset and save it within the editor itself.

WinUi 2.6 (UWP) source code here: https://github.com/niels9001/imageresizerux

As discussed, we might be able to pull this off by moving away from the deprecated ModernWPF to WpfUI. Will investigate.

[Jay-o-Way]

Not WinUi3?

[niels9001]

Not WinUi3?

That would require a rewrite - which for this app, is probably not worth it😣. I was able to come very close to the UI proposal in the OT with WpfUI.. which is mostly style changes only. If all things check out that should give us a way to modernize the look and feel of other WPF utilities (like ColorPicker and FancyZones) and bring them inline with the W11 look and feel.

[CleanCodeDeveloper]

I had a look into migrating Image Resizer to WinUi 3 but as niels said, this would be a rewrite and I did not had the time to do this so i gave up.

[niels9001]

This was done in: #26858