search

microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.34k stars 677 forks source link

Proposal: [RNW] Support BackfaceVisibility #2728

Open asklar opened 4 years ago

asklar commented 4 years ago

Needed for react-native-windows. This is supported by Comp but no way to set it via Xaml. Details here: https://github.com/microsoft/react-native-windows/issues/3538

StephenLPeters commented 4 years ago

@asklar do you know what the default for xaml is?

asklar commented 4 years ago

@StephenLPeters the default is to show the backface: image

codendone commented 4 years ago

@asklar Does it work if you set ElementCompositionPreview.GetElementVisual(element).BackfaceVisibility = CompositionBackfaceVisibility.Hidden?

asklar commented 4 years ago

@codendone I don't think we've tried that :) but it sounds like it should. Can we keep this open until we have a chance to validate this on the RNW side?

StephenLPeters commented 4 years ago

I'm not sure about the state of the NativeAnimatedModule but if it hasn't changed a lot since I worked on it this solution would clash with that. The animations use the XAML Facade properties which are not compatible with ECP.GetElementVisual.

asklar commented 4 years ago

Ok I got around to trying this - this won't work because an exception is thrown later on that says: Access denied. Calling TransformMatrix API is not allowed on this object at this time, as this object currently has the ElementCompositionPreview.GetElementVisual property in use.

So it seems like TransformMatrix isn't usable with ElementCompositionPreview.GetElementVisual

StephenLPeters commented 4 years ago

Ok I got around to trying this - this won't work because an exception is thrown later on that says: Access denied. Calling TransformMatrix API is not allowed on this object at this time, as this object currently has the ElementCompositionPreview.GetElementVisual property in use.

So it seems like TransformMatrix isn't usable with ElementCompositionPreview.GetElementVisual

@asklar This is expected, we should probably add BackfaceVisibility as a Facade so you don't have to access it via ECP, but until then are you able to achieve your look using more ECP properties instead of TransformMatrix which is incompatible with ECP?

asklar commented 4 years ago

@StephenLPeters thanks! Using ECP BackfaceVisibility with ECP TransformMatrix seems to not crash, which is a great first step :), but I'm not sure how we can use this though, considering that we use the transform façade property for animating rotations etc., so I think the path forward is for winui to implement a backfaceVisibility façade as you mentioned. Do you see another path forward in the meantime? Should we repurpose this issue to be about adding the backfaceVisibility façade in winui3?

StephenLPeters commented 4 years ago

In my opinion, RNW should either never use a facade or never use ECP. There are benefits and disadvantages to both, Facades are easier to use, they work better with the controls libraries which are also using them, and I think they have performance benefits as the xaml renderer can't make assumptions about a visual when ECP.GetVisual has been called. ECP has the benefit of being more fully featured, as you found out with the BackfaceVisibility.

As a hacky work around I think you could probably fake BackfaceVisibility by having 2 elements, one of which is rotated 180 degrees about the z axis so that its Backface is showing by default and then animating the parent of those two visuals so that a front face is always visible.