I have an issue with the ios Safe Area with Nativescript-Vue on iPhone X and above. I think it has something to do with the nested frames/pages setup we have. We use a custom header and then for the 'body' of the app when we want to navigate we navigate pages within the nested frame. The custom header will enter the safe area without an issue, but the bottom safe area remains.
The nested Page component itself appears to enter the safe area, but any layout inside that page appears constrained to be outside the safe area.
Here is a playground that shows what's happening: https://play.nativescript.org/?template=play-vue&id=pXmqzC&v=3
In the playground you can see this by the borders I've drawn around the Page and the StackLayout.
Here's the layout code in case you can't access the playground sample:
<template>
<Page actionBarHidden="true">
<GridLayout rows="90, *">
<StackLayout row="1" height="100%">
<Frame>
<Page actionBarHidden="true" height="100%" borderWidth="5" borderColor="red" >
<StackLayout height="100%" width="100%" horizontalAlignment="center" verticalAlignment="center" backgroundColor="green" borderWidth="5">
<Label text="Body" horizontalAlignment="center" verticalAlignment="center" />
</StackLayout>
</Page>
</Frame>
</StackLayout>
<!-- Simulates a header -->
<StackLayout row="0" height="90" width="100%" horizontalAlignment="center" verticalAlignment="center" backgroundColor="blue">
<Label text="Header" horizontalAlignment="center" verticalAlignment="center" />
</StackLayout>
</GridLayout>
</Page>
</template>
An easy fix is to remove StackLayout above Frame.
<template>
<Page actionBarHidden="true">
<GridLayout rows="90, *">
<!-- <StackLayout row="1" height="100%"> -->
<Frame row="1" borderWidth="0">
<Page actionBarHidden="true" height="100%" borderWidth="5" bordercolor="red">
<StackLayout
height="100%"
width="100%"
horizontalAlignment="center"
verticalAlignment="center"
backgroundColor="green"
borderWidth="5"
>
<Label text="Body" horizontalAlignment="center" verticalAlignment="center" />
</StackLayout>
</Page>
</Frame>
<!-- </StackLayout> -->
<!-- Simulates a header -->
<StackLayout
row="0"
height="90"
width="100%"
horizontalAlignment="center"
verticalAlignment="center"
backgroundColor="blue"
>
<Label text="Header" horizontalAlignment="center" verticalAlignment="center" />
</StackLayout>
</GridLayout>
</Page>
</template>
Things to remember,
You don't really need a StackLayout above Frame, it doesn't server any purpose right there.
Avoid setting height="100%" by default content of Page / Frame takes it's whole height, you don't have to specify in percentage, at least when it's 100
When you set verticalAlignment to center, you force the layout to fit to center on it's parent, but again why to set height to 100%, that doesn't make sense.
Related
I experience this issue only my Xamarin iOS project. The Android version works correctly.
I have a standard ContentPage that is pushed via PushAsync. When the page loads, the content loads off the screen then (it seems) after binding is finished moves down the page. I have attached a screen where it shows loading off the screen and one where it re-adjusts.
Content off the screen
After binding
XAML File
<ContentPage.Content>
<AbsoluteLayout>
<Frame Padding="10"
Margin="20, 20, 20, 20"
BackgroundColor="AliceBlue"
AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="SizeProportional">
<StackLayout Margin="10">
<Label Text="{Binding OutreachTitle}"
FontSize="Title"
TextColor="{StaticResource PrimaryTextColor}"
HorizontalOptions="Center" />
<controls:HorizontalRuleControl RuleColor="{StaticResource SecondaryColor}" />
<Label Text="{Binding OutreachText}"
Margin="0, 10, 0, 0"
TextColor="{StaticResource PrimaryTextColor}"
VerticalOptions="End"/>
</StackLayout>
</Frame>
</AbsoluteLayout>
</ContentPage.Content>
I did not reproduced the problem on my side. While I would recommend you to use StackLayout instead of AbsoluteLayout.
The problem is probably caused by resize of View in ContentPage, when you set SizeProportional of AbsoluteLayout, the size will following the changing of the View and that would cause the content loads off the screen:
<StackLayout>
<Frame Padding="10"
Margin="20, 20, 20, 20"
BackgroundColor="AliceBlue"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Margin="10">
<Label Text="{Binding OutreachTitle}"
FontSize="Title"
TextColor="Yellow"
HorizontalOptions="Center" />
<Label Text="{Binding OutreachText}"
Margin="0, 10, 0, 0"
TextColor="Green"
VerticalOptions="End"/>
</StackLayout>
</Frame>
</StackLayout>
When using the RadSideDrawer with a page-router-outlet in NativeScript, it seems that there is no way to not have the page-router-outlet fill 100% of the height on iOS. On Android, it works fine. The reason I'm running into this issue is because I'm trying to add a BottomNavigationBar below my router outlet. The images below show the behavior on both iOS and Android:
Here is my code:
<RadSideDrawer>
<FlexboxLayout tkDrawerContent>
<Button text="Test"></Button>
</FlexboxLayout>
<GridLayout class="main-grid" tkMainContent rows="*, auto">
<StackLayout row="0">
<page-router-outlet></page-router-outlet>
</StackLayout>
<BottomNavigationBar activeColor="white" inactiveColor="gray" backgroundColor="black" row="1">
<BottomNavigationTab title="First"></BottomNavigationTab>
<BottomNavigationTab title="Second"></BottomNavigationTab>
<BottomNavigationTab title="Third"></BottomNavigationTab>
</BottomNavigationBar>
</GridLayout>
</RadSideDrawer>
If I remove the page-router-outlet and put anything in it's place, it will then function correctly on both iOS and Android. Also, if I leave the page-router-outlet and remove the RadSideDrawer, it also functions correctly.
Any suggestions? Thanks!
EDIT:
It seems as if this issue only occurs when there are two page-router-outlets nested as in this sample playground:
https://play.nativescript.org/?template=play-ng&id=Z2a5Z7
Maybe page-router-outlets aren't supposed to be nested then? Right now I have a page-router-outlet in my app.component that lazy loads and switches between a login.component and my main app pages.component. pages.component contains the RadSideDrawer and the other page-router-outlet. I did this so I can lazy load my authorization pages and regular app content pages. Is this wrong?
It seems to be a issue with RadSideDrawer plugin (v8.0.0), the plugin is not open sourced so the best approach would be raising an issue in nativescript-ui-feedback and I see you have done that already - #1362.
I have a workaround that seem to fix the issue on my end.
MainComponent
constructor(page: Page) {
page.once(Page.navigatedToEvent, () => {
page.frame.requestLayout();
});
}
Request for relayout once the page is loaded.
Updated Playground
In my case, I have a modal page full height width over the side drawer, so I created a structure like below. Hope this helps you.
<GridLayout rows="" columns="" [class.dialogOpen]="dialogOpen">
<StackLayout>
<RadSideDrawer tkExampleTitle tkToggleNavButton drawerContentSize="320">
<StackLayout tkDrawerContent>
<app-sidenav></app-sidenav>
// my side drawer data
</StackLayout>
<GridLayout tkMainContent class="app" rows="auto,*,auto">
<GridLayout row="0" columns="*" rows="auto,auto" *ngIf="data.navbar" class="gradient">
// custom header
</GridLayout>
<!-- main content -->
<FlexboxLayout row="1">
<StackLayout #container>
<StackLayout [ngClass]="{'full': data.full }">
<ng-content></ng-content>
</StackLayout>
</StackLayout>
</FlexboxLayout>
<!-- Footer -->
<FlexboxLayout row="2" *ngIf="data.footer" class="app__footer" verticalAlignment="bottom">
// bottom tabs for my app
</FlexboxLayout>
</GridLayout>
</RadSideDrawer>
</StackLayout>
<StackLayout verticalAlignment="center" horizontalAlignment="center" height="100%" class="dialog__wrapper">
<AbsoluteLayout height="100%" backgroundColor="#FFFFFF" verticalAlignment="center" horizontalAlignment="center">
<!-- EDIT POPUP -->
<StackLayout class="dialog__container">
// cusotm dialog data
</StackLayout>
</AbsoluteLayout>
</StackLayout>
</GridLayout>
I'm new with xamarin and I'm trying to use a searchbar with a result listview (which is hidden) on top of a main listview (ie: mobile facebook friend search)
On iOS I'm not being able to tap on the main listview because the result listview is always on top of the other one even if it's not visible.
Here is the code:
<AbsoluteLayout>
<StackLayout Orientation="Vertical" Padding="0,50,0,0">
<StackLayout Padding="20,0,0,10">
<Label Text="{Binding SelectedAddressString, StringFormat='BCLs near {0}'}" />
</StackLayout>
<ListView x:Name="iOSlstBCLs" ItemsSource="{Binding BCLList}" IsPullToRefreshEnabled="true" RefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing, Mode=OneWay}">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="Fill" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,1">
<SearchBar Text="{Binding SearchText, Mode=TwoWay}" Placeholder="Search" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<ListView IsVisible="{Binding IsSuggestionListVisible, Mode=OneWay}" ItemsSource="{Binding SuggestionList}" SelectedItem="{Binding SelectedAddress}" VerticalOptions="Fill" AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,AutoSize,AutoSize" BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding formatted_address}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</AbsoluteLayout>
Any ideas?
From my experience, you should never use an Absolute Layout if at all possible. It seems like it would be better to use a Stack and place both of your other stacks within that. Then set the visibility as needed. I am not positive, but I am guessing that the Absolute Layout is messing you up.
Does Windows Phone 7 have anything like iPhone's UITableView?
[Basically, I'm porting an iOS app where the table views worked really well.]
you can create something similar to Table view using the below XAML Code.
<ListBox >
<ListBoxItem>
<StackPanel Orientation="Horizontal" >
<Border BorderThickness="3" BorderBrush="#A5FFFFFF" Width="80" Margin="0,20,0,20" Height="60">
<Image Source="{Binding ImageUrl, Mode=OneWay}" VerticalAlignment="Stretch" Margin="0,0,0,0" Width="80" Height="60" Stretch="Fill" />
</Border>
<TextBlock TextWrapping="Wrap" Text="Foobar" FontSize="40" FontWeight="Normal" VerticalAlignment="Center" Margin="30,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal" >
<Border BorderThickness="3" BorderBrush="#A5FFFFFF" Width="80" Margin="0,20,0,20" Height="60">
<Image Source="{Binding ImageUrl, Mode=OneWay}" VerticalAlignment="Stretch" Margin="0,0,0,0" Width="80" Height="60" Stretch="Fill" />
</Border>
<TextBlock TextWrapping="Wrap" Text="Foobar" FontSize="40" FontWeight="Normal" VerticalAlignment="Center" Margin="30,0,0,0" />
</StackPanel>
</ListBoxItem>
</ListBox>
The above example will create a table view with two elements .If you want you can Add Border to seperate between each table.
Hope it helps.
I imagine that the closest match is the Grid control, which enables you to define rows and columns and add content to grid cells. You might find the MSDN page How to: Create a Grid Element helpful.
I am trying to get the Items in a ListBox to span the entire width of the ListBox. I have found several posts dealing with HorizontalContentAlignment="Stretch" but I have not been able to get it to work in my WP7 app. Here is my ListBox:
<ListBox Margin="8" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Collection}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34"
BorderThickness="1" HorizontalAlignment="Stretch" >
<Grid Background="Transparent" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0" HorizontalAlignment="Stretch"
Margin="2"
FontSize="10"
Text="{Binding Property1}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
I am trying to get the orange Border to span the entire width of the listbox so that all the list items are the same size and not just the size of the text in the TextBlock.
Use the following static resource as ItemContainerStyle of Listbox:
ItemContainerStyle="{StaticResource ListboxStretchStyle}"
<Application.Resources>
<Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
This is what I do use for that:
<ListBox Height="430" Margin="50,70,50,110" Name="myListBox" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="{StaticResource PhoneAccentBrush}" >
<TextBlock
Text="{Binding Text}"
FontSize="30"
Foreground="{StaticResource PhoneForegroundBrush}" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
more ore less found here: http://timdams.wordpress.com/2011/11/30/creating-a-wp7-app-listbox-items-of-the-same-width/
I believe this is a bug in the beta release, because HorizontalContentAlignment should be it.
as a workaround you might have to use a fixed width value.
Looks like John Gardner is on point with this being a bit of a defect in the Beta. It works fine in "plain old" Silverlight, but yields oddly-centered areas in the Phone. It is easy enough to work past, however.
Get rid of / comment out the ListBox.ItemContainerStyle entry in your listbox, above.
In Blend, select your ListBox in the Objects and Timeline panel, right click, and select Edit Additional Templates / Edit Generated Item Container (ItemContainerStyle) / Edit a Copy... Choose a name/key and location for the new style resource.
Locate the ContentContainer control, and set its Horizontal Content Alignment to Bind to the Horizontal Content Alignment set in the item consuming this template, (HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ) as follows:
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
Once you've told the ContentControl how it should align its (ahem) content, the results should be what you expected.