RoundImageEx Height Collapses in StackPanel

[michael-hawker]

Follow-up from PR #1373, if you place a RoundImageEx control in a StackPanel it behaves differently than an Image or ImageEx and is not shown at the full image height. It is instead truncated:

In the above, they were given 200 width in the parent container for images of 200x200 (no width/height given on the images themselves). ImageEx fills the available parent container size, but RoundImageEx instead is super tiny.

It's really if you compare this:

    <StackPanel x:Name="Container"
                Orientation="Vertical">
        <controls:RoundImageEx 
                                Source="/Assets/Photos/LunchBreak.jpg"
                                Stretch="UniformToFill"
                                />
    </StackPanel>    

to this:

    <StackPanel x:Name="Container"
                Orientation="Vertical">
        <controls:ImageEx
                                Source="/Assets/Photos/LunchBreak.jpg"
                                Stretch="UniformToFill"
                                />
    </StackPanel>    

You'll see they behave differently, though I'd expect RoundImageEx to be the same size as ImageEx and use the size of the parent container like Image/ImageEx does.

[hermitdave]

Strangely I can get it to horizontally stretch but not vertically.

[michael-hawker]

@hermitdave Yup, that's what I was seeing. I called it 'vertical truncation' sorry for the confusion.

I'd expect it to look like your first top image, just with rounded corners.

[hermitdave]

there are fundamental differences and I am not sure their behaviours can be made identical since underlyings are different. I will play with it further however the height is set to 52 which seems strange.. not sure where it is getting that.

[michael-hawker]

Yeah, It'd be nice if we could mimic things as well as we can. I did indeed notice there seems to be some odd clamp on the height value when none is specified.

I feel like the Image/ImageEx both stretch to the available container size width/height (depending on orientation aspect) while maintaining the image aspect ratio. If that's not possible currently with the RoundImageEx, then if we could at least use the image's native width/height if none are specified, I feel like that'd be an improvement?

[hermitdave]

Seems like the rectangle has the value of 52 and everything else just uses that. Going for Image's width / height is a can of worms. I am personally not a fan of RoundImageEx.. Wish XAML team rather introduced corner rounding option.

[michael-hawker]

Yeah, ideally, it'd work like it does in CSS with border-radius.

Since we're moving the min-version to 14393 and above, could we use a solution with the Compositor now? Then we can just use the ImageEx control as a base and apply an effect on top to clip the corners. @shweaver-MSFT you're familiar with the composition API, any thoughts on this?

[WilliamABradley]

@hermitdave @michael-hawker Yeah, it was a bit of a stop-gap solution to get rounding working for the ImageEx. It works well for predetermined sizes, such as User Images (Which is why I created it).
It was originally using an ellipse (hence RoundImageEx, but it now uses a Rectangle so not even the name makes sense.

Is it because of how the Image Control is implemented natively that cropping can't be done?

[hermitdave]

@michael-hawker @shweaver-MSFT @WilliamABradley

https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Composition.CompositionMaskBrush
Shows how to use Nine grid brush to provide rounded corners. I'll take a look it later tonight but feel free to play with it.

[hawkerm]

@WilliamABradley the UWP Clip property only supports RectangleGeometry unlike Silverlight/WPF which supported any Geometry. :(

@hermitdave that last example looks promising.

[michael-hawker]

@hermitdave I was playing with an RS3 insider build, and the CornerRadius property seems to be respected on the grid now...

      <Grid Width="200" Height="200" CornerRadius="999">
        <Image Source="http://lorempixel.com/200/200"/>
      </Grid>
      <controls:RoundImageEx Source="http://lorempixel.com/200/200" Width="200" Height="200" CornerRadius="999"/>

Not sure if there's one that works down-level, but certainly makes this easier in the future.

[hermitdave]

can you try test the same by changing the ImageEx XAML template ?

[michael-hawker]

@hermitdave makes sense. We can deprecate RoundImageEx and then just expose the CornerRadius for the Grid in the ImageEx template for 2.1 and make note that it only works in the Fall Creator's Update. Once that's our minimum target, we remove RoundImageEx.