Windows Phone 7.x does not show content to all screen size - windows-phone-7

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.

Related

Why does Ad Hoc build a different version of a Xamarin app than Visual Studio on Mac?

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?

Xamarin Grid UWP and iOS display issue

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!

UWP NavigationView.HeaderTemplate not working on 1903

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">

ListView GroupHeaderTemplate with fixed height on iOS

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

VisualStudio XAML designer preview differs from actual Windows Phone app view

Take a look at the photo, Visual Studio 2013 (as well as Blend) designer shows different rendering than on actual Windows Phone 8.1 device (Lumia 930):
Look at the red backgrounds widths: designer shows it like left aligned, but device renders as stretch.
The questions are: why and what causes this problem and how to fix it or workaround?
Sample project.
Gist:
<Page.Resources>
<SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
<DataTemplate x:Key="TestItemTemplate">
<Border Background="#FFA20F00">
<TextBlock Text="{Binding Property1}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
</Border>
</DataTemplate>
</Page.Resources>
<Grid DataContext="{Binding Source={StaticResource SampleDataSource}}">
<ItemsControl ItemTemplate="{StaticResource TestItemTemplate}" ItemsSource="{Binding TestCollection}"/>
</Grid>
Found workaround:
<ItemsControl ItemTemplate="{StaticResource TestItemTemplate}" ItemsSource="{Binding TestCollection}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter"/>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
It seems to be a bug in the VisualStudio. Here's the MS Connect bug report.
It might be that Visual Studio just has a different template than what is actually on the device for some reason. Try setting the alignment of the itemcontainer manually by adding an ItemContainerStyle to your ItemsControl.
Depending on what you want to do, change the value of the setter. Set it to left to mimic the behavior in Visual Studio, or Stretch to make it look like it is on the device.
<ItemsControl ItemTemplate="{StaticResource TestItemTemplate}"
ItemsSource="{Binding TestCollection}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>

Resources