Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Experiment] OpacityMaskView #491

Open
wants to merge 31 commits into
base: main
Choose a base branch
from

Conversation

h82258652
Copy link

Addressing: #490
image

@niels9001
Copy link
Collaborator

@h82258652 Please run ApplyXamlStyling.ps1 in the root folder to apply Xaml Styler!

Comment on lines 62 to 74
Grid rootGrid = (Grid)GetTemplateChild(RootGridTemplateName);
ContentPresenter contentPresenter = (ContentPresenter)GetTemplateChild(ContentPresenterTemplateName);
Rectangle maskRectangle = (Rectangle)GetTemplateChild(MaskRectangleTemplateName);

_maskBrush = _compositor.CreateMaskBrush();
_maskBrush.Source = GetVisualBrush(contentPresenter);
_mask = GetVisualBrush(maskRectangle);
_maskBrush.Mask = OpacityMask is null ? null : _mask;

SpriteVisual redirectVisual = _compositor.CreateSpriteVisual();
redirectVisual.RelativeSizeAdjustment = Vector2.One;
redirectVisual.Brush = _maskBrush;
ElementCompositionPreview.SetElementChildVisual(rootGrid, redirectVisual);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be possible to apply any of this like we do for the AttachedCardShadow/AttachedShadow or UIElementExtensions.VisualFactory components in the Toolkit, so it's just an extension that can be applied to any element directly vs. a ContentControl?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@michael-hawker I don't think we can do this. Sergio created one like UIElementExtensions.OpacityMask in store, but the position of the redirectVisual is not aligned with the source control at some times. When this happens, we use a Border to wrap the content to fix. I think the one in the toolkit should be more generic.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds similar to what we have to do for the AttachedDropShadow at times. I think having specific requirements can be fine, it's just extensions are a lot easier to add into a design than having to add another layer of depth to the Visual Tree to all cases and setup the layout. It's probably a case of a templated control vs. a raw-element with the CardShadow too I'd imagine. What are your thoughts @Sergio0694?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: 👀 In review
Development

Successfully merging this pull request may close these issues.

4 participants