Problem with listview on Xamarin Forms iOS
Hello, I have a cross-platform app, I put a ListView with some items, on android it's all right, but on iOS there's a blank space that I'm not able to correct...
I've already reviewed the code and I can't find what's wrong.
Has anyone seen this error or already gone through it?
Here is my image:
Blank is my content page.
Yellow is my ListView.
The blue square is the blank space I can't remove.
Red is the header of my list.
Here is my code:
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MensagemDoDia.Views.MensagemViews.MensagemDetailPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:extended="clr-namespace:MensagemDoDia.Engine.InfiniteScrolling"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
ios:Page.UseSafeArea="True">
<ContentPage.Content>
<Grid>
<ListView
BackgroundColor="Yellow"
CachingStrategy="RecycleElement"
HasUnevenRows="True"
ItemSelected="ListView_ItemSelected"
ItemsSource="{Binding ListaMensagem}"
Scrolled="ListView_Scrolled"
SeparatorVisibility="None">
<ListView.Behaviors>
<extended:InfiniteScrollBehavior IsLoadingMore="{Binding IsBusy}" />
</ListView.Behaviors>
<ListView.Header>
<StackLayout
Margin="{OnPlatform Android='10,0,10,0',
iOS='10,0,10,0'}"
BackgroundColor="Red"
HeightRequest="{OnPlatform Android=80,
iOS=70}"
Orientation="Horizontal">
<Button
Clicked="ButtonVoltar_Clicked"
Style="{StaticResource ButtonVoltarStyle}"
Text="{StaticResource FontAwesome_ArrowLeft}"
VerticalOptions="Center" />
<Label
x:Name="LabelNomeCategoria"
FontSize="Medium"
Opacity="0.7"
Style="{StaticResource LabelBoldStyle}"
VerticalTextAlignment="Center" />
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<pancake:PancakeView
Margin="10,5"
Padding="0"
BackgroundColor="WhiteSmoke"
CornerRadius="15"
VerticalOptions="CenterAndExpand">
<pancake:PancakeView.Shadow>
<pancake:DropShadow BlurRadius="1" Color="Black" />
</pancake:PancakeView.Shadow>
<Grid RowDefinitions="*, 50" RowSpacing="0">
<Frame
Padding="0"
BackgroundColor="Gray"
CornerRadius="15"
HasShadow="False"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Label
Margin="20,30"
FontAttributes="Bold"
FontSize="Medium"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
Style="{StaticResource LabelMediumStyle}"
Text="{Binding MensagemTexto}"
TextColor="White"
TextType="Html"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center" />
</Grid>
</Frame>
<Grid
Grid.Row="1"
ColumnDefinitions="*, auto, auto, auto"
ColumnSpacing="0">
<Label
Margin="15,0,0,0"
AutomationId="{Binding MensagemAutor}"
FontSize="Small"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="1"
Opacity="0.7"
Style="{StaticResource LabelStyle}"
Text="{Binding MensagemAutor}"
TextColor="Black"
VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="LabelAutor_Tapped" />
</Label.GestureRecognizers>
</Label>
<Button
Grid.Column="1"
AutomationId="{Binding Chave}"
Clicked="ButtonCopiarMensagem_Clicked"
CornerRadius="15"
FontFamily="{StaticResource FontAwesome}"
FontSize="Medium"
Style="{StaticResource ButtonIconeStyle}"
Text="{StaticResource FontAwesome_Paste}"
VerticalOptions="CenterAndExpand"
WidthRequest="45" />
<Button
x:Name="ButtonCompartilhar"
Grid.Column="2"
AutomationId="{Binding Chave}"
Clicked="ButtonCompartilhar_Clicked"
CornerRadius="15"
FontFamily="{StaticResource FontAwesome}"
FontSize="Medium"
Style="{StaticResource ButtonIconeStyle}"
Text="{StaticResource FontAwesome_ShareAll}"
VerticalOptions="CenterAndExpand"
WidthRequest="45" />
<Button
x:Name="ButtonFavorito"
Grid.Column="3"
Margin="0,0,5,0"
Clicked="ButtonFavoritar_Clicked"
CornerRadius="15"
FontFamily="{StaticResource FontAwesome}"
FontSize="Medium"
HorizontalOptions="EndAndExpand"
Style="{StaticResource ButtonIconeStyle}"
Text="{StaticResource FontAwesome_Heart}"
VerticalOptions="CenterAndExpand"
WidthRequest="45" />
</Grid>
</Grid>
</pancake:PancakeView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<Grid Padding="6" IsVisible="{Binding IsBusy}">
<Grid.Triggers>
<Trigger TargetType="Grid" Property="IsVisible" Value="False">
<Setter Property="HeightRequest" Value="0" />
</Trigger>
</Grid.Triggers>
<Label
HorizontalOptions="Center"
Text="Loading..."
VerticalOptions="Center" />
</Grid>
</ListView.Footer>
</ListView>
</Grid>
</ContentPage.Content>
</ContentPage>
Add VerticalAlignment to the ListView and set it to be either Top or Stretch. Possibly do the same for StackLayout.
You can optionally remove the parent Grid if it is not holding other items than the ListView; hence making the ListView the sole child of the ContentPage which is valid.
Related
I am trying to position frame cards as suqares one after another horizontally and can't manage it. I wrapped it in Grid, although grid fills all window size it positions frames one under another. Red color on the screenshot is background of the Grid.
How it looks and how i want it to
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
HorizontalOptions="FillAndExpand"
BackgroundColor="Red">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame
HasShadow="True"
Margin="5"
Padding="10"
CornerRadius="5"
Scale="1"
BackgroundColor="{StaticResource DarkGreyPrimary}">
<Frame.Content>
<StackLayout Orientation="Vertical">
<StackLayout>
<Grid>
<Label Text="{Binding Address}"
FontSize="30"
VerticalTextAlignment="End"/>
<Button Clicked="InfoButtonClicked"
Text=""
FontFamily="FA"
FontSize="30"
WidthRequest="53"
Margin="0, 0, -10, 0"
HorizontalOptions="End"/>
</Grid>
<Image Source="{Binding ImageUrl}"
WidthRequest="300"
Aspect="Fill"/>
</StackLayout>
<StackLayout VerticalOptions="Fill" Margin="10, 0, 0, 0">
<StackLayout VerticalOptions="EndAndExpand">
<Label Text="{Binding Id}"
HorizontalOptions="End"
TextColor="{StaticResource LightGrey}"
FontSize="20"/>
</StackLayout>
</StackLayout>
</StackLayout>
</Frame.Content>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
Use CollectionView for that, it supports showing items in a grid.
<CollectionView ItemsLayout="VerticalGrid, 3" ItemsSource="{Binding Items}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="5">
<Frame
Padding="10"
BackgroundColor="{StaticResource DarkGreyPrimary}"
CornerRadius="5"
HasShadow="True"
Scale="1">
<StackLayout Orientation="Vertical">
<StackLayout>
<Grid>
<Label
FontSize="30"
Text="{Binding Address}"
VerticalTextAlignment="End" />
<Button
Margin="0,0,-10,0"
Clicked="InfoButtonClicked"
FontFamily="FA"
FontSize="30"
HorizontalOptions="End"
Text=""
WidthRequest="53" />
</Grid>
<Image
Aspect="Fill"
Source="{Binding ImageUrl}"
WidthRequest="300" />
</StackLayout>
<Label
Margin="10,0,0,0"
FontSize="20"
HorizontalOptions="End"
Text="{Binding Id}"
TextColor="{StaticResource LightGrey}" />
</StackLayout>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Notice the ItemsLayout="VerticalGrid, 3", the number 3 specifies how many columns to display.
Here's the documentation for the CollectionView (as #Jason mentioned earlier in the comments): https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid
I have a problem with visual displaying of my list view.The height of my items are too small.Firstly I thought that my list is empty.But when I click on the item the action works and information of selected item is transmitted.Then I wrote only 3 labels,and list display only 2 labels and then I understood that height of my item is too small/I tried to change height of my list,ViewCell.View,Labels,but it does not work.Please help me
<ContentView.Content>
<controls:CustomFrame CornerRadius="25,25,0,0" Margin="0" Padding="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Padding="0">
<!-- <StackLayout.GestureRecognizers>
<SwipeGestureRecognizer Direction="Up" Command="{Binding RefreshCommand}" ></SwipeGestureRecognizer>
</StackLayout.GestureRecognizers>-->
<ListView ItemsSource="{Binding MyPins}" x:Name="ListPlaces" IsPullToRefreshEnabled="True" RefreshCommand="{Binding RefreshCommand}"
IsRefreshing="{Binding IsRefreshing}"
SelectionMode="None">
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Frame CornerRadius="10" BackgroundColor="LightBlue">
<StackLayout Orientation="Vertical" Padding="0">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer CommandParameter="{Binding .}" Command="{Binding BindingContext.CallPlace, Source={x:Reference ListPlaces}}" ></TapGestureRecognizer>
</StackLayout.GestureRecognizers>
<Label x:Name="NameOfPlace" Text="{Binding MyPins.Name}" TextColor="#2D78FD" FontSize="14" FontFamily="Robobo"/>
<Label x:Name="AdressOfPlace" Text="{Binding MyPins.Address}" TextColor="#616161" FontSize="12" FontFamily="Robobo"/>
<StackLayout Orientation="Horizontal">
<Label x:Name="TimeWork" VerticalOptions="Center" Text="Open until - " TextColor="#616161" FontSize="12" FontFamily="Robobo"/>
<Label x:Name="TimeWork1" VerticalOptions="Center" Text="{Binding Opened}" TextColor="#616161" FontSize="12" FontFamily="Robobo"/>
<Image Source="openIcon" VerticalOptions="Center" />
<Button HeightRequest="24" VerticalOptions="Center" Padding="0,-3,0,0" WidthRequest="92" HorizontalOptions="EndAndExpand" FontSize="14" CornerRadius="45" BackgroundColor="#2D78FD" TextColor="White" Text="Call up"/>
</StackLayout>
</StackLayout>
</Frame>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</controls:CustomFrame>
</ContentView.Content>
There is a Row height property inside ListView:
C#:
RowHeightDemoListView.RowHeight = 100;
Xaml:
<ListView x:Name="RowHeightDemoListView" RowHeight="100" />
It appears that my Grid layout is set for the the second row is displaying first.
When the application loads Grid.Row="2" which is the middle part of the page show first.
I have to scroll down to see the carousel witch Grid.Row="1"
I am trying to figure out the carousel the at the top then the video the the Change program last.
Here is my xaml code.
<ScrollView HorizontalOptions="Center">
<Grid x:Name="page" Padding="0,0">
<Grid.RowDefinitions>
<RowDefinition Height="600" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<CarouselView x:Name="carousel" Scrolled="Handle_Scrolled" ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<CarouselView.Behaviors>
<behaviors:FrontBannerViewParallaxBehavior ParallaxOffset="100"/>
</CarouselView.Behaviors>
<CarouselView.ItemTemplate> <DataTemplate> <Grid Padding="18,24,18,64"> <custom:PancakeView
CornerRadius="24" BackgroundColor="#FFFFFF"> <StackLayout VerticalOptions="Fill"
HorizontalOptions="Fill"> <custom:PancakeView VerticalOptions="FillAndExpand" HeightRequest="200"
CornerRadius="10" BackgroundGradientStartColor="{Binding StartColor}"
BackgroundGradientEndColor="{Binding EndColor}"> <Grid> <StackLayout> <StackLayout
Orientation="Horizontal"> <Label Text="{Binding Title}" FontFamily="{StaticResource
font_extrabold}" HorizontalOptions="Center" TextColor="#60229a" VerticalOptions="End"
Margin="14,0,0,0" FontSize="36" FontAttributes="Bold" LineBreakMode="NoWrap" /> </StackLayout>
<Label FontFamily="{StaticResource font_regular}" Text="{Binding Details}" TextColor="#60229a"
Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" /> </StackLayout> </Grid>
</custom:PancakeView> </StackLayout> </custom:PancakeView> <Image Source="{Binding ImageSrc}"
WidthRequest="{Binding Width}" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand"
Margin="0,0,15,0" /> </Grid> </DataTemplate> </CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
<StackLayout Grid.Row="1">`
`<StackLayout Orientation="Horizontal">
<Label Text="Listen to Apostle Johnson's" FontFamily="{StaticResource
font_extrabold}" HorizontalOptions="Center" TextColor="#FFFFFF" VerticalOptions="End" Margin="14,0,0,0" FontSize="36" FontAttributes="Bold" LineBreakMode="NoWrap" />
</StackLayout>
<Label FontFamily="{StaticResource font_regular}" Text="Detox Transformation." TextColor="#FFFFFF" Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" />
<StackLayout Orientation="Horizontal">
<Label FontFamily="{StaticResource font_regular}" Text="Apostle Johnson gives a
riveting short bio of his testimony of traveling a road of living a life of descriptive chaos. Hey just click on the video and hear it from him." TextColor="#FFFFFF" Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<ovideo:VideoPlayer x:Name="vmo" Source="http://iowegodministry.org/wp-content/uploads/2020/06/y2mate.com-FROM-GANGSTA-TO-GOD_JeR29HVa7HE_360p.mp4" WidthRequest="250" />
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="2">
<StackLayout Orientation="Horizontal">
<Label Text="Chance Program" FontFamily="{StaticResource font_extrabold}" HorizontalOptions="Center" TextColor="#FFFFFF" VerticalOptions="End" Margin="14,0,0,0" FontSize="36" FontAttributes="Bold" LineBreakMode="NoWrap" />
</StackLayout>
<Label FontFamily="{StaticResource font_regular}" Text="The mission of C.H.A.N.C.E. is to help people succeed in the workforce by providing training and mentorship. One of the goals is to help those who've been in the prison system become successful members of society after they get out. The program will provide clas`enter code here`ses on a variety of spiritual-based educational curriculum, teach job interview skills, and help with strengthening family relationships and bonds." TextColor="#FFFFFF" Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" />
<Button BackgroundColor="#FFFFFF"
FontFamily="{StaticResource font_bold}"
Padding="20,0" CornerRadius="20"
TextColor="{Binding BackgroundColor}"
FontSize="12" BorderColor="{Binding BackgroundColor}"
BorderWidth="2" HeightRequest="40"
Text="Read More About the Program" HorizontalOptions="Center" Clicked="OnButtonClicked"
/>
</StackLayout>
</Grid>
</ScrollView>
From shared Xaml code , used ScrollView as RootLayout . ScrollView has a ScrollToAsync method to scroll to one position into View . You can have a try with this to scroll to your wanted position when application loads.
A position within a ScrollView can be scrolled to with the ScrollToAsync method that accepts double x and y arguments.
Given a vertical ScrollView object named scrollView, the following example shows how to scroll to 150 device-independent units from the top of the ScrollView:
await scrollView.ScrollToAsync(0, 150, true);
I am using swipecards in my xamarin form project.
This is my Xaml code--
<swipecards:CardStackView Grid.Row="0" x:Name="CardStackView" ItemsSource="{Binding Cards[0]}" Swiped="CardStackView_Swiped" StartedDragging="CardStackView_dragged" Margin="20" BackgroundColor="#E0E0E0">
<swipecards:CardStackView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,2,0,2" x:Name="layout">
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<Label Text="{Binding .FullJobName}" HorizontalOptions="Start" Style="{DynamicResource TitleStyle}" />
<Grid>
<Image x:Name="MyImage" Source="{Binding .CompanyProfImg}" HorizontalOptions="End" HeightRequest="50" WidthRequest="50" />
<ActivityIndicator BindingContext="{x:Reference MyImage}" IsRunning="{Binding IsLoading}}"/>
</Grid>
</StackLayout>
<StackLayout HorizontalOptions="StartAndExpand">
<Label Text="{Binding .LocationName}" HorizontalOptions="StartAndExpand" Style="{DynamicResource SubtitleTextStyle}" />
<Label Text="{Binding .TotalSalary }" Style="{DynamicResource SubtitleTextStyle}" />
</StackLayout>
<StackLayout>
<Label Text="Comapny Name" Style="{DynamicResource TitleStyle}" HorizontalOptions="StartAndExpand"/>
<Label Text="{Binding .CompanyName}" Style="{DynamicResource ListItemTextStyle}" HorizontalOptions="StartAndExpand"/>
</StackLayout>
<StackLayout>
<Label Text="Key Skills" Style="{DynamicResource TitleStyle}" HorizontalOptions="StartAndExpand"/>
<Label Text="{Binding .Skills}" Style="{DynamicResource ListItemTextStyle}" HorizontalOptions="StartAndExpand"/>
</StackLayout>
<StackLayout>
<Label Text="Job Description" FontAttributes="Bold" FontSize="14" HorizontalOptions="StartAndExpand"/>
<Label Text="{Binding .Description}" Style="{DynamicResource ListItemTextStyle}" HorizontalOptions="StartAndExpand"/>
</StackLayout>
<BoxView Color="#DCDCDC" WidthRequest="160" HeightRequest="2" />
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" VerticalOptions="EndAndExpand">
<Label Text="{Binding .Postedby}" HorizontalOptions="Start" Style="{DynamicResource CaptionStyle}" />
<!--<Image x:Name="fb_imageTag" Source="facebooklogo.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ReadMore_Clicked" />
</Image.GestureRecognizers>
</Image>-->
<Button Text="Delete" Clicked="DeleteClicked"/>
</StackLayout>
</StackLayout>
</DataTemplate>
</swipecards:CardStackView.ItemTemplate>
</swipecards:CardStackView>
The problem is the button is not clicking inside the Data template.
Can you guys please help me what should i do now?
Thank you..
Hard to say what is wrong. Could you show full xaml code, view code behind and your viewmodel
Is DeleteClicked is in code behind or in VM?
When trying to initalize this contentpage my code crashes. Everything works fine except the static resources, I've tried uncommenting the rest and it's only a problem with the static resource. Only the commented out code doesn't work.
I don't use the OnPlatform requirement
<?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="ASFT.IssueManager.LoginPage" Padding="10">
<ContentPage.Resources>
<ResourceDictionary>
<x:String x:Key="Labelfont">Medium</x:String>
<x:String x:Key="Titlefont">Large</x:String>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="10" >
<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions="Center" Spacing="10" WidthRequest="350">
<Label Text="Login" VerticalOptions="Center" HorizontalOptions="Start" FontSize="{StaticResource Titlefont}"/>
<BoxView HeightRequest="5" Color="Gray"/>
<!--<Label Text="Host" VerticalOptions="Center" HorizontalOptions="Start" FontSize="{StaticResource Labelfont}"/>
<Entry Placeholder="Host/URL" Text="{Binding Host}" />
<Label Text="UserName" VerticalOptions="Center" HorizontalOptions="Start" FontSize="{StaticResource Labelfont}"/>
<Entry Placeholder="User name / Account" Text="{Binding Username}" />
<Label Text="Password" VerticalOptions="Center" HorizontalOptions="Start" FontSize="{StaticResource Labelfont}"/>
<Entry Placeholder="Password" IsPassword="true" Text="{Binding Password}" />
<BoxView HeightRequest="5" Color="Gray"/>-->
<Button x:Name="btnLogin" Text="Login" HorizontalOptions="FillAndExpand" Clicked="OnButtonLogin" WidthRequest="100"/>
</StackLayout>
</StackLayout>
</ContentPage>
You can use a Style to set the FontSize via the NamedSize enum.
Change ResourceDictionary to use styles:
<ResourceDictionary>
<Style x:Key="Labelfont" TargetType="Label">
<Setter Property="FontSize" Value="Small" />
</Style>
<Style x:Key="Titlefont" TargetType="Label">
<Setter Property="FontSize" Value="Large" />
</Style>
</ResourceDictionary>
Change your controls to reference the styles:
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="10" >
<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions="Center" Spacing="10" WidthRequest="350">
<Label Text="Login" VerticalOptions="Center" HorizontalOptions="Start" Style="{StaticResource Titlefont}"/>
<BoxView HeightRequest="5" Color="Gray"/>
<Label Text="Host" VerticalOptions="Center" HorizontalOptions="Start" Style="{StaticResource Labelfont}"/>
<Entry Placeholder="Host/URL" />
<Label Text="UserName" VerticalOptions="Center" HorizontalOptions="Start" Style="{StaticResource Labelfont}"/>
<Entry Placeholder="User name / Account" />
<Label Text="Password" VerticalOptions="Center" HorizontalOptions="Start" Style="{StaticResource Labelfont}"/>
<Entry Placeholder="Password" IsPassword="true" />
<BoxView HeightRequest="5" Color="Gray"/>
<Button x:Name="btnLogin" Text="Login" HorizontalOptions="FillAndExpand" WidthRequest="100"/>
</StackLayout>
</StackLayout>
Output: