I have an AbsoluteLayout on a view in my Xamarin.Forms app, with 3 buttons in it. After another control is added programmatically, it covers the buttons. I cannot figure out how I can make the buttons to be always in front.
<ContentPage.Content>
<AbsoluteLayout x:Name="Container" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button
Style="{StaticResource CallButtonStyle}"
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".85,.02"
Text="{Binding CameraSwitchIcon}" />
<Button
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".15,.95,80,80"
Text="{Binding VideoToggleIcon}" />
<Button
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".85,.95,80,80"
Text="{Binding AudioToggleIcon}" />
</AbsoluteLayout>
</ContentPage.Content>
all XF Layouts have RaiseChild() and LowerChild() methods you can use to adjust the Z index
Related
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
I am trying to create a TabView but although I try to insert it at the bottom, it continues to be displayed at the top
<xct:TabView TabStripPlacement="Bottom" IsSwipeEnabled="False" BackgroundColor="White">
<xct:TabViewItem
x:Name="Home"
Text="Home"
TextColorSelected="Black"
TextColor="Gray"
Icon="IC003.png">
</xct:TabViewItem>
<xct:TabViewItem
x:Name="Diario"
Text="Diario"
TextColorSelected="Black"
TextColor="Gray"
Icon="Smile.png">
</xct:TabViewItem>
</xct:TabView>
Try to wrap it inside a Grid like this:
<Grid RowDefinitions="*, Auto">
<!-- insert stuff here -->
<xct:TabView Grid.Row="2" TabStripPlacement="Bottom" IsSwipeEnabled="False" BackgroundColor="White">
</Grid>
I think that the TabStripPlacement does not mean that it will be placed on the bottom of the outer element.
TabStripPlacement is used to set the tab at bottom or top. https://learn.microsoft.com/zh-cn/xamarin/community-toolkit/views/tabview
We could put the tabview inside the layout like StackLayout, Grid and so on. But without layous, it still works. We just need to give some contents of the items.
<xct:TabView
BackgroundColor="White"
IsSwipeEnabled="False"
TabStripHeight="60"
TabStripPlacement="Bottom">
<xct:TabViewItem
x:Name="Home"
Icon="IC003.png"
Text="Home"
TextColor="Gray"
TextColorSelected="Black">
<StackLayout BackgroundColor="Gray">
<Label
HorizontalOptions="Center"
Text="TabContent1"
VerticalOptions="Center" />
</StackLayout>
</xct:TabViewItem>
<xct:TabViewItem
x:Name="Diario"
Icon="Smile.png"
Text="Diario"
TextColor="Gray"
TextColorSelected="Black">
<StackLayout>
<Label
HorizontalOptions="Center"
Text="TabContent2"
VerticalOptions="Center" />
</StackLayout>
</xct:TabViewItem>
</xct:TabView>
I have created a BottomBar in my App.xaml and I am using ControlTemplate to call it into the Xaml file of a different page.
My problem is: I have tried using HeightRequest inside the Layout in my App.xaml file, also tried using it in the Xaml file of the other page when calling it, and nothing seems to work. The page doesn't respect the HeightRequest.
I want them all to have the same height on every page (60).
page1
page2
page3
As you can see, the bottom bar has a different size on each page.
My App.xaml:
<ControlTemplate x:Key="CartTemplate" >
<AbsoluteLayout
x:Name="CartSection"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="#004EFF"
HeightRequest="60">
<Image Source="caricon"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
AbsoluteLayout.LayoutBounds="0.5,0.5"
AbsoluteLayout.LayoutFlags="PositionProportional"/>
<Grid
HeightRequest="22"
IsVisible="{TemplateBinding BindingContext.OrderCountVisible}"
WidthRequest="22"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
AbsoluteLayout.LayoutBounds="0.5,0.5"
AbsoluteLayout.LayoutFlags="PositionProportional"
Padding="25,0,0,10">
<Ellipse Fill="White"/>
<Label
Text="{TemplateBinding BindingContext.cartNumberItems}"
HorizontalOptions="CenterAndExpand"
TextColor="#004EFF"
FontAttributes="Bold"
FontSize="14"
Padding="0,0,0,3"
FontFamily="{StaticResource Helvetica}"/>
</Grid>
<AbsoluteLayout.GestureRecognizers>
<TapGestureRecognizer Command="{TemplateBinding BindingContext.CarCommand}" />
</AbsoluteLayout.GestureRecognizers>
</AbsoluteLayout>
</ControlTemplate>
This is how I am calling the Template (At the bottom just above the end tags):
<TemplatedView ControlTemplate="{StaticResource CartTemplate}"/>
</StackLayout>
</ContentPage.Content>
Thanks in advance.
I work on a Xamarin.Forms app that will contain a page with 2 CollectionView items:
an horizontal CollectionView that will display events
a vertical CollectionView that will display posts
I would like that the first list is progressively hidden as soon as the user starts to scroll on the second list.
We can found this behaviour on a sample from Syncfusion: but they use a SfRotator as control for the horizontal list:
I've tried to reproduce the same behaviour on my page, but it doesn't work as expected. My horizontal list is not hidden until I scroll vertically on this first list itself. If I scroll on the second vertical list, the first list is still visible:
My XAML looks like this:
<ContentPage.Content>
<RefreshView x:DataType="vm:NewsViewModel"
IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<ScrollView>
<StackLayout Padding="16" Spacing="16">
<CollectionView x:Name="EventsListView"
ItemsSource="{Binding Events}"
HeightRequest="250"
VerticalScrollBarVisibility="Never"
SelectionMode="None">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ctrl:ShadowFrame BackgroundColor="Red">
<StackLayout x:DataType="model:Event" >
<Label Text="{Binding Name}" />
<Image Source="{Binding Image}" />
</StackLayout>
</ctrl:ShadowFrame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<CollectionView x:Name="NewsListView"
ItemsSource="{Binding News}"
VerticalScrollBarVisibility="Never"
SelectionMode="None">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ctrl:ShadowFrame>
<StackLayout x:DataType="model:News">
<Label Text="{Binding Description}" />
<Label Text="{Binding Date}" />
<Image Source="{Binding Image}" />
</StackLayout>
</ctrl:ShadowFrame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
</RefreshView>
</ContentPage.Content>
=> Is there a way to achieve this?
Quick reminder that you Shouldn't use Scrollable Elements inside other Scrollable Element, it usually breaks how both work, Quoting:
Xamarin doesn't recommend using the ListView, WebView, or ScrollView
inside a ScrollView. Microsoft Xamarin.Forms Official Documentation
says that ScrollViews should not be nested. In addition, ScrollViews
should not be nested with other controls that provide scrolling, like
ListView and WebView.
And this is what happening:
The ScrollView isn't actually scrolling, the Vertical CollectionView is the one giving the Illusion that the page is scrolling, meaning that the Horizontal one is always on top.
How to fix it?
To fix this, you should remove the Vertical CollectionView and use some kind of Repeater View, this Post will guide you on how to achieve it.
I'm trying to setup a XAML form definition which shows a WebView but which has a Floating Action Button over the bottom right.
If I use an AbsoluteLayout, the FAB appears correctly over the WebView. However, due to the Height/WidthRequest of the Webview, it is displayed at full size - the text disappears off the right side and doesn't wrap, so the page doesn't scroll.
<ContentPage ...snip... Title="Document">
<StackLayout Padding="5,5,5,5" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<WebView x:Name="webViewDocument" WidthRequest="1000" HeightRequest="1000" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalTextAlignment="Center" HorizontalTextAlignment="End" FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.95,0.975,-1,-1"
Margin="10" />
</StackLayout>
</ContentPage>
If I use a StackLayout, the WebView sizes and scrolls correctly, however the FAB occupies a full width strip at the bottom of the screen and the text does not appear behind it - the WebView stops above it.
I've spent the last hour and a half trying every combination of nested Layout I can think of to solve this and just can't get it right - can some kind layout genius out there please tell me how I can solve this.
Thanks
Use a Grid and do not indicate rows or columns.
Something like this:
<Grid Padding="5,5,5,5"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<WebView x:Name="webViewDocument"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalOptions="End"
HorizontalOptions="Center"
HorizontalTextAlignment="End"
FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
VerticalOptions="End"
HorizontalOptions="End"
Margin="10" />
</Grid>
This should work for you.