Comments (11)
Hey man !
First we need to be sure it's the bitmap shadows that are lagging.
Normally since RecyclerView implements cell reuse, only N shadow bitmaps should be rendered at the same time (where N is the number of visible cells). Since it is reused, it shouldn't be disposed either.
Also, if you using CollectionView be aware that is has some serious lagging issues caused by the GC: https://www.sharpnado.com/gittrends-lags/
If you share your repro sample I can have a look and see if they are indeed disposed.
from sharpnado.shadows.
Yep, when i tried without the shadows the lagging decreased a lot. Happens both with listview and collectionview. I can share my layout for the data template, would be grateful if u take a look. You can substitute the bindings with random text and substitute the images. Try to add at least 10 items to the list with shadows and without them.
<CollectionView.ItemTemplate>
<DataTemplate>
<sh:Shadows CornerRadius="10" Padding="{Binding FramePadding}" Shades="{sh:SingleShade Offset='0, 6',
Opacity=0.1, BlurRadius=25,
Color=Black}">
<Frame CornerRadius="10" HasShadow="False">
<StackLayout Spacing="0">
<StackLayout Orientation="Horizontal" Spacing="14">
<Image HeightRequest="12" HorizontalOptions="Start" Source="ic_note.png"/>
<Label FontSize="14" Text="{Binding ClosedDateTimeShort}" HorizontalTextAlignment="Start" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/>
<Image Source="ic_forwardgray.png" HorizontalOptions="End"/>
</StackLayout>
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto">
<Label Text="Here i have a bindable layout" Grid.Row="0" Grid.ColumnSpan="3"/>
<BoxView Grid.Row="1" Grid.ColumnSpan="3" HeightRequest="1" Color="#E0E0E0"/>
<Frame HasShadow="False" Grid.Row="2" Grid.Column="0" Padding="7,3,7,3" CornerRadius="10" BackgroundColor="{Binding BackgroundColor}" HorizontalOptions="Start">
<Label FontSize="14" TextColor="{Binding TextColor}" Text="{Binding StatusName}"/>
</Frame>
<Image Grid.Row="2" Grid.Column="1" Source="{Binding CardImage}" WidthRequest="24" HorizontalOptions="End"/>
<Label VerticalOptions="Center" Grid.Row="2" Grid.Column="2" Text="{Binding FormattedCost}" TextColor="Black" FontSize="16"/>
</Grid>
<Grid ColumnDefinitions="Auto,*,Auto" RowSpacing="0" ColumnSpacing="8" IsVisible="{Binding HasCarInfo}">
<Image Grid.Column="0" Source="ic_smallcar.png"/>
<Label Grid.Column="1" Text="{Binding CarInfo.ColorAndModel}" FontSize="14"/>
<Frame HasShadow="False" Grid.Column="2" Padding="7,3,7,3" CornerRadius="10" VerticalOptions="Center" HorizontalOptions="End" BackgroundColor="#F2F2F2">
<Label FontSize="14" Text="{Binding CarInfo.CarStateNumber}"/>
</Frame>
</Grid>
</StackLayout>
</Frame>
</sh:Shadows>
</DataTemplate>
</CollectionView.ItemTemplate>
from sharpnado.shadows.
layout won't help please provide a repro sample.
from sharpnado.shadows.
I can't, unfortunately. Just make an empty page and a collectionview with this data template. Should be close to what i have
from sharpnado.shadows.
I'm afraid I don't have time for this. I just have time for testing a repro sample...
from sharpnado.shadows.
Waow, I just received 30 minutes of free time. I will right away test Shadows with CollectionView on Android
from sharpnado.shadows.
So I just made a test with a new XF project.
A simple CollectionView, with this xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1"
xmlns:shades="clr-namespace:Sharpnado.Shades;assembly=Sharpnado.Shadows"
x:Class="App1.MainPage">
<ContentPage.BindingContext>
<local:MainPageViewModel />
</ContentPage.BindingContext>
<CollectionView ItemsSource="{Binding Pipos}">
<CollectionView.ItemTemplate>
<DataTemplate>
<shades:Shadows CornerRadius="15" Shades="{shades:SingleShade Color=Coral, Offset='0,10', Opacity=0.2, BlurRadius=6}">
<Frame Padding="10" Margin="15,5,15,10" CornerRadius="15" HasShadow="False">
<StackLayout x:DataType="local:PipoViewModel">
<Label HeightRequest="30" Text="{Binding Title}" />
<Label HeightRequest="20" Text="{Binding Subtitle}" />
<Label HeightRequest="20" Text="{Binding Subsubtitle}" />
</StackLayout>
</Frame>
</shades:Shadows>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>
To be sure I'm only testing Shadows performance.
I also enabled logging to monitor dispose.
I generated 100 hundred items.
- Shadows as expected are never disposed and reused
- The scrolling is super smooth
Well it's a bad gif but I achieve nearly 60 fps.
So I'm afraid Shadows is not the bad boy here sorry...
Are you using GlideX for Images ? If you're not images are not cached and could cause serious performance issues
from sharpnado.shadows.
Hm, maybe really its my layout that is too complex... I tried with and without the images - no effect. I will send u a full empty project on monday with my layout, maybe the problem will arise there, thx!
from sharpnado.shadows.
Also, maybe this happens because in my template the height of items may be different?
from sharpnado.shadows.
So I took a look at your cell layout and it is way too complex.
First you have:
<SL>
<SL>
<Grid>
<Grid>
Where you can just use a single grid for all of these.
Second, you use the attribute 'Auto' for sizing your column and row definition.
DON'T DO THAT IN CELLS.
Cause every time you will update your bindings (every cell reuse) it will re-layout your cell, this is awful.
Use fixed size, never 'Auto' in list cells.
Third, you should have fixed height for your cell, cause it will force the relayout of the cell, this is also awful :)
Then you can set the ItemSizingStrategy=ItemSizingStrategy.MeasureFirstItem
. It will be so much performant.
I will advise you to test this first, it may be the simplest thing to change in your case and also the most impactful.
Finally, you don't use caching for your images, I suggest GlideX.
Also, the CollectionView and probably the ListView have GC issues, this is an issue currently under investigation: xamarin/Xamarin.Forms#11483. Till then you can increase your nursery size, it is a HORRIBLE workaround, but still effective.
I'm closing the issue now cause it's not related with Shadows, just apply the good layout practices above and it should be ok.
from sharpnado.shadows.
Thank you for the tips!
from sharpnado.shadows.
Related Issues (20)
- [Bug][UWP] White Background added inside Shadow element when using SingleShade. HOT 3
- Shade ColorBindableProperty is not Dynamic ! HOT 6
- Very bad performance on Android HOT 8
- Colored Neumorphism HOT 2
- Can you please release a version for mac? HOT 1
- [Question] Adding shadow in Code Behind HOT 4
- Shadow works only with iOS HOT 6
- Shadow White Box HOT 2
- Java.Lang.OutOfMemoryError on Android HOT 7
- [Enhancement] Inner Shadows
- Crash: ShadowView.CreateBitmap: java.lang.nullpointerException HOT 3
- How-To: offset (0,-15) but bottom padding causes shadow on the lower side HOT 1
- [Bug] Super weird behavior with Material button
- Shadow binding stopped working in 1.2.0 version (worked in 1.1.0) HOT 21
- Possible to dynamically change properties on a shade using DataTriggers?
- Support MAUI HOT 7
- Strict mode - ShadowView LeakedClosableViolation
- [BUG] udating to XamarinFrom 5.0.0.2291 InvalidOperationException "Invalid on Color.Default"
- iOS shadows do not have the correct color after updating Sharpnado.Shadows Nuget
- Maui support? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sharpnado.shadows.