Xamarin Forms UWP, How can I use Iconize and Images - xamarin

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.

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>

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

List view auto size maintain ,Or remove unnecessary list view space

This Is My Checkbox Page ,I have separated(Dictionaries,collection,reffrence) using grid ,and each part have a listview ,I want to remove the unnecessary space show in dictionaries section ,Also want to auto increase the size .I have use List View to display checkbox and all section is maintain thought grid
This Is My Checkbox Page ,I have separated by this list using grid ,I want to remove the unnecessary space show in dictionaries section ,Also want to auto increase the size .I have use List View to display checkbox and all section is maintain thought grid
This Below is my code ,
<StackLayout Padding="10" Grid.Column="0" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<Label Margin="-15,0,0,0" HorizontalOptions="StartAndExpand" Text="{x:Static resources:AppResources.Dictionaries}" Style="{StaticResource MenueLable}" ></Label>
<ListView BackgroundColor="White" ItemsSource="{Binding DictionariesFilter}" VerticalOptions="FillAndExpand" HasUnevenRows="True" SeparatorVisibility="None" RowHeight="-1">
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell Tapped="Handle_Tapped" >
<StackLayout Orientation="Horizontal">
<input:CheckBox Style="{StaticResource CheckBox}" IsChecked="{Binding IsChecked}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand, Source={x:Reference Name=entriesView}}"/>
<Label Text="{Binding DicName}" VerticalTextAlignment="Center" ></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Load More" IsVisible="False" TextColor="#22B473" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Start"></Button>
<Line Background="#F0F0F0" HeightRequest="2" ></Line>
</StackLayout>
<StackLayout Grid.Row="1" VerticalOptions="FillAndExpand" Orientation="Vertical">
<Label Margin="-25,0,0,0" Text="{x:Static resources:AppResources.Collection}" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Style="{StaticResource MenueLable}"></Label>
<ListView ItemsSource="{Binding CollectionsFilter}" HasUnevenRows="True" BackgroundColor="White" SeparatorVisibility="None" RowHeight="-1" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="Handle_Tapped">
<StackLayout Orientation="Horizontal" >
<input:CheckBox Style="{StaticResource CheckBox}" Type="Check"
CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<Label Text="{Binding DicName}" VerticalTextAlignment="Center" ></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Line Background="#F0F0F0" HeightRequest="2"></Line>
</StackLayout>
<StackLayout Grid.Row="2" VerticalOptions="FillAndExpand" Orientation="Vertical">
<Label Margin="-20,0,0,0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Text="{x:Static resources:AppResources.References}" Style="{StaticResource MenueLable}"></Label>
<ListView HasUnevenRows="True" BackgroundColor="White" ItemsSource="{Binding RefrencesFilter}" SeparatorVisibility="None" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" >
<input:CheckBox Style="{StaticResource CheckBox}" Type="Check"
CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<Label Text="{Binding DicName}" VerticalTextAlignment="Center" ></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Line Background="#F0F0F0" HeightRequest="2"></Line>
</StackLayout>
<ScrollView Grid.Row="3">
<StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Orientation="Vertical">
<Label Margin="0,0,0,0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Text="{x:Static resources:AppResources.CategorisedBy}" Style="{StaticResource MenueLable}"></Label>
<input:CheckBox Margin="-10,0,0,0" IsChecked="{Binding IsSelected}" Style="{StaticResource CheckBox}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox1}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<input:CheckBox Margin="-10,0,0,0" Style="{StaticResource CheckBox}" IsChecked="{Binding IsSelected}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox2}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<input:CheckBox Margin="-10,0,0,0" IsChecked="{Binding IsSelected}" Style="{StaticResource CheckBox}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox3}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<input:CheckBox Margin="-10,0,0,0" IsChecked="{Binding IsSelected}" Style="{StaticResource CheckBox}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox4}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
</StackLayout>
</ScrollView>
</Grid>
</StackLayout>

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?

Xamarin Forms: Unable to click Frame when overlayed over Grid using RelativeLayout

This is what I'm trying to acheive. The green blob is a button(Or a stacklayout or a frame).I was able to change the the colors of the selected and unselected tabs. But I'm just not able to implement this. Any help would be appreciated.
Update
I've thrown away the TabbedPage and implemeted tabs using frames and a grid. I'm now using a RelativeLayout to get the button over the Grid. The Xaml is below
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid
Margin="0"
Padding="0"
ColumnSpacing="0"
HorizontalOptions="FillAndExpand"
IsClippedToBounds="False"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
</Grid.RowDefinitions>
<Frame
x:Name="Explore"
Grid.Row="0"
Grid.Column="0"
AutomationId="Explore"
BackgroundColor="{Binding BgColorExplore}"
ClassId="Explore"
OutlineColor="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapTabCommand}" CommandParameter="{x:Reference Explore}" />
</Frame.GestureRecognizers>
<StackLayout
HorizontalOptions="FillAndExpand"
Style="{StaticResource NoSpaceStack}"
VerticalOptions="FillAndExpand">
<Image
HeightRequest="29"
HorizontalOptions="CenterAndExpand"
Source="exploreiconwhite.png"
VerticalOptions="Start"
WidthRequest="30" />
<customRenderers:ExtendedLabel
HorizontalTextAlignment="Center"
Style="{StaticResource TabbedTitle}"
Text="Explore" />
</StackLayout>
</Frame>
<Frame
x:Name="MyAccount"
Grid.Row="0"
Grid.Column="1"
AutomationId="MyAccount"
BackgroundColor="{Binding BgColorMyAccount}"
ClassId="MyAccount"
OutlineColor="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapTabCommand}" CommandParameter="{x:Reference MyAccount}" />
</Frame.GestureRecognizers>
<StackLayout
HorizontalOptions="FillAndExpand"
Style="{StaticResource NoSpaceStack}"
VerticalOptions="FillAndExpand">
<Image
HeightRequest="27"
HorizontalOptions="CenterAndExpand"
Source="Myaccounticonwhite.png"
VerticalOptions="Start"
WidthRequest="30" />
<customRenderers:ExtendedLabel
HorizontalTextAlignment="Center"
Style="{StaticResource TabbedTitle}"
Text="My Account" />
</StackLayout>
</Frame>
</Grid>
<RelativeLayout BackgroundColor="Yellow" HorizontalOptions="Center">
<Frame
BorderRadius="50"
HeightRequest="67"
HorizontalOptions="Center"
OutlineColor="Transparent"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Y,
Constant=-140}"
WidthRequest="67">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CreatePlanCommand}" />
</Frame.GestureRecognizers>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image
HeightRequest="32"
Source="createplaniconwhite.png"
WidthRequest="39" />
<Label
FontFamily="{StaticResource SofiaProSemiBold}"
FontSize="10"
HorizontalTextAlignment="Center"
Text="Create Plan"
TextColor="White" />
</StackLayout>
</Frame>
</RelativeLayout>
</StackLayout>
But now when I click on part of the frame which is over the tabs, the tab's tapped event fires :(...How do I make the GreenFrames tapped event fire?

Resources