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>
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 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
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
My goals:
Place an Editor inside of a Frame, and the editor never expand outside of the frame, no matter how much text is supplied.
Place an ActivityIndicator 'inside' a Button (and make the Button text not visible when IsBusy).
Make it relative for different sized devices.
My questions
Is there a way to make these controls appear 'on top' of each other using FlexLayout?
Could there be another, more appropriate, layout for my problem?
Current setup:
What I'd like it to look like:
The current XAML
<!-- This is where the main content on the slide up menu starts -->
<Frame
Grid.Row="1"
BorderColor="white"
CornerRadius="0"
HasShadow="True"
OutlineColor="White">
<FlexLayout
AlignItems="Center"
Direction="Column"
JustifyContent="SpaceEvenly">
<!-- Title -->
<Label
Grid.Row="0"
FontAttributes="Bold"
FontSize="Medium"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="{util:Translate Viewtitle}" />
<!-- Scrollable text -->
<ScrollView
x:Name="ActionViewScroller"
Grid.Row="1"
Margin="10"
HorizontalOptions="Fill"
VerticalOptions="Center"
VerticalScrollBarVisibility="Always">
<Label Text="{Binding ActionText}" />
</ScrollView>
<!-- Text box for optional notes -->
<Frame
Grid.Row="2"
Margin="10"
BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="0"
FlexLayout.Gorw="1"
HasShadow="False"
WidthRequest="280" />
<Editor
x:Name="ActionViewNotes"
Grid.Row="2"
Margin="15"
AutoSize="TextChanges"
FlexLayout.Grow="1"
HorizontalOptions="FillAndExpand"
IsSpellCheckEnabled="True"
Keyboard="Default"
MaxLength="150"
Placeholder="{util:Translate PlaceholderText}"
Text="{Binding ConsentNotes, Mode=OneWayToSource}"
VerticalOptions="Center"
WidthRequest="280" />
<!-- Submit Button -->
<Button
Grid.Row="3"
AlignSelf="Stretch"
Command="{Binding DoSomething}"
CommandParameter="{Binding Source={Reference TheNotes}, Path=Text}"
HeightRequest="70"
HorizontalOptions="FillAndExpand"
IsVisible="{Binding IsBusy, Converter={StaticResource NegateBooleanConverter}}"
Style="{StaticResource TertiaryButtonStyle}"
Text="{util:Translate DoSomethingText}"
WidthRequest="350" />
<ActivityIndicator
Grid.Row="3"
Margin="5"
HorizontalOptions="Center"
IsRunning="{Binding IsBusy}"
IsVisible="{Binding IsBusy}"
Style="{DynamicResource BaseActivityIndicatorStyle}" />
</FlexLayout>
</Frame>
1.Is there a way to make these controls appear 'on top' of each other using FlexLayout?
Yes, you can put the editor on top of Frame in your case. It is the same as you put a Frame inside a Flexlayout. I added some backgroundColor to the controls to make it clear.
Here is a example of put the editor inside Frame:
<StackLayout>
<!-- Place new controls here -->
<Frame
Grid.Row="1"
BorderColor="white"
CornerRadius="0"
HasShadow="True"
OutlineColor="White">
<FlexLayout
AlignItems="Center"
Direction="Column"
JustifyContent="SpaceEvenly">
<!-- Title -->
<Label
Grid.Row="0"
FontAttributes="Bold"
FontSize="Medium"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Green"
Text=" Viewtitle" />
<!-- Scrollable text -->
<ScrollView
x:Name="ActionViewScroller"
Grid.Row="1"
Margin="10"
HorizontalOptions="Fill"
VerticalOptions="Center"
VerticalScrollBarVisibility="Always">
<Label Text="123" />
</ScrollView>
<!-- Text box for optional notes -->
<Frame
Grid.Row="2"
Margin="10"
BorderColor="LightGray"
CornerRadius="0"
FlexLayout.Grow="1"
HasShadow="False"
WidthRequest="280"
BackgroundColor="Red">
<!-- Put your Editor inside Frame here -->
<Editor
x:Name="ActionViewNotes"
Grid.Row="2"
Margin="15"
AutoSize="TextChanges"
FlexLayout.Grow="1"
HorizontalOptions="FillAndExpand"
IsSpellCheckEnabled="True"
Keyboard="Default"
MaxLength="150"
Placeholder="PlaceholderText"
VerticalOptions="Center"
WidthRequest="280"
BackgroundColor="AliceBlue"/>
</Frame>
</FlexLayout>
</Frame>
</StackLayout>
2.Could there be another, more appropriate, layout for my problem?
There are several ways to achieve the layout for your problem. You can use StackLayout,AbsoluteLayout,RelativeLayout,Grid and so on. In my opinion, which to choose depending on yourself. Each way has its own advantages. Flexlayout is more conveniently to arrange its children horizontally and vertically in a stack.
You can refer to the official documents about layout.There are several demos similar with your layout and you can get the advantages of each layout option from there.
Layouts
I'm creating a form in Xaml using Xamrin which contains absolute layout in which i'm hiding a stacklayout. but one more stacklayout just down below of hidden stacklayout but hidden stacklayout is taking up space.
What i want to do.When i did hide one stacklayout another stacklayout should take place of hidden staklayout.
Thanks for help and supports.
I've resolved the issue:
I followed this link
https://forums.xamarin.com/discussion/83632/hiding-and-showing-stacklayout in this link they said that use grid and make row height auto and it will automatically adjust the extra space of layout.
<Grid VerticalOptions="Fill">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="1" Spacing="20">
<StackLayout Margin="10,0">
<Label Text="lable 1" VerticalOptions="Center" FontSize="Small" />
<Label Text="lable 2" VerticalOptions="Center" FontSize="Small" />
</StackLayout>
<StackLayout IsVisible="{Binding IsStudent}" Margin="10,0">
<Label Text="lable3" VerticalOptions="Center" FontSize="Small" />
<Label Text="lable 4" VerticalOptions="Center" FontSize="Small" />
<Label Text="lable 5" VerticalOptions="Center" FontSize="Small" />
<Label Text="lable 6" VerticalOptions="Center" FontSize="Small" />
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="2" Spacing="20" >
<local:Button
x:Name="btnSave"
Text="Submit"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
IsVisible="{Binding IsBusy, Converter={x:Static local:InverseBoolConverter.Instance}}"
AutomationId="saveButton" />
</StackLayout>
</Grid>
No need for a grid.
Set the IsVisible AND HeightRequest properties.
MyStackLayout.IsVisible = false;
MyStackLayout.HeightRequest = 0; // trigger recalc of space layout.
The change in heightrequest triggers the desired recalculations.
I've too looked into why those hidden controls are taking space and well... they ARE taking space and that's it.
You can do a simple addition and removing of labels. Something like this:
public class MyStack : StackLayout
{
Label
_label1 = new Label(),
_label2 = new Label(),
_label3 = new Label();
public void ShowLabels()
{
Children.Add(_label1);
Children.Add(_label2);
Children.Add(_label3);
}
public void HideLabels()
{
Children.Remove(_label1);
Children.Remove(_label2);
Children.Remove(_label3);
}
}
My recomendation is putting a StackLayout at the bottom of the content, in order to keep the original height of the other elements at the top.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CentroDono.Views.YOURVIEWPAGE"
Title="YOURVIEWTITLE"
x:Name="YOURPAGECONTENTNAME">
<ContentPage.Content>
<StackLayout>
<!--VISIBLE CONTENT-->
<Label Text="HELLO"/>
</StackLayout>
<StackLayout>
<Label Text="FOOTER"/>
<!--INVISIBLE CONTENT-->
<Label x:Name="_searchText" Text="Result1" IsVisible="False"/>
<Label x:Name="_searchText2" Text="Result2" IsVisible="False"/>
<Label x:Name="_searchText3" Text="Result3" IsVisible="False"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>