CornerRadius related APIs #48
Conversation
* Add CornerRadiusFilterConverter api doc * Apply suggestions from code review Co-Authored-By: Yulia Klein <[email protected]> * Spec formatting/info updates (#46) More background info, reorder sections, use ControlTemplate for the example code. * Added enum property * Add attached property spec * cr feedback * Combined specs and added some background
|
|
||
| But there are cases where the ControlTemplate needs to get only some of the components out of the CornerRadius struct, for example the top left and right corners, in order to have a rounded top and a square bottom. There's no way to create a TemplateBinding to a struct field, so you can't bind to CornerRadius.TopLeft. | ||
|
|
||
| For example when CommandBarFlyout opens up its secondary menu, primary and secondary menus are clipped together we need to clear rounded corners on bottom of primary menu and top of secondary menu to close the gaps. The following shows circles on the rounded corners and squares on the squared corners: |
There was a problem hiding this comment.
Lots of inside baseball in this paragraph. I think this translates into
For example, when the CommandBarFlyout opens up its secondary menu, the secondary menu is placed adjacent to the primary menu. To make the secondary menu appear to be an extension of the primary menu, we need to remove the rounded corners from the bottom of the primary menu and the top of the secondary menu (green squares). On the other hand, the top corners of the primary menu and bottom corners of the secondary menu remain rounded (red circles).
|
|
||
|  | ||
|
|
||
| The solution in this spec is a stock IValueConverter that can be used with the TemplateBinding to extract fields out of the struct. |
There was a problem hiding this comment.
"extract fields out of the struct" is confusing, because it sounds like it's a converter that takes a CornerRadius and returns the value of a specific field. Perhaps
This spec provides a
CornerRadiusFilterConverterwhich retains the corner radius on selected corners, while converting the other corners to square corners. For example, settingFilter="Top"causes theCornerRadiusFilterto preserve the corner radius for theTopLeftandTopRightcorners, while setting theBottomLeftandBottomRightcorner radii to zero, thereby making them square.
| # Description | ||
|
|
||
| ## CornerRadiusFilterConverter class | ||
| Use the CornerRadiusFilterConverter with a Binding or TemplateBinding to create a new CornerRadius struct from an existing one, extracting only some of the fields, leaving the others zero. |
There was a problem hiding this comment.
I think "extracting" should be "preserving". The word "extracting" suggests that the value is "extracted from" the source, and treated as the extracted value. E.g.
Height="{Binding CornerRadius, Converter={StaticResource TopLeftCornerFilter}}"This takes the CornerRadius, extracts the top left corner (producing a Double) and sets that as the Height.
But that's not what this does. This takes the extracted values, then re-creates a new CornerRadius from them.
| Use the CornerRadiusFilterConverter with a Binding or TemplateBinding to create a new CornerRadius struct from an existing one, extracting only some of the fields, leaving the others zero. | ||
|
|
||
| ## AutoSuggestBoxHelper/ComboBoxHelper KeepInteriorCornersSquare property | ||
| Set this property on an AutoSuggestBox/ComboBox to keep the interior corners square, even if the CornerRadius property is non zero. |
There was a problem hiding this comment.
Took me a while to figure out that the "interior corners" are the bottom corners of the fixed portion + the top corners of the dropdown portion. May want state this explicitly.
If the AutoSuggestBox/ComboBox
KeepInteriorCornersSquareproperty isTrue, then the bottom corners of the fixed portion of the control and the top corners of the drop-down list are made square, even if theCornerRadiusproperty is nonzero.
| Top, | ||
| Right, | ||
| Left, | ||
| Bottom |
There was a problem hiding this comment.
Wouldn't this be better as
[webhosthidden]
[flags]
public enum CornerRadiusFilterCorners
{
TopLeft = 0x0001,
TopRight = 0x0002,
BottomLeft = 0x0004,
BottomRight = 0x0008,
Top = TopLeft | TopRight,
Left = TopLeft | BottomLeft,
Bottom = BottomLeft | BottomRight,
Right = TopRight | BottomRight,
}That would let met write not only
<CornerRadiusFilterConverter Corners="Top" x:Name="TopCornerFilter" />but also
<CornerRadiusFilterConverter Corners="TopLeft,TopRight,BottomRight" x:Name="CartoonBalloonCornerFilter" />
<CornerRadiusFilterConverter Corners="TopLeft,BottomRight" x:Name="TiaaLogoCornerFilter" />
There was a problem hiding this comment.
We saw some issues that values like "TopLeft,TopRight,BottomRight" are not evaluated correctly in CX app. (See this comment microsoft/microsoft-ui-xaml#1252 (comment).) So we can't really do this right now. I've filed a bug on markup.
No description provided.