I have a ToolBarItem in my xaml, this works perfectly on my android but not on iOS. Is there a way to achieve this on both platforms? Also, my app on iOS breaks when i include "Icon=""ic_action_more_vert.png""
My xaml:
<ContentPage.ToolbarItems>
<ToolbarItem Text="About"
Icon="ic_action_more_vert.png"
Priority="0"
Order="Secondary"
Clicked="ToolbarItem_Clicked"/>
<ToolbarItem Text="Settings"
Icon="ic_action_more_vert.png"
Priority="0"
Order="Secondary"
Clicked="ToolbarItem_Clicked_1"/>
</ContentPage.ToolbarItems>
Try to change the priority (1 or 0) and order (Primary or Secondary) of your two ToolbarItems.
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.
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 want to have ZXing.Net.Mobile barcodes scanner with a custom overlay and some UI components implemented in Xamarin.Forms in one View.
Is it possible at all?
I assumed that this is possible and implemented this:
1. Android.Support.V4.App.FragmentActivity with a custom overlay for ZXing scanner.
2. Android Activity with a custom overlay for ZXing scanner.
3. Android PageRenderer with a custom overlay for ZXing scanner.
I was able to run all these variants, but I was not able to mix them with Xamarin.Forms UI.
Example:
Here is my ZXingScannerRendererPage.xaml in the shared project. I want to have "TEST BUTTON" button above Zxing Scanner view.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage x:Name="RootPage"
BackgroundColor="{StaticResource BackgroundColor}"
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:DataCollector" x:Class="DataCollector.ZXingScannerRendererPage">
<ContentPage.Content>
<StackLayout>
<Button Text="TEST BUTTON" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
But when I run the application with PageRenderer I can see for a second my layout with "TEST BUTTON" and then view jumps to ZXing scanner.
When I "press back" button, I can see my XAML layout with "TEST BUTTON". I think ZXing opens a new activity or something.
So, what I need is:
1. Embed ZXing.Net.Mobile barcodes scanner with custom overlay into my Xamarin.Forms ContentPage along with other Xamarin.Forms UI.
or
2. Embed Xamarin.Forms UI above view with ZXing.Net.Mobile barcodes scanner with a custom overlay.
How to accomplish this? Is it possible to embed PageRenderer/Fragment/View into Xamarin.Forms XAML?
Thanks!
How to accomplish this? Is it possible to embed PageRenderer/Fragment/View into Xamarin.Forms XAML?
You could embed the scanner view in between to other redundant BoxViews.
<?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="ZXingSample.PartialScreenScanning"
xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
Title="Partial screen">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<BoxView Grid.Row="0" BackgroundColor="Chocolate"/>
<zxing:ZXingScannerView Grid.Row="1" x:Name="_scanView" OnScanResult="Handle_OnScanResult" IsScanning="true"
WidthRequest="200" HeightRequest="200" />
<BoxView Grid.Row="2" BackgroundColor="Blue" />
</Grid>
You could download the source file from the GitHub. https://github.com/jfversluis/ZXingSample
This blog would be helpful as well. https://blog.verslu.is/xamarin/xamarin-forms-xamarin/scanning-generating-barcodes-zxing/
I think there is an identical thread in XF forum.
You may find some hints from my reply on it
https://forums.xamarin.com/discussion/176704/how-to-embed-zxing-scanner-in-pagerenderer-fragment-view-into-xamarin-forms-contentpage#latest
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());
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: