May I know how can I make the TabView Scrollable such that tab-names are not wrapped
<TabView selectedIndex="1" (selectedIndexChange)="onIndexChanged($event)" sdkExampleTitle sdkToggleNavButton>
<StackLayout *tabItem="{title: 'Tab 1'}">
<tabone></tabone>
</StackLayout>
<StackLayout *tabItem="{title: 'Tab 2'}">
<tabtwo></tabtwo>
</StackLayout>
<StackLayout *tabItem="{title: 'Tab 3'}">
<tabthree></tabfree>
</StackLayout>
<StackLayout *tabItem="{title: 'Tab 4'}">
<tabfour></tabfour>
</StackLayout>
<StackLayout *tabItem="{title: 'Tab 5'}">
<tabfive></tabfive>
</StackLayout>
</TabView>
and it looks like this.
I'm not aware of any NativeScript api that allows you to set the tabview as scrollable. so in the past, I've created a custom tab component using a ScrollView Horizontally. here is a great example using the scroll view horizontally: http://www.nativescriptsnacks.com/snippets/2016/05/30/horizontal-scroller.html. then show and hide different sections as depending on which button is tapped.
NativeScript-angular ~5.2.0 provides it. Thank you NS!
Here you can prove the official-simple implementation:
https://docs.nativescript.org/angular/cookbook/tab-view-ng
The _automaticallyAdjustsScrollViewInsets method is the responsible to do that.
https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview
Screenshot:
I hope this helps!
Related
I am trying to implement Flyout in Xamarin forms. All the references that I have got are of shell.Flyout but none of them are fulfilling my requirements.
I am showing some data in a ListView and on the click of any perticular item I want the Flyout to open as shown in the mockup.
Please suggest any supporting library or control in Xamarin.
You can try and add it for each item then control the IsVisible attribute
something like this in your Listview item template
<FlexLayout Direction="Row" HorizontalOptions="CenterAndExpand">
<StackLayout FlexLayout.Basis="40%">
<Label Text="Item"
HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout FlexLayout.Grow="1" Padding="5">
<Frame IsVisible="True">
<!--Your Flyout here-->
</Frame>
</StackLayout>
</FlexLayout>
But that means you have to manage them in the back code your self
changing the IsVisible attribute on the Flyout when an item of the list is clicked
Im working with Xamarin for the first time, and I dont have any clue why this appears:
I have a ListView inside a RefreshView (which is new in Xamarin.Forms 3.2) and I want to specify a Footer for this ListView. This footer needs some margin, but the top and right margin arent applied on iOS, regardless of the Version or the (virtual) device model.
<RefreshView>
<ListView>
<ViewCell>
<local:Content_Card/>
</ViewCell>
<ListView.Footer>
<Frame
BorderColor="Green"
Margin="10,10,10,10"
CornerRadius="5">
<Label
Text="FooBar"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Frame>
</ListView.Footer>
</ListView>
</RefreshView>
The code above produces the following:
How can I get the footer aligned with the "cards" above, and also for them to have some spacing between the second card and the footer?
Thanks in advance!
I created a page in Xamarin.Forms that should display some items, coming from an IList data source, and a video after them.
List of items will be displayed using ListView. The video is displayed using VideoView.
This is the actual page code:
<?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:mm="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"
x:Class="MyApp.Views.ItemDetailPage"
Title="{Binding Title}">
<ScrollView>
<StackLayout Orientation="Vertical" Padding="15">
<ListView
ItemsSource="{Binding Item.Properties}"
HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Label Text="{Binding .}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<mm:VideoView x:Name="MyVideo" WidthRequest="320" HeightRequest="190" HorizontalOptions="FillAndExpand" />
<Button x:Name="BtnPlayStop" Text="Iniciar" Clicked="PlayStop_Clicked" BackgroundColor="Silver" TextColor="White"/>
</StackLayout>
</ScrollView>
</ContentPage>
The problems I have when I run the app are:
The page initially appears scrolled down so that the video is initially seen.
The space between the last element of the list view and the video is very big
It´s difficult to do the scroll up or down by using the finger.
Is my XAML code correct? what changes can I apply to fix this weird behaviour?
EDIT: I have found that between the listview and video is nothing. That is why it is difficult to scroll. If I place the finger inside the list view, I can scroll, the same if I place the finger inside the video or button. But if I place the finger between the list view and the video no scroll is performed. Weird, isn't it?
Thanks
Jaime
Finally, I have used solution in this page: https://xamarinsharp.com/2017/05/16/listview-height-issue-in-xamarin-forms-how-to-solve-it/
Basicly, it is to set the HeightRequest of the ListView in code behind according to the number of bound elements.
Regards
Jaime
I have label title header, listview and button. All the controls need to scroll in the page. But Listview is taking more space when placed inside scroll view. Could anyone faced the issue like this?
Listview is already have a scrolling behaviour. Why using a view have scrolling property inside into another scrollview..? You can use Scrollview, if you have more than one listviews in your page.
If you still want to use bath views try to set this property of listview HasUnevenRows="True"
As stated before, it is generally a bad idea to have a ListView inside a ScrollView as stated here.
That being said, I replicated this issue and got the page to stop stretching by adding RowHeight to the ListView.
<ScrollView BackgroundColor="Black">
<StackLayout BackgroundColor="LightBlue">
<Label Text="BEFORE"/>
<ListView BackgroundColor="LightGray"
RowHeight="40">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>mono</x:String>
<x:String>monodroid</x:String>
<x:String>monotouch</x:String>
<x:String>monorail</x:String>
<x:String>monodevelop</x:String>
<x:String>monotone</x:String>
<x:String>monopoly</x:String>
<x:String>monomodal</x:String>
<x:String>mononucleosis</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
<Label Text="AFTER"/>
</StackLayout>
</ScrollView>
I am using the built in searchbar control in xamarin forms. It works fine for my implementation but I notice there is a small amount of whitespace on each side of the control. I see that i can modify margin to 0 but it does not change the whitespace. Here is what it looks like with a picker above it and a map below it:
Here is my xaml
<Picker x:Name="servicePicker" Title="Test" ios:Picker.UpdateMode="Immediately" HorizontalOptions="FillAndExpand">
</Picker>
<SearchBar Margin="0" Placeholder="Enter a zip code" TextChanged="Handle_TextChanged"></SearchBar>
<maps:Map Margin="0"
x:Name="MyMap"
IsShowingUser="true"
MapType="Hybrid"
/>
</StackLayout>
I dont see any option for padding, how can i get rid of the whitespace?
Maybe try setting your stacklayout spacing to zero?
<StackLayout Spacing="0">
...
</StackLayout>