How to make the table view scrollable in the following xaml code - xamarin

I want to design a ui page in xaml wherein i want to keep the image ballotInfo.png at the top of the page and the button Next at the bottom. The user should be able to scroll through the rest of the contents. I have tried making the table view scrollable by using scrollview but it ain't working as expected. Kindly help.
Following is the XAML code that am working on.
<AbsoluteLayout>
<RelativeLayout>
<Image Source = "ballotInfo.png" Aspect="Fill" x:Name="headerImage"
RelativeLayout.WidthConstraint = "{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor = 1}"
RelativeLayout.HeightConstraint = "{ConstraintExpression
Type = RelativeToParent,
Property=Height,
Factor=0.35}"/>
<StackLayout x:Name="entryLayout" VerticalOptions="FillAndExpand" Padding="0"
RelativeLayout.YConstraint = "{ConstraintExpression
Type=RelativeToView,
ElementName=headerImage,
Property=Height,
Factor=1}">
<TableView Intent="Form" HasUnevenRows = "true" >
<TableView.Root>
<TableSection Title="Local Admin: Ajay" >
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="10,0,10,0" >
<Label Text="Ballot Title" VerticalOptions="Center" TextColor="#a2a1b8" />
<Entry HorizontalOptions="FillAndExpand" FontAttributes="Bold" HorizontalTextAlignment="End" TextColor="#151431" />
</StackLayout>
</ViewCell>
<ViewCell Height="200" >
<StackLayout Orientation="Horizontal" Padding="10,0,10,0">
<Label Text="Ballot Description" VerticalOptions="Center" TextColor="#a2a1b8"/>
<Editor VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" FontSize="Small" TextColor="#151431" />
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="10,0,10,0">
<Label Text = "Ballot End Date" HorizontalOptions="Center" VerticalOptions="Center" TextColor="#a2a1b8" />
<StackLayout HorizontalOptions="EndAndExpand" >
<DatePicker Date="{x:Static sys:DateTime.Today}" TextColor="#151431" />
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell >
<StackLayout Orientation="Horizontal" VerticalOptions="Fill" Padding="10,0,10,0" >
<Label Text="No. of Candidates" VerticalOptions="Center" TextColor="#a2a1b8" />
<Entry HorizontalOptions="FillAndExpand" Keyboard="Numeric" HorizontalTextAlignment="End" TextColor="#151431" />
</StackLayout>
</ViewCell>
</TableSection>
</TableView.Root>
</TableView>
</StackLayout>
</RelativeLayout>
<Grid
AbsoluteLayout.LayoutBounds="0.5, 1, 1,AutoSize"
AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional">
<Button Text="Next"
VerticalOptions="End"
TextColor="White"
FontSize="15"
BackgroundColor="#ff2d55"/>
</Grid>
</AbsoluteLayout>

Replacing the AbsoluteLayout/RelativeLayout for a Grid is a cleaner solution. Here's a template for you:
<Grid
ColumnSpacing="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" />
<ScrollView Grid.Row="1">
<StackLayout
Padding="0"
x:Name="entryLayout">
</StackLayout>
</ScrollView>
<Button
Grid.Row="2"
HorizontalOptions="Center"
Text="Next"
/>
</Grid>

I am new to xaml but it seems that ScrollView is not available in xaml, but is available in xamarin. I tried this solution with no success. However, I used ScrollViewer instead which did the job.

Related

Programmatically modification of CarouselView

I have a CarouselView inside a ScrollView. To control the height I calculate it and modify it programmatically. It almost works, but the problem however is that it only works when the height is increased not when the height is decreased.
CarouselView
<CarouselView x:Name="cv" HeightRequest="8" ItemsSource="{Binding Challenge.ChallengeParts}" VerticalOptions="Center" ItemTemplate="{StaticResource ChallengePartTemplate}" Position="{Binding PageCarouselPosition}" Grid.Row="0" Grid.Column="1"></CarouselView>```
DataTemplate
<DataTemplate x:Key="ChallengePartTemplate">
<StackLayout BackgroundColor="LimeGreen" VerticalOptions="Center">
<Grid x:Name="rulesGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<StackLayout x:Name="toggleShowRules" Grid.Column="0" Grid.Row="0">
<Label x:Name="showRulesText" Text="Vis regler fra video" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference thisPage}, Path=BindingContext.ToggleShowRulesTappedCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<Label Text="{Binding Source={x:Reference thisPage}, Path=BindingContext.ShowRules,Converter={StaticResource CaretConverter}}" FontFamily="{StaticResource FontAwesomeSolid}" Grid.Column="1" Grid.Row="0" HorizontalTextAlignment="End" />
</Grid>
<StackLayout x:Name="showRulesStack" IsVisible="{Binding Source={x:Reference thisPage}, Path=BindingContext.ShowRules}">
<Grid Margin="20, 0, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--Antal spillere-->
<StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="0">
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
</StackLayout>
<StackLayout x:Name="numPlayersText" Spacing="0" Grid.Column="1" Grid.Row="0">
<Label Text="Antal spillere:" FontAttributes="Bold" FontSize="Micro" />
<Label Text="{Binding NumPlayers}" FontSize="Micro" />
</StackLayout>
<!--Nødvendigt udstyr-->
<StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="1">
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
</StackLayout>
<StackLayout Spacing="0" Grid.Column="1" Grid.Row="1">
<Label Text="Nødvendigt udstyr:" FontAttributes="Bold" FontSize="Micro" />
<StackLayout BindableLayout.ItemsSource="{Binding NeededAccesories}" Spacing="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}" FontSize="Micro" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
<!--Regler-->
<StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="2">
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2">
<Label Text="Regler:" FontAttributes="Bold" FontSize="Micro" />
<StackLayout BindableLayout.ItemsSource="{Binding Rules}" Spacing="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}" FontSize="Micro" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</Grid>
</StackLayout>
</StackLayout>
</DataTemplate>
Code behind
var cvVisibleViews = cv.VisibleViews;
if(cvVisibleViews.Count > 0)
{
var rulesStack = cvVisibleViews[0].FindByName<StackLayout>("showRulesStack");
var toggleShowRules = cvVisibleViews[0].FindByName<StackLayout>("toggleShowRules");
var showRulesText = cvVisibleViews[0].FindByName<Label>("showRulesText");
double height = 0;
height = height + toggleShowRules.Height;
height = height + showRulesText.Height;
if (rulesStack.IsVisible && rulesStack.Height > -1)
{
height = height + rulesStack.Height;
}
cv.HeightRequest = height;
}
It seems like the new height of the CarouselView is measured from the center of it. Like the content is placed outside above the CarouselView
Any idea to realign the content inside the resized CarouselView?
Thanks a lot!

A button with a number on top of it - Can I create that without using Grid.Row

I asked a developer to create something like this:
Here solution is here:
<?xml version="1.0" encoding="UTF-8"?>
<StackLayout
HorizontalOptions="Center"
VerticalOptions="Center"
x:Class="J.Templates.CardButtonTemplate2"
x:Name="this"
xmlns ="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" >
<t:TextLabel
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center"
Text="3 pts"
TextColor="Black"
VerticalOptions="Start" />
<Frame
BackgroundColor="Blue"
CornerRadius="10"
HasShadow="False"
Padding="0"
VerticalOptions="FillAndExpand" >
<Grid RowSpacing="0" VerticalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition x:Name="firstRow" Height="35"/>
</Grid.RowDefinitions>
<Label
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center"
Text="Easy"
TextColor="White"
VerticalOptions="CenterAndExpand"
VerticalTextAlignment="Center"
x:Name="textA" />
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand, Source={x:Reference this}}" NumberOfTapsRequired="1" />
</Grid.GestureRecognizers>
</Grid>
</Frame>
</StackLayout>
What I would like to know are two things:
a) Is this the only way I can set the height using the RowDefinition or is there another cleaner way to do this?
b) I have five of these buttons in a row and the width expands so they touch each other. How can I limit the width of the button?
Here is a simple example:
<StackLayout>
<Label Text="3 pts"/>
<Button HeightRequest="35" WidthRequest="50" CornerRadius="10"
Command="{Binding TapCommand, Source={x:Reference this}}" Text="Easy"/>
</StackLayout>
for all your HorizontalOptions and VerticalOptions, use Center. That should give you what you're looking for and simplify your code quite a bit.
As for question B, you can set the Spacing(if using a StackLayout) or ColumnSpacing(if using a Grid) to force separation between the buttons.
a) Is this the only way I can set the height using the RowDefinition or is there another cleaner way to do this?
It is easier to use a StackLayout as parent layout(manually set its HorizontalOptionsandVerticalOptions) , then you could set HeightRequest on control.
For example
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Label Text="3 pts" HorizontalTextAlignment="Center"/>
<Button HeightRequest="50" CornerRadius="10" BackgroundColor="Blue" Text="Easy" TextColor="White"/>
</StackLayout>
b) I have five of these buttons in a row and the width expands so they touch each other. How can I limit the width of the button?
You could wrap Grid inside stackLayout , and create ColumnDefinitions to control their width .
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Grid ColumnSpacing="0" HeightRequest="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Button HeightRequest="50" Grid.Column="0" CornerRadius="10" BackgroundColor="Blue" Text="Easy" TextColor="White"/>
<Button HeightRequest="50" Grid.Column="1" CornerRadius="10" BackgroundColor="Red" Text="Easy" TextColor="White"/>
<Button HeightRequest="50" Grid.Column="2" CornerRadius="10" BackgroundColor="Green" Text="Easy" TextColor="White"/>
<Button HeightRequest="50" Grid.Column="3" CornerRadius="10" BackgroundColor="Purple" Text="Easy" TextColor="White"/>
<Button HeightRequest="50" Grid.Column="4" CornerRadius="10" BackgroundColor="Orange" Text="Easy" TextColor="White"/>
</Grid>
</StackLayout>

Resize Frame Within Grid Row

I am using xamarin with visual studio for IOS and Android
I am trying to add a scrollView to the same grid row that my Frame is on but because the frame is the same size as my grid row it cuts off the bottom of the frame (I believe)
What I've tried :
1. Setting the RowDefinition to "*" and "Auto" but the frame increases the length with the grid and
2. Adjusting the scrollView height
I feel like my best option would be resizing the frame so it's smaller than the grid row, however heightRequest doesn't work.. I would love any suggestions.
Here is the code:
<Grid HeightRequest="400">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="130"/>
<RowDefinition Height="60"/>
<RowDefinition Height="20"/>
<RowDefinition Height="300"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollView Orientation="Horizontal" Grid.Row="4" Margin="0,20,0,0" HeightRequest="390" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
<Frame WidthRequest="200" HeightRequest="300" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
<StackLayout>
<Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
<Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b" HorizontalOptions="Center" Margin="0,-5,0,0"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
<Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
<Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
<Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</Grid>
<StackLayout Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
as you have defined the StackLayout Orientaition="Horizontal",the Frame will fill the height by default.
if you want to resize the Frame height,you sholud set its VerticalOptions property
like :
<ScrollView Orientation="Horizontal" Grid.Row="4" Margin="0,20,0,0" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Horizontal" BackgroundColor="Red" >
<Frame VerticalOptions="CenterAndExpand" HeightRequest="270" WidthRequest="200" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
<StackLayout>
<Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
<Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b" HorizontalOptions="Center" Margin="0,-5,0,0"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
<Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
<Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
<Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
The specific size is set according to your requirements.
or you also could set Padding property to the StackLayout to resize the Frame location like:
<StackLayout Padding="0,10,0,10" Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
<Frame WidthRequest="200" HeightRequest="300" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
<StackLayout>
<Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
<Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b" HorizontalOptions="Center" Margin="0,-5,0,0"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
<Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
<Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
<Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>

How can I prevent xamarin form ListView items overlapping?

I am currently working on a Xamarin project which displays some content requesting from an API. The requested content is a list of objects and they will be displayed in a list view. API call is working properly and provide responds as expected. When I display the respond in a list view it looks little messy.
This is my Xamarin form page code (Some contents are hard coded in order to make the UI consistent before further development):
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:helper="clr-namespace:WinningQuotes.Helper;assembly=WinningQuotes"
x:Class="WinningQuotes.Views.QuotesPage"
Title="Quotes">
<ContentPage.Content>
<StackLayout BackgroundColor="LightGray" Padding="0, 0, 0, 10">
<ListView x:Name="ListQuote" ItemTapped="ListQuote_OnItemTapped" SeparatorVisibility="None" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="LightGray" Padding="10, 10, 10, 0">
<Grid RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.25}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.75}"
BackgroundColor="#FFFFFF" ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" BackgroundColor="Brown" Padding="10">
<Label Text="Author" TextColor="#FFFFFF" FontSize="18" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Padding="10, 5, 10, 5" Orientation="Horizontal">
<Image Source="{helper:EmbededImage WinningQuotes.Resources.Images.Timeline.png}" Aspect="AspectFill" />
<StackLayout Margin="10, 0, 0, 0" HorizontalOptions="StartAndExpand">
<Label Text="{Binding quote_text}" TextColor="Brown" FontSize="18" />
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" Padding="10, 5, 5, 5">
<Label Text="AUTHOR HITS" FontSize="10" TextColor="DarkGray" VerticalOptions="End" />
<Label Text="24" FontSize="18" TextColor="DarkGray" VerticalOptions="End" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="2" Padding="5">
<Label Text="QUOTES HITS" FontSize="10" TextColor="DarkGray" VerticalOptions="End" />
<Label Text="120" FontSize="18" TextColor="DarkGray" VerticalOptions="End" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="3" Padding="5, 5, 10, 5">
<Button Text="Quotes" VerticalOptions="FillAndExpand" HorizontalOptions="EndAndExpand" FontSize="10" FontAttributes="None" />
</StackLayout>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
When I run this on android emulator or real android device, it looks like this:
ListView element contents are overlapping and some unnecessary space below the brown box etc. How can I make this page look consistent?
You can use Spacing in StackLayout to seperate the childeren.
I believe changing default margin to this->Margin="10, 0, 0, 0" is the reason of overlapping. Try it this way. Hope it works.
<StackLayout Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Padding="10, 5, 10, 5" Orientation="Horizontal" Spacing="10">
<Image Source="{helper:EmbededImage WinningQuotes.Resources.Images.Timeline.png}" Aspect="AspectFill" />
<Label Text="{Binding quote_text}" TextColor="Brown" FontSize="18" />
</StackLayout>
This can somethings happen if you haven't defined a RowHeight or set HasUnevenRows
<ListView RowHeight="125">
<ListView HasUnevenRows="true">

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