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

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;
}

Related

Xamarin Android CarouselView with IndicatorView position below the image

How can i put the indicatorview below and center of the image?
https://imgur.com/Wa3Ur48
I tried position and other stuff but i can't seem to move the indicatorview below the image.
<StackLayout Grid.Row="0" Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<!--<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10"
Style="{StaticResource RetailHeaderImage}"
Source="{Binding ImageSource}">
</ffimageloading:CachedImage>-->
<CarouselView ItemsSource="{Binding ImageUrls}" IndicatorView="indicatorView" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10" HeightRequest="150" WidthRequest="150" >
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<ffimageloading:CachedImage
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
LoadingPlaceholder="loading.gif"
Aspect="AspectFill"
BackgroundColor="Black"
Source="{Binding}">
</ffimageloading:CachedImage>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="StartAndExpand"
VerticalOptions="End"/>
<Label Text="{Binding ReferenceSku.Name}" Style="{StaticResource RetailHeaderText}" HorizontalOptions="FillAndExpand" LineBreakMode="WordWrap"/>
</StackLayout>
Set the Orientation of the StackLayout to Vertical. And then set the IndicatorView in the center of the StackLayout.
Refer to the xaml below:
<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<!--<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10"
Style="{StaticResource RetailHeaderImage}"
Source="{Binding ImageSource}">
</ffimageloading:CachedImage>-->
<CarouselView ItemsSource="{Binding ImageUrls}" IndicatorView="indicatorView" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10" HeightRequest="150" WidthRequest="150" >
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Image Source="{Binding image}"></Image>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"/>
<Label Text="Name" LineBreakMode="WordWrap"/>
</StackLayout>

Xamarin.forms - Gridview row height error

My ContentPage have a Grid inside a ListView that contains a column (x:Name="stlNomeMiniatura") with a label and an image, as below:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="InventarioBensCelular.MainPage"
BackgroundColor="White">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="Start" HeightRequest="130" Background="#003399">
<StackLayout Orientation="Horizontal" HorizontalOptions="Start" VerticalOptions="Start" HeightRequest="40" Margin="7,10">
<StackLayout Orientation="Horizontal">
<Image Source="Icone.png" Aspect="Fill" HeightRequest="40" WidthRequest="48" VerticalOptions="Center"
HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="300" HeightRequest="40">
<StackLayout Orientation="Vertical">
<Label x:Name="lblTitulo" Text="Inventário de Bens" FontSize="17" FontAttributes="Bold"
VerticalOptions="Start" TextColor="White" Padding="0,-2,0,0"/>
<Label x:Name="lblSubtitulo" Text="Transmissão de Foto" FontSize="17" FontAttributes="Bold"
VerticalOptions="Start" TextColor="White" Padding="0,-7,0,0"/>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" VerticalOptions="Center" HeightRequest="40">
<ImageButton Source="ParametrosVerde.png" HorizontalOptions="Center" VerticalOptions="Center"
HeightRequest="32" WidthRequest="32" Clicked="Parametro_Clicou"/>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="Start">
<StackLayout WidthRequest="160" Margin="7,0">
<Frame x:Name="TiraFoto" CornerRadius="10" BorderColor="DarkGreen" HorizontalOptions="StartAndExpand"
Padding="0" HeightRequest="32" VerticalOptions="Start" BackgroundColor="#E0FFE0" WidthRequest="160">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TiraFoto_Clicou" />
</Frame.GestureRecognizers>
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Padding="10,0,0,0">
<Image Source="Camera.png" Aspect="Fill" HeightRequest="26" WidthRequest="24" VerticalOptions="Center" HorizontalOptions="Start"/>
<Label Text="Tirar Uma Foto" FontSize="16" FontAttributes="Bold" VerticalTextAlignment="Center" HorizontalOptions="Start"
TextColor="DarkGreen"/>
</StackLayout>
</Frame>
</StackLayout>
<StackLayout WidthRequest="160">
<Frame x:Name="Sair" CornerRadius="10" BorderColor="Red"
Padding="0" HeightRequest="32" VerticalOptions="Start" BackgroundColor="#FFE8E8" WidthRequest="160">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Sair_Clicou" />
</Frame.GestureRecognizers>
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Padding="10,0,0,0">
<Image Source="Sair.png" Aspect="Fill" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" HorizontalOptions="Start"
IsAnimationPlaying="True"/>
<Label Text="Sair Programa" FontSize="16" FontAttributes="Bold" VerticalTextAlignment="Center" HorizontalOptions="Start"
TextColor="Red"/>
</StackLayout>
</Frame>
</StackLayout>
<StackLayout>
</StackLayout>
<StackLayout Margin="0,-2">
<Frame x:Name="WiFi" CornerRadius="10" BorderColor="#003399"
Padding="0" HeightRequest="35" VerticalOptions="Center" BackgroundColor="White" WidthRequest="35">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="WiFi_Clicou" />
</Frame.GestureRecognizers>
<Image x:Name="imgWiFiStatus" Source="WifiVermelho.gif" Aspect="Fill" HeightRequest="24" WidthRequest="24"
VerticalOptions="Center" HorizontalOptions="Center"/>
</Frame>
</StackLayout>
</StackLayout>
</StackLayout>
<Frame BackgroundColor="Transparent" HeightRequest="25" Padding="0" VerticalOptions="Center" Margin="10,0">
<Label Text="Arquivos a Transmitir:" FontSize="15" FontAttributes="Bold"
VerticalOptions="Start" TextColor="#003399"/>
</Frame>
<StackLayout Margin="10,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ListView x:Name="ltvArquivoLista" SeparatorVisibility="None" SelectionMode="None" HasUnevenRows="False" IsPullToRefreshEnabled = "True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="169"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="347"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout x:Name="stlNomeMiniatura" Grid.Row="0" Grid.Column="0" Orientation="Vertical"
HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Label Text="{Binding Nome, Mode=OneWay}" FontSize="15"
VerticalOptions="Start" TextColor="#003399"/>
<Image Source="{Binding Miniatura, Mode=OneWay}" Aspect="AspectFit"
VerticalOptions="Start"
HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical"
HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Image x:Name="cmdExcluirFoto" Source="{Binding BotaoExcluirImagem, Mode=OneWay}" Aspect="AspectFill"
HeightRequest="32" WidthRequest="32" VerticalOptions="Start" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Foto_Excluir_Clicou"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
In the .CS file I have the following piece of code that shows how the ListView ItemsSource is set with the ObservableCollection "Arquivo":
public ObservableCollection<Arquivo> Arquivos = new ObservableCollection<Arquivo>();
private List<string> ArquivosATransmitir = null;
private DateTime TestaConexaoIntervaloDtInicio = Convert.ToDateTime("2000/01/01 00:00:00");
private DateTime TestaConexaoIntervaloDtFim = Convert.ToDateTime("2000/01/01 00:00:00");
public MainPage()
{
InitializeComponent();
DeviceInfo = new DeviceInfo.CDeviceInfo();
Rotinas.File_Found("Inventario.ini", DeviceInfo.Info.Application.DataFolder, false, #"/");
if (Rotinas.INIFileName == null)
{
Rotinas.INIFileName = DeviceInfo.Info.Application.DataFolder + #"/Inventario.ini";
Rotinas.INI_Write("[SISTEMA]", "Titulo", "Inventário de Bens");
Rotinas.INI_Write("[SISTEMA]", "Subtitulo", "Transmissão de Fotos");
Rotinas.INI_Write("[SERVIDOR]", "IP", "192.168.0.22");
Rotinas.INI_Write("[SERVIDOR]", "Porta", "1234");
}
TituloSistema = Rotinas.INI_Read("[SISTEMA]", "Titulo");
Subtitulo = Rotinas.INI_Read("[SISTEMA]", "Subtitulo");
ServidorIP = Rotinas.INI_Read("[SERVIDOR]", "IP");
if (ServidorIP != "")
{
string auxPorta = Rotinas.INI_Read("[SERVIDOR]", "Porta");
if (auxPorta != null)
{
ServidorPorta = auxPorta;
}
else
{
ServidorPorta = "1234";
}
} else
{
ServidorIP = null;
ServidorPorta = null;
}
this.lblTitulo.Text = TituloSistema;
this.lblSubtitulo.Text = Subtitulo;
ConexaoServidor = new Connection();
ConexaoServidor.FileTypeName = "Fotos";
DiretorioArquivosATransmitir = DeviceInfo.Info.Application.DataFolder + #"/ArquivosATransmitir";
if (!Directory.Exists(DiretorioArquivosATransmitir))
{
Directory.CreateDirectory(DiretorioArquivosATransmitir);
}
ArquivosATransmitir = Directory.GetFiles(DiretorioArquivosATransmitir, "*.*", SearchOption.AllDirectories)
.Where(file => new string[] { ".jpg" }.Contains(Path.GetExtension(file))).ToList();
if (ArquivosATransmitir.Count > 0)
{
for (int Ctr = 0; Ctr <= ArquivosATransmitir.Count - 1; Ctr++)
{
GridArquivo_Incluir(ArquivosATransmitir[Ctr]);
}
}
ltvArquivoLista.ItemsSource = Arquivos;
Testa_Conexao_Servidor();
}
I would like it to appear as below:
But, the GridView is shown with the rows height fixed with the images truncated, as below:
What am I doing wrong?
Thanks in advance, sorry for my poor English.
Marcelo Camarate
You can try to modify your code as follows:
1.change the value of property HasUnevenRows from False to True for your Listview (ltvArquivoLista)
HasUnevenRows="True"
2.change Height of RowDefinition from 169 to * or Auto;
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="347"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
</Grid.ColumnDefinitions>

xamarin collectionview and listview draw speed very slow

My test phone is LG-V50 and LG-G6 and Note5
my test collectionview code
<CollectionView Grid.Row="1" ItemsSource="{Binding Model.ViewList}" SelectedItem="{Binding Model.SelectedView}" >
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="10"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="2" VerticalOptions="FillAndExpand">
<Frame Grid.Row="0" WidthRequest="500" CornerRadius="8" BackgroundColor="#FFEAEAEA" HorizontalOptions='FillAndExpand' Margin="0" VerticalOptions="FillAndExpand">
<Grid Margin="-15,-10,-15,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="5"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="5"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="AliceBlue" >
<Label x:Name="test" Text="{Binding DeviceName}" Style="{StaticResource DiviceTitel01}" FontSize="30" />
</StackLayout>
<Button Image="close.png" WidthRequest="50" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.ViewListDeleteCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource ExitBtnStyle}" HorizontalOptions="Center"/>
</StackLayout>
<customControls:Board Grid.Row="2" BindingContext="{Binding VM}" VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Row="4" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Margin="-10,0,-10,0">
<Button Text="button1" FontSize="25" FontAttributes="Bold" WidthRequest="140" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.InfoPageClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource InfoBtnStyle}" />
<Button Text="button1" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.DetailDataClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource DetailviewBtnStyle}"/>
<Button Text="button2" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.RefPageCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource MoveBtnStyle}" TextColor="black"/>
</StackLayout>
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
and listview test code
<ListView x:Name="ListView" Grid.Row="1" BackgroundColor="White" Margin="0"
ItemsSource="{Binding Model.ViewList}"
SelectedItem="{Binding Model.SelectedView}"
HasUnevenRows="True"
IsPullToRefreshEnabled="False"
>
<ListView.ItemTemplate>
<DataTemplate>
<customControls:ExtendedViewCell SelectedBackgroundColor="#FF8FB5C3" >
<ViewCell.View>
<Grid Margin="2" VerticalOptions="FillAndExpand">
<Frame Grid.Row="0" WidthRequest="500" CornerRadius="8" BackgroundColor="#FFEAEAEA" HorizontalOptions='FillAndExpand' Margin="0" VerticalOptions="FillAndExpand">
<Grid Margin="-15,-10,-15,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="5"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="5"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="AliceBlue" >
<Label x:Name="test" Text="{Binding DeviceName}" Style="{StaticResource DiviceTitel01}" FontSize="30" />
</StackLayout>
<Button Image="close.png" WidthRequest="50" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.ViewListDeleteCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource ExitBtnStyle}" HorizontalOptions="Center"/>
</StackLayout>
<customControls:Board Grid.Row="2" BindingContext="{Binding VM}" VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Row="4" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Margin="-10,0,-10,0">
<Button Text="buuton1" FontSize="25" FontAttributes="Bold" WidthRequest="140" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.InfoPageClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource InfoBtnStyle}" />
<Button Text="button2" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.DetailDataClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource DetailviewBtnStyle}"/>
<Button Text="button3" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.RefPageCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource MoveBtnStyle}" TextColor="black"/>
</StackLayout>
</Grid>
</Frame>
</Grid>
</ViewCell.View>
</customControls:ExtendedViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
and
my customcontrol code
<Grid IsVisible="{Binding Model.IsWlevelControlVisible}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="0" BackgroundColor="{Binding Model.Color0}" VerticalOptions="FillAndExpand" Margin="-2">
<Grid.RowDefinitions>
<RowDefinition Height="55"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<Label x:Name="W0" Text="{Binding Model.Title_0}" LineBreakMode="TailTruncation" Grid.Row="0" Grid.Column="0" TextColor="White" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Margin="15,0,0,0" FontSize="24" />
<Label Text="{Binding Model.AIValue_0}" Grid.Row="0" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Font="23"/>
<Label Text="{Binding Model.Value_0, Converter={StaticResource StingFormatConverter}, ConverterParameter={x:Reference F0}}" Grid.Row="1" Grid.Column="0" FontSize="23" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Margin="0,0,-40,0"/>
<Label Text="{Binding Model.Value_0, Converter={StaticResource UnitConverter}, ConverterParameter={x:Reference F0}}" Grid.Row="1" Grid.Column="1" FontSize="22" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Margin="0,0,5,0"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1" VerticalOptions="FillAndExpand" Margin="-2">
<Label Grid.Row="0" Text="{Binding Model.Time}" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="18"/>
</Grid>
</Grid>
and Customcontrol Data communication is updated every 2 seconds
It is slow to draw an item except for data communication and without binding.
Excluding controls in collection view and list view makes drawing items fast, but adding controls makes drawing items very slow.
Can you find a solution to this problem?

UI Freeze when Navigation a page to another in xamarin forms

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?

Xamarin Forms UWP, How can I use Iconize and Images

I have a Xamarin PCL Android/iOS/UWP project. Im using Iconize FontAwsome icons for the application. Problem is that UWP dosent display any icons, but Android does
Like this:
My form:
<?xml version="1.0" encoding="utf-8" ?>
<controls:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:Volaapp.Controls;assembly:Volaapp"
xmlns:converters="clr-namespace:Volaapp.Converters;assembly:Volaapp"
xmlns:icons="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
xmlns:xlabs="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
x:Class="Volaapp.Pages.CreateTodoPage"
BackgroundColor="{StaticResource GrayColor}"
Title="Lisa uus võlg">
<ScrollView BackgroundColor="{StaticResource WhiteColor}">
<StackLayout Margin="10"
BackgroundColor="{StaticResource WhiteColor}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--Nimi ja Summa-->
<StackLayout Grid.Column="0" Grid.Row="0"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-gg"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Entry Text="{Binding Title}"
Placeholder="Sisesta pealkiri"
VerticalOptions="EndAndExpand"
Keyboard="Text"
Margin="15,0,15,2"/>
<Entry
VerticalOptions="EndAndExpand"
Placeholder="Sisesta Summa!"
Text="{Binding Loan}"
Keyboard="Numeric"
Margin="15,2,15,10"
/>
</StackLayout>
</StackLayout>
<!--Inimesed-->
<StackLayout Grid.Column="0" Grid.Row="1"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-user"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="1"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<controls:BindablePicker Margin="20,5"
ItemsSource="{Binding Tags}"
SelectedItem="{Binding SelectedTag, Mode=TwoWay}"
DisplayMemberPath="Title"
Title="Vali inimene"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
<!--Rahatäht-->
<StackLayout Grid.Column="0" Grid.Row="2"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-money"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<controls:BindablePicker Margin="20,5"
ItemsSource="{Binding CurrencyList}"
SelectedItem="{Binding Currency, Mode=TwoWay}"
Title="Vali Rahatäht"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
<!--Due date-->
<StackLayout Grid.Column="0" Grid.Row="3"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<xlabs:ImageButton Image="_duedate.png"
ImageHeightRequest="35"
ImageWidthRequest="35"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
BorderRadius="0"
Command="{Binding SelectDueDateCommand}"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="3"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Label Text="{Binding DueTime, StringFormat='Kuupäev {0:dd.MM.yyyy HH:mm}'}"
FontSize="17"
Margin="25,0"
TextColor="{StaticResource BlackColor}"
VerticalTextAlignment="Start"
VerticalOptions="CenterAndExpand"
HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</StackLayout>
<!--Meeldetuletus-->
<StackLayout Grid.Column="0" Grid.Row="4"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Image HeightRequest="35"
WidthRequest="35"
Source="{Binding ReminderIcon}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
</Image>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="4"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="{StaticResource WhiteColor}"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Label Text="Meeldetuletus"
FontSize="17"
Margin="25,0,0,0"
TextColor="{StaticResource BlackColor}"
VerticalTextAlignment="Start"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start"/>
<Switch IsToggled="{Binding EnableReminder, Mode=TwoWay}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start"
Margin="20,0"/>
</StackLayout>
</StackLayout>
<!--Button-->
<StackLayout Grid.Column="1" Grid.Row="5"
Orientation="Horizontal" Margin="0,30"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand">
<xlabs:ImageButton
BackgroundColor="{StaticResource MetroWhiteColor}"
Text="SAVE" FontSize="12"
IsEnabled="{Binding IsValid}"
HorizontalOptions="StartAndExpand"
HeightRequest="40"
WidthRequest="100"
BorderRadius="0"
Command="{Binding SaveCommand}"/>
<xlabs:ImageButton
BackgroundColor="{StaticResource MetroWhiteColor}"
Text="CANCEL"
HorizontalOptions="StartAndExpand"
BorderRadius="0"
HeightRequest="40"
WidthRequest="100"
FontSize="12"
Command="{Binding CancelCommand}"/>
</StackLayout>
</Grid>
</StackLayout>
</ScrollView>
</controls:BasePage>
Am I missing a nugget or UWP dosent support iconize?
The nuggets that are installed in UWP for iconize:
Xam.Plugin.Iconize.FontAwsome
Xam.Plugin.Iconize
Xam.FormsPlugin.Iconize
FontAwsome.UWP
This is a known but no acknowledged issue and doesn't seem to be fixed in the current version. GitHub Issue #13. I also experience the same issue.
The workaround, is to do this:
Create a folder Plugin.Iconize.Material.UWP\Assets\Fonts\ in the root
of your project.
Copy fontawesome.ttf to the new directory and set
to Copy if newer as its output.

Resources