TapGesture won't fire when adjusted inside a layout Xamarin - xaml

So basically I have an annoying thing when I'm trying to adjust my frame inside an AbsoluteLayout such:
<AbsoluteLayout Grid.Column="4">
<Frame CornerRadius="20"
Padding="0"
BorderColor="#9f6b34"
Background="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="fourthButton_Clicked"/>
</Frame.GestureRecognizers>
<Label Text="Classic and traditional"
Padding="35"
FontSize="40"
FontFamily="font2"
HorizontalTextAlignment="Center"
TextColor="#211717">
</Label>
</Frame>
When the code is like this it's fine but when I try to adjust the frames' position with .LayoutBounds it just won't click. I've tried changing it to a StackLayout and click event fires sometimes in various different positions inside the frame. I've put ImageButton, regular button and also tried using my label's GestureRecognizer but it just won't click when I made adjustments.
here is a gif of the situtation. the top frame isn't adjusted the bottom one is

When the code is like this it's fine but when I try to adjust the frames' position with .LayoutBounds it just won't click.
I try your code, and it works fine, having no problem, please take a look the following code:
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<AbsoluteLayout>
<Frame
Padding="0"
AbsoluteLayout.LayoutBounds="0, 10, 300, 200"
BorderColor="#9f6b34"
CornerRadius="20">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="fourthButton_Clicked" />
</Frame.GestureRecognizers>
<Label
Padding="35"
FontFamily="font2"
FontSize="40"
HorizontalTextAlignment="Center"
Text="Classic and traditional"
TextColor="#211717" />
</Frame>
</AbsoluteLayout>
<StackLayout Grid.Row="1">
<Frame
Padding="0"
BorderColor="#9f6b34"
CornerRadius="20">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="fourthButton_Clicked" />
</Frame.GestureRecognizers>
<Label
Padding="35"
FontFamily="font2"
FontSize="40"
HorizontalTextAlignment="Center"
Text="Classic and traditional"
TextColor="#211717" />
</Frame>
</StackLayout>
</Grid>
</StackLayout>
I put Frame in AbsoluteLayout and also use AbsoluteLayout.LayoutBounds to adjust Frame poaition, I also put frame in StackLayout, it also works fine.

Related

Not able to close the popup on click event in Xamarin Forms

I have used Rg.Plugins.Popup.
I have aligned close button which is aligned at top right corner 50% outside the window from right and top side as shown in below image.
Now it is showing as per expected design but issue is when I tap on it, only inward part of close button get clicked and outward part is not clickable. So not able to close popup till the time we click that inward part of Close button.
I am sharing my code for more idea.
<ScrollView Orientation="Horizontal">
<AbsoluteLayout HorizontalOptions="Center"
VerticalOptions="Center"
Padding="0,0,0,0"
Margin="0,0,0,0"
Opacity="1">
<Frame AbsoluteLayout.LayoutBounds="0,0,1,1"
IsClippedToBounds="True"
AbsoluteLayout.LayoutFlags="All"
HasShadow="False"
x:Name="outframe"
Margin="0"
CornerRadius="15"
Padding="0"
OutlineColor="#ffffff"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal"
x:Name="stkVideo"
Padding="0">
<Image x:Name="ximage"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="#4A4541" />
<video:VideoPlayer x:Name="trainingPlayer"
DisplayControls="True"
FillMode="ResizeAspectFill"
FlowDirection="LeftToRight"
Volume="100"
Grid.Row="0"
IsVisible="false">
</video:VideoPlayer>
</StackLayout>
</Frame>
<ContentView AbsoluteLayout.LayoutBounds="0.50, 0.50, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional">
<Image Source="Play.png"
HeightRequest="{OnIdiom Phone=70,Tablet=85}"
WidthRequest="{OnIdiom Phone=70,Tablet=85}"
Aspect="AspectFit"
VerticalOptions="Center"
HorizontalOptions="Center"
x:Name="icnplay" />
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" />
</ContentView.GestureRecognizers>
</ContentView>
<ContentView AbsoluteLayout.LayoutBounds="1.04, -0.09, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional" >
<Image Source="close.png"
HeightRequest="{OnIdiom Phone=35,Tablet=45}"
WidthRequest="{OnIdiom Phone=35,Tablet=45}"
Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</ContentView.GestureRecognizers>
</ContentView>
</AbsoluteLayout>
</ScrollView>
What code changes do I need to do so that popup get close when user will click on Close button part which is outside the window as well?
The issue is the close button lies outside the bounds of the <AbsoluteLayout>. One solution involves a few steps:
Make the AbsoluteLayout larger by some amount
Add a margin to the video player Frame equal to how much larger the AbsoluteLayout was made
Update the position of the close button to remain in the top right corner of the video player Frame
Now the close button is contained within the AbsoluteLayout and the entire close button area will receive and raise events for taps/clicks.
I guess that you want to achieve this:
Clicking outside the yellow frame will close the everything.
The red part has a GestureRecognizer
You can achieve this by using a Grid or a Absolute layout, these views allow you to "stack" or add layers to the UI.
Code example:
<AbsoluteLayout
BackgroundColor="Green"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
<Button Clicked="Button_Clicked" Text="Coso" />
<Button Clicked="Button_Clicked_1" Text="Show popup" />
</StackLayout>
<Frame
x:Name="closeFrame"
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Red"
IsVisible="false">
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped" />
</Frame.GestureRecognizers>
</Grid>
<Frame
x:Name="popupGrid"
AbsoluteLayout.LayoutBounds="0.5,0.5,0.5,0.5"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Yellow"
IsVisible="false">
<Label Text="Close ouside this" TextColor="Black" />
</Frame>
</AbsoluteLayout>
In code behind you turn the visibile on/off of the element

AbsoluteLayout with proportional height and with minimum and maximum heights

We need a banner, called bannerView in the code bellow, to shrink or expand according to the device height.
However this banner height:
cannot be smaller than 60 units
cannot be bigger than 146 units
code:
<AbsoluteLayout>
<StackLayout
Padding="0"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="SizeProportional"
HorizontalOptions="FillAndExpand">
<AbsoluteLayout
x:Name="bannerView">
<Image
AbsoluteLayout.LayoutBounds="0,0,1.05,1"
AbsoluteLayout.LayoutFlags="SizeProportional"
Aspect="AspectFill"
Source="banner.jpg">
</Image>
<Label
Margin="16,18,16,36"
AbsoluteLayout.LayoutBounds="0,1,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional"
Text="{Binding Name}">
</Label>
<Label
Margin="16,18,16,18"
AbsoluteLayout.LayoutBounds="0,1,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional"
Text="{Binding EmployeeId}">
</Label>
</AbsoluteLayout>
<StackLayout>
<!-- Dynamic content -->
</StackLayout>
</StackLayout>
</AbsoluteLayout>
Note: We need the outer AbsoluteLayout to add a gradient effect on the screen
Have you considered the possibility to use a FlexLayout containing the banner view element, and this one having the HeightRequest attribute binded to view model?
I used something similar as ControlTemplate to achieve a custom page's header depending on the device navigation bar height:
<FlexLayout Direction="Column" JustifyContent="Center">
<!--HEADER-->
<Grid IsVisible="{TemplateBinding BindingContext.ToolbarVisibled}" HeightRequest="{TemplateBinding BindingContext.ToolbarHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".8*"/>
<ColumnDefinition Width=".2*"/>
</Grid.ColumnDefinitions>
<!--...-->
</Grid>
<!--CONTENT HERE-->
<FlexLayout Direction="Column" JustifyContent="Center">
<ContentPresenter FlexLayout.Grow="1"/>
</FlexLayout>
</FlexLayout>

Xamarin forms - unwanted extra space under TableView

I am creating my first Android app. I want to show TableView with some input fields and then a button to process the inputs.
I don't know why but there is extra space under TableView or the button is aligned to the bottom but it is opposite to the settings.
Can you help me fix it?
<StackLayout Orientation="Vertical" VerticalOptions="Start" Padding="20,15,20,0" Spacing="0">
<Label Text="This is TableView"></Label>
<TableView Intent="Settings" VerticalOptions="Start">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="item 1"/>
<Entry></Entry>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="item 2"/>
<Entry></Entry>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
<Label Text="TableView - END"></Label>
<Button Text="My button" TextColor="DodgerBlue" VerticalOptions="Start" HorizontalOptions="Fill" Margin="40, 10, 40, 10"/>
<Frame VerticalOptions="StartAndExpand" BackgroundColor="Transparent" BorderColor="Black">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill">
<Label Text="aaaa" HorizontalOptions="StartAndExpand"></Label>
<Label Text="value" HorizontalOptions="End"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="aaaa"></Label>
<Label Text="value"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="aaaa"></Label>
<Label Text="value"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
Your best option is to define the RowHeight for each cell, and then specify the HeightRequest for the tableview. this way you can define the space it will occupy
<TableView Margin="0" Intent="Settings" HeightRequest="120" RowHeight="60" VerticalOptions="Start">
Unfortunately, this is how Xamarin.Forms TableView/ListView works. It is not expected to have anything below it. If you need something below you can either set the height of TableView manually or to put the content in the last cell, neither thing is perfect but in any case you need to look for some workaround as this is behavior by design (it would be a bit easier if you could use the ListView instead of TableView).
As you were asking what you can do besides using a TableView, of course a Grid would be possible, please see the following example:
<Grid VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!-- for the label -->
<ColumnDefinition Width="*" />
<Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" /> <!-- For the separator, you might have to experiment with the height -->
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Label Text="Item 1" />
<Entry Grid.Row="0" Grid.Column="1" />
<BoxView BackgroundColor="Black"
HeightRequest="1"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2" /> <!-- The separator -->
<Label Grid.Row="2" Grid.Column="0" Text="Item 2" />
<Entry Grid.Row="2" Grid.Column="1" />
<BoxView BackgroundColor="Black"
HeightRequest="1"
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2" /> <!-- The separator -->
</Grid>
I am using BoxViews with a black background color and a HeightRequest of 1 for the separator. You might have to experiment with the color and the height to get the results you want. Values below 1 are possible and result in finer lines. In a real world example I've used .5.
Anyway, this makes the XAML way more cluttered. Grid-designs (while I am using them myself) tend to get quite unwieldy.
I am not sure if this what you are looking for but my understanding of the question tells me you are talking about the label Value being away from the rest.
if you check the code for this label :
<Label Text="value" HorizontalOptions="End"></Label>
the HorizontalOptions is set to "End" which is causing this changing it to start will fix your problem
Feel free to revert in case if I missed anything
Goodluck

How to make this layout using XAML and Xamarin?

I would like to ask how can I make a design similar to the below image using XAML and Xamarin?
I mean a main image image and a profile image on the top of it with half of it only.. and the news title is on the main image then at the top right corner there is the news time.
Try this into ContentPage:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- header content -->
<StackLayout BackgroundColor="WhiteSmoke">
<Label HorizontalOptions="End" Text="8 hours ago" VerticalOptions="Center" FontSize="Large" FontAttributes="Bold"/>
</StackLayout>
<!-- body content -->
<StackLayout Grid.Row="1">
<Image Source="xamarin.png" Aspect="AspectFill"/>
</StackLayout>
<!-- profile image -->
<Image Source="usermale.png"
VerticalOptions="End" HorizontalOptions="Start"
HeightRequest="100" WidthRequest="100"
TranslationY="50"/>
</Grid>
Yuo will get this:

keyboard popup its hide last row of grid

I have using AppCompact Themes in xamarin forms android when keyboard popup its hide last row of grid
Before Keyboard Popup see Image
Below is my code. I've created the grid having title, description. I want to show the camera icon and its bar above the keyboard when it comes and go back to the bottom of the screen when the keyboard hides.
<Grid RowSpacing="0" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<StackLayout
Grid.Row="0"
Padding="10,8"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal">
<Entry
x:Name="GeneralPostTitle"
Margin="10,10,10,0"
FontSize="20"
HorizontalOptions="FillAndExpand"
Placeholder="Title"
PlaceholderColor="Gray"
TextColor="Black"
VerticalOptions="End" />
</StackLayout>
<StackLayout
Grid.Row="1"
Padding="10,0"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Spacing="0"
VerticalOptions="FillAndExpand">
<StackLayout Padding="0" VerticalOptions="Fill">
<customRenderer:PlaceholderEditor
x:Name="EditorDescription"
Margin="10,10,10,0"
FontSize="22"
HeightRequest="130"
HorizontalOptions="Fill"
Placeholder="Add Description"
PlaceholderTextColor="Gray"
TextColor="Gray" />
</StackLayout>
<ScrollView Padding="10" Orientation="Horizontal">
<StackLayout
x:Name="Images"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
Spacing="5" />
</ScrollView>
</StackLayout>
<StackLayout
Grid.Row="2"
Padding="20,0"
BackgroundColor="#FAFAFA">
<Image
Aspect="AspectFit"
HeightRequest="40"
HorizontalOptions="StartAndExpand"
WidthRequest="30">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="camera"
WinPhone="Icons/camera.png"
iOS="Icons/camera.png" />
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ImagePost_OnTapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
After Keyboard Popup see Image
You need to set SoftInput to AdjustResize in order for Android to resize the views so they stay visible. In Forms, you can do this with the platform specifics feature in Forms 2.3.3.
Check out this Gist on how to do this in OnCreate(). Note the workaround that's needed to remove an underlay added to the status bar in API 21+.