Xamarin datatemplate with many rows - xaml

I have a listview and a datatemplate.
<ListView x:Name="list"
ItemsSource="{Binding MyList}"
HorizontalOptions="Center"
VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="First"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding First}"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="Second"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding Second}"></Label>
<Label Grid.Row="2" Grid.Column="0" Text="Third"></Label>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Third}"></Label>
<Label Grid.Row="3" Grid.Column="0" Text="Fourth"></Label>
<Label Grid.Row="3" Grid.Column="1" Text="{Binding Forth}"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The problem here is that only the first two rows are displayed. Is there maybe some limitation to a viewCell that only lets it show two rows?
Is there maybe a better way to achieve what I am trying to do? Can I maybe use a table inside the datatemplate? Thank you

Try Adding to ListView a RowHeight definition.
For example, I would try something like this:
<ListView x:Name="list"
ItemsSource="{Binding MyList}"
HorizontalOptions="Center"
VerticalOptions="FillAndExpand"
RowHeight="100">
...
</ListView>

Related

Is there a way for a ListView within Grid to inherit the grid's ColumnDefinitions & RowDefinitions?

I'm essentially trying to create a view that displays a list of items underneath an interactable header (a Button and an Image wrapped in a FlexLayout) that sorts that specific column A-Z / Z-A, my problem is that I can't figure out how to line them up neatly and without manually setting the column width in ColumnDefinition.
Normally I'd just set the width to some value but since its going to be cross platform (including tablets) I want to avoid doing that so I don't end up with everything squished to one side if the user decides to use a tablet with a much wider screen, does anyone know any fixes or have any advice on what I could look into trying?
Thanks in advance, and I'll post a snippet of what I'm trying to achieve below
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<FlexLayout AlignItems="Center" Grid.Row="0" Grid.Column="0">
<Button Text="Name" FontSize="8" Clicked="QuickSort" Padding="0"/>
<Image Source="" Aspect="AspectFit" HeightRequest="20" WidthRequest="20" IsVisible="False"/>
</FlexLayout>
<FlexLayout AlignItems="Center" Grid.Row="0" Grid.Column="1">
<Button Text="Type" FontSize="8" Clicked="QuickSort" Padding="0"/>
<Image Source="" Aspect="AspectFit" HeightRequest="20" WidthRequest="20" IsVisible="False"/>
</FlexLayout>
<FlexLayout AlignItems="Center" Grid.Row="0" Grid.Column="2">
<Button Text="Cost" FontSize="8" Clicked="QuickSort" Padding="0"/>
<Image Source="" Aspect="AspectFit" HeightRequest="20" WidthRequest="20" IsVisible="False"/>
</FlexLayout>
<ListView ItemSource="{Binding Collection}" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding name}" Grid.Column="0"/>
<Label Text="{Binding type}" Grid.Column="1"/>
<Label Text="{Binding cost}" Grid.Column="2"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
A simple solution is to copy the Grid column declarations into the ItemTemplate's DataTemplate. This makes each item a Grid, whose columns match the outer Grid:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid ColumnDefinitions="*, *, *">
<Label Text="{Binding name}" Grid.Column="0"/>
<Label Text="{Binding type}" Grid.Column="1"/>
<Label Text="{Binding cost}" Grid.Column="2"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
The labels all default to "Row=0", so each item is a one-row Grid.
If you like to make it easier, maybe try some datagrid libraries like https://github.com/akgulebubekir/Xamarin.Forms.DataGrid

xamarin forms - listview - picker - wont align with rows in listview

I have a listview inside a stacklayout...everything appears find on screen... apart from the picker which is about a cm out from the rest of the row...i have tried changing the height of the rows but to no avail...does anyone know why the picker... '0' isnt on the same horizontal alignment as the rest of the rows such as brandName, size and Price.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<ListView x:Name="WineLV" IsVisible="True" VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding WineL}" HeightRequest="50">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" HorizontalOptions="StartAndExpand" Padding="5">
<Frame OutlineColor="Black" Padding="10" BackgroundColor="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="19*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="0" Grid.Row="0" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Img}"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding BrandName}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="1" Grid.Row="1" Text="{Binding Grapes}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Sizes}" VerticalOptions="Start" FontSize="Medium"/>
<Picker Grid.Column="3" Grid.Row="0" Title=" 0" x:Name="pPicker" HorizontalOptions="EndAndExpand" ItemsSource="{Binding ListQ}" ItemDisplayBinding="{Binding Value}" SelectedIndexChanged="QuantityC" SelectedItem ="{Binding Selected}"/>
<Label Grid.Column="4" Grid.Row="0" VerticalOptions="Start" HorizontalOptions="EndAndExpand" Text="{Binding Price, StringFormat='£{0:0.00}'}" FontSize="Medium"/>
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
all the others have VerticalOptions="Start" - try changing them to Center, and possibly setting VerticalTextAlignment also

get search bar results to appear ontop of other content [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
looking something similar to what is asked in this Q.... How to display ListView on top of (over the) other items in Xamarin Forms?
been playing about with grids and stacklayouts and cant seem to get the listView of the searchBar to appear on top of the other list views (the other list views contains the products searched for)
so the search bar listview results should appear over the buttons, and other lists
<content>
<StackLayout>
<StackLayout>
<SearchBar Placeholder="Search..." TextChanged="SearchBar" x:Name="SearchBar"></SearchBar>
<ListView x:Name="SearchList" ItemTapped="ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell x:Name="SearchBarText" Text="{Binding Name}" Detail="{Binding Desc}">
</TextCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<!-- clicking on the button will turn on visibility of list-->
<Button Text="Choclate" Clicked="ChoclateClick" WidthRequest="100" HorizontalOptions="Start"/>
<ListView ItemsSource="{Binding ChocList}" x:Name="ChocListView" IsVisible="False" HasUnevenRows="True" SeparatorVisibility="None" VerticalOptions="FillAndExpand" VerticalScrollBarVisibility="Always" HeightRequest="1500">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid x:Name="ChocGrid" RowSpacing="25">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="1" Grid.Row="0" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Name}" VerticalOptions="Start"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Desc}" VerticalOptions="End"/>
<Label Grid.Column="3" Grid.Row="0" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0:0.00}'}"/>
<Picker Grid.Column="4" Grid.Row="0" SelectedIndexChanged="ChocQuantityChanged">
<Picker.Items>
<x:String>0</x:String>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
</Picker.Items>
</Picker>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- clicking on the button will turn on visibility of list-->
<Button Text="Sweet" Clicked="SweetsClicked" WidthRequest="100" HorizontalOptions="Start"/>
<ListView ItemsSource="{Binding SweetsList}" x:Name="SweetsList" IsVisible="False" HasUnevenRows="True" SeparatorVisibility="None" HeightRequest="1500>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="1" Grid.Row="0" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Name}" VerticalOptions="Start"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Desc}" VerticalOptions="End"/>
<Label Grid.Column="3" Grid.Row="0" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0:0.00}'}"/>
<Picker Grid.Column="4" Grid.Row="0" SelectedIndexChanged="ChocQuantityChanged">
<Picker.Items>
<x:String>0</x:String>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
</Picker.Items>
</Picker>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</content>
conceptually you want something like this. Your search results occupy the same grid cell as your other content, but are on top of them in Z-order. When you need to display results, just toggle the IsVisible property of your results
<Grid>
<Grid.RowDefintions>
<RowDefintion Height="50" />
<RowDefintion Height="*" />
</Grid.RowDefintions>
<SearchBar Grid.Row="0" />
<StackLayout Grid.Row="1">
Your content goes here. You can use other containers besides StackLayout
</StackLayout>
<StackLayout Grid.Row="1" IsVisible="false">
Your search results go here. The results need to be AFTER the other
content in the XAML in order for them to display on "top"
</StackLayout>
</Grid>

I can list my messages , Listview

I can list my messages, but now I wanted every message after that I had a balloon. To identify if I sent or received. The balloon is now the text is not staying. Can you help me?
<ListView x:Name="Post_List" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid ColumnSpacing="2" Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Frame Grid.Row="0" OutlineColor="Transparent"
HasShadow="False" Grid.Column="0"
CornerRadius="5" BackgroundColor="#03A9F4">
<Label TextColor="White" Text="{Binding Mensagem}"/>
</Frame>
<Label FontSize="Micro" Grid.Row="1" Grid.Column="0"
Text="{Binding Data}" TextColor="Gray"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Adding HasUnevenRows="True" to your ListView will fix your issue.
This is because you did not set any RowHeight which is alright cause you want the height to be based on the content but the ListView does not know the dimension to apply. Using the HasUnevenRows the ListView will be calculating the size to fit the content.
<ListView x:Name="Post_List" Grid.Row="1" HasUnevenRows="True" >
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell>
<Grid ColumnSpacing="2" Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame Grid.Row="0" OutlineColor="Transparent" HasShadow="False" Grid.Column="0" CornerRadius="5" BackgroundColor="#03A9F4">
<Label TextColor="White" Text="{Binding Mensagem}"/>
</Frame>
<Label FontSize="Micro" Grid.Row="1" Grid.Column="0" Text="{Binding Data}" TextColor="Gray"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Hope this helps.-

Xamarin.Forms Center ListView Items

How do I center listview items within a Xamarin.Forms app?
The listview items are currently left-aligned.
I want them to be center-aligned.
I have the following code:
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Results}" HorizontalOptions="Center">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Scott the Grid always expands to occupy 100% of the available space. There is no way as far as I can tell to override this even explicitly setting a widthrequest on the grid doesn't even seem to help.
I assume you have a larger layout requirement your attempting to satisfy as centering first and Last name in a listView would be better accomplished with a Stacklayout instead of a grid.
IE
<ViewCell.View>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding FirstName}" HorizontalOptions="EndAndExpand"/>
<Label Text="{Binding LastName}" HorizontalOptions="StartAndExpand"/>
</StackLayout>
</ViewCell.View>
But assuming you really need a Grid then I can offer only 1 addition to Tomasz's suggestion.
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition />
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding FirstName}" HorizontalOptions="End"/>
<Label Grid.Row="0" Grid.Column="2" Text="{Binding LastName}" />
</Grid>
This create two Columns on the outside to eat up the space forcing the names to the middle.
Without having actually tried it...
Your cell view is <Grid HorizontalOptions="Center">, but the Grid itself is expanded to fit the cell, so the HorizontalOptions there is inconsequential.
You need to put a secondary container inside that Grid that will be centered,
something like:
<ViewCell.View>
<Grid>
<StackPanel Orientation="Horizontal" HorizontalOptions="Center">
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
</StackPanel>
</Grid>
</ViewCell.View>
You could also try (if the above doesn't work) adding 3 columns (and 3 rows for vertical alignment) to the Grid with sizes (auto)-(*)-(auto) and putting the StackPanel in the center cell.
Maybe this way:
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" HorizontalOptions="Center"/>
EDITED:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" HorizontalOptions="Center"/>
Just by adding HorizontalOptions="Center" to Label worked for me, good luck
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Results}" HorizontalOptions="Center">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label HorizontalOptions="Center" Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
<Label HorizontalOptions="Center" Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>