I would like to know how can I have multiple fullscreen in scrollview with nativescript please ?
I tried this :
<Page actionBarHidden="true" class="page">
<ScrollView orientation="vertical">
<StackLayout>
<StackLayout height="100%" backgroundColor="red">
<Label text="Fullscreen 1"></Label>
</StackLayout>
<StackLayout height="100%" backgroundColor="blue">
<Label text="Fullscreen 2"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
</Page>
But the stack aren't fullscreen.
I fixed with this :
Template
<Page actionBarHidden="true">
<ScrollView orientation="vertical">
<StackLayout>
<StackLayout :height="screenHeight" backgroundColor="red">
...
</StackLayout>
<StackLayout :height="screenHeight" backgroundColor="blue">
...
</StackLayout>
</StackLayout>
</ScrollView>
</Page>
And add this :
import { screen } from "tns-core-modules/platform";
...
data() {
return {
screenHeight: 0
};
},
...
created() {
this.screenHeight = screen.mainScreen.heightDIPs
}
Related
I am trying to disable scrolling in my collection view. The reason why I want to do that is there is a scroll view already in my XAML code. When I try to scroll all page elements on the page, collection view elements are also scrolled themselves but I don't want that.
<ScrollView>
<StackLayout Padding="20" Spacing="20" >
<Frame CornerRadius="15"
BackgroundColor="#A6EDB3"
VerticalOptions="StartAndExpand"
HeightRequest="200"
IsClippedToBounds="True"
Padding="0" >
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
<Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
<CollectionView x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,10,0,10">
<Frame HasShadow="False"
HeightRequest="60"
CornerRadius="15"
BackgroundColor="{Binding BackgroundColor}"
HorizontalOptions="Fill" >
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
<StackLayout>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
Having two scrolls on the same page is not the correct way.
Also if you just want to place items above/below your collectionView use the Header/Footer properties then!!
For instance, for the current design, your CollectionView could look something like below and work as you want it to.
<CollectionView Padding="20" x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
<CollectionView.Header>
<StackLayout Spacing="20" >
<Frame CornerRadius="15"
BackgroundColor="#A6EDB3"
VerticalOptions="StartAndExpand"
HeightRequest="200"
IsClippedToBounds="True"
Padding="0" >
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
<Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,10,0,10">
<Frame HasShadow="False"
HeightRequest="60"
CornerRadius="15"
BackgroundColor="{Binding BackgroundColor}"
HorizontalOptions="Fill" >
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
<StackLayout>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Note: you might have to adjust the margin and padding properties for it to look the exact same. My code is just an example.
For more information on CollectionView check: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/
You can use InputTransparent.
In your case what I would do would be to wrap the CollectionView in a <ContentView> as:
<ContentView InputTransparent="True"
x:Name="content">
<CollectionView ItemsSource="{Binding Items}"...>
...
</CollectionView>
</ContentView>
Create a scroll event to your scroll view:
<ScrollView Scrolled="ScrollView_Scrolled">
...
</ScrollView>
Then, with this event, make sure that the InputTransparent switches depending on the scroll position:
private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
var scrollView = sender as ScrollView;
// Get the height of your scroll view
var contentSize = scrollView.ContentSize.Height;
// Get the max position of the scrollview
var maxPos = contentSize - scrollView.Height;
// Compare it to the current position
if (Convert.ToInt16(e.ScrollY) >= Convert.ToInt16(maxPos))
{
// Switch input transparent value
content.InputTransparent = false;
}
else if (Convert.ToInt16(e.ScrollY) == 0)
{
content.InputTransparent = true;
}
}
This is perfectly fine to use two scrollable controls on the same page for what you want to do. And I don't think <CollectionView.Header> would give you the result you want.
I hope it was helpful! 🙂
I am creating a Horizontal scroll in NS. When using below code it's working as expected.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onPageLoad" class="page">
<StackLayout>
<!-- This is where the magic happens -->
<ScrollView orientation="horizontal">
<StackLayout orientation="horizontal" class="scroll-menu">
<StackLayout class="scroll-pane">
<Button text="Button" />
</StackLayout>
<StackLayout class="scroll-pane">
<Button text="Button" />
</StackLayout>
<StackLayout class="scroll-pane">
<Button text="Button" />
</StackLayout>
<StackLayout class="scroll-pane">
<Button text="Button" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
Horizontal Scroll:
But, Once I am using the Repeater it's changing to orientation with Vertical and not scrolling.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onPageLoad" class="page">
<StackLayout>
<!-- This is where the magic happens -->
<ScrollView orientation="horizontal">
<StackLayout orientation="horizontal" class="scroll-menu">
<Repeater items="{{ categories }}" >
<Repeater.itemTemplate>
<StackLayout class="scroll-pane" >
<Label text="{{name}}" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</ScrollView>
</StackLayout>
Change to Vertical when use of Repeater:
What's wrong with the code?
I'm trying to build an scrollable list by using a StackLayout with an ngFor (and a ScrollView, of course).
This is my code:
<StackLayout class="home-panel" verticalAlignment="top">
<StackLayout orientation="horizontal">
<!--Suggest Append SuggetAppend -->
<RadAutoCompleteTextView #autocmp [items]="items" suggestMode="Suggest" displayMode="Plain" width="80%">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
<Button text="Add" (tap)="onAdd()" width="20%"></Button>
</StackLayout>
<ScrollView>
<StackLayout *ngFor="let item of this.shopList">
<Label text="{{item}}" (tap)="itemSelected(item)" fontSize="36"></Label>
</StackLayout>
</ScrollView>
</StackLayout>
The problem arises with the ScrollView at the end of the main StackLayout, which apparently shows only the last element in the shoppingList. The functionality I want to have is a text box on top (with an 'add' button on the same line), and a scrollable list filling the rest of the screen.
You have to wrap your StackLayout with the *ngFor into another Layout container, so the ScrollView can calculate the height.
...
<ScrollView>
<StackLayout>
<StackLayout *ngFor="let item of this.shopList">
<Label text="{{item}}" fontSize="36"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
...
I have little difficult problem for me with ListView.
1) I have this graphics https://ibb.co/j6wdk71
2) I have done it but with *ngFor’s
<ActionBarLogo (myEvent)="onDrawerButtonTap($event)"></ActionBarLogo>
<RadSideDrawer #drawer showOverNavigation="false" gesturesEnabled="{{android}}" [drawerTransition]="sideDrawerTransition">
<StackLayout tkDrawerContent class="drawer">
<MyDrawer [selectedPage]="'Home'"></MyDrawer>
</StackLayout>
<GridLayout rows="*, auto" class="page page-content" tkMainContent>
<StackLayout class="fade-in" row="0" orientation="vertical" *ngIf="loading==false && network_error==false">
<StackLayout>
<PullToRefresh (refresh)="refreshList($event)">
<ScrollView orientation="vertical">
<StackLayout>
<StackLayout>
<ScrollView orientation="horizontal" scrollBarIndicatorVisible="false">
<StackLayout orientation="horizontal" class="games">
<StackLayout class="game" width="{{screen_width}}" *ngFor="let game of games">
<StackLayout class="game-inner">
<StackLayout class="game-date">
<Label text="{{game.league}}, {{game.round}}. kolo" class="game-round"></Label>
<Label text="{{ game.date | format_date }}" class="game-date-text"></Label>
</StackLayout>
<StackLayout class="game-data">
<FlexboxLayout flexDirection="row">
<StackLayout flexGrow="1" class="game-team">
<WebImage src="{{game.team_home.logo}}" height="40" class="game-team-logo"></WebImage>
<Label text="{{game.team_home.name}}" textWrap="true" class="game-team-name"></Label>
</StackLayout>
<StackLayout flexGrow="1" class="game-score">
<Label class="game-score-inner" text="-:-" textWrap="true" *ngIf="game.score==null"></Label>
<Label class="game-score-inner" text="{{game.score}}" textWrap="true" *ngIf="game.score!=null"></Label>
</StackLayout>
<StackLayout flexGrow="1" class="game-team">
<WebImage src="{{game.team_away.logo}}" height="40" class="game-team-logo"></WebImage>
<Label text="{{game.team_away.name}}" textWrap="true" class="game-team-name"></Label>
</StackLayout>
</FlexboxLayout>
</StackLayout>
<StackLayout class="game-button" orientation="horizontal" horizontalAlignment="center" [nsRouterLink]="['/game', game.id]"
pageTransition="flip">
<WebImage src="~/assets/menu_icons/matches.png" width="15"></WebImage>
<Label text="informácie o zápase" class="game-button-btn"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout>
<StackLayout class="hp-partners">
<StackLayout class="hp-partners-heading">
<Label text="Partneri klubu"></Label>
</StackLayout>
<FlexboxLayout flexDirection="row">
<StackLayout class="partner" *ngFor="let partner of partners">
<WebImage src="{{partner.img_url}}" stretch="aspectFit" width="100%" class="partner-image" (tap)="open_url(partner.url)"></WebImage>
</StackLayout>
</FlexboxLayout>
</StackLayout>
<StackLayout class="articles-list">
<StackLayout class="article" [nsRouterLink]="['/article', article.id]" pageTransition="slideLeft" *ngFor="let article of articles, let i=index">
<StackLayout class="article-photo">
<WebImage src="{{article.photo}}" stretch="aspectFill" placeholder="~/assets/placeholder.png" class="article-photo-image"></WebImage>
</StackLayout>
<StackLayout class="article-body">
<StackLayout class="article-data">
<FlexboxLayout flexDirection="row">
<StackLayout class="article-date" orientation="horizontal">
<WebImage src="~/assets/menu_icons/date.png" class="article-date-ico"></WebImage>
<Label text="{{ article.date | format_date }}" class="article-date-text"></Label>
</StackLayout>
<StackLayout class="article-sticker" orientation="horizontal">
<WebImage src="~/assets/menu_icons/tag.png" class="article-sticker-ico"></WebImage>
<Label text="{{article.category}}" class="article-sticker-text"></Label>
</StackLayout>
<StackLayout class="article-stickers" flexGrow="1" orientation="horizontal">
<WebImage src="~/assets/article_stickers/text.png" class="article-stickers-image" *ngIf="article.sticker_text==true"></WebImage>
<WebImage src="~/assets/article_stickers/video.png" class="article-stickers-image" *ngIf="article.sticker_video==true"></WebImage>
<WebImage src="~/assets/article_stickers/photo.png" class="article-stickers-image" *ngIf="article.sticker_photogallery==true"></WebImage>
</StackLayout>
</FlexboxLayout>
</StackLayout>
<StackLayout class="article-heading">
<Label text="{{article.heading}}" class="article-heading-text" textWrap="true"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="i==330">
<StackLayout class="banner" *ngFor="let banner of banners">
<WebImage src="{{banner.image}}" stretch="aspectFit" width="100%" class="banner-image" (tap)="open_url(banner.url)"></WebImage>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
<StackLayout class="load-more-button">
<Button class="btn btn-primary" text="NaÄŤĂtaĹĄ ÄŹalšie" (tap)="load_more_articles()" *ngIf="loading_more_articles==false"></Button>
<LoadingSmall *ngIf="loading_more_articles==true"></LoadingSmall>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</PullToRefresh>
</StackLayout>
</StackLayout>
<Loading *ngIf="loading==true && network_error==false"></Loading>
<StackLayout height="100%" (tap)="check_connection()" *ngIf="network_error==true">
<NetworkError></NetworkError>
</StackLayout>
<Tabs></Tabs>
</GridLayout>
</RadSideDrawer>
3) This is how I want it. (uses *ngFor) https://www.youtube.com/watch?v=z5CY_R6OAmI&feature=youtu.be1
4) Performance is very bad on android and app is crashing (iOS is great as usual)
5) I need everything transform to ListView
6) I really don’t know how. I read doc, google for done examples and I can’t find solution which would solve my problem.
7)I made simple template in playground https://play.nativescript.org/?template=play-ng&id=Rhw4HJ&v=21
Is possible to give me some advice or edit playground example to show how to do it?
Could someone help me find solution? I will really appreciate it. :frowning:
Thank you so much
I am playing with a Xamarin Form trying to get a button to appear at the bottom of the page. Here is my xaml...
<?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:control="clr-namespace:RMG.InView.Device.Shared;assembly=RMG.InView.Device"
x:Class="RMG.InView.Device.Shared.PinCodeControlDemoPage">
<StackLayout>
<Label Text="Enter A Code" VerticalOptions="Center" HorizontalOptions="Center" />
<Button Text="Reveal Code" x:Name="RevealCode" Clicked="RevealCode_OnClicked" VerticalOptions="End" ></Button>
</StackLayout>
</ContentPage>
I have VerticalOptions set to End, but the button appears in the middle of the screen.
How can I make the button stick to the bottom of the screen?
With a Grid is simple just do this:
<?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:local="clr-namespace:shared_forms" x:Class="shared_forms.shared_formsPage">
<Grid>
<Label Text="Enter A Code" VerticalOptions="Center" HorizontalOptions="Center" />
<Button Text="Reveal Code" x:Name="RevealCode" HorizontalOptions="CenterAndExpand" VerticalOptions="End" />
</Grid>
</ContentPage>
With StackLayout:
<?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:local="clr-namespace:shared_forms" x:Class="shared_forms.shared_formsPage">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<!-- top controls -->
<Label Text="Enter A Code" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<!-- middle controls -->
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="End">
<!-- bottom controls -->
<Button Text="Reveal Code" x:Name="RevealCode" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
</ContentPage>
Result:
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
</StackLayout>
<StackLayout Grid.Row="1" VerticalOptions="End">
<controls:STButton Text="Yeni Görev Ekle" />
</StackLayout>
</Grid>
</ContentPage.Content>
%100 works ;)
This worked for me.
<StackLayout BackgroundColor="#2D3033">
<Button Clicked ="Button_Clicked"
Text="Login"
BackgroundColor="#007F00"
BorderColor="#004C00"
BorderWidth="1"
TextColor="white"
HorizontalOptions="CenterAndExpand"
VerticalOptions="EndAndExpand"
/>
</StackLayout>
try this for code behind :
Label EnterACodeLabel = new Label { Text = "Enter A code " };
Button RevealCodeButton= new Button { Text = "Reveal Code" };
StackLayout RevealButtonStackLayout = new StackLayout
{
VerticalOptions = LayoutOptions.End,
Children =
{
RevealCodeButton,
//put all controls want to be on button
}
};
StackLayout AllContentExceptRevelCodeButton = new StackLayout
{
Padding = new Thickness(5),
Children =
{
EnterACodeLabel ,
//put all controls need to be on the top
}
};
StackLayout AllPageContent = new StackLayout
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children =
{
AllContentExceptRevelCodeButton,
RevealButtonStackLayout
}
};
Content = AllPageContent;