Skip to content

[Core] Fix Border margin issue #14402

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Apr 20, 2023
+54 −0
Merged

[Core] Fix Border margin issue #14402

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e9c2d2d
Fox Border margin issue
jsuarezruiz Apr 4, 2023
85fd6f8
Auto-format source code
Apr 5, 2023
dbdd371
Merge branch 'main' into fix-7764
jsuarezruiz Apr 10, 2023
e617a3e
Merge branch 'main' into fix-7764
jsuarezruiz Apr 12, 2023
ecd832a
Merge branch 'main' into fix-7764
jsuarezruiz Apr 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/Controls/samples/Controls.Sample/Pages/Core/BorderGalleries/BorderPage.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ public BorderPage()
GalleryBuilder.NavButton("Border using Content Layout", () =>
new BorderLayout(), Navigation),
GalleryBuilder.NavButton("Border Stroke options", () =>
new BorderStroke(), Navigation),
new BorderStroke(), Navigation),
GalleryBuilder.NavButton("Border without Stroke", () =>
new Borderless(), Navigation),
}
}
};
Expand Down
30 changes: 30 additions & 0 deletions src/Controls/samples/Controls.Sample/Pages/Core/BorderGalleries/Borderless.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Maui.Controls.Sample.Pages.Borderless"
BackgroundColor="Yellow"
Title="Border without Stroke">
<ContentPage.Resources>
<ResourceDictionary>

<Style x:Key="BorderlessStyle" TargetType="Border">
<Setter Property="StrokeThickness" Value="0" />
</Style>

</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid
RowDefinitions="*,*"
RowSpacing="0">
<Border
Background="Pink"
Style="{StaticResource BorderlessStyle}" />
<Border
Grid.Row="1"
Background="Red"
Style="{StaticResource BorderlessStyle}" />
</Grid>
</ContentPage.Content>
</ContentPage>
12 changes: 12 additions & 0 deletions src/Controls/samples/Controls.Sample/Pages/Core/BorderGalleries/Borderless.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
using Microsoft.Maui.Controls;

namespace Maui.Controls.Sample.Pages
{
public partial class Borderless : ContentPage
{
public Borderless()
{
InitializeComponent();
}
}
}
10 changes: 10 additions & 0 deletions src/Controls/src/Core/Border.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,8 @@ protected override void OnPropertyChanged([CallerMemberName] string? propertyNam
propertyName == WidthProperty.PropertyName ||
propertyName == StrokeShapeProperty.PropertyName)
Handler?.UpdateValue(nameof(IBorderStroke.Shape));
else if (propertyName == StrokeThicknessProperty.PropertyName)
UpdateStrokeShape();
else if (propertyName == StrokeDashArrayProperty.PropertyName)
Handler?.UpdateValue(nameof(IBorderStroke.StrokeDashPattern));
}
Expand All @@ -312,5 +314,13 @@ void OnStrokeDashArrayChanged(object? sender, NotifyCollectionChangedEventArgs e
{
Handler?.UpdateValue(nameof(IBorderStroke.StrokeDashPattern));
}

void UpdateStrokeShape()
Copy link
Contributor Author

@jsuarezruiz jsuarezruiz Apr 5, 2023

Choose a reason for hiding this comment

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

When using a Shape in the StrokeShape property, we didn't have the StrokeTickness mapped from the Border to the Shape.

{
if (StrokeShape is Shape strokeShape)
{
strokeShape.StrokeThickness = StrokeThickness;
Copy link
Contributor Author

@jsuarezruiz jsuarezruiz Apr 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

#3558

StrokeShape "only" needs the information to define the Shape to use for the border and to clip the content. It uses IShape so Shapes and Geometries can be used. This, apart from cause confusion, has problems:

  • Shape: In addition to specifying the geometry of the shape, it has properties to define the stroke, thickness, etc. None of these properties are used, although the thickness does impact the size of the Shape. It inherits the size of the parent so it's easy to use but have unused properties under this scenario.
  • Geometry: Designed for clipping, it only has the information to define the Path to use. It does not have properties that have no effect as in the case of Shape, but instead, you must specify the size and properties that define each type of Geometry.

To improve this situation, we should apply changes to use Geometry or, if we want to make it easier to use and avoid requiring setting sizes, etc., create a new type like IStrokeShape that defines only the Shape without having properties to manage colors, stroke, etc. In In case of choose this second option, I would also ask, does it make sense to allow using a Line for example? I think having Rectangle, RoundRectangle, Ellipse and Path covers all scenarios.

Copy link
Member

@rmarinho rmarinho Apr 5, 2023

Choose a reason for hiding this comment

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

is this the only property we need to update ?

Copy link
Contributor Author

@jsuarezruiz jsuarezruiz Apr 5, 2023

Choose a reason for hiding this comment

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

Yes, is the only one impacting in the size. The rest are not used because we don't apply colors or any other effect; just use the defined path to draw the Border.

}
}
}
}