I have a grid layout with a fixed header and navbar and a scrollview for the page
<GridLayout rows="50, *, 50">
<StackLayout row="0">
// header
</StackLayout>
<ScrollView row="1">
<StackLayout>
// page
</StackLayout>
</ScrollView>
<StackLayout row="2">
// nav
</StackLayout>
I'm trying to float images over the scrollview (it's part of the header) and the images have transparency. I want the scrollview to be able to scroll while fixed images are over it.
I've tried absolute layouts, rows #s that are the same, everything.
What would be ideal would be to have a gridrow that has a transparent middle that I can put over the scrollview.
I think what you're looking for is the isUserInteractionEnabled view property.
<GridLayout>
<ScrollView>
<StackLayout> <!-- content --> </StackLayout>
</ScrollView>
<StackLayout isUserInteractionEnabled="false"> <!-- overlay --> </StackLayout>
</GridLayout>
Example:
https://play.nativescript.org/?template=play-ng&id=afYWWQ&v=5
Related
I'm building a page inside a Xamarin Forms/MvvmCross project, where I need multiple CollectionViews (at least, that's what I assume).
On top of the screen I have a horizontal CollectionView. Beneath this first View, I added a vertical CollectionView.
Problem: I want to scroll down on the page so the first CollectionView disappears and the second one is more visible (especially on small screens, where only the first item of the second CollectionView is visible on top of the page).
I would like the first and second CollectionView to scroll on the page as one unit. Some advice would be great!
So far I've tried to change the second (vertical) CollectionView into a bindable StackLayout, but the items won't appear and this approach feels wrong.
<ScrollView>
<StackLayout Spacing="0">
<SearchBar
mvx:La.ng="Placeholder SearchBar"
Margin="0,0,0,30"
TextColor="{StaticResource White}"
CancelButtonColor="{StaticResource White}"
PlaceholderColor="{StaticResource White_30}"
BackgroundColor="{StaticResource BackgroundColor}"/>
<Label mvx:La.ng="Text Artists" FontFamily="FiraSans#600" FontSize="16" TextColor="#FF6C6E81" Margin="0,0,0,20"/>
<CollectionView
x:Name="MyCollectionView"
ItemsSource="{mvx:MvxBind FavoriteArtists}"
HeightRequest="250" >
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Horizontal"
VerticalItemSpacing="1"
HorizontalItemSpacing="10" />
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<StackLayout>
<ActivityIndicator Color="DimGray" IsRunning="True" HeightRequest="50" />
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<templates:FavArtistsTemplate/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Label mvx:La.ng="Text Recent" FontFamily="FiraSans#400" FontSize="14" TextColor="#FF6C6E81" Margin="0,0,0,8"/>
<CollectionView
x:Name="MyCollectionView2"
ItemsSource="{mvx:MvxBind RecentlyPlayedItems}">
<CollectionView.EmptyView>
<StackLayout>
<ActivityIndicator Color="DimGray" IsRunning="True" HeightRequest="50" />
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<templates:MediaItemTemplate/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
I would like the first and second CollectionView to scroll on the page as one unit. Some advice would be great!
You put 2 horizontal CollectionViews in the ListView Header in a Grid or StackLayout :)
To be more clear:
Instead of 2 horizontal CollectionViews and 1 vertical CollectionView, you use 2 horizontal CollectionViews and 1 ListView (which is only vertical). In the Header of the ListView, you put the 2 horizontal CollectionViews in a Grid or StackLayout.
https://learn.microsoft.com/en-US/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#headers-and-footers
I am new to NativeScript. I have 4 images in my page and I want to achieve this.
Except I want my cover image to be of full-height of the screen. This is the code I'm trying.
<ScrollView>
<StackLayout height="100%" width="100%">
<GridLayout columns="*, *" rows="5*, *, *">
<StackLayout
:row="0"
:col="0"
:colSpan="2"
class="bgImage coverImage"
:style="{backgroundImage:`url('${defaultImg}')`}"
></StackLayout>
<StackLayout
:row="calcRow(idx)"
:col="calcCol(idx)"
:colSpan="idx==0?2:1"
v-for="(item,idx) in event.imgs"
:key="idx"
class="bgImage eventImage"
:style="{backgroundImage:`url('${item}')`}"
></StackLayout>
</GridLayout>
</StackLayout>
</ScrollView>
If I didn't give height="100%" to StackLayout it's not even loading the images. If I do give it then there is no scroll.
Here is the playground link Playground Link
You may use the layoutChanged event of your ScrollView where you may calculate the height of it and use it as height for the first image.
Playground Sample
I am playing with Xamarin Forms and I would like to add a Button programmatically. Nothing easier, but I've noted that the results vary greatly if the button has an Image rather than a Text.
Now I have this XAML that defines a three-layered screen (header, content, footer):
<?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:Testing"
x:Class="Testing.MainPage"
Title="MainPage"
NavigationPage.HasNavigationBar="False">
<ContentPage.Content>
<!-- Content -->
<StackLayout x:Name="contentpage" Padding="10,100,10,100">
<!-- Header -->
<StackLayout x:Name="header" Orientation="Horizontal" VerticalOptions="StartAndExpand">
<Button Text="ABCD" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
<Button Text="EFGH" VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<!-- /Header -->
<!-- Center -->
<StackLayout x:Name="content" Opacity="1" Orientation="Vertical" VerticalOptions="Start" >
<Button x:Name="test" Text="Fire fire fire" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" />
</StackLayout>
<!-- /Center -->
<!-- Bottom -->
<StackLayout x:Name="buttons" Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Button Text="1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="2" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="3" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="4" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="5" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
</StackLayout>
<!-- /Bottom -->
</StackLayout> <!-- Content -->
</ContentPage.Content>
</ContentPage>
And in the corresponding C# source I add a button to the content:
var custombutton = new Button();
custombutton.HorizontalOptions = LayoutOptions.CenterAndExpand;
custombutton.VerticalOptions = LayoutOptions.Start;
custombutton.Image = "mountain.jpg";
//custombutton.Text = "hello";
content.Children.Add(
custombutton
);
As you can see, I want to change the button's properties by setting an image, but the layout changes dramatically.
As you can see, if I add the button with a text everything's ok (left), but as I change the button's image, the button seems to not obey its vertical options (right), or it adds some weird padding. Of course I would like just to add buttons with texts or images without losing the footer StackLayout, but I don't know what's happening here.
Am I missing something here?
Sizes Update
As suggested, I've tried different layouts, however, I ended up with the same results. This last test is with a Grid, and inside a ScrollView with a StackLayout. Different views and arrangements won't change anything in my project.
What matters is the image size as you can see:
Image sizes here are 1668 × 796 and 355 × 190 pixels.
A fully functional source is here available for download: link to the solution.
Controls Update
Using an Image works flawlessly, regardless of the image size. No clue on why a Button adds such a huge space dependent on the image.
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'm looking to create a specific animation where you start with a collapsed sidebar (still visible, but skinny) and main page content:
and when you pull out the left sidebar, the sidebar expands, and the main content moves with it (so that the right part of the main content slides out of view):
Also, note that the content in the sidebar doesn't move (though there is additional content that appears (button on the bottom)), but rather the width of the sidebar container just expands. Finally, I would like it to slide with my finger, not just be a static animation.
How do I accomplish this in Xamarin.Forms? (Is it possible?)
You can found it in Telerik Xamarin Forms sample (SlideDrawer -> Transitions/Location)
Sign in your account (telerik.com), I thinks it's free ..
Playing with the Xamarin Studio XAML Preview:
It is a matter of binding your expand event to WidthRequest in the first "column" to resize it and push the "right" side over. Depending upon the control settings in the first column, they will either expand to fill the new "column" width or stay a fixed size...
Note: Personally I would do this using ConstraintExpressions in order to make the design truly dynamic and adaptive to orientation changes, different screen sizes, etc...
<StackLayout RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}"
RelativeLayout.YConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.75}"
</StackLayout>
Example XAML from preview image above:
<?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="OpenDrawer.TestLayoutPreview">
<ContentPage.Content>
<StackLayout BackgroundColor="Blue" Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" BackgroundColor="Maroon" HorizontalOptions="Start" VerticalOptions="FillAndExpand" MinimumWidthRequest="100" WidthRequest="100">
<Button Text="Left 1" BackgroundColor="Aqua"></Button>
<Button Text="Left 2" BackgroundColor="Aqua"></Button>
<Button Text="Left 3" BackgroundColor="Aqua"></Button>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="End">
<Button Text="Left Bottom" BackgroundColor="Lime"></Button>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" BackgroundColor="Red" HorizontalOptions="FillAndExpand">
<Label Text="Right" BackgroundColor="Aqua"></Label>
<ScrollView>
<WebView Source="https://xamarin.com" WidthRequest="1000" HeightRequest="1000" ></WebView>
</ScrollView>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>