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

[WinUI] Perf when creating non-trivial grids (and other visual controls) #21818

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 13 additions & 1 deletion src/Controls/samples/Controls.Sample.Sandbox/MainPage.xaml
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
<ContentPage
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Maui.Controls.Sample"
x:Class="Maui.Controls.Sample.MainPage"
xmlns:local="clr-namespace:Maui.Controls.Sample">
x:DataType="local:MainPage">
<VerticalStackLayout x:Name="myLayout">
<Label x:Name="info" Text="Click a button" VerticalOptions="Center"/>
<Button Text="Clear Grid" Clicked="ClearGrid_Clicked"/>
<Button Text="Generate Grid" Clicked="Button_Clicked"/>
<Entry x:Name="BatchSize" Text="15"/>
<Button Text="Batch Generate Grid" Clicked="BatchGenerate_Clicked"/>

<HorizontalStackLayout x:Name="myGridWrapper">
<Grid x:Name="contentGrid"/>
</HorizontalStackLayout>
</VerticalStackLayout>
</ContentPage>
68 changes: 60 additions & 8 deletions src/Controls/samples/Controls.Sample.Sandbox/MainPage.xaml.cs
Original file line number Diff line number Diff line change
@@ -1,18 +1,70 @@
using System;
using System.Collections.ObjectModel;
using System.Diagnostics;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Maui;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;

namespace Maui.Controls.Sample
namespace Maui.Controls.Sample;

public partial class MainPage : ContentPage
{
public partial class MainPage : ContentPage
const int rowCount = 30;
const int columnCount = 30;

public MainPage()
{
InitializeComponent();
}

private void ClearGrid_Clicked(object sender, EventArgs e)
{
Stopwatch sw = Stopwatch.StartNew();

contentGrid.Clear();

sw.Stop();

info.Text = $"Clearing grid took: {sw.ElapsedMilliseconds} ms";
}

private void Button_Clicked(object sender, EventArgs e)
{
public MainPage()
Stopwatch sw = Stopwatch.StartNew();
contentGrid.Clear();

for (int rowIndex = 0; rowIndex < rowCount; rowIndex++)
{
InitializeComponent();
for (int columnIndex = 0; columnIndex < columnCount; columnIndex++)
{
Label label = new Label() { Text = $"[{columnIndex}x{rowIndex}]" };
contentGrid.Add(label, column: columnIndex, row: rowIndex);
}
}

sw.Stop();
info.Text = $"Clearing grid took: {sw.ElapsedMilliseconds} ms";
}

private void BatchGenerate_Clicked(object sender, EventArgs e)
{
Stopwatch sw = Stopwatch.StartNew();

int batchSize = int.Parse(BatchSize.Text);

for (int i = 0; i < batchSize; i++)
{
contentGrid.Clear();

for (int rowIndex = 0; rowIndex < rowCount; rowIndex++)
{
for (int columnIndex = 0; columnIndex < columnCount; columnIndex++)
{
Label label = new Label() { Text = $"[{columnIndex}x{rowIndex}]" };
contentGrid.Add(label, column: columnIndex, row: rowIndex);
}
}
}

sw.Stop();
info.Text = $"Grid was created {batchSize} times and it took {sw.ElapsedMilliseconds} ms in total. Avg run took {Math.Round(sw.ElapsedMilliseconds / (double)batchSize, 2)} ms";
}

}
3 changes: 3 additions & 0 deletions src/Core/src/Handlers/View/ViewHandler.cs
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ public abstract partial class ViewHandler : ElementHandler, IViewHandler
#if ANDROID
// Use a custom mapper for Android which knows how to batch the initial property sets
new AndroidBatchPropertyMapper<IView, IViewHandler>(ElementMapper)
#elif WINDOWS
// Use a custom mapper for Windows which knows how to batch the initial property sets
new WindowsBatchPropertyMapper<IView, IViewHandler>(ElementMapper)
#else
new PropertyMapper<IView, IViewHandler>(ElementHandler.ElementMapper)
#endif
Expand Down
50 changes: 50 additions & 0 deletions src/Core/src/Handlers/View/WindowsBatchPropertyMapper.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
using System;
using System.Collections.Generic;

namespace Microsoft.Maui.Handlers;

#if WINDOWS
class WindowsBatchPropertyMapper<TVirtualView, TViewHandler> : PropertyMapper<TVirtualView, TViewHandler>
where TVirtualView : IElement
where TViewHandler : IElementHandler
{
// During mass property updates, this list of properties will be skipped
public static HashSet<string> SkipList = new(StringComparer.Ordinal)
{
// TranslationX does the work that is necessary to make other properties work.
nameof(IView.TranslationY),
nameof(IView.Scale),
nameof(IView.ScaleX),
nameof(IView.ScaleY),
nameof(IView.Rotation),
nameof(IView.RotationX),
nameof(IView.RotationY),
nameof(IView.AnchorX),
nameof(IView.AnchorY),
Comment on lines +14 to +23
Copy link
Member

Choose a reason for hiding this comment

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

Overall, this seems like it could be a temporary solution if it doesn't change any behavior.

Does this make ordering matter? What if you have code such as:

view.TranslateX = 10;
view.TranslateY = 10;
// set the other properties *after* TranslateX

For this related change for Android:

I believe it changed some behavior with handlers, so we put it in the next .NET release. So this change might be more suitable for .NET 9, so it could get more testing?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Overall, this seems like it could be a temporary solution if it doesn't change any behavior.

Mostly I was hoping that this PR would nudge the MAUI team to recognize that there is a lot of performance on the table and even with medium effort, it seems like one can make it substantially faster. I don't want really to put too much effort in this because this is not trivial for me and there is too much space for "it's nice but we decided we'll do X instead". This simply requires some coordination from the code owners. I'm not even the best to implement something like this.

For the record, I believe that your idea with default values it much much better because it would save (especially on Windows) a ton of time. But again, how can I evaluate the idea? Maybe it has been on the table before and it was rejected because who know what would it lead to.

So all in all this PR is just a demonstration that "it looks like that with a rather simple change, it can be about 20% faster". Unfortunately, for me it's still not sufficient because I need something like up to 100ms to draw a complex grid ... :-(.

Also it's not like I'm lazy. Today, for example, I spent whole day fixing a bug that spans somewhere between MAUI and WinUI and I'm on the verge of giving up ...

Copy link
Member

Choose a reason for hiding this comment

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

I need something like up to 100ms to draw a complex grid

Have you thought about using SkiaSharp for this one piece of UI? You likely don't need all the rows & columns to be actual MAUI (& WinUI) Labels?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I need something like up to 100ms to draw a complex grid

Have you thought about using SkiaSharp for this one piece of UI? You likely don't need all the rows & columns to be actual MAUI (& WinUI) Labels?

I haven't mostly because it feels hard to create a data grid in 2D graphics. I don't know much about SkiaSharp. Is it somehow easy to create such data grid? I mean it sounds like a lot of low-level computing on my side to make it work.

Moreover, values in "labels" would not be easy to copy & paste, or would it?

Maybe a custom layout would be a way.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jonathanpeppers I have come up with a different approach in #23987 (the main idea is: https://github.com/dotnet/maui/pull/23987/files#diff-fe5090f560d95c536e43dfc5f39442add6ad2d8eb555d675bdb4a0f82a30793dR35). Could you please take a look?

};

public WindowsBatchPropertyMapper(params IPropertyMapper[] chained) : base(chained) { }

public override IEnumerable<string> GetKeys()
{
foreach (var key in _mapper.Keys)
{
// When reporting the key list for mass updates up the chain, ignore properties in SkipList.
// These will be handled by ViewHandler.SetVirtualView() instead.
if (SkipList.Contains(key))
{
continue;
}

yield return key;
}

if (Chained is not null)
{
foreach (var chain in Chained)
foreach (var key in chain.GetKeys())
yield return key;
}
}
}
#endif
Loading