I am using a stack layout as its the easiest with responsive but I am trying to get to items side by side I am trying to mimic running apps with speed and distance.
My Main question is how would one get the speed and distance to look similar to the design I can't get the spacing right in a stack layout
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WellbeingNinja.Views.BmiInfo">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" Spacing="0" Padding="0" VerticalOptions="StartAndExpand">
<Frame x:Name="frameTotalSpeed" CornerRadius="7" >
<StackLayout>
<Label x:Name="lblSpeedText" Text="Distance"></Label>
<Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
<Frame x:Name="frameTotalDistance" CornerRadius="7">
<StackLayout>
<Label x:Name="lbldistanceText" Text="Distance"></Label>
<Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
I am trying to mimic this style here
use a Grid
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0" x:Name="frameTotalSpeed" CornerRadius="7" >
<StackLayout>
<Label x:Name="lblSpeedText" Text="Distance"></Label>
<Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="1" x:Name="frameTotalSpeed" CornerRadius="7" >
<StackLayout>
<Label x:Name="lbldistanceText" Text="Distance"></Label>
<Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
</Grid>
Related
An item template that includes a SkiaSharp control displaying svg, a SwipeView and some labels,
is taking forever to load when navigating to the page.
I am using StackLayout with BindableLayout.ItemSource and ItemTemplate.
Using CollectionView will let the page load much faster, but then every attempt to scroll down will slow the app for a moment, while the CollectionView generate the next batch of items.
I have moved all the code generating the items source to background, so the only thing happening on the ui thread is the binding to the ObservableCollection from the viewmodel, and drawing it.
I have also tried reducing the layouts in the item template, but it did not improve loading speed.
Xaml for page:
<DataTemplate x:Key="DataTemplateReportsItemAction">
<StackLayout Orientation="Horizontal">
<effectsView:SfEffectsView Style="{StaticResource StyleRippleEffectReportAction}">
<effectsView:SfEffectsView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ActionCommand}" />
</effectsView:SfEffectsView.GestureRecognizers>
<image:SVGImage ImageSource="{Binding IconName}"
Style="{StaticResource StyleSVGImageReportRowAction}" />
</effectsView:SfEffectsView>
<BoxView Style="{StaticResource StyleBoxViewReportItemAction}"
IsVisible="{Binding IsLast, Converter={StaticResource BoolToReverseBoolConverter}}" />
</StackLayout>
</DataTemplate>
<ControlTemplate x:Key="DataTemplateReportsItemCellDefault">
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BindingContext="{TemplateBinding BindingContext}">
<StackLayout Orientation="Vertical"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center">
<Label Style="{StaticResource StyleLabelReportCellTop}"
Text="{Binding DisplayValue}"
TextColor="{Binding ColorName, TargetNullValue={StaticResource ColorLabelReportCell}, FallbackValue={StaticResource ColorLabelReportCell}}" />
<Label Style="{StaticResource StyleLabelReportCellBottom}"
Text="{Binding DisplayTitle}"
TextColor="{Binding ColorName, TargetNullValue={StaticResource ColorLabelReportCell}, FallbackValue={StaticResource ColorLabelReportCell}}" />
</StackLayout>
<BoxView Style="{StaticResource StyleBoxViewReportItemCell}"
IsVisible="{Binding IsLast, Converter={StaticResource BoolToReverseBoolConverter}}" />
</StackLayout>
</ControlTemplate>
<ControlTemplate x:Key="DataTemplateReportsItemCellTrend">
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BindingContext="{TemplateBinding BindingContext}">
<StackLayout Orientation="Vertical"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center">
<image:SVGImage ImageSource="{Binding IconName}"
HorizontalOptions="Center" />
<Label Style="{StaticResource StyleLabelReportCellTrend}"
Text="{Binding DisplayTitle}"
TextColor="{Binding ColorName, TargetNullValue={StaticResource ColorLabelReportCell}, FallbackValue={StaticResource ColorLabelReportCell}}" />
</StackLayout>
<BoxView Style="{StaticResource StyleBoxViewReportItemCell}"
IsVisible="{Binding IsLast, Converter={StaticResource BoolToReverseBoolConverter}}" />
</StackLayout>
</ControlTemplate>
<converters:ValueToValueConverter x:Key="CellTemplateSelector"
DefaultValue="{StaticResource DataTemplateReportsItemCellDefault}">
<converters:ValueToValueList>
<converters:ValueToValueItem OnValue="{x:Static reportenums:MobileColumnMetaType.Trend}"
ToValue="{StaticResource DataTemplateReportsItemCellTrend}" />
</converters:ValueToValueList>
</converters:ValueToValueConverter>
<DataTemplate x:Key="DataTemplateReportsItemCell">
<ContentView ControlTemplate="{Binding MobileMetaType, Converter={StaticResource CellTemplateSelector}}"
HorizontalOptions="FillAndExpand" />
</DataTemplate>
<DataTemplate x:Key="DataTemplateReportsItem">
<Grid HeightRequest="{StaticResource DoubleReportRowTotalHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource DoubleReportRowTitleHeight}" />
<RowDefinition Height="{StaticResource DoubleReportRowSwipeHeight}" />
</Grid.RowDefinitions>
<StackLayout Margin="0,5"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Spacing="10">
<image:SVGImage ImageSource="{Binding LactationIcon}"
IsVisible="{Binding LactationIcon, Converter={StaticResource StringToIsVisibleConverter}}"
Style="{StaticResource StyleSVGImageReportRowLactation}" />
<Label Style="{StaticResource StyleLabelReportRowTitle}"
FontSize="{Binding UseSmallTitle, Converter={StaticResource RowFontSizeConverter}}"
Text="{Binding DisplayTitle}" />
<Label Style="{StaticResource StyleLabelReportRowTitleGroup}"
IsVisible="{Binding GroupName, Converter={StaticResource StringToIsVisibleConverter}}"
Text="{Binding GroupName}" />
<Frame Style="{StaticResource StyleFrameReportRowBadge}"
BackgroundColor="{Binding Badge.BadgeType, Converter={StaticResource BadgeColorConverter}}"
IsVisible="{Binding Badge.HasBadge}">
<Label Style="{StaticResource StyleLabelReportRowTitleBadge}"
Text="{Binding Badge.BadgeTitle}" />
</Frame>
</StackLayout>
<Grid Grid.Row="1">
<SwipeView BackgroundColor="{StaticResource ColorReportViewRowBackground}"
IsEnabled="{Binding IsEditable}"
x:Name="swipey">
<SwipeView.RightItems>
<SwipeItems Mode="Reveal"
SwipeBehaviorOnInvoked="RemainOpen">
<SwipeItemView WidthRequest="{Binding Width, Source={Reference swipey}}">
<Grid BackgroundColor="{StaticResource ColorLabelReportRowActionsBackground}">
<Grid Margin="20,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<effectsView:SfEffectsView Style="{StaticResource StyleRippleEffectReportRowClose}"
helpers:VisualTreeHelper.ReferenceObject="{Binding Source={Reference swipey}}">
<effectsView:SfEffectsView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnGroupRowCloseTapped" />
</effectsView:SfEffectsView.GestureRecognizers>
<image:SVGImage Style="{StaticResource StyleSVGImageReportRowActionsClose}" />
</effectsView:SfEffectsView>
<StackLayout Grid.Column="2"
Orientation="Horizontal"
BindableLayout.ItemTemplate="{StaticResource DataTemplateReportsItemAction}"
BindableLayout.ItemsSource="{Binding ActionItems}" />
</Grid>
</Grid>
</SwipeItemView>
</SwipeItems>
</SwipeView.RightItems>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BackgroundColor="{StaticResource ColorTransparent}"
BindableLayout.ItemTemplate="{StaticResource DataTemplateReportsItemCell}"
BindableLayout.ItemsSource="{Binding Cells}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.NavigateCommand, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type views:BasePage}}}"
CommandParameter="{Binding}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<Frame Grid.Column="1"
Padding="0"
BackgroundColor="{StaticResource ColorReportGroupRowActionsBackground}"
IsVisible="{Binding IsEditable}">
<image:SVGImage Style="{StaticResource StyleSVGImageSwipe}" />
</Frame>
</Grid>
</SwipeView>
<Grid BackgroundColor="{StaticResource ColorTransparent}"
IsVisible="{Binding IsEditable, Converter={StaticResource BoolToReverseBoolConverter}}">
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.NavigateCommand, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type views:BasePage}}}"
CommandParameter="{Binding}" />
</Grid.GestureRecognizers>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ContentView.Resources>
<ContentView.Content>
<Grid>
<gradient:SfGradientView BackgroundBrush="{StaticResource BrushViewBackgroundGradient}" />
<Grid BackgroundColor="{StaticResource ColorReportsBrowserViewBackground}"
Margin="10,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<reports:ReportToolbarView />
<RefreshView Grid.Row="1"
IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
Command="{Binding RefreshCommand}"
BackgroundColor="{StaticResource ColorReportsViewBackground}"
Margin="10,0">
<ScrollView HorizontalScrollBarVisibility="Never"
VerticalScrollBarVisibility="Default">
<StackLayout Orientation="Vertical">
<StackLayout BindableLayout.ItemsSource="{Binding ReportItems}"
BindableLayout.ItemTemplate="{StaticResource DataTemplateReportsItem}"
Orientation="Vertical" />
<BoxView HeightRequest="50" />
</StackLayout>
</ScrollView>
</RefreshView>
<sortfilter:SortFilterView Grid.Row="1"
VerticalOptions="Start"
IsVisible="{Binding SortFilterModel.IsVisible}" />
</Grid>
</Grid>
</ContentView.Content>
For comparison, replacing the item template with a simple Label makes the page load extremely fast.
Is there a way to load lists of items faster in Xamarin Forms?
Too many StackLayouts. Even worse, you stacked them into each other. Don't do that.
StackLayouts need a lot of layout cycles, as they have to calculate their size based on the children you have put in. If one of those children is a StackLayout as well, that will more than double the layout passes necessary to get to the final result.
And now guess what happens, when you have 50 or more items in your list. Those layout passes will have to run for each single item in your list.
My advice based on my experience would be to replace the StackLayouts with a grid and place your elements using their Grid.Row, Grid.Colum, Grid.RowSpan and Grid.Columnspan properties. Also set your grid sizes to either fixed values or use star based sizes. Don't use "Auto" as this needs more layout passes as well.
In my Xamarin Forms app, I have a CarouselView to swipe through messages. Some messages have attachments. I would like to hide the StackLayout attachmentsLayout when the Attachments list has no items.
I tried to play with DataTriggers but it did not work.
<?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:MyApp.Helpers" x:Class="MyApp.MailboxConversationPage" Title="Messages">
<ContentPage.Content>
<AbsoluteLayout x:Name="absLayout" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="Fill" HeightRequest="{Binding Path=Height, Source={x:Reference absLayout}}" WidthRequest="{Binding Path=Width, Source={x:Reference absLayout}}">
<StackLayout VerticalOptions="Start" Padding="10,10,10,5">
<Label x:Name="Subject" Text="Subject" FontSize="Large" FontAttributes="Bold" />
</StackLayout>
<StackLayout x:Name="carouselViewLayout" VerticalOptions="FillAndExpand">
<ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HeightRequest="{Binding Path=Height, Source={x:Reference carouselViewLayout}}" WidthRequest="{Binding Path=Width, Source={x:Reference carouselViewLayout}}">
<CarouselView x:Name="CarouselMessages" PositionChanged="OnPositionChanged">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="Fill" BackgroundColor="#f5f5f5">
<StackLayout VerticalOptions="Start" Padding="10,10,10,5">
<Label Text="{Binding Sender}" FontAttributes="Bold" />
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand" Padding="10,10,10,10" BackgroundColor="White">
<ScrollView>
<Label Text="{Binding Body}" />
</ScrollView>
</StackLayout>
<StackLayout x:Name="attachmentsLayout" BindableLayout.ItemsSource="{Binding Attachments}" VerticalOptions="End" Padding="10,10,10,10" BackgroundColor="White">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label>
<Label.FormattedText>
<FormattedString>
<local:HyperlinkSpan Text="{Binding Filename}" Url="{Binding Url}" />
</FormattedString>
</Label.FormattedText>
</Label>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<StackLayout VerticalOptions="End" Padding="10,5,10,10">
<Label Text="{Binding Created_At}" BackgroundColor="#f5f5f5" />
</StackLayout>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</ContentView>
</StackLayout>
<StackLayout x:Name="editorLayout" VerticalOptions="FillAndExpand" IsVisible="false" Padding="10,0,10,0">
<Frame x:Name="replyFrame" HeightRequest="{Binding Path=Height, Source={x:Reference editorLayout}}" HasShadow="false" OutlineColor="Gray" Padding="2,0,2,0">
<Editor x:Name="replyEditor">
<Editor.BackgroundColor>
<OnPlatform x:TypeArguments="Color"
iOS="White"
Android="Transparent"
WinPhone="#2c3e50" />
</Editor.BackgroundColor>
</Editor>
</Frame>
</StackLayout>
<StackLayout VerticalOptions="End" Padding="10,3,10,10">
<Button x:Name="replyButton" Text="Reply" Clicked="OnReplyActivated" BorderRadius="5" BackgroundColor="#337ab7" TextColor="White" FontAttributes="Bold" />
<Button x:Name="sendButton" Text="Send Message" Clicked="OnSendMessageActivated" BorderRadius="5" BackgroundColor="#337ab7" TextColor="White" FontAttributes="Bold" IsVisible="false"/>
</StackLayout>
</StackLayout>
<ContentView x:Name="overlay" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" IsVisible="True" BackgroundColor="#C0808080" Padding="10, 0">
<ActivityIndicator WidthRequest="110" HeightRequest="70" IsRunning="True" IsVisible="True" Color="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Why don't you simply add another property to your ViewModel that indicates whether there are any items in your Attachments collection. Then bind IsVisible of the layout to this property
View
<StackLayout x:Name="attachmentsLayout"
IsVisible="{Binding HasItems}"
BindableLayout.ItemsSource="{Binding Attachments}"
VerticalOptions="End" Padding="10,10,10,10" BackgroundColor="White">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label>
<Label.FormattedText>
<FormattedString>
<local:HyperlinkSpan Text="{Binding Filename}" Url="{Binding Url}" />
</FormattedString>
</Label.FormattedText>
</Label>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
ViewModel
public bool HasItems => Attachments.Any();
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>
The top position shifts down because the margin you set in the listView:
<ListView BackgroundColor="Orange" Margin="15">
Remove the Margin="15" and the space will disappear.
BTW, you can add page-safe-area-layout to make it looks better:
<ContentPage ...
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
Title="Safe Area"
ios:Page.UseSafeArea="true">
<StackLayout>
...
</StackLayout>
</ContentPage>
I have Xamarin Forms Cross Platform project with a ListView whose ViewCell contains a StackLayout. I hide and show the StackLayout when the user clicks on an image. There is a known issue with the ViewCell not resizing correctly on iOS and solution I found was to use ForceUpdateSize method on the ViewCell in order to for the app on iOS to resize the cell. This is working from the aspect of resizing the ViewCell - however after calling the method, I loose the three buttons at the bottom of ViewCell. The buttons are in a grid and all the code, xaml and screen shots are below. Any help with resolving this would be greatly appreciated.
Page XAML:
<ViewCell x:Name="vcDetails" >
<StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="Start">
<BoxView x:Name="bvLine" VerticalOptions="Center" BackgroundColor="Black"
HorizontalOptions="FillAndExpand" HeightRequest="4" />
<StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="Start">
<!-- Info Button and title-->
<StackLayout x:Name="slPlaceName" HorizontalOptions="Fill" VerticalOptions="Start" Orientation="Horizontal" Margin="0,0,0,0">
<Image x:Name="btnDropDown" HorizontalOptions="Start" VerticalOptions="Center" Source="circledropdown.png" Margin="0,4,4,0" IsVisible="{Binding ShowDropDown}"/>
<Image x:Name="btnDropUp" HorizontalOptions="Start" VerticalOptions="Center" Source="circledropup.png" Margin="0,4,4,0" IsVisible="{Binding ShowDropUp}"/>
<Label x:Name="lblPlaceName" TextColor="Gray" FontAttributes="Bold" Text="{Binding Title}" FontSize="Medium" Margin="0,0,0,0" VerticalOptions="Center"
HorizontalOptions="FillAndExpand" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnDetails_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="slDetails" Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="StartAndExpand" Margin="8,4,8,4"
IsVisible="{Binding ShowDetails}" BackgroundColor="LightGray">
<BoxView VerticalOptions="Start" HorizontalOptions="Fill" BackgroundColor="DarkCyan" HeightRequest="2" Margin="0,0,0,0" />
<Label x:Name="lblStreetAddress" VerticalOptions="Start" HorizontalOptions="Start" HorizontalTextAlignment="Start"
TextColor="Black" FontSize="Small" Text="{Binding AddressLine1}" />
<Label x:Name="lblCityStateZip" VerticalOptions="Start" HorizontalOptions="Start" HorizontalTextAlignment="Start" TextColor="Black" FontSize="Small"
Text="{Binding CityStateZip}" />
<Label x:Name="lblHours" VerticalOptions="Start" HorizontalOptions="Start" TextColor="Black" FontSize="Small" Text="{Binding Hours}" HorizontalTextAlignment="Center" />
<Grid x:Name="gvDetailButtons" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="8,4,8,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackLayout x:Name="btnGoToInfoPage" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="8,0,4,0"
Grid.Column="0" Grid.Row="0" BackgroundColor="DarkGray" Padding="0,2,0,2">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image x:Name="btnInfo" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Source="infosmall.png" Margin="0,0,4,0" />
<Label x:Name="lblbntInfo" Text="{ext:Translate MoreInfo}" TextColor="Black" FontAttributes="Bold"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Small"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnGoToInfoPage" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="slGoToEditPage" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="4,0,8,0"
Grid.Column="1" Grid.Row="0" BackgroundColor="DarkGray" Padding="0,2,0,2">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image x:Name="btnedit" Source="editsmall.png" Margin="8,0,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label x:Name="lblbntEdit" Text="{ext:Translate Edit}" TextColor="Black" FontAttributes="Bold"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Small"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnedit_Tapped" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</Grid>
<BoxView VerticalOptions="Start" HorizontalOptions="Fill" BackgroundColor="DarkCyan" HeightRequest="2" Margin="0,0,0,0"
Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1"/>
</StackLayout>
<StackLayout x:Name="slRatingandDistance" Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="StartAndExpand">
<Label x:Name="lblRatingHeader" Text="{ext:Translate RatingText}" TextColor="Black" FontSize="Small" FontAttributes="Bold"
Margin="4,0,0,0" HorizontalOptions="Start" VerticalOptions="Center"/>
<Label x:Name="lblRatingValue" Text="{Binding Rating}" TextColor="Black" FontSize="Small"
HorizontalOptions="Start" VerticalOptions="Center"/>
<Label x:Name="lblDistanceHeader" Text="{ext:Translate DistanceText}" TextColor="Black" FontSize="Small" FontAttributes="Bold"
Margin="4,0,0,0" HorizontalOptions="Start" VerticalOptions="Center"/>
<Label x:Name="lblDistanceValue" Text="{Binding Distance}" TextColor="Black" FontSize="Small"
HorizontalOptions="Start" VerticalOptions="Center" />
</StackLayout>
<Label x:Name="lblAttributes" Text="{Binding AttributesTexts}"
TextColor="Black" FontSize="Small" LineBreakMode="WordWrap" Margin="0,0,0,0" HorizontalOptions="Start"
VerticalOptions="Start"/>
</StackLayout>
<Grid x:Name="gvButtons" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="4,4,4,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout x:Name="btnRate" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray"
Margin="2,0,2,0" Grid.Column="0" Padding="0,2,0,2">
<StackLayout x:Name="slLayoutRate" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Image x:Name="imgRate" Source="smallstar.png" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,4,0" />
<Label x:Name="lblRate" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="{ext:Translate Rate}"
TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnRate_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="btnMap" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray"
Margin="2,0,2,0" Grid.Column="1" Padding="0,2,0,2">
<StackLayout x:Name="slLayoutMap" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Image x:Name="imgMap" Source="mapblue.png" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,4,0" />
<Label x:Name="lblMap" HorizontalOptions="Center" VerticalOptions="Center" Text="{ext:Translate Map}"
TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnMap_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="btnClosed" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray"
Margin="2,0,2,0" Grid.Column="2" Padding="0,2,0,2">
<StackLayout x:Name="slLayoutClosed" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Image x:Name="imgClosed" Source="closed.png" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Margin="0,0,4,0" />
<Label x:Name="lblClosed" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{ext:Translate Closed}"
TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnClosed_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</Grid>
</StackLayout>
</ViewCell>
Code the hides/shows the stack layout.
private void btnDetails_Clicked(object sender, EventArgs e)
{
long ll_PlaceID = -1;
try
{
ll_PlaceID = Convert.ToInt64(((TappedEventArgs)e).Parameter);
ViewModelObjects.NearbyPlaces.ShowDetailText(ll_PlaceID);
if (Device.RuntimePlatform == Device.iOS)
{
((ViewCell)((Element)sender).Parent.Parent.Parent).ForceUpdateSize();
}
}
catch (Exception ex)
{
App.ProcessException(ex);
}
}
Show Details code from the View Model
public void ShowDetailText(long pl_PlaceID)
{
GBSPlaceDetail lobj_Place = null;
try
{
lobj_Place = (GBSPlaceDetail)(from lobj_Work in GBSPlaceDetails
where lobj_Work.ID == pl_PlaceID
select lobj_Work).ToList()[0];
if (lobj_Place != null)
lobj_Place.ShowDetails = !lobj_Place.ShowDetails;
}
catch (Exception ex)
{
App.ProcessException(ex);
}
}
Any suggestions would be greatly appreciated.
No one every really responded to my post so I started looking for other controls to use. I found SyncFusion had a ListView control also. It seemed to be a pretty easy drop in for the Xamarin Forms ListView control (add the needed namespace and prefix all the controls with the SyncFusion ListView namespace). On iOS you still needed to call extra code when the size of the list item entry expanded but the SyncFusion code seems to work cleaner than the Xamarin code as the problem did not manifest when using the SyncFusion ListViewcontrol.
Here is the code I had to include in the code behind for the page in my PCL project. (lvPlaces is the name of my ListView control in the XAML)
if (Device.RuntimePlatform == Device.iOS)
{
lvPlaces.ForceUpdateItemSize();
}
I am loaded the data in List view in my page. I am able to scroll the data in List view but at the time of scrolling not showing any scrollbar at vertical. Please suggest any idea, How can I set vertical scrollbar in List view.
Sample code:
<ListView BackgroundColor="Transparent" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
ItemsSource="{Binding DataList}" HeightRequest="{Binding DataListRowHeight}" HasUnevenRows="true" HorizontalOptions="CenterAndExpand" RowHeight="40" SeparatorColor="Transparent"
SelectedItem="null">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="OnItemClicked"/>
</Grid.GestureRecognizers>
<Label Text="{Binding WindowName}" Grid.Column="0" TextColor="Black" FontFamily="Avenir Book" HorizontalTextAlignment="Start" VerticalTextAlignment="Center">
</Label>
<StackLayout Orientation="Horizontal" Grid.Column= "1">
<Label Text="Curtain Type:" TextColor="Black" FontFamily="Avenir Book" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="Center">
</Label>
<Label Text="{Binding Data}" TextColor="Black" FontFamily="Avenir Book" HorizontalTextAlignment="Start" VerticalTextAlignment="Center">
</Label>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Above is the second listview sample code.