I have a UI problem in Xamarin. It looks perfect in Android, but didn't work in iOS. I checked in UWP just to be sure, and it doesn't work there either. Now keep in mind the only reason I keep UWP project in there is for quick testing. I am not targeting UWP.
Here is the correct behavior in Android
Here is in the incorrect behavior in iOS ( I know that's a UWP screenshot, but its the same problem )
Here is the code XML, I can't figure this out to save my life.
<StackLayout Orientation="Vertical" Padding="16,40,16,0" Spacing="10">
<Grid VerticalOptions="Center"
HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="128"/>
</Grid.ColumnDefinitions>
<Image x:Name="PhotoImageFront"
Grid.Column="0"
Source="camera_front.png"
HeightRequest="128" />
<BoxView
Grid.Column="1"/>
<Image x:Name="PhotoImageRear"
Grid.Column="2"
Source="camera_rear.png"
HeightRequest="128" />
</Grid>
</StackLayout>
I had to rename my files from having dashes to underscores because of filename conventions in one of those projects. Somehow I missed a couple of renames. I had been battling this problem for hours, amazingly SushiHangover pointed me in the right direction 5 minutes after I posted the questions. Thanks guys!
Related
Here is the landing page for my application:
<ContentView x:Class="ThetaRex.OpenBook.Quant.Forms.Views.MainView"
xmlns:controls="clr-namespace:ThetaRex.OpenBook.Quant.Forms.Controls"
x:DataType="viewModels:MainViewModel"
xmlns:viewModels="clr-namespace:ThetaRex.OpenBook.Quant.Common.ViewModels;assembly=ThetaRex.OpenBook.Quant.Common"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns="http://xamarin.com/schemas/2014/forms">
<StackLayout>
<Label FontSize="Large"
HorizontalOptions="CenterAndExpand"
Margin="20,40,20,10"
Text="{x:Binding WelcomeLabel}"/>
<StackLayout Margin="20,0">
<ListView HasUnevenRows="True"
ItemsSource="{x:Binding Items}"
Margin="20,0">
<ListView.ItemTemplate>
<DataTemplate x:DataType="viewModels:FunctionItemViewModel">
<ViewCell>
<controls:DetailButton Command="{x:Binding Command}"
CommandParameter="{x:Binding CommandParameter}"
Description="{x:Binding Description}"
IsEnabled="{x:Binding IsEnabled}"
Label="{x:Binding Label}"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</ContentView>
This is what it looks like when built on a Mac and built on Windows:
I built both using the exact same code and Visual Studio (Mac/Windows), then Archive to file, then load IPA using iTunes.
At no point did I ask for a scrollable window for the main stack layout, but the VS Windows seems to add that capability. Does anyone have a clue what's going on here?
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 have the following main view
<NavigationView AlwaysShowHeader="True">
<NavigationView.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Trxto" />
</StackPanel>
</DataTemplate>
</NavigationView.HeaderTemplate>
<NavigationView.Content>
<TextBlock Text="Content" />
</NavigationView.Content>
</NavigationView>
If i run this while targeting Windows 10 1803 i can see the header, but if i
change the target version to 1903 it doesn't show up....
So, I'm lost here, any help would be appreciate
UWP NavigationView.HeaderTemplate not working on 1903
The problem is that you just implement HeaderTemplate, but you have not set Header property. the HeaderTemplate will not render.
NavigationView. <NavigationView AlwaysShowHeader="True" Header="Test">
I'm trying to set a variable height list view on iOS. Our code (on the sample project linked and main part below) works fine on Droid, but fails miserably on iOS.
I have tried iOS 9.3 and iOS 10, with forms 2.3.2.127 and latest prerelease 2.3.3.163-pre3.
<ListView Grid.Row="2"
ItemsSource="{Binding MenuSections}"
IsGroupingEnabled="True"
HasUnevenRows="True"
SeparatorVisibility="Default"
ItemTapped="ListViewOnItemTapped">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,10,15,10"
Spacing="0"
BackgroundColor="Green">
<Label Text="{Binding Name}"
LineBreakMode="TailTruncation"
TextColor="White"
FontSize="14"/>
<Label Text="{Binding Description}"
Margin="0,0,0,10"
IsVisible="{Binding HasDescription}"
LineBreakMode="WordWrap"
TextColor="{StaticResource BSDirtyWhite}"
FontSize="11"/>
</StackLayout>
</ViewCell>
</DataTemplate>
I have already removed everything above with only a Label, and got exactly same result. Looks like header height on iOS is fixed to some constant number.
Please find below the screen shots for Droid (working fine) and failed iOS 9.3 and 10.
Any help or workaround is greatly appreciated.
CodeKnox
Droid perfect header:
iOS 9 broken header:
iOS 10 broken header:
Sample project:
repro xamarin forms project
This bug is tracked on the Xamarin Forms Github site: https://github.com/xamarin/Xamarin.Forms/issues/3769
There is a gist in the comments suggesting creating a custom renderer:
https://gist.github.com/nbevans/a713dc9c77a8f530b6f4f3cd4fad83c2
I've found the problem.
The same xaml does not shown for all screen size in W.P. 7.1 but does in W.P. 8.
There is standard project template with red border to see difference:
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
shell:SystemTray.IsVisible="True">
<Border BorderBrush="Red" BorderThickness="2">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
</Grid>
</Border>
Please, see screenshots - http://wp-hub.in.ua/all.png
Left part is running with 7.1 target for project, right - 8.0
Reproducing only for emulator 720p.
Notice, even if run 7.1 targeted app on WinPhone 8.0 it has same problem. So the reason is not in device, but on selected target on project properties.
How to fix it?
Thank you.
This is by-design for app-compat reasons. Windows Phone 7.x apps are designed and tested to run on phones that are 480 x 800 pixels (9:15 aspect ratio). When run on newer Windows Phone 8.x devices with 9:16 screens (like 720p or 1080p) there is too much space and some apps wouldn't know what to do with that space. So for apps built for WP 7.x, the OS just reserves the top part of the screen and lies to the app, telling it that it is still 480 x 800 pixels.