search

UnigramDev / Unigram

Telegram for Windows
https://www.microsoft.com/store/apps/9n97zckpd60q
GNU General Public License v3.0
3.9k stars 452 forks source link

Better (and faster) inline button design #2494

Open codehz opened 3 years ago

codehz commented 3 years ago

Currently, inline button use acrylic effect, but it look ugly and slow down whole application(when there too many buttons in one page) image

(why ugly: it blur only the part that is just covered. Therefore, when multiple buttons are nearby, there will be obvious color separation.)

And it significantly reduces the fps during scrolling, especially on devices with low configuration.

Considering that the background usually does not change, we can use other ways to achieve similar effects, like pre-generating a blurred background, and then applying it to each button. (And the position of the background needs to be precisely "adjusted"(there may be a better way, but I'm not a uwp developer) to match when scrolling.) (it similar to win11 mica material, but do not use desktop background)

makisukurisu commented 3 years ago

@codehz Your solution is not faster by any means, it also requires a lot of thinking, it may be easily broken by scaling and changing background (like new one, that spins).

Also, I use like 17 buttons in one message and have 0 issues with scrolling on pretty slow laptop.

IMO they don't need any changes.

codehz commented 3 years ago

@makisukurisu Even I'm not a uwp developer, but I have some development experience related to xaml. I have achieved a similar effect in traditional xaml applications, although it is not a blurred background, but a parallax effect. Although there are differences, they are all about tracking position changes and scrolling (in fact, it is not "tracking", but directly calculating the correct graphics based on parameters when drawing, which is a very straightforward operation). Therefore, I think there is no technical difficulty in achieving similar effects.

it should be able to be implemented by a custom composition brush

FrayxRulez commented 3 years ago

it should be able to be implemented by a custom composition brush

You can't sample the GPU backdrop from a custom composition brush. You can't either calculate the correct graphics based on parameters when drawing, as you don't draw, Windows does. Tracking ScrollViewer changes and update every component requiring the backdrop accordingly is not only development expensive (as this requires a lot of code to be written and a lot of maintenance) but also CPU intensive, as it's quite expensive to calculate each element position on screen. All this without considering that ScrollViewer changes are asynchronous and not guaranteed, plus a lot of other of edge cases (over-pan by example can't be handled) so this would end up with a horrible UX.

While I agree that the result in the screenshot doesn't look so appealing, I don't think that this effect has noticeable performance issues (by example is way faster than acrylic, and Microsoft is abusing of acrylic everywhere), but if you have them you can always disable effects from system settings.