I have a scrollview with an image at the top, then a searchbar and a list. I'm trying to make it so that the searchbar doesn't leave the top of the page when scrolling up so that the list keeps scrolling underneath it.
Format:
<ScrollView>
<Image src="testimage.png"></Image>
<Searchbar></Searchbar>
<ListView items></ListView>
</ScrollView>
Is there a way to do this in NativeScript?
Use GridLayout, ListView itself has built-in scrollbar.
<GridLayout rows="auto,auto,*">
<!-- you might want to set a height for image, depends on your image source -->
<Image row="0" src="testimage.png"></Image>
<Searchbar row="1"></Searchbar>
<ListView row="2" ...></ListView>
</GridLayout>
Related
I am trying to make it so I have the MENU label on the far left of the ActionBar and the logo in the center, for iOS.
<template>
<ActionBar>
<GridLayout backgroundColor="green" columns="*, *" rows="*, *">
<Label v-if="isIos" row="0" col="0" text="MENU" #tap="openDrawer()" class="c-actionbar_label_ios"/>
<Image v-if="isIos" row="0" col="1" #tap="goToHome()" src="~/assets/images/sklar-logo.png" class="c-actionbar_logo"/>
</GridLayout>
</ActionBar>
</template>
The problem is that GridLayout stays right in the center and doesn't stretch the full width. I was thinking *,* meant two columns 50% width each, but that must not be the case. I put a green background on it so you can see the current width.
Is there some way to do accomplish this layout with GridLayout or any other layout? I've messed with FlexBoxLayout also, but can't get that to do what I want because you cant use % widths.
I have an NS 6 app and testing on an iPhone 6+ with iOS 13.
In this app I have a ListView and in the ListView I have a nativescript-carousel.
In the carousel I have an image component that loads an external image. The issue is that when I load the page, the image is loaded, but the parent does not expand vertically to accommodate the full height of the image. I can only see a small portion of it.
I tried refreshing the ListView and calling page.requestLayout(), but that did not help. If I set the image height, everything works, but the issue is that some of the carousel items may not have an image, so I cannot commit to a set height.
Here is my code (truncated for brevity):
<ListView id="lst" items="{{ asks }}">
<ListView.itemTemplate>
<StackLayout class="ask-item">
…
<GridLayout rows="*" columns="*" marginTop="10">
<ns:Carousel items="{{ recs }}" color="white" pageChanged="myChangeEvent" android:indicatorAnimation="slide" indicatorColor="#999999" indicatorColorUnselected="#dddddd" indicatorOffset="0,15" showIndicator="true">
<ns:Carousel.itemTemplate>
<ns:CarouselItem backgroundColor="#f9f9f9" verticalAlignment="middle">
<StackLayout class="rec-item">
…
<Image src="{{ image }}" stretch="aspectFit" horizontalAlignment="center" />
…
</StackLayout>
</ns:CarouselItem>
</ns:Carousel.itemTemplate>
</ns:Carousel>
</GridLayout>
</StackLayout>
</ListView.itemTemplate>
</ListView>
What is the best way to handle this issue?
Thank you.
By nature iOS ListView height can not be changed once rendered, you will have to update the specific list item.
Try downloading the image upfront or listen to isLoading property change, once then capture the height of the raw image and bind the height to the layout. The images height could be in raw pixel, you might want to convert that into density independent pixel for better display on high resolution devices.
I like to put a Border in a Grid using Xaml.
I found these code
`<Border BorderBrush="Black" BorderThickness="2">
<Grid>
<!-- Grid contents here -->
</Grid>
</Border>`
But it doesn´t work.
I'm a novice yet in this, I want to do a Table with some information.
There is no Border control in Xamarin.Forms, however you can use a Frame
<Frame OutlineColor="YourColor" BackgroundColor="Transparent" Padding="0">
<Grid>
</Grid>
</Frame>
Note the OutlineColorproperty, and the Padding, sometimes people forget that Frame as a default Padding that can overlap their childs.
I have the following XAML :
<ScrollViewer HorizontalAlignment="Left" Margin="3,226,0,0" Name="Scv" VerticalAlignment="Top" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<Canvas Height="100" Name="canvas1" Width="292" >
Image Canvas.Left="0" Canvas.Top="0" Height="440" Name="image1" Stretch="Fill" Width="730" / >
<InkPresenter Name="inkPresenter1"></InkPresenter>
</Canvas>
</ScrollViewer>
The problem : How do I stop the ScrollViewer from scrolling AFTER i have scrolled the image to the point I wanted.
In the Above example, I use scrollViewer to scroll the image to a section where I want to stop so that I can use InkPresenter to draw. But Whenever I draw Up or down, the scrollviewer follows the action of InkPresenter Up and down movement.
Thanks
Check this discussion:
How to block scrolling in ScrollViewer
Another option could be to dynamically set the SetVerticalScrollBarVisibility do Disabled:
ScrollViewer.SetVerticalScrollBarVisibility(scrollViewer, ScrollBarVisibility.Disabled);
Here is a simple XAML snippet:
<Grid x:Name="ContentGrid">
<ContentControl Background="Yellow" VerticalAlignment="Stretch"></ContentControl>
</Grid>
In WPF, the content control stretches the entire height of the grid.
In WP7 however, the content control does not stretch.
Why?
Avoid using ContentControl directly.
If you use something which inherits from it, such as a button, then, in a grid, as per your example, you'll automatically get horizontal and vertical stretching.
This will creat a button with a yellow background which fills the screen:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Background="Yellow" />
</Grid>
However, if you just wanted a yellow background to your grid - which is all your sample would do - you could just set the background property on the grid itself.
I fixed this by defining my own template:
<ContentControl><ContentControl.Template><ControlTemplate><ContentPresenter/> ...
Not sure why it fixes it but it works....