Updates to CornerRadiusToThicknessConverter for more filters#90
Updates to CornerRadiusToThicknessConverter for more filters#90MikeHillberg wants to merge 4 commits into
Conversation
marcelwgn
left a comment
marcelwgn
left a comment
There was a problem hiding this comment.
This seems good too me.
| Margin="100" | ||
| Fill="Red" | ||
| Data="M4 0 L4 4 L0 4 A4,4 90 0 0 4 0 Z" /> | ||
| ``` |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Good point, the example should show something when simply copy pasted. Fun fact, the path renders this kind of shape (the black part):
There was a problem hiding this comment.
Recommend: everything should be copy/paste-able.
| Margin="{Binding Source={ThemeResource OverlayCornerRadius}, | ||
| Converter={StaticResource CornerRadiusToThickness1}}" | ||
| Height="100" | ||
| Margin="100" |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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) |
| 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' |
There was a problem hiding this comment.
TYPO: Multiplier.
Also, I believe XML style is to remove spaces around the = sign.
3 participants
No description provided.