New feature request for "CompositionImageFrame" control

Question

New feature request for "CompositionImageFrame" control

Closed this issue 8 years ago · 21 comments

Hi,

Firstly, I love your toolkit, and am currently using the fluid progress ring. I would like to request to add the following two features to the "CompositionImageFrame" control:

Rounded corners for the images
Backdrop/shadow for the image.

Plz check the screenshot below for sample of what I mean. I am currently doing rounded corner image by using a rectangle with rounded corners and setting its fill to image brush. For shadow, I have a separate control which draws shadow using Win2D.

Appreciate if you can add this in the next versions,

Answer 1 · 2016-08-15T14:09:49.000Z

@naweed thanks for your request.
Let me see if I can incorporate these features in the upcoming version(s).

Answer 2 · 2016-08-15T14:22:46.000Z

@ratishphilip Thank you very much for quick response. Plz let me know if you need anything from my side.

Answer 3 · 2016-08-17T10:45:58.000Z

Can I also suggest to enable caching of images in this control. Basically, the control should load the image from cache if possible.

I already have the logic which I am applying to Image and ImageBrush, as a dependency injection property. Let me know if you need it and I will share with you.

Thanks.

Answer 4 · 2016-08-18T22:17:07.000Z

@naweed
CornerRadius and Shadow features have been added to CompositionImageFrame. Check out the details here.

Answer 5 · 2016-08-19T06:19:49.000Z

Thank you very much. Really appreciate it.

From: Ratish Philip [mailto:notifications@github.com]
Sent: Friday, August 19, 2016 01:17 AM
To: ratishphilip/CompositionProToolkit CompositionProToolkit@noreply.github.com
Cc: Naweed Akram naweed@xgeno.com; Mention mention@noreply.github.com
Subject: Re: [ratishphilip/CompositionProToolkit] New feature request for "CompositionImageFrame" control (#3)

@naweed https://github.com/naweed
CornerRadius and Shadow features have been added to CompositionImageFrame. Check out the details here https://wpfspark.wordpress.com/2016/08/18/compositionprotoolkit-v0-4-2-released/ .

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub #3 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AAGWLC7MHQJd_LNkLwJKE4Ero-xKsy2yks5qhNnkgaJpZM4JkLJO . https://github.com/notifications/beacon/AAGWLP9vOrZ7vBC54j06RvbrIW6l4mQvks5qhNnkgaJpZM4JkLJO.gif

Answer 6 · 2016-08-25T00:24:09.000Z

@naweed
ImageCaching feature has now been incorporated into CompositionImageFrame and is enabled by default.

Answer 7 · 2016-08-28T08:16:18.000Z

Hi @ratishphilip
Thanks for all the changes. Really appreciated. They all work as expected.

However, I noticed that using the CompositionImageFrame in a GridView (in fact Composition APIs themselves in GridView) results in horrible performance. I will stay away from using composition in the GridView.

Thanks.

Answer 8 · 2016-08-28T15:59:55.000Z

You are welcome @naweed .

Are you on the latest CompositionProToolkit (v0.4.4.1)?

I tested out ImageFrame's in a GridView containing 100+ of them. Their performance was smooth. I tried scrolling fast too. There was no issue.

If you read my latest blog post you will know the changes I have made in the latest build.

Also, if you are in a scenario where using lots of ImageFrames, hosting small thumbnails, and rapid refreshing is required, you should use the following two properties of ImageFrame to speed up the performance

RenderFast - Setting this to true will turn off all animations within the ImageFrame and render the image faster.
RenderOptimized - When you are loading large images but displaying them as thumbnails, setting this property to true will reduce the memory footprint.

Answer 9 · 2016-08-28T17:16:34.000Z

Sure. Will try that.

Thanks.

Sent from BlueMail

On Aug 28, 2016, 19:00, at 19:00, Ratish Philip notifications@github.com wrote:

You are welcome @naweed .

Are you on the latest CompositionProToolkit (v0.4.4.1)?

I tested out ImageFrame's in a GridView containing 100+ of them.
Their performance was smooth. I tried scrolling fast too. There was no
issue.

If you read my latest blog
post
you will know the changes I have made in the latest build.

Also, if you are in a scenario where using lots of ImageFrames,
hosting small thumbnails, and rapid refreshing is required, you should
use the following two properties of ImageFrame to speed up the
performance

RenderFast - Setting this to true will turn off all
animations within the ImageFrame and render the image faster.

RenderOptimized - When you are loading large images but
displaying them as thumbnails, setting this property to true will
reduce the memory footprint.

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#3 (comment)

Answer 10 · 2016-08-30T07:36:32.000Z

Dear @ratishphilip Thanks for the update. I did try with the latest update v0.4.4.1 and using the RenderFast and RenderOptimized. I noticed a few things.

The memory usage jumped from 200 MB to 310 MB.
The scrolling was not exactly smooth. I tested it on a core i5 with 4 GB RAM and core i7 with 8 GB RAM. Same result. The scrolling was a bit sluggish.
The whole page didn't show until all the images were loaded. This seems to be the issue with async loading of images from cache.

Please see below for my original section vs. the new section for your reference.

Original:
 <RelativePanel x:Name="imgPoster" CornerRadius="8" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="#AA232323" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignTopWithPanel="True" RelativePanel.Above="pnlBottoomBar"> <Rectangle RadiusX="8" RadiusY="8" Opacity="0.8" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWithPanel="True"> <Rectangle.Fill> <ImageBrush Stretch="UniformToFill" fwExtensions:ImageExtensions.CachedSource="{Binding PosterImageLow}" /> </Rectangle.Fill> </Rectangle> </RelativePanel>

Replaced with:
 <cmpToolkit:ImageFrame x:Name="imgPoster" RenderFast="True" RenderOptimized="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="#AA232323" FrameBackground="#AA232323" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignTopWithPanel="True" RelativePanel.Above="pnlBottoomBar" BorderThickness="0" CornerRadius="8" DisplayShadow="True" ShadowBlurRadius="15" ShadowColor="#222222" ShadowOffsetX="10" ShadowOffsetY="10" ShadowOpacity="0.65" Stretch="UniformToFill" Source="{x:Bind PosterImageLow}" />

Answer 11 · 2016-08-30T12:31:31.000Z

Hi @naweed

The memory usage jumped from 200 MB to 310 MB

Did you check with a memory profiler to confirm it was the ImageFrame that was taking the extra memory? Also RenderOptimized=True works effectively when the ImageFrame size is very small compared to the actual image size. For eg image size is 1280x720 and ImageFrame size is 100x100.
Here you are setting the HorizontalAlignment and VerticalAlignment as Stretch. What is the size of the container hosting the ImageFrame?

The scrolling was not exactly smooth. I tested it on a core i5 with 4 GB RAM and core i7 with 8 GB RAM. Same result. The scrolling was a bit sluggish.

It depends on the kind of container you are hosting your ImageFrame(s). Does this container use virtualization?

The whole page didn't show until all the images were loaded. This seems to be the issue with async loading of images from cache.

It is not an issue with async. Set ShowPlaceholder="True", it will show you a placeholder with a scrollbar indicating that the images are being loaded. And since the images took a long time to render indicates that you might be loading some large images.

Answer 12 · 2016-09-01T06:14:57.000Z

Hi @ratishphilip
Sorry for the late reply. Plz see the answers below, and a new issue as well.

The actual image size is around 300x450 pixels (example URL: https://walter.trakt.us/images/shows/000/001/390/posters/thumb/93df9cd612.jpg). I am trying to confine it in a container of size 230x340. I am setting the vertical and horizontal alignment to stretch, as the container size is approximately 230x340, but I am using adaptive grid which resizes the grid items to span the whole width of the screen, and adjust the width and height accordingly. Plz see image below.
I am using the gridview in a hubsection (the hub is of vertical orientation). I asked around for whether gridview inside hub breaks virtualization or not, but didn't get a clear answer. My belief is that since the vertical hub has infinite width, the virtualization should be broken. But regardless, Using my original code keeps the scrolling smooth.
In 0.4.4.1, setting the ShowPlaceholder=True didn't work for me, but in 0.4.5, it works fine now.

New problem. I noticed, that even when setting the Stretch=UniformToFill doesn't work fine for me. See one example image below, which is showing with top and bottom bars in the image. The same when displayed in my original code (posted in above thread) shows it without the bars, and stretches it uniformly.

Here is the new code I am using:

`

                                <cmpToolkit:ImageFrame x:Name="imgPoster"
                                                       RenderFast="True"
                                                       RenderOptimized="True"
                                                       VerticalAlignment="Stretch" 
                                                       HorizontalAlignment="Stretch" 
                                                       Background="#AA232323"
                                                       FrameBackground="#AA232323"
                                                       RelativePanel.AlignLeftWithPanel="True"
                                                       RelativePanel.AlignRightWithPanel="True"
                                                       RelativePanel.AlignTopWithPanel="True"
                                                       RelativePanel.Above="pnlBottoomBar"
                                                       BorderThickness="0"
                                                       CornerRadius="8"
                                                       DisplayShadow="True"
                                                       ShadowBlurRadius="15"
                                                       ShadowColor="#131313"
                                                       ShadowOffsetX="10"
                                                       ShadowOffsetY="10"
                                                       ShadowOpacity="0.85"
                                                       Stretch="UniformToFill"
                                                       Source="{x:Bind PosterImageLow}"
                                                       PlaceholderBackground="#AA232323"
                                                       TransitionMode="FadeIn"
                                                       ShowPlaceholder="True" />

`

And the output looks like this:

Answer 13 · 2016-09-01T07:12:28.000Z

Hello, I am very busy at the moment, but reading and watching this amazing screenshot, I have to say (might be is implemented I do not know) that the shadows are always the same, so might be (of course it must be hard and complicated to develop) can be cached in someway and reused to free memory and processing?

Anyway the effort in this project is amazing the results that is obtaining are awesome. When I'm finished with my new app I will retake my other projects with this great components.

Answer 14 · 2016-09-01T16:42:25.000Z

@juanpaexpedite Sharing the shadow seems to be a brilliant idea. How did I miss it? :) Let me find out a way to cache it.

@naweed Is the black bars in top and bottom showing only for that image? or for the control in that position (irrespective of the image). I am pretty sure I have not made any changes to UniformToFill in v0.4.5.

Could you send me a link to that image?
Meanwhile I will check if caching the shadow helps to reduce the memory footprint.

Answer 15 · 2016-09-02T06:58:06.000Z

@ratishphilip This is only happening to 2 or 3 images (out of 100) and irrespective of the position.

This is the URL for the one highlighted in my screenshot:
https://walter.trakt.us/images/shows/000/001/398/posters/thumb/cb506c45bc.jpg

Answer 16 · 2016-09-02T11:42:16.000Z

@ratishphilip Btw, I noticed that if I remove the below line, the problem gets resolved. In my case, my actual image size and the container size is more or less same, so I am switching it off for now.

RenderOptimized="True"

Answer 17 · 2016-09-02T12:45:29.000Z

RenderOptimized="True" is effective only if you know that

your image container size is very small w.r.t. the original image size
your container size doesn't change - if it changes, ImageFrame recalculates the best image size that can fit the container and changes the size of its ImageSurface accordingly. If RenderOptimized="False", this overhead does not happen as it is automatically handled by Composition's SurfaceBrush.

I had forgotten you had mentioned this

I am trying to confine it in a container of size 230x340. I am setting the vertical and horizontal alignment to stretch, as the container size is approximately 230x340, but I am using adaptive grid which resizes the grid items to span the whole width of the screen, and adjust the width and height accordingly.

In my case, my actual image size and the container size is more or less same,

Its better to switch off RenderOptimized for this scenario.

Answer 18 · 2016-09-02T13:08:19.000Z

Thanks @ratishphilip

Did that, and it works like a charm now.

Answer 19 · 2016-09-02T13:40:45.000Z

@naweed it seems it was a bug afterall.

I reproduced your issue here.
It seems, in RenderOptimized="True" mode, the Stretch and alignment properties of Image Options were not being correctly updated.

Fixed it.

Also, I have now added the option to share shadows among the ImageFrames. With this option enabled, I do see a reduction in memory footprint.

The image options fix along with the option to share shadows will be available in the next release.

Answer 20 · 2016-09-02T13:46:34.000Z

@ratishphilip
Thank you sir.

Meanwhile, I might request some new controls in future to be added to the library. Basically, I am not good at all with composition APIs, hence these requests.

Thanks for all your help.

Answer 21 · 2016-09-02T13:49:13.000Z

Your requests and suggestions are always welcome.

I will try my best to accommodate them.