UI Freeze when Navigation a page to another in xamarin forms - xamarin

In my application My MainPage Showing Menus and after clicking menu the next page loading very slow and freeze the UI.
This happen when the content page contain a listView with Items.
My Data Page Content a listView with 50 items(Infinite Scrolling First 50 items)
XAML:
<ListView
ItemsSource="{Binding ItemsData}"
SelectedItem="{Binding SelectedItemsData}"
HasUnevenRows="True"
BackgroundColor="White" x:Name="ItemsDataList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
Margin="2,0,2,0"
Padding="8"
IsEnabled="{Binding IsEnableItemsData}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding SKU}" Grid.Row="0" Grid.Column="0" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="{Binding SKUColor}" FontSize="Small"/>
<Label Text="{Binding OrderNumber}" Grid.Row="0" Grid.Column="1" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding CategoryName}" Grid.Row="0" Grid.Column="2" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding OrderQuantity}" Grid.Row="0" Grid.Column="3" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding Bin}" Grid.Row="0" Grid.Column="4" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<eventToCommand:EventToCommandBehavior
EventName="ItemSelected"
Command="{Binding ItemsDataSelectedItemChange}"/>
<eventToCommand:EventToCommandBehavior
EventName="ItemAppearing"
Command="{Binding ItemsDataItemAppearing}"/>
</ListView.Behaviors>
</ListView>
ViewModel:
public ObservableCollection<ItemsData> Data
{
get { return _data; }
set
{
_data = value;
RaisePropertyChanged();
}
}
Getting the data from Local Database
Data = GetData(GlobalVariable.BranchId, DataLimit, Offset, SearchText, filterData, "Others", sortData);
How to get rid of this issues?

Related

Changing BackgroundColor of Button within Xamarin CollectionView changes the BackgroundColor of every 8th button down. why?

I have a Xamarin CollectionView That uses a Button (Button x:Name="PNameButton") to Change the Background color of the button.
When the Button is clicked the background color changes... However - So does every 8th Button in the CollectionView. Its as if the CollectionView renders new data every 8 or so items, and that new first button gets the changed color property. How do I fix this? Code Follows:
<CollectionView x:Name="PairingsCollectionView" SelectionMode="Multiple" Margin="20,5,20,5" >
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="0" Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="35" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Grid.Row="0" Margin="0" Color="#333130"/>
<Button x:Name="PNameButton" Margin="0" Padding="0,0,0,0" Grid.Column="0" BackgroundColor="{Binding UseColor}" Text="{Binding PDisplayName}" FontSize="Small" TextColor="Black"
HorizontalOptions="Start" VerticalOptions="Center" Clicked="Button_Clicked" />
<BoxView Grid.Column="1" Grid.Row="0" Color="#333130" Margin="0"></BoxView>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="1" TextColor="White" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center" >
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding PDays, StringFormat='{0}Dy'}"/>
<Span Text=" "/>
<Span Text="{Binding PDay}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<BoxView Grid.Row="0" Grid.Column="2" Margin="0" Color="#333130"></BoxView>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="2" Text="{Binding PCredit, StringFormat='{0}'}" TextColor="#F57BFA" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="0" Grid.Column="3" Color="#333130" Margin="0"></BoxView>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="3" Text="{Binding PFlightTime, StringFormat='{0}'}" TextColor="White" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="0" Grid.Column="4" Color="#333130" Margin="0"/>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="4" Text="{Binding PRegionType, StringFormat='{0}'}" TextColor="White" FontSize="Small" HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="0" Grid.Column="5" Color="#333130" Margin="0"/>
<CheckBox x:Name="IsSelectedCheckbox" Grid.Row="0" Grid.Column="5" IsChecked="{Binding PIsSelected}" VerticalOptions="Center"/>
<BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Color="LightGray"></BoxView>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Text="{Binding PDateModified}" TextColor="Black" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Color="LightGray" ></BoxView>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Text="{Binding PLayovers}"
TextColor="Coral" FontAttributes="Bold" FontSize="17" HorizontalOptions="Start" VerticalOptions="Center" Margin="5,0,0,0" />
<WebView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="6" BackgroundColor="#333130"
MinimumHeightRequest="150" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
HeightRequest="{Binding PWebViewHeight}" >
<WebView.Source>
<HtmlWebViewSource Html="{Binding PAllText}"/>
</WebView.Source>
</WebView>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
And in the Code Behind:
private void Button_Clicked(object sender, EventArgs e)
{
try
{
string ChkVal = "";
bool compareBool = false;
bool currentState = false;
Color buttonColer;
string ColorHexVal;
int i = 0;
var thisButton = sender as Button;
buttonColer = thisButton.BackgroundColor;
ColorHexVal = buttonColer.ToHex();
if (buttonColer != Color.FromHex("#F7F75A"))
{
currentState = true;
}
else
{
currentState = false;
}
var PairingItem = ((Button)sender).Parent.BindingContext as Pairings;
compareBool = App.DatabaseNA.GetIsSelected(PairingItem.PID);
if (!compareBool == true)
{
thisButton.BackgroundColor = Color.FromHex("#46AE3C");
}
else
{
thisButton.BackgroundColor = Color.FromHex("#F7F75A");
}
}
catch (Exception ex)
{
DisplayAlert("Alert", ex.InnerException.ToString(), "OK"); //await
}
}
Again - Thank You!!!
The code works great and sets the Background color of the button... The problem is - It sets the Background Color of every Button about 8 items down.
Thanks

Why does my IsVisible Binding Not Work with a StackLayout ? Xamarin iOS

I have the below XAML structure using a collection view which is using a list called 'users' as its ItemSource. I have a bound property which controls if the items are visible or not :
<StackLayout Orientation="Horizontal">
<Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">
The issue is that unless I remove the StackLayout around the Frame then the IsVisible binding doesn't work. Does anyone know why the binding works without the StackLayout, but not with ?
<CollectionView Grid.Row="1" x:Name="users" IsGrouped="True" SelectionMode="Single">
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" MinimumHeightRequest="200" BackgroundColor="{Binding tint_colour}">
<Image Source="{Binding school_image}" WidthRequest="120" HeightRequest="100"/>
<Label Text="{Binding organisation_title}"
TextColor="{Binding font_colour}"
FontSize="Large"
FontAttributes="Bold"
VerticalTextAlignment="Center"></Label>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="HeaderTapped" CommandParameter="{Binding organisation_title}"></TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<behaviors:Expander x:Name="MainExpander" CollapseAnimationLength="500" IsExpanded="False" IsVisible="True" >
<behaviors:Expander.Header>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Center" Margin="20" Padding="0" BackgroundColor="Maroon">
<Label Text="{Binding student_initial}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Frame>
<StackLayout Grid.Column="2" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="20">
<Label IsVisible="{Binding isVisible}" x:Name="StudentName" Text="{Binding student_fullname}"></Label>
<Label x:Name="StudentID" IsVisible="false" Text="{Binding student_unique_id}"></Label>
</StackLayout>
</Grid>
</behaviors:Expander.Header>
<Grid RowSpacing="0" HorizontalOptions="FillAndExpand" HeightRequest="240" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Text="Messages" Clicked="Button_Clicked"></Button>
<Button x:Name="btnTopUp" Grid.Row="1" Text="Quick Topup" Clicked="Button_Clicked" IsVisible="{Binding topup_product_id, Converter={StaticResource IsNotNullOrEmptyConverter}}"></Button>
<Button Grid.Row="2" Text="Payments" Clicked="Button_Clicked"></Button>
</Grid>
<!-- TODO: Look at adding a balance for childrens topups? -->
</behaviors:Expander>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I did a test about it and it works fine, here are xaml and codebehind:
xmal:
<StackLayout>
<CollectionView x:Name="mycol">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout >
<Frame BackgroundColor="Red" IsVisible="{Binding isvisible}">
<Label Text="{Binding Name}"/>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
codebehind:
public partial class CollectionTest : ContentPage
{
ObservableCollection<People> peoples = new ObservableCollection<People> {
new People{ Name="Adam",isvisible=true},
new People{ Name="Bob",isvisible=true},
new People {Name="Adam2",isvisible=false },
new People{ Name="Bob2",isvisible=true} };
public CollectionTest()
{
InitializeComponent();
mycol.ItemsSource = peoples;
}

CollectionView child added event not firing

I am using Xamarin Forms and CollectionsView.I am adding Frame child rows using SignalR. Child added event is not firing after few child is added.Is it a bug or am i doing something wrong?? I tried with CollectionView_ChildAdded event also.That one also gives this unexpected behavior
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand"
SelectionMode="None"
ItemsUpdatingScrollMode="KeepScrollOffset"
>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame x:Name="frame1" BackgroundColor="White" BorderColor="#F0F0F0" Padding="3" Margin="0,0,0,5" HasShadow="False" CornerRadius="10" ChildAdded="frame1_ChildAdded">
<Grid HeightRequest="40" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" x:Name="lb_TicketNumber" Text="{Binding TicketNumber}" TextColor="Black" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" Margin="20,0" HorizontalTextAlignment="Center" />
<Label Grid.Column="1" Text="{Binding DeskName}" TextColor="Black" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
<Label Grid.Column="2" Text="{Binding ServiceNameEng}" TextColor="Black" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" HorizontalTextAlignment="Center" />
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
below event stops firing after few times.
private void frame1_ChildAdded(object sender, ElementEventArgs e)
{
DisplayAlert("Item added", "OK", "OK");
}

Xamarin.Forms: calculating listview height wrong?

Why is only half of the text being displayed in the labels at the bottom?
This is my xaml. The listview area is 300, and each listview row is 100 (set in <On Platform="Android">100</On>).
Each ViewCell has 4 rows, with each row being 25, for a total of 100 (the listview row height).
So I don't understand why only half of the text at the bottom is displayed, or why the space taken up by row 0 & 1 of column 2 isn't exactly half of the total height.
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" x:Name="MapGrid">
<maps:Map WidthRequest="960" HeightRequest="100"
x:Name="MyMap" IsShowingUser="true"/>
</StackLayout>
<StackLayout Grid.Row="1" x:Name="listSection" HeightRequest="300">
<ListView x:Name="ListView_Pets">
<ListView.RowHeight>
<OnPlatform x:TypeArguments="x:Int32">
<On Platform="Android">100</On>
</OnPlatform>
</ListView.RowHeight>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Label Text="Name" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="Black" Grid.Row="0" Grid.Column="0"/>
<Label Text="Address" HorizontalTextAlignment="Center" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" Grid.Row="1" Grid.Column="0"/>
<Label Text="Price1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="2"/>
<Label Text="Price2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="1" Grid.Column="2"/>
<Label Text="Tag1" Grid.Row="0" VerticalTextAlignment="Center" HorizontalTextAlignment="End" Grid.Column="1" FontSize="Micro"/>
<Label Text="Tag2" Grid.Row="1" VerticalTextAlignment="Center" HorizontalTextAlignment="End" Grid.Column="1" FontSize="Micro"/>
<StackLayout Grid.Row="3" Grid.Column="0">
<StackLayout Orientation="Horizontal" >
<Label Text="Text1" FontSize="10" VerticalTextAlignment="Start" TextColor="Black" />
<Label Text="Text2" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" />
<Label Text="Text3" VerticalTextAlignment="Start" FontSize="10" TextColor="Black" />
</StackLayout>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
Here's the screenshot:
This is because of the Grid inside your ViewCell has a RowSpacing and ColumnSpacing defaults. To override this, just set <Grid RowSpacing=0 ColumnSpacing=0>

Xamarin Forms Right align button in a Grid

I'm using a Grid with 7 rows and 3 columns. I added a button to the 7th row and 3rd column like this:
<Button Grid.Row="6" Grid.Column="2" HorizontalOptions="End"/>
The problem is the button is always in the center. I can't seem to get it to go to the end.
Here's the structure
<Image Aspect="AspectFit" HeightRequest="60" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Source="{Binding ProdImg}" />
<Label Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" TextColor="White" FontSize="22" Text="{Binding UserName}"/>
<Label HorizontalOptions="End" Grid.Row="0" Grid.Column="2" TextColor="#b1fc03" FontSize="25" Text ="{Binding Sales, StringFormat='{0:#,#.}'}"/>
<Label Grid.Row="1" Grid.Column="1" HorizontalOptions="Start" TextColor="White" FontSize="10" Text="{Binding LastSale, StringFormat='{0:dd-MMM-yyyy}'}"/>
<Label HorizontalOptions="End" Grid.Row="1" Grid.Column="2" TextColor="White" FontSize="10" Text="{Binding ProdName}"/>
<Button x:Name="TryNowBtn" HorizontalOptions="End" Image="try-now.png" Grid.Row="2" Grid.Column="2"></Button>
</Grid>
</StackLayout>
<Image Aspect="AspectFit" Source="separator-line.png"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I also tried
View.HorizontalOptions="End"
chagne your column definition to this
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
for button this code is ok
<Button Grid.Row="6" Grid.Column="2" HorizontalOptions="End"/>

Resources