How do I make the CollectionView render all items with the same height while using a GridItemsLayout on iOS? It already works on Android that all elements in a row gets the same height but on iOS they are squished vertically in the center of the row.
This is how it currently looks on iOS (how it not should be..):
And this is how it currently looks on Android (how it also should be on iOS - all elements are scaled to the same height in the same row):
As of now, this is how my XAML looks like:
<CollectionView Grid.Row="1" x:Name="DataListView" ItemSizingStrategy="MeasureAllItems" ItemsSource="{Binding Data}" IsGrouped="False" ItemTemplate="{StaticResource EntryTemplate}"
Header="{Binding Header}" Footer="{Binding Footer}" BackgroundColor="{DynamicResource DarkBackgroundColor}">
<CollectionView.ItemsLayout>
<!-- Span is set in OnSizeAllocated to make this "dynamic" -->
<GridItemsLayout x:Name="GridItemsLayout" Orientation="Vertical" Span="1" />
</CollectionView.ItemsLayout>
<CollectionView.HeaderTemplate>
<DataTemplate x:DataType="x:String">
<Grid Padding="10,20">
<Label Text="{Binding}" TextColor="{DynamicResource TextColor}" FontAttributes="Bold" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
</Grid>
</DataTemplate>
</CollectionView.HeaderTemplate>
<CollectionView.FooterTemplate>
<DataTemplate x:DataType="x:String">
<Grid Padding="{OnPlatform iOS=20 30 20 20, Default=20}">
<Label Text="{Binding}" TextColor="{DynamicResource LightTextColor}" FontSize="Micro" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
</Grid>
</DataTemplate>
</CollectionView.FooterTemplate>
</CollectionView>
This is my entry data template XAML:
<DataTemplate x:Key="EntryTemplate" x:DataType="data:Entry">
<Grid BackgroundColor="Red" VerticalOptions="FillAndExpand" Margin="0">
<Frame WidthRequest="{Binding Converter={StaticResource FlowColumnWidthConverter}, ConverterParameter=324}" BackgroundColor="{DynamicResource DarkerBackgroundColor}"
BorderColor="{Binding IsActive, Converter={StaticResource ActiveToColorConverter}}" HorizontalOptions="Center" Margin="8" Padding="10" CornerRadius="5">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnChecklistElementTapped" />
</Frame.GestureRecognizers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding Type, Converter={StaticResource TypeToEmbeddedImageConverter}}" WidthRequest="32" HeightRequest="32" Margin="4" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" LineBreakMode="TailTruncation" VerticalOptions="Start" />
<Label Grid.Row="1" Grid.Column="1" Text="{Binding Region}" FontSize="12" LineBreakMode="TailTruncation" VerticalOptions="Start" Margin="0,-6,0,0" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding AdditionalData}" TextType="Html" FontSize="12" LineBreakMode="WordWrap" Margin="0"
IsVisible="{Binding AdditionalData, Converter={StaticResource EmptyToVisibilityConverter}}" InputTransparent="True" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding Description}" FontSize="12" LineBreakMode="WordWrap"
IsVisible="{Binding Description, Converter={StaticResource EmptyToVisibilityConverter}}" />
<Switch Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" IsToggled="{Binding IsDone}" HorizontalOptions="Center" VerticalOptions="Center" />
<StackLayout Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" Orientation="Horizontal" Spacing="12" HorizontalOptions="Center" VerticalOptions="Start" Margin="0,4,0,4">
<controls:TintedImageButton Source="Details.png" Clicked="OnNavigateToDetailsButtonClicked" HeightRequest="32" WidthRequest="32"
IsVisible="{Binding Details, Converter={StaticResource EmptyToVisibilityConverter}}"
HorizontalOptions="Center" BackgroundColor="Transparent" />
<controls:TintedImageButton Source="Map.png" Clicked="OnNavigateToMapButtonClicked" HeightRequest="32" WidthRequest="32"
HorizontalOptions="Center" BackgroundColor="Transparent" IsVisible="{x:Static resources:Metadata.MAP_ENABLED}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
</DataTemplate>
And this is my code behind (where I set how many columns there should be):
protected override void OnSizeAllocated(double width, double height)
{
base.OnSizeAllocated(width, height);
GridItemsLayout.Span = Convert.ToInt32(Math.Floor(width / 340d));
}
Anyone has an idea, why this is looks different on iOS in the first place and what I should look up to fix this problem?
Related
i have created a cross platform app using xamarin.forms. i added some toolbar items to some pages but the problem is that they appear twice as in the following picture.
this is the code of ny page:
<?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="ALNahrainAlphaApp.Accounting"
xmlns:images="clr-namespace:ALNahrainAlphaApp;assembly=ALNahrainAlphaApp"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true">
<ContentPage.ToolbarItems >
<ToolbarItem Order="Secondary"
Text="logout"
Priority="2"
Clicked="ToolbarItem_Clicked"
/>
<ToolbarItem Order="Secondary"
Text="View Total Income"
Priority="2"
Clicked="ToolbarItem_Clicked_1"
/>
</ContentPage.ToolbarItems>
<ContentPage.Resources>
<Style TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor"
Value="#f4f0ec" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="White" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<SearchBar HorizontalOptions="FillAndExpand" x:Name="search" TextChanged="search_TextChanged"/>
<RefreshView x:Name="refresh" >
<CollectionView x:Name="registeredstdslist" SelectionChanged="registeredstdslist_SelectionChanged" SelectionMode="Single" >
<CollectionView.Header>
<Grid Padding="2" ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="StdID"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="1"
Text="Name"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="2"
Text="Expected Date"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="3"
Text="Edlevel"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="4"
Text="Grade"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="5"
Text="Status"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
</Grid>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate >
<Grid ColumnSpacing="1" RowSpacing="0" Padding="9,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="{Binding stdid}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="1"
Text="{Binding name}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="2"
Text="{Binding ExpectedDateofPayment}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="3"
Text="{Binding edlevel}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="4"
Text="{Binding grade}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
Padding="10"
FontSize="13"
/>
<Image
Grid.Column="5"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="20"
WidthRequest="20"
>
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding status}" Value="false" >
<Setter Property="Source" Value="{OnPlatform Android=redtik.png,iOS=redtik.png}"/>
</DataTrigger>
<DataTrigger TargetType="Image" Binding="{Binding status}" Value="true" >
<Setter Property="Source" Value="{OnPlatform Android=greentik.png, iOS=greentik.png}"/>
</DataTrigger>
</Image.Triggers>
</Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
<StackLayout VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="#0d98ba">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAddStd">
<Image Margin="0,10,0,5" x:Name="imgAdd" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckfilter">
<Image Margin="0,10,0,10" x:Name="imgfilter" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckshare">
<Image Margin="0,10,0,10" x:Name="imgshare" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
<ContentView x:Name="popupLoadingView" BackgroundColor="Transparent" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="Transparent">
<ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="40" HeightRequest="40" ></ActivityIndicator>
</StackLayout>
</StackLayout>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
in android nothing is wrong. but for some reason, in ios, the toolbar items are repeated. any suggestions. thanks in advance.
I have a fairly simple Xamarin forms layout.
The layout works as expected as long as I hold the iPhone, but when placed on a flat surface and I then navigate to a specific page the page, gets an incorrectly layout.
The offending page:
<?xml version="1.0" encoding="UTF-8"?>
<pages:BaseContentPage xmlns:pages="clr-namespace:Mainapp.Pages" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:customcontrols="clr-namespace:Mainapp.CustomControls" xmlns:forum="clr-namespace:Mainapp.Pages.Forum" x:Class="Mainapp.Pages.Forum.ForumTopicDetailPage">
<pages:BaseContentPage.MainContent>
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Red" >
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="Blue">
<Grid Padding="65,5,5,5" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" x:Name="ContentGrid" BackgroundColor="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Label x:Name="LblTopTitle" Style="{StaticResource TitleStyle}" Grid.Row="0" Grid.Column="0" FontAttributes="Bold" FontSize="14" LineBreakMode="WordWrap" HorizontalTextAlignment="Center" MaxLines="2" />
<Label x:Name="LblAuthor" Style="{StaticResource SubTitleStyle}" Grid.Row="1" Grid.Column="0" FontAttributes="None" FontSize="12"/>
<customcontrols:UserInitialsView VerticalOptions="Center" HorizontalOptions="Center" Grid.RowSpan="2" Grid.Column="1" x:Name="UserIntials"></customcontrols:UserInitialsView>
</Grid>
<ListView x:Name="TableListView"
ItemsSource="{Binding Comments}"
HasUnevenRows="true"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
IsVisible="true"
SeparatorColor="Transparent"
SelectionMode="None"
BackgroundColor="{StaticResource BlueBackground}">
<ListView.ItemTemplate>
<DataTemplate>
<forum:TopicCommentCell CommentContent="{Binding}" UserChangedLikeStateForComment="UserChangedLikedStateForContent" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Header>
<Grid Padding="0,0,0,10" BackgroundColor="Purple">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label BackgroundColor="{StaticResource Light_Ivory}" Text=""/>
<Frame HasShadow="False" CornerRadius="36" BackgroundColor="{StaticResource Light_Ivory}" Grid.RowSpan="5" />
<Label Padding="10,0,10,0" x:Name="LblListTitle" MaxLines="2" VerticalOptions="Start" Style="{StaticResource Topic_HeadlineStyle}" Grid.Row="1" Text="TITLE" />
<Label Padding="10,0,10,0" x:Name="LblListText" VerticalOptions="Start" Style="{StaticResource Topic_TextStyle}" LineHeight="1.5" Grid.Row="2" Text="TEXT TEXT TEXT"/>
<customcontrols:LikeView Padding="10,20,0,0" x:Name="LikeView" Grid.Row="3" UserChangedLikedState="UserChangedLikedStateForContent"></customcontrols:LikeView>
<Label Padding="10,0,10,0" x:Name="LblCommentHeader" HorizontalTextAlignment="Start" MaxLines="1" VerticalOptions="Start" Style="{StaticResource TitleStyle}" Grid.Row="5" Text="Kommentarer" />
</Grid>
</ListView.Header>
<ListView.Footer>
<Label BackgroundColor="Transparent" HeightRequest="100"/>
</ListView.Footer>
</ListView>
</StackLayout>
<customcontrols:FloatingTextEditor DidFinishWithDone="FloatingTextEditor_DidFinishWithDone" KeyboardDidShow="FloatingTextEditor_KeyboardDidShow" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0,1"></customcontrols:FloatingTextEditor>
</AbsoluteLayout>
</pages:BaseContentPage.MainContent>
</pages:BaseContentPage>
I'm not using the gyroscope and the app is set to Portrait mode only.
Any idea what I'm doing wrong?
Expected layout, and what happens when i hold the Phone:
Layout when phone is placed on a level plane:
I ended up replacing the absolute layout with a grid layout. It works, but I'm still not sure why the absolute layout didn't work
I am trying to create an expandable ListView, but I have a problem with the background color on iOS, as this will not fit the ViewCell.
It is working correctly on Android and UWP.
I have tried some different approaches.
The first approach is this
<Grid BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" Margin="5" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="DEL" />
<StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" Orientation="Vertical" VerticalOptions="Start">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0" Orientation="Vertical" VerticalOptions="Start">
<Label LineBreakMode="TailTruncation" Text="{Binding Description}" />
<Label Text="{Binding ProjectReference}" />
<Label Text="{Binding CustomerName}" />
</StackLayout>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Amount}" />
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" IsVisible="{Binding IsMoreInfoAvailable}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeMoreInfoCommand}" />
</Grid.GestureRecognizers>
<Label Grid.Column="0" Text="More info" />
<Label Grid.Column="1" Text="{Binding MoreInfoIcon}" />
</Grid>
</Grid>
<StackLayout IsVisible="{Binding ShowMoreInfo}" VerticalOptions="Start">
<Label Text="{Binding Address}" />
</StackLayout>
</StackLayout>
</Grid>
And another approach is this
<Grid BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" Margin="5" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="DEL" />
<Grid Grid.Column="1" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0" Orientation="Vertical" VerticalOptions="Start">
<Label LineBreakMode="TailTruncation" Text="{Binding Description}" />
<Label Text="{Binding ProjectReference}" />
<Label Text="{Binding CustomerName}" />
</StackLayout>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Amount}" />
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" IsVisible="{Binding IsMoreInfoAvailable}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeMoreInfoCommand}" />
</Grid.GestureRecognizers>
<Label Grid.Column="0" Text="More info" />
<Label Grid.Column="1" Text="{Binding MoreInfoIcon}" />
</Grid>
</Grid>
<StackLayout Grid.Column="1" Grid.Row="1" IsVisible="{Binding ShowMoreInfo}" VerticalOptions="Start">
<Label Text="{Binding Address}" />
</StackLayout>
</Grid>
And both approaches work on UWP and Android but neither of them work on iOS
The command consist of
ShowMoreInfo = !ShowMoreInfo;
MoreInfoIcon = ShowMoreInfo ? "-" : "+";
UpdateLayout?.Invoke();
Where the UpdateLayout action is only set on iOS and is set to ForceUpdateSize
The source code can be found on WeTransfer
EDIT
I expect the layout to look like this, when I expand the ViewCell
But instead it looks like this, when I expand the ViewCell
The problem only occurs, when the ViewCell is expanded for the 1st time.
I have the following structure and I want to put a scrollView in my ios application, when I place the Scrowview in this structure my data all disappear. How to make a correct structure where my scrollview works?
<?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:controls="clr-namespace:g.Portable.Helpers;assembly=g.Portable"
x:Class="g.Portable.Views.AboutPage"
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
Title="titulo">
<AbsoluteLayout VerticalOptions="FillAndExpand">
<ScrollView HeightRequest="1000">
<cv:CarouselView x:Name="MAinCarousel" VerticalOptions="Start" HeightRequest="250">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="Image" Grid.RowSpan="2" Source="{Binding img}" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="250"/>
<StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="5">
<Label TextColor="White" Text="{Binding category}" BackgroundColor="{Binding category_color}" Font="Bold" FontSize="16" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/>
<Label TextColor="White" Text="{Binding data}" FontSize="16" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/>
<Label TextColor="White" Text="{Binding titulo}" FontSize="18" HorizontalOptions="Start" Font="Bold" VerticalOptions="CenterAndExpand"/>
<Button Text="Clique aqui..." IsVisible="true" HeightRequest="16" Clicked="Handle_Clicked" TextColor="White" BackgroundColor="#1C86EE"/>
</StackLayout>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
<StackLayout BackgroundColor="#234084">
<Label Text=" Ăšltimas " TextColor="White" Font="Bold" FontSize="16" BackgroundColor="#234084"/>
</StackLayout>
<ListView x:Name="listView"
CachingStrategy="RecycleElement"
ItemsSource="{Binding FeedItems}"
HasUnevenRows="True"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1" HeightRequest="344" VerticalOptions="Fill">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout HeightRequest = "60" WidthRequest="60">
<Image x:Name="Image" Source="{Binding Image}" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" Spacing="4" VerticalOptions="Center">
<Label Text="{Binding Category}" TextColor="White" FontSize="Small" LineBreakMode="NoWrap" BackgroundColor="{Binding Color_category}"/>
<Label Text="{Binding PublishDate}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding Title}" TextColor="#234084" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<StackLayout IsVisible="{Binding IsBusy}" BackgroundColor="#80000000" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<ActivityIndicator IsRunning="{Binding IsBusy}" Color ="White">
</ActivityIndicator>
<Label Text="Carregando..." HorizontalOptions="Center" TextColor="White"/>
</StackLayout>
</AbsoluteLayout>
You have multiple children in ScrollView. That is not going to work. ScrollView can have only one direct child
I've been trying to get this looking right in Xaml (x.forms) but can't make it work. Any possibly way this can be solved in Xaml without a custom cell renderer?
Here is how it's supposed to look on native iOS:
What I'm getting so far in Xaml:
Here's my Xaml:
<ScrollView>
<StackLayout>
<ActivityIndicator IsRunning="{Binding IsFetching}" />
<ListView ItemsSource="{Binding Events}" Header="2015" Footer="">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="55">
<ViewCell.View>
<StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="White">
<StackLayout>
<BoxView WidthRequest="44"
HeightRequest="5"
BackgroundColor="Purple"
/>
<Label Text="AUG" FontSize="12" HeightRequest="13" HorizontalOptions="Center" VerticalOptions="Start" FontAttributes="Bold"/>
<Label Text="31" FontSize="13" VerticalOptions="StartAndExpand" HorizontalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Vertical"
HorizontalOptions="StartAndExpand">
<Label Text="Relay For Life of" FontSize="14" VerticalOptions="End" TextColor="Gray"/>
<Label Text="Hope City" FontSize="16" FontAttributes="Bold" VerticalOptions="StartAndExpand"/>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
You can try this with a Grid instead of Stack, also add RowHeight to your ListView
<ListView ... RowHeight="55">
...
<ViewCell Height="55">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="44"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="44"/> <!-- for the checkmark -->
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="22" />
<RowDefinition Height="17" />
</Grid.RowDefinitions>
<BoxView Grid.Row="0" WidthRequest="44" HeightRequest="5" BackgroundColor="Purple"/>
<!-- experiment with the vertical alignment to get it right -->
<Label Grid.Row="1" Text="AUG" .../>
<Label Grid.Row="2" Text="31" .../>
</Grid>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="22" />
<RowDefinition Height="22" />
</Grid.RowDefinitions>
<!-- if the vertical alignment doesn't work well add two more rows for top and bottom padding -->
<Label Grid.Row="0" Text="Relay for life" VerticalOptions="End" .../>
<Label Grid.Row="1" Text="Hope city" VerticalOptions="Start" .../>
</Grid>
</Grid>
</ViewCell>
Set HasUnevenRows="True" on the ListView