I have this ScrollView:
<ScrollView orientation="horizontal" id='scroll'>
<StackLayout orientation='horizontal' swipe='swipe'>
<Image src="image1" />
<Image src="image2" />
<Image src="image3" />
<Image src="image4" />
</StackLayout>
</ScrollView>
and js:
function swipe(args) {
var scroll = args.view;
scroll.scrollToHorizontalOffset(0, true);
}
exports.swipe = swipe;
I expect that every swipe I made on the scrollView, it will go to the horizontalOffset I set on scrollToHorizontalOffset but its not working.
The reason why the scrollToHorizontalOffset is not working is because you are trying to invoke it on the StackLayout when it belongs to the ScrollView. There are two things you can do:
var scroll = args.view.parent - because view is the StackLayout
and you need the ScrollView, which is its parent.
or
Attach the gesture directly to the ScrollView - <ScrollView orientation="horizontal" id='scroll' swipe='swipe'>
Related
I'm using the excellent https://github.com/tjvantoll/nativescript-IQKeyboardManager on iOS, which has a 'done' button (effectively a close button). However, for Android softkeyboard there is no such thing... All the solutions to hide a keyboard suggest referencing the original element which triggered the keyboard - an impractical solution...
I found this forum post on how to dismiss a keyboard in nativeScript https://discourse.nativescript.org/t/unable-to-hide-keyboard/4129/9
import * as utils from "utils/utils";
import { isIOS, isAndroid } from "platform";
import * as frame from "ui/frame";
// then as a method inside your vue
methods: {
dismissSoftKeybaord() {
if (isIOS) {
frame.topmost().nativeView.endEditing(true);
}
if (isAndroid) {
utils.ad.dismissSoftInput();
}
},
dimissSoftKeyboard should be attached to the outside / top element - eg page... Then, when clicking outside of a form field (TextField or TextView) the keyboard will be hidden / dismissed.
<Page #tap="dismissSoftKeybaord()">
Here is the code as a handy mixin:
import * as utils from "utils/utils";
import { isIOS, isAndroid } from "platform";
import * as frame from "ui/frame";
export default {
methods: {
dismissSoftKeybaord() {
if (isIOS) {
frame.topmost().nativeView.endEditing(true);
}
if (isAndroid) {
utils.ad.dismissSoftInput();
}
},
}
};
I do have a bit of an issue with layout, in that some elements wrap other elements so I've had to apply dismissSofteyboard in a few places - but it works....
<template>
<Page class="page" statusBarStyle="dark" backgroundSpanUnderStatusBar="true">
<ActionBar backgroundColor="#253945" color="#ffffff" flat="true" #tap="dismissSoftKeybaord()">
<StackLayout orientation="horizontal">
<Label ... />
</StackLayout>
</ActionBar>
<GridLayout rows="*,60" #tap="dismissSoftKeybaord()">
<ScrollView row="0" #tap="dismissSoftKeybaord()">
<StackLayout class="logFormWrapper">
<StackLayout class="input-field" marginBottom="20" >
<TextField ... />
</StackLayout>
<StackLayout class="input-field" marginBottom="20">
<TextField ... />
</StackLayout>
...
...
</StackLayout>
</ScrollView>
<StackLayout margin="0" row="1" class="footer"></StackLayout>
</GridLayout>
</Page>
</template>
So I'm now just trying to figure out how I can adjust the layout so I don't need so many dismissSoftKeyboard #taps everywhere....
I have a stepper and i want to add new entry field when the value increment or delete entry on value decrement , i manged to do that but the UI won't refresh directly after the value of the stepper change (i need to click on other UI element first) then the fields will appear , and after clicking in other UI element the stepper will work properly (adding and deleting functionality) which i don't know why it's happening ?!! .
EDIT :
It's look like the problem is with having scroll view .. if i remove it the new fields will added or deleted directly .. but still don't know why .
The xaml page
<ScrollView>
<StackLayout x:Name="StackLayout">
<Label Text="عدد العناصر المراد اضافتها (اقصى عدد في المرة الواحدة 30)"></Label>
<Stepper Maximum="30"
Minimum="2"
Increment="1"
ValueChanged="Stepper_OnValueChanged"
Value="2"></Stepper>
<StackLayout x:Name="EntryStackLayout">
<Entry></Entry>
<Entry ></Entry>
</StackLayout>
</StackLayout>
</ScrollView>
Code Behind
public partial class AddNewListOfItemsPage : ContentPage
{
public AddNewListOfItemsPage ()
{
InitializeComponent();
}
private void Stepper_OnValueChanged(object sender, ValueChangedEventArgs e)
{
if (e.NewValue > e.OldValue)
{
EntryStackLayout.Children.Add(new Entry());
}
else
{
var childCount = EntryStackLayout.Children.Count;
EntryStackLayout.Children.RemoveAt(childCount - 1);
}
}
}
Ok i found that adding a stackLayout before the scrollView fix the problem
<StackLayout>
<ScrollView>
<StackLayout x:Name="StackLayout">
<Label Text="عدد العناصر المراد اضافتها (اقصى عدد في المرة الواحدة 30)"></Label>
<Stepper Maximum="30"
Minimum="2"
Increment="1"
ValueChanged="Stepper_OnValueChanged"
Value="2"></Stepper>
<StackLayout x:Name="EntryStackLayout">
<Entry></Entry>
<Entry ></Entry>
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
I had a similar problem. Size of elements deep inside ScrollView was not refreshed after layout change (on Android < 4.3).
Specifying height of ScrollView helped (specifying either one of the following for ScrollView in XAML helped):
VerticalOptions="FillAndExpand"
HeightRequest="100"
I have a ListView in my XAML in which I show some data from my database, the problem is that in the meantime the ActivityIndicator show up as excpected, but when I set it to False, the content that is suppose to show up, doesn't. I don't know if I'm using the ActivityIndicator wrong, how I suppose to use it then?
XAML:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage...">
<ActivityIndicator x:Name="load1" Color="Red" IsRunning="true" />
<ContentPage.Content>
<ListView x:Name="XPS" ItemTapped="OnItemSelected"
...
</ListView>
</ContentPage.Content>
</ContentPage>
CS:
load1.IsRunning=false;
It looks like you're using ContentPage incorrectly. That page only supports having 1 child element (named Content). You're trying to define 2 different Content on 1 ContentPage. Xamarin.Forms just throws away your ListView so it will never show up.
So now you might wonder... How is that thing even useful? Good question! When you need to put multiple Views in 1 ContentPage you need to use a Layout. Xamarin.Forms has a bunch of layouts available that all behave differently - see https://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/layouts/ for some more details there.
Let's check out some code.... (I haven't actually tested this, I'm typing it directly into here, so you might need to fix some things...)
An updated ContentPage XAML:
<ActivityIndicator x:Name="load1" Color="Red" IsRunning="true" />
<ContentPage.Content>
<StackLayout x:Name="Layout">
<ActivityIndicator x:Name="load1" Color="Read" IsRunning="true"/>
<ListView x:Name="XPS" ItemTapped="OnItemSelected" Opacity="0"
...
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Now for some Code Behind...
public void LoadYourStuff()
{
LoadSomeTotallyAwesomeData();
WriteSomeTotallyAwesomeDataIntoAFancyListView();
PerhapsDoMoreFancyThings();
Layout.Children.Remove(load1);
XPS.Opacity = 1.0;
}
in your xmal file put :
<ActivityIndicator x:Name="popupView" VerticalOptions="Center" HorizontalOptions="Center" Color="DarkBlue" IsRunning="True" IsVisible="false" IsEnabled="True" />
when need this in C# code :
popupView.IsVisible = true;
.
.
.
.
.
.
popupView.IsVisible = false;
Im new to NS and I have a project. I want a Button floating inside a ScrollView.
<ScrollView>
<StackLayout orientation="vertical">
<AbsoluteLayout >
<Button top="0" left="0" right="0" text="Test" style="font-size: 10; margin:5; " />
</AbsoluteLayout>
<Label text="Trending Now: " cssClass="trending-label" />
<Repeater items="{{ categories }}">
<Repeater.itemTemplate>
.
.
.
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</ScrollView>
But its not working. The Button is also scrolling. I want the Button to be floating on ScrollView. Thank you.
The reason why the button is scrolling together with the other items is that everything is situated in a ScrollView. In order to have only the Label and the Repeater scrolling, the Button should be placed outside of it.
Another thing I have noticed is that on the Button, simultaneously are applied left and right alignment, which might cause a problem.
I made a possible implementation of the float button, which you can check here.
I'm newbie when it comes to xamarin, also in XAML, I just want to ask how to add a padding inside my viewcell below is my code
<TableView>
<TableRoot>
<TableSection Title = "Basic information">
<EntryCell Label = "First name: " Placeholder = "Required" />
<EntryCell Label = "Middel name: " Placeholder = "Optional" />
<EntryCell Label = "Last name: " Placeholder = "Required" />
<ViewCell>
<Picker x:Name="genderPicker" Title = "Select gender"></Picker>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
what i want is to add a little bit padding inside of this code.
![<ViewCell>
<Picker x:Name="genderPicker" Title = "Select gender"></Picker>
</ViewCell>][1]
This is what it looks like, so i just want to add some left and right space on my picker view.
http://i.stack.imgur.com/89qt9.png
Something like this should works fine:
<Picker x:Name="genderPicker"
Title = "Select gender"
Padding="left, top, right, bottom">
</Picker>
With left,top,right and bottom the value you would like. More information here
Add a StackLayout, or any other Layout subtype that supports padding, inside your ViewCell. You can then use the Layout properties to adjust the Picker.
<ViewCell>
<StackLayout Padding="10,0,0,0" HorizontalOptions="FillAndExpand">
<Picker HorizontalOptions="CenterAndExpand" >
<Picker.Items>
<x:String>Disabled</x:String>
<x:String>5 minutes</x:String>
</Picker.Items>
<Picker.SelectedIndex>0</Picker.SelectedIndex>
</Picker>
</StackLayout>
</ViewCell>
Unlike CSS or Android Views where you can tweak the controls themselves, you'll handle most of your padding using parent Layouts when working in Xamarin.Forms.