I just recently started Xamarin.Forms. I run the following code by deploying it to my own IPhone device. The code is the default code that is added whenever a new page is added.
<?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="TestReal.MainPage">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
The problem is that the label that is supposed to say "Welcome to Xamarin Forms!" doesn't appear. I tried rotating the screen, giving it a bigger padding and margin. Giving it a different background color, foreground color and etc. However a slider or a button is displayed correctly. Just the label is not visible.
I found the solution to the issue. Since the dark mode was on on my IPhone device the text was looking white. When dark mode is turned off I am able to see the label and it works as expected.
Try this: Why won't text on a label show up on an actual device but will in the simulator? (Xcode)
Related
I'm a beginner with Xamarin and my code is very simple
<?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:XamarineTest2"
x:Class="XamarineTest2.MainPage">
<StackLayout>
<Image BackgroundColor="Fuchsia"
Aspect="AspectFit"
Source="Juice.jpg"/>
</StackLayout>
</ContentPage>
With the basic android emulator debugger on my visual studio 2017,
I get aspectfit image on portrait(vertical) view as expected like below.
[enter image description here][1]
But when I rotate it to landscape(horizontal) view using the button on the emulator,
I get aspectfill-like image as shown below.
[enter image description here][2]
How can I keep it aspectfit on landscape view which means the bottom of the image should not be cut off?
Thank you guys in advance.
[1]: https://i.stack.imgur.com/ddseU.jpg
[2]: https://i.stack.imgur.com/1hdDS.jpg
I found everything works fine if I use Grid instead of StackLayout. I don't know why, but there seems to be more such problem with StackLayout. Plz add more comment for anyone having a similar problem, since this issue is kind of very basic one in Xamarin.
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
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:
I have a project that this without logo written only the name of the company, as the image below
enter image description here
now I want to put the company logo on the top of my project, to stay with a designer perfect, as you can see in the image below
enter image description here
I'm using xamarin forms and developing app for android and ios, how can I do this in my project? does anyone have any examples?
EDIT
<?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="projeto.Views.home"
x:Name="Name"
Title="Name" Icon="">
Here is a rough layout of what your page could look like:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="projeto.Views.home"
x:Name="Name"
Title="Name" Icon="">
<!--Content page may only have one child element-->
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical">
<Image Source="CompanyLogo.png" AspectRatio="AspectFit"/>
<StackLayout>
<!--Other content--->
</StackLayout>
</StackLayout>
</ContentPage>
Note that this very basic approach is one of several. You need to familiarise yourself with xaml and the different components you could use to achieve certain things.
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?