I want to have rounded corners in my WebView, but apparently the borderRadius directive is ignored in Android
<GridLayout rows="*">
<WebView row="0" id="webView" borderRadius="20 20 0 0"/>
</GridLayout>
Any idea?
This is the desired result:
I solved this problem by using cardview which has top preference on view hierarchy(I don't know what they call officially, I just telling you as view hierarchy to make some sense).
If you know how FAB will get placed on a view. You can understand how this works. For more info you need to dig into these developing-hierarchy (This might be a wrong tutorial, but I got only this)
solution
<Page xmlns:Card="#nstudio/nativescript-cardview">
<StackLayout>
<Card:CardView margin="10" radius="50">
<StackLayout height="500">
<WebView src="https://i.ytimg.com/vi/xRZB5KBLdOA/maxresdefault.jpg" />
</StackLayout>
</Card:CardView>
</StackLayout>
</Page>
For more info on this plugin nativescript-cardview
If you get more info on this share here.
Related
I'm trying to implement CarouselView control with horizontal scroll.
I'm using Xamarin.Forms 5.0.0.2012.
This is the xaml code:
<CarouselView x:Name="carViewArticoliAlt"
Loop="False"
ItemsSource="{Binding ListaProdottiAlt}"
IndicatorView="indicatorView"
IsVisible="{Binding ArticoliAlt}"
HeightRequest="200"
PeekAreaInsets="100">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
SnapPointsAlignment="Start"
SnapPointsType="Mandatory"
ItemSpacing="20" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True" BorderColor="LightGray"
CornerRadius="5" Padding="5"
HeightRequest="310"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" >
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"/>
</Frame.GestureRecognizers>
<Grid>
<StackLayout x:Name="stkArticoloAlt">
<ImageButton x:Name="ImageArt"
Source="{Binding ImageArt}"
Aspect="AspectFit"
HeightRequest="80"
Clicked="ImageArt_Clicked"
BackgroundColor="White"/>
<Label Text="{Binding Descrizione}"
Style="{StaticResource labelDescrizioneStyle}"
MaxLines="3" LineBreakMode="TailTruncation"
HeightRequest="55"
FontSize="15"/>
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center" />
On Android platform the control is well rendered, but on iOS the following exception is thrown: Objective-C exception thrown. Name: NSInternalInconsistencyException Reason: negative sizes are not supported in the flow layout.
I followed this tutorial:
https://learn.microsoft.com/it-it/xamarin/xamarin-forms/user-interface/carouselview/scrolling
I noticed that the cause of the exception is the PeekAreaInsets property. Infact, if I don't handle this property, the exception does not occur. However the control is not drawn correctly, since the tabs are overlapping. Android code keeps on running correctly.
As you can see in the image, the cards are all overlapped, even if LinearItemsLayout.Orientation is set to horizontal.
Name: NSInternalInconsistencyException Reason: negative sizes are not supported in the flow layout.
The error indicates that the child's size( in datatemplate) is bigger than parent layout's size.
<CarouselView x:Name="carViewArticoliAlt"
Loop="False"
ItemsSource="{Binding ListaProdottiAlt}"
IndicatorView="indicatorView"
IsVisible="{Binding ArticoliAlt}"
HeightRequest="200" --------->parent's height
PeekAreaInsets="100">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
SnapPointsAlignment="Start"
SnapPointsType="Mandatory"
ItemSpacing="20" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True" BorderColor="LightGray"
CornerRadius="5" Padding="5"
HeightRequest="310" --------->child's height
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" >
To solve the problem try to remove HeightRequest="200" on CarouselView.
Since the Xamarin.Forms 5 release a new feature has been implemented on the CarouselView: Loop. This seems to be set to True by default and is causing some issues together with the PeakAreaInsets property. I was able to solve/work-around above crash/error by setting Loop="False". Perhaps that also works in your case?
I have an iOS-specific issue that does not happen on Android.
If the page in an app is opened in landscape mode
and then turned to portrait the logo at the center of title bar instead of moving to the center goes off the page like this:
If it is opened in portrait and then turned to landscape then it does not move to the center or off the screen, but to the left, to be stuck around a quarter of full width.
Xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PhotoApp.MobileApp.Views.PhotoGaleryPage">
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#96d1ff</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Shell.TitleView>
<Image
HorizontalOptions="Center"
VerticalOptions="Center"
Source="logo.png" />
</Shell.TitleView>
I advise you to use this:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PhotoApp.MobileApp.Views.PhotoGaleryPage">
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#96d1ff</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Shell.TitleView>
<StackLayout HorizontalOptions="Center"
Margin="{OnPlatform iOS='0,0,25,0', Android='0,0,20,0', Default=0}"
Orientation="Horizontal">
<Image
Source="logo.png" />
</StackLayout>
</Shell.TitleView>
Alike the above answer, you can take a try like this:
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Image Source="logo.png">
</Image>
</StackLayout>
</NavigationPage.TitleView>
...
</ContentPage>
Just take a StackLayout to wrap the image instead of putting it in Shell.TitleView directly.
Looks like the rotation in ios caused this problem as you take advantage of Image in Shell.TitleView directly. You can imagine this: it's really in center, but the screen can't display the whole title bar, which caused the problem you have seen.
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 need to put image as background in toolbar in Xamarin Forms in iOS project with master detail page and navigation bar (to have software back button in iOS). On android it works well but in iOS not good enough. I use this code in AppDelegate.cs:
UINavigationBar.Appearance.SetBackgroundImage(new UIImage("toolbar_iOS.jpg"), UIBarPosition.Any, UIBarMetrics.Default);
I put here image with pattern 400x125 pixels (less width - it displays 1 image and part of second image to the right, more pixels - image is zoomed). I want to have image displayed as aspect fill, because at page just under toolbar I have the same image with pattern and I want them exactly in the same size to match pattern.
Second way was to put an image in stack layout in Xamarin.Forms in NavigationPage.TitleView. I can modify aspect, but image is displayed only in about 70% of area of toolbar (it bypass hamburger icon and status bar), so it is not good.
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Layout.xxx.Views.MainMenuPage"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
xmlns:pages="clr-namespace:Layout.xxx.Views">
<MasterDetailPage.Master>
<pages:MainMenuPageMaster x:Name="MasterPage"/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:MainMenuPageDetail x:Name="DetailPage">
<NavigationPage.TitleView>
<Grid>
<ffimageloading:CachedImage Margin="-50,-30,0,0" Grid.Row="0" Source="background.jpg" Aspect="AspectFill" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
<StackLayout Grid.Row="0" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<StackLayout.Margin>
<OnPlatform x:TypeArguments="Thickness" iOS="-35,0,0,0" Android="-60,0,0,0"/>
</StackLayout.Margin>
<ffimageloadingsvg:SvgCachedImage Margin="0" Source="logo_svg.svg" Aspect="AspectFit" HeightRequest="40" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</Grid>
</NavigationPage.TitleView>
</pages:MainMenuPageDetail>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Negative margins does not help. Is there another way to have control over toolbar image in iOS?
Use this code snippet , may help
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Image Source="iconXamagon.png">
<Image.GestureRecognizers>
<Image.TapGestureRecognizer
Tapped="HandleTapped" />
</Image.GestureRecognizers>
</Image>
<Label Text="3.2.0" FontSize="16" TextColor="Black" VerticalTextAlignment="Center" />
</StackLayout>
</NavigationPage.TitleView>
....
If you set HasBackButton="False" for the page it should cover the whole screen, just you will have to implement the back button or the hamburger button yourself.
I am developing an application in WP 8.1 which uses the webview control. I tested the app in a 4 inch device and looked fine. but when this app was tested in a bigger device the web view doesn't seem to fit the screen. My xaml code is like
<Grid Margin="0,0.333,0,-1.333" Height="641" VerticalAlignment="Top">
<ProgressBar x:Name="home_progress_bar" IsIndeterminate="True" Visibility="Collapsed" Height="70" Margin="0,282,2,258" Canvas.ZIndex="999999" FontSize="15"/>
<WebView x:Name="orderWebView" HorizontalAlignment="Left" VerticalAlignment="Top" ScriptNotify="orderWebView_ScriptNotify" NavigationStarting="orderWebView_navigation_starting" NavigationFailed="orderWebView_navigation_failed" NavigationCompleted="orderWebView_NavigationCompleted" Height="643" Width="400" DOMContentLoaded="orderWebView_DOMContentLoaded" Margin="0,0,0,-2"/>
</Grid>
<Page.BottomAppBar>
<CommandBar x:Name="Appbar_homepage" Background="{StaticResource PhoneAccentBrush}" ClosedDisplayMode="Minimal" >
<AppBarButton x:Name="AppButton_home" Label="home" Icon="Home" Click="AppButton_home_Click"/>
</CommandBar>
</Page.BottomAppBar>
Please point out what I am missing.
You have hardcoded the width and height of the WebView. Remove the Width and Height properties, change HorizontalAlignment and VerticalAlignment to "Stretch" and optionally play with the Margin property to give it a bit of a margin around.
Example:
<WebView x:Name="orderWebView" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" />