So I was following the Xamarin.Forms Master-Detail Page documentation. Everything is working fine but I noticed that the side drawer has no drop shadow when opened. After Googling about this, many articles/answers suggest that the default android drawer already has built-in drop shadow and should work out of the box. Code was needed to be added to iOS only to get the same effect.
Current effect:
Desired effect:
I must be missing something...
Your desired appearance is the default appearance for my app.
Does your MasterDetailPage look something like this?
<?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="YourCompany.Views.MainPage"
xmlns:views="clr-namespace:YourCompany.Views">
<MasterDetailPage.Master>
<views:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<views:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Are you pushing it as a NavigationPage?
Application.Current.MainPage = new NavigationPage(new MainPage());
Related
I am adding iOS support for my already existing Xamarin Forms android app.
The toolbar items, navigational back arrow and the hamburger menu do not show on iOS:
While they work perfectly on Android:
The Application.MainPage is set to a Shell:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="app.MainPage"
FlyoutBackgroundColor="{StaticResource cBackgroundColorDark}"
Shell.TabBarTitleColor="{StaticResource cBackgroundColor}"
Shell.BackgroundColor="{StaticResource cBackgroundColor}">
<Shell.Resources>
<ResourceDictionary>
<vm:FlyoutVM x:Key="vm" x:Name="vm"/>
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
</Shell.FlyoutHeader>
<ShellContent Title="page1"
IsTabStop="True"
ContentTemplate="{DataTemplate views:Page1Page}"/>
...
<Shell.FlyoutContent>
</Shell.FlyoutContent>
<Shell.FlyoutFooter>
</Shell.FlyoutFooter>
</Shell>
The page with the toolbar items is simply:
<ContentPage>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Example"
IconImageSource="Example.png"
Clicked="ExampleToolbarItem_Clicked"
/>
</ContentPage.ToolbarItems>
</ContentPage>
All navigation (hamburger menu, back button ect) and toolbar items can be tapped on iOS and work as intended - they just are not visible.
I do not understand why this does not work on iOS, any suggestions why this might be the case?
(I cannot find any styling that might be making it act differently. I have also tried displaying a toolbar with just text (no icons) and the problem persists)
I can provide more code if needed.
EDIT
I ended up creating a new Xamarin shell template project and moving everything over. That fixed the issue...
Most likely the image size for ios is incorrect. I use this https://appicon.co/#image-sets to create image set for ios.
A solution that worked before Prism 8, is not working as expected. On the GitHub sample has a simple solution that shows the problem.
The Xamarin Forms app has a MainPage(TabbedPage) with 3 tabs. On each tab there´s a NavigationPage.
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:SuperBarato.Views"
x:Class="SuperBarato.Views.MainPage">
<TabbedPage.Children>
<NavigationPage Title="Promoções"
IconImageSource="tag.png">
<x:Arguments>
<views:PromotionsPage/>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Nova"
IconImageSource="signs.png">
<x:Arguments>
<views:NewPromotionPage/>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Conta"
IconImageSource="user.png">
<x:Arguments>
<views:AccountPage/>
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>
On 2nd tab, there's a button that calls for MarketsPage. But MarketsPage is not been added on the 2nd tab NavigationPage stack. It's been added on the 3rd tab NavigationPage stack.
I tried to create the tabs at runtime as Prism documentation says (App.xaml.cs). That resolved the problem. But, it makes appear other problems.
Some commands that I used to navigate through pages are not working. I can't clear the stack of a NavigationPage that's inside a tab of a TabbedPage.
await _navigationService.NavigateAsync("/SignInPage")
await _navigationService.NavigateAsync("../SignInPage")
Does anyone know how to work with Xamarin Forms TabbedPages with NavigationPages on Prism 8?
GitHub sample: https://github.com/Schinwinkwinsky/XFPrismTabPagesNabPages
There was an Issue on Prism GitHub that it was treating about this.
Brian Laguna has finished (and explained) saying:
That's the man!
https://github.com/PrismLibrary/Prism/issues/2279#issuecomment-746959294
I am new in Xamarin.Forms. I tried to use TopTabbedPage to make top tab navigation template for both ios and Android. However the navigation shows the issue in ios:
It looks like there are two buttons over the tab position. Source code is as follow:
<forms:TopTabbedPage
...
Title="Time Clock">
<TabbedPage.Children>
<NavigationPage Title="Time Clock" >
<x:Arguments>
<tc:ClockInOutPage/>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Report" >
<x:Arguments>
<tc:TimeReportPage />
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
</forms:TopTabbedPage>
It works good in Android. Any hint to fix it? Or would it be better to use a custom renderer? Thanks in advance.
Thanks to Jack I finally used the version 0.0.3.13-pre. It works as what I want for my project.
I am developing a Xamarin Forms application for Android and iOS. Is it possible to use the new FlowDirection property introduced in Xamarin.Forms 3.0 to make the master details view from right to left including the menu which is presented from left as opposed to be from right in RTL languages?
I tried setting the MasterDetail page property but still the menu is presented from left in Android and the menubar is still from left to right.
Any ideas?
New property link
https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Core/FlowDirection.cs
It seems to work out-of-the-box as expected on iOS but not on Android (extra actions required) with the next example:
<?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="RTL.MasterDetailPage"
Padding="25"
FlowDirection="RightToLeft">
<MasterDetailPage.Master>
<ContentPage Title=" ">
<StackLayout>
<Button Text="Menu item" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage>
<Label Text="My page"/>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Here is the outcome:
As you see on Android the menu appear on the left and on iOS on the right. Should check if there an existing bug report, if not should create a new one to the Xamarin.Forms team.
Update:
According to this document we have to add android:supportsRtl="true" to the application node in the manifest and ensure to set minSdk to 17+, without it won't work.So here is the final outcome:
Im trying to display an image on a kindle fire device using a Xamarin project.
The kindle device is android API level 15.
Ive tried to display the image using both URI and local resource techniques but both being used by XAML rather then code behind.
XAML code behind:
<?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="AbsoluteLayoutExercise.Exercise2">
<StackLayout>
<Image Source="Lily2.png" />
</StackLayout>
</ContentPage>
With PNG image (saved using MSPaint to make sure that it is an actual PNG) saved into resources/Drawable on the Android project.
XAML uri
<?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="AbsoluteLayoutExercise.Exercise2">
<StackLayout>
<Image Source="http://lorempixel.com/1920/1080/nature/7" Aspect="AspectFill" />
</StackLayout>
</ContentPage>
Both these ways build successfully but when deployed to the device in question, i get nothing but a white screen.
Anyone got any words of advice?