I need to set the height of the list view so that the bottom view cell is not cut off whenever adding or removing a view item. I can achieve it for some iPhone models, but not the others. It seems it’s not a right way to achieve it by iPhone model. My questions are: 1. On some iPhone models, why the top position shifts down by about 25 pixels after adding a view item? 2. How to find the absolute top position Y coordinate of the list view?
It seems AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" doesn’t help. VerticalOptions="Start" doesn’t help either.
Note: 1. no such an issue on Android phones. 2. Observation only: It seems that changing the margin of the listview header brandStack has no effect on the layout, eg. cannot see increased margins. 3. The following two screenshots show that the top position of the listview header has moved down a bit after an item is added to the listview.
Code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="tecommobile.Views.PanelsHomePage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:effects="clr-namespace:tecommobile.Effects;assembly=tecommobile"
xmlns:tecommobile="clr-namespace:tecommobile;assembly=tecommobile"
xmlns:views="clr-namespace:tecommobile.Views;assembly=tecommobile"
xmlns:controls="clr-namespace:Flex.Controls;assembly=Flex"
xmlns:system="clr-namespace:System;assembly=netstandard"
x:Name="PanelHomePage"
Title="{Binding Title}"
BackgroundColor="Bisque"
NavigationPage.HasNavigationBar="false">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="addPanelStyle" TargetType="views:CustomImageButton" BasedOn="{StaticResource customImageButtonStyle}">
<Setter Property="Source" Value="panel_add.png" />
<Setter Property="HeightRequest" Value="70" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<RelativeLayout>
<tecommobile:GradientColorStack RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"
Style="{StaticResource gradientColorStack}">
<StackLayout>
<StackLayout x:Name="panelListViewStack" BackgroundColor="Red"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<ListView x:Name="ItemsListView" BackgroundColor="Orange"
Margin="15"
CachingStrategy="RecycleElement"
IsPullToRefreshEnabled="false"
ItemsSource="{Binding Items}"
RefreshCommand="{Binding LoadItemsCommand}"
SelectionMode="None"
Style="{StaticResource listViewNoSeparatorStyle}"
Scrolled="ItemsListView_OnScrolled">
<ListView.Header>
<StackLayout x:Name="brandStack" Margin="15, 0, 15, 0" HeightRequest="150" BackgroundColor="Yellow">
<Image HeightRequest="48"
HorizontalOptions="Center"
Source="Icon_ILXLinks.png"
WidthRequest="48"
Margin="0,30,0,0" />
<Label FontSize="20"
HorizontalTextAlignment="Center"
Text="TecomPlus"
TextColor="White"
VerticalTextAlignment="Center" />
<Label FontSize="14"
HorizontalTextAlignment="Center"
Text="Your smart security manager"
TextColor="White"
VerticalTextAlignment="Center"
Margin="0,0,0,20" />
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid effects:RoundCornersEffect.CornerRadius="8" HeightRequest="75" Margin="2" BackgroundColor="{Binding PanelColour}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Source="{Binding BindingContext.EditToggleIcon, Source={x:Reference PanelHomePage}}"
BackgroundColor="Transparent" WidthRequest="50" HorizontalOptions="StartAndExpand" Margin="10,0,0,0">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.HomePageEditPanelCommand, Source={x:Reference PanelHomePage}}" CommandParameter="{Binding .}"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Text}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="FillAndExpand"
LineBreakMode="NoWrap" FontSize="14" TextColor="{Binding PanelTextColour}">
</Label>
<Image Grid.Row="0" Grid.Column="2" Source="forward.png" Style="{StaticResource rightImageStyle}">
</Image>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.RunPanelCommand, Source={x:Reference PanelHomePage}}" CommandParameter="{Binding .}"
NumberOfTapsRequired="1" />
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout HeightRequest="70"></StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BackToEditCommand}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<tecommobile:GradientColorStack.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BackToEditCommand}"/>
</tecommobile:GradientColorStack.GestureRecognizers>
</tecommobile:GradientColorStack>
<views:CustomImageButton Command="{Binding InfoCommand}" BackgroundColor="Transparent"
HeightRequest="30"
WidthRequest="30"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=-45}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0,
Constant=35}"
Source="info.png">
</views:CustomImageButton>
<Grid x:Name="bottomGrid" BackgroundColor="#216593" effects:RoundCornersEffect.CornerRadius="8"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-140}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-70}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.0*" />
<ColumnDefinition Width="1.0*" />
</Grid.ColumnDefinitions>
<Image x:Name="AddButton" Source="panel_add.png" Grid.Row="0" Grid.Column="0" Style="{StaticResource buttonImageStyle}">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding AddItemCommand}" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Image x:Name="DeleteButton" Source="{Binding BindingContext.DeleteToggleIcon, Source={x:Reference PanelHomePage}}"
Grid.Row="0" Grid.Column="1" Style="{StaticResource buttonImageStyle}">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ToggleDeleteIconCommand}" CommandParameter="{x:Reference DeleteButton}" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</RelativeLayout>
</ContentPage.Content>
</ContentPage>
