From 8cc8508138c714865b12e16f278787b5943d433c Mon Sep 17 00:00:00 2001 From: MikeHillberg <18429489+MikeHillberg@users.noreply.github.com> Date: Tue, 7 Jul 2020 10:56:29 -0700 Subject: [PATCH 1/4] Updates to CornerRadiusToThicknessConverter --- active/CornerRadius/CornerRadius.png | Bin 0 -> 3038 bytes .../CornerRadius/CornerRadiusToThickness2.md | 108 ++++++++++++++++++ active/CornerRadius/Thickness.png | Bin 0 -> 662 bytes 3 files changed, 108 insertions(+) create mode 100644 active/CornerRadius/CornerRadius.png create mode 100644 active/CornerRadius/CornerRadiusToThickness2.md create mode 100644 active/CornerRadius/Thickness.png diff --git a/active/CornerRadius/CornerRadius.png b/active/CornerRadius/CornerRadius.png new file mode 100644 index 0000000000000000000000000000000000000000..184f8f3945550f9a24e024a66ca2966f9c87fb71 GIT binary patch literal 3038 zcmb7G_ahr>7fuIiM5{)K($;6IJ*o&LDuSrmY73GWRb>fVca8(siu2H~g`E?+A?s*mMJoM%9JhAV@rN_qJ@#So zr?`h}$DVbg`Zo6?nA>}(gQ6n;qgXe-Plvh8eA<98_}vHUW6jjmH>w)mSi*IG9-tEv z-3Nw3r~gswj+uRc(`T5fa zw*upMsjddS+j3*^znp+PRePbXCbLPBEo7YZ*!H~L#Dw(+;ZI|+nTiN558jj>Ky-C) zFKs&vr$y^L&2t|*mTW$w&mDVluXVgHIwIy#jnA-anhQdr*3PDSZr&3 zM(|pyBEl~_XH!Z$II^m;@)7BBeFZ%KV=cYktE%=R77-e1<&RZF;PoO)VLido_X{&; zk>>eo)zx{=b9m{;KMV^rQ>A@WP96jnggZMslm1Yz`jd5UR%OJuqP^}Kn>i1HQCP2X zL&>b`a@*_uTe>y~#5*Oi(5lA9(rMOP>=Uae+~Y)h6|!ox32-Tkm)T1SA~mdIMX=cJ zc8x%QiU!fUv;BOdMwndyrtf|OF4bn+mhz^p(+#w<_v3w%JU0*G{++|_`WT7-7iRwm zoLN`Ed&2VRi%uCUulor7-sQm?pO&7wY#W6}%Ced1L=bL43eHN2waNSq`5a6i*!get z|Jg_23{t`m!V~k9LeN7ny5dYJe$iJ~*=S$#wVKH3*B?{RE)@Vx z;_)9DrFSREvPq<|Q`X6KX=WTC!lI+L&x=&nN9kw-hu10vWXB{%i#-zD#o3ZLCl?9g z;QUj0=56enFD5`G@xC)RNw(i5nVoT5VKqMCKy20KLL9~hr%JQAWMdXqj5W13w==r& ze)o>jlCMj3bhMH^5nS3_z+lIGFl$UhH7XOAJcmbeT7QFX_TP2WI~3@~2iSuiKR-Gu z&CKg}MSDa#aw)r;CFb?H{ydLDk%(~n!k`DF?d?(=lYh%|+tL}|s-vkP>2qME&#f%R zsVrT;sG*^vCc(CE)qa%T#N+}>&->EXx0Oc!eWcKSMTp-mrUq(bV?!gjwLd<4B+Y{b zDFU-|%+7S*Q=d;^7dOCB_8atVEIK(ILYtb*yG-;5 zQ9HM5{0+a}x(Tvo!uf|i%kIt1+oKI0|X&*AefpW97i z_w_BWYp#lC-W#yxTO3caK9-g>N9!LMkCtce{+5%jfWg4I_>A~Z3qQWcx@OcH!wAR8-cZKbs|3*+?a^7wG=-4yobe!F+W*U zQJ|_3yyxpFt*Kk>){&=HVAyQp6REwlRXjKYNzp%b(Q#S!B(%b1(4esxqL|tLE8Y{H zpH=3XLA@Q(JeA|srmWRBKp>kVFH7aY*%*1>Na1C*47zEF^6>4 zE2YJ*Syo<&KDPhTskmAp#bW-aWyCP_LaxESsQUWL9gL&1!jVD@gTumHHNES+=sPER z_eI0E=LEqQK>q#{s6V^adn04oJ4Z5#MBqHqq{UlyAiWE~u!ox;CM+m7wI<1cQ2wdo zpDCX-xhz2z(Nsu^TZjDI@4zkj54}>Z9)_(*qud~0VcPE4{3MIO=XS~}RP~SF1V`iz zBTgDs=LnZeF{&BFw^M187%z)z#l+E$l8+x>uZPAU%@> zI$|&=Z69Qtzmv2y*sZPg2D(yHqfxK}X`a@#`g)4)onsvX<+g$90Vq;0#@`BJg4Oh9$}9G9Q@iC_It2Q;1g-8M~!T9Y*aQQ_43E9S`h{tc{SRP4dMy zg>Ok^>Ng{z`V4dx+T>-N2&($RVhvDbcifgm>N(+BfuFD$b`JU-3vp8~boMYJ?rGLV z9j#dFu^o@t1@)oaOw{DePDqr~LG-m2g6gH01VRGy%+U0FjZAgR3#Pw5dB(@r%80r^S?7T13XEnhY2rU0i5$ zge z9dXs_-niqd;+x#YMy8It9zq=jElOgS_`>|qwl2VIJu*wYy4S`? See comments in Markdown for how to use this spec template + + +# Background + +_This spec updates the existing [CornerRadiusToThicknessConverter](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.Primitives.CornerRadiusToThicknessConverter) class with new filters._ + +WinUI has a [CornerRadius](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.CornerRadius) struct that's used to define the rounding the 4 corners of a box, and the [Thickness](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Thickness) struct that's used for defining the padding or margin around the 4 sides of a box. + +CornerRadius defines the radius length of the circle segment that's used to draw a rounded corner. For example the following uses 4 different radii for the 4 corners (the corners are listed in clockwise order starting from the top left corner): + +```xml + +``` + +![Corner radius example](./CornerRadius.png) + +Thickness defines 4 sides. For example the following uses 4 different values for the margins around a blue rectangle in a red box (the sides are listed in clockwise order starting from the left): + +```xml + + + +``` + +![Thickness example](./Thickness.png) + +For consistency it's useful to be able to build a Thickness out of components of a CornerRadius. For this reason the [CornerRadiusFilterConverter](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.Primitives.CornerRadiusFilterConverter) exists, which can be used in Xaml markup. That converter has a [CornerRadiusFilterKind](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.Primitives.CornerRadiusFilterKind) that lets you define which parts to pull out, what's being added in this spec is update to that enum to allow more parts to be pulled out. + +**Existing values:** +* FilterTopAndBottomFromLeft, +* FilterTopAndBottomFromRight, +* FilterLeftAndRightFromTop, +* FilterLeftAndRightFromBottom + +**New values:** +* FilterTopFromTopLeft, +* FilterTopFromTopRight, +* FilterRightFromTopRight, +* FilterRightFromBottomRight, +* FilterBottomFromBottomRight, +* FilterBottomFromBottomLeft, +* FilterLeftFromBottomLeft, +* FilterLeftFromTopLeft, + +The CornerRadiusFilterConverter is also updated with a new property -- Multiplier -- which is applied during the converstion. For example, setting this to -1 negates the value. + +# Examples + +This example creates a converter that creates a Thickness from a CornerRadius, where the Thickness is set to zeros except for its left, which uses the the left component of the corner's bottom/left, and then negates it. For example, this converts + +CornerRadius: `10, 20, 30, 40` + +Thickness: `-40, 0, 0, 0` + +```xml + +``` + +This converter can then be used elsewhere in Xaml: + +```xml + +``` + + +# API Notes + +| | | +| - | - | +| FilterTopFromTopLeft | Sets top from the top left corner | +| FilterTopFromTopRight | Sets the top from the top right corner | +| FilterRightFromTopRight | Sets the right from the top right corner | +| FilterRightFromBottomRight | Sets the right from the bottom right corner | +| FilterBottomFromBottomRight | Sets the bottom from the bottom right corner | +| FilterBottomFromBottomLeft | Sets the bottom from the bottom left corner | +| FilterLeftFromBottomLeft | Sets the left from the bottom left corner | +| FilterLeftFromTopLeft | Sets the left from the top left corner | + +# API Details + +```cs +[webhosthidden] +enum CornerRadiusToThicknessConverterKind +{ + FilterTopAndBottomFromLeft, + FilterTopAndBottomFromRight, + FilterLeftAndRightFromTop, + FilterLeftAndRightFromBottom, + + // New + FilterTopFromTopLeft, + FilterTopFromTopRight, + FilterRightFromTopRight, + FilterRightFromBottomRight, + FilterBottomFromBottomRight, + FilterBottomFromBottomLeft, + FilterLeftFromBottomLeft, + FilterLeftFromTopLeft, +}; +``` + diff --git a/active/CornerRadius/Thickness.png b/active/CornerRadius/Thickness.png new file mode 100644 index 0000000000000000000000000000000000000000..4cb9bd1a3aea01b1735dcbd7dc2fccaa5c2570f4 GIT binary patch literal 662 zcmeAS@N?(olHy`uVBq!ia0vp^hk2NRHFU#Rm4NHG=%xjQkeJ16rJ$YDu$^mSxl z*x1kgCy^D%=PdAuEM{Qf1M1>C%y>M1MG6B0leVXeV@O5Z+q;H*%?1Jtj@JMGZ&r4# zW7H7}OOv{@*-A^kc&+J!ZRhI_*?KKns3Juo5qLjnRn|kKs{@q@EF_)9VIrT|*B3Q@6`*;5Acz?`WqqA*N#xNz$Y`tcu z_UsNjU+GqMV~{_u#GC({I@873(_{)kLgd&FrlWl7iRbq;yalEu22WQ%mvv4FO#lFZ B{Y(G= literal 0 HcmV?d00001 From 0139432106133de55a0545906762e19dc96df116 Mon Sep 17 00:00:00 2001 From: MikeHillberg <18429489+MikeHillberg@users.noreply.github.com> Date: Wed, 8 Jul 2020 13:17:29 -0700 Subject: [PATCH 2/4] Updates --- active/CornerRadius/CornerRadiusToThickness2.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/active/CornerRadius/CornerRadiusToThickness2.md b/active/CornerRadius/CornerRadiusToThickness2.md index c585f02ac..9476e03f7 100644 --- a/active/CornerRadius/CornerRadiusToThickness2.md +++ b/active/CornerRadius/CornerRadiusToThickness2.md @@ -43,7 +43,7 @@ For consistency it's useful to be able to build a Thickness out of components of * FilterLeftFromBottomLeft, * FilterLeftFromTopLeft, -The CornerRadiusFilterConverter is also updated with a new property -- Multiplier -- which is applied during the converstion. For example, setting this to -1 negates the value. +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. # Examples From d1087ad4e261d904ceb38a0a8a217f8f96653f3b Mon Sep 17 00:00:00 2001 From: MikeHillberg <18429489+MikeHillberg@users.noreply.github.com> Date: Fri, 10 Jul 2020 17:30:36 -0700 Subject: [PATCH 3/4] Updates --- .../CornerRadius/CornerRadiusToThickness2.md | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/active/CornerRadius/CornerRadiusToThickness2.md b/active/CornerRadius/CornerRadiusToThickness2.md index 9476e03f7..3b08571ce 100644 --- a/active/CornerRadius/CornerRadiusToThickness2.md +++ b/active/CornerRadius/CornerRadiusToThickness2.md @@ -72,6 +72,22 @@ This converter can then be used elsewhere in Xaml: # API Notes +## CornerRadiusToThicknessConverter.Multiplier property + +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' +``` + +## CornerRadiusToThicknessConverterKind enum + +**New values:** + | | | | - | - | | FilterTopFromTopLeft | Sets top from the top left corner | @@ -83,9 +99,36 @@ This converter can then be used elsewhere in Xaml: | FilterLeftFromBottomLeft | Sets the left from the bottom left corner | | FilterLeftFromTopLeft | Sets the left from the top left corner | +**Existing values:** + +| | | +| - | - | +| FilterLeftAndRightFromBottom | | +| FilterLeftAndRightFromTop | | +| FilterTopAndBottomFromLeft | | +| FilterTopAndBottomFromRight | | + +https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.Primitives.CornerRadiusToThicknessConverterKind + + # API Details ```cs + +[webhosthidden] +[default_interface] +runtimeclass CornerRadiusToThicknessConverter : Windows.UI.Xaml.DependencyObject, Windows.UI.Xaml.Data.IValueConverter +{ + CornerRadiusToThicknessConverter(); + + CornerRadiusToThicknessConverterKind ConversionKind{ get; set; }; + static Windows.UI.Xaml.DependencyProperty ConversionKindProperty{ get; }; + + // ** New ** + Thickness Multiplier{ get; set; }; + static Windows.UI.Xaml.DependencyProperty MultiplierProperty{ get; }; +}; + [webhosthidden] enum CornerRadiusToThicknessConverterKind { From 8da6e7f0f49279e0a040203d155f42265d45fdbc Mon Sep 17 00:00:00 2001 From: MikeHillberg <18429489+MikeHillberg@users.noreply.github.com> Date: Mon, 13 Jul 2020 10:33:34 -0700 Subject: [PATCH 4/4] Updates --- active/CornerRadius/CornerRadiusToThickness2.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/active/CornerRadius/CornerRadiusToThickness2.md b/active/CornerRadius/CornerRadiusToThickness2.md index 3b08571ce..5b31a1b9a 100644 --- a/active/CornerRadius/CornerRadiusToThickness2.md +++ b/active/CornerRadius/CornerRadiusToThickness2.md @@ -1,5 +1,3 @@ -> See comments in Markdown for how to use this spec template - # Background