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

Updates to CornerRadiusToThicknessConverter for more filters #90

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

MikeHillberg
Copy link
Contributor

No description provided.

Copy link
Contributor

@marcelwgn marcelwgn left a comment

Choose a reason for hiding this comment

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

This seems good too me.

active/CornerRadius/CornerRadiusToThickness2.md Outdated Show resolved Hide resolved
Margin="100"
Fill="Red"
Data="M4 0 L4 4 L0 4 A4,4 90 0 0 4 0 Z" />
```
Copy link
Member

Choose a reason for hiding this comment

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

Would like to see the results of this example. I tried pasting this into a test app and saw nothing because there is no stroke thickness or brush, and because I'm not sure what "M4 0 ..." produces. A labeled illustration would help.

Copy link
Contributor

@marcelwgn marcelwgn Jul 21, 2020

Choose a reason for hiding this comment

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

Good point, the example should show something when simply copy pasted. Fun fact, the path renders this kind of shape (the black part):

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Recommend: everything should be copy/paste-able.

Margin="{Binding Source={ThemeResource OverlayCornerRadius},
Converter={StaticResource CornerRadiusToThickness1}}"
Height="100"
Margin="100"
Copy link
Member

Choose a reason for hiding this comment

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

TYPO: Margin being set twice.

* FilterLeftFromBottomLeft,
* FilterLeftFromTopLeft,

The CornerRadiusFilterConverter is also updated with a new property -- Multiplier -- which is applied during the conversion. For example, setting this to -1 negates the value.
Copy link
Member

Choose a reason for hiding this comment

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

I'm having trouble understanding the scenario for a negative multiplier. I tried

                    <StackPanel Orientation="Horizontal" Padding="50,0,0,0">
                        <Rectangle Height="50" Width="50" Fill="White"/>
                        <Border BorderBrush="White" BorderThickness="2" CornerRadius="30" Margin="-30">
                            <Rectangle Height="200" Width="200" Fill="Red" Opacity="0.5"/>
                        </Border>
                        <Rectangle Height="50" Width="50" Fill="White"/>
                    </StackPanel>

in a test app and the result didn't make sense.

image

Copy link
Contributor

Choose a reason for hiding this comment

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

For once, a (hacky) use case, where this spec is also coming from is the inset corner radii of the WinUI TabView control: microsoft/microsoft-ui-xaml#2201

What negative margin does (from my understanding) is the following: If you have content, the width and height is calculated based on the available size, and the margin. If a control has 200px * 200px, and 50px margin, then it will render with an actual size of 100px * 100px. So with negative margin, the space used for rendering is 200px - (-50px + -50px) = 300px, making it render with a width and height of 300px. Since the control has a fixed position and "available size", it starts to render out of those bounds, extending into other content.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Recommend: add some high level explanation about how the paths are using negative margins to extend out to the left and right


Type: [Thickness](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Thickness)

Multiplied to the value in the target Thickness. Defaults to (1,1,1,1)
Copy link
Member

Choose a reason for hiding this comment

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

TYPO: "Multiplied by"

This multiplier is a Thickness with left/top/right/bottom values, which are applied to the matching fields in the target. Note that in Xaml markup you can specify a single number and it's set to all 4 fields. For example the following sets the Multipler to (-1, -1, -1, -1):

```xml
Multipler = '-1'
Copy link
Member

Choose a reason for hiding this comment

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

TYPO: Multiplier.

Also, I believe XML style is to remove spaces around the = sign.

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

Successfully merging this pull request may close these issues.

3 participants