I'm working on my first Xamarin app. I want to make a listview with grouping and it succeeded. The only problem I have that it won't scroll. My other listview on another page scrolls without a problem, but my listview with grouping won't do that. I tried this both on an Android simulator as on my Android phone (I don't have a macbook or something to test on iOS), and it won't scroll on either of them. I looked it up but a lot of people put the listview in a scrollview, and I didn't do that.
This is my XAML code:
<StackLayout Margin="10" Orientation="Vertical">
<Label Text="{Binding Title}" FontAttributes="Bold"
FontSize="20" HorizontalOptions="CenterAndExpand" />
<Label Text="{Binding Subtitle}" FontAttributes="Italic"
FontSize="15" HorizontalOptions="CenterAndExpand" />
<ListView HasUnevenRows="True" SeparatorColor="Accent"
VerticalOptions="FillAndExpand" IsEnabled="False"
IsGroupingEnabled="True" GroupDisplayBinding="{Binding Key}"
ItemsSource="{Binding ScansGroup}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Spacing="4">
<StackLayout Orientation="Horizontal" Margin="10,7,10,1">
<Label Text="{Binding Location, StringFormat='{0}'}"
FontAttributes="Bold" FontSize="16" />
<Label Text="{Binding DateTime, StringFormat='{0:dd/MM/y HH:mm}'}"
HorizontalOptions="EndAndExpand" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding ElapsedTimeOnLocation}"
HorizontalOptions="Start"
Margin="10,0,10,7" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
I put it in an MVVM structure, and the grouping I did with a MVVM helper that I got from here https://channel9.msdn.com/Shows/XamarinShow/The-Xamarin-Show-12-MVVM-Helpers .
My code behind that is meant for the grouping is the following:
public ObservableRangeCollection<Grouping<string, ScanViewModel>> ScansGroup { get; } =
new ObservableRangeCollection<Grouping<string, ScanViewModel>>();
void Group()
{
var grouped = from scan in Scans
group scan by scan.Day into scanGroup
select new Grouping<string, ScanViewModel>(scanGroup.Key, scanGroup);
ScansGroup.ReplaceRange(grouped);
}
The grouping shows perfectly and the list too. The only problem is that
I can't scroll. Can someone help me?
I've figured it out. There's nothing wrong with your grouping. In your code you set IsEnabled="False" to the ListView. It makes the listview's scroll ability to be handled just if you drag from an enabled item inside the ListView, and even thus, the scroll is like belittled and with a very bad user experience.
Just set your ListView like this:
<ListView HasUnevenRows="True"
SeparatorColor="Accent"
VerticalOptions="FillAndExpand"
IsEnabled="True"
IsGroupingEnabled="True"
GroupDisplayBinding="{Binding Key}"
ItemsSource="{Binding ScansGroup}">
...
</ListView>
I can't tell you if it was designed to be this way, or if it 's a bug, but it is the cause of your issue.
It's probable you have done this to handle some unwanted behavior. If so, let us know what is specifically your intend with this IsEnabled="False", then we'll be able to help you with this.
I hope it helps you.
You didn't add the template for the group. Add this in the <ListView>
<ListView.GroupHeaderTemplate >
<DataTemplate >
<ViewCell Height="28" >
<Label Text="{Binding GroupName}" VerticalTextAlignment="Center" HorizontalOptions="Start" />
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
Also, in the code bend or ViewModel, you need to bind to a group class of the items you want in the list such as:
public class GroupDetails : ObservableCollection<SomeItemsToShow>
{
public string GroupName { get; set; }
}
Check out this Example for more details:
https://xamarinhelp.com/xamarin-forms-listview-grouping/
Related
I have a problem. I created a CollectionView with a ViewModel, in that ViewModel I have 2 different Lists. Now I know how to show data from 1 list, but now I want in the datatemplate a picker with the data of the second list. Here is the xaml code:
<CollectionView ItemsSource="{Binding imageList}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Picker Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Title="Formaat" ItemsSource="{Binding secondList}" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="4" VerticalTextAlignment="Center" VerticalOptions="Center"
HorizontalOptions="Center" Text="{Binding Price, StringFormat='€ {0:F2}'}" TextColor="Black"
FontSize="18" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
So the Price does get shown from the imageList, but the Picker is empty. In the Picker I want the element Name from the secondList
How can I fix this?
The problem is that your BindingContext in the DataTemplate of your CollectionView element is an item from your imageList. Therefore the binding will not work, as I assume your secondList is not a part of the element's model that you're using in the imageList but rather a part of the entire view model used for the page.
I would suggest using the RelativeBinding. I don't know the names of your models but your Picker binding could look like this:
<Picker ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type local:YourViewModelTypeName}}, Path=secondList}" />
I have recently noticed a problem with my listview and my local database using sqlite and Xamarin.Forms, my problem is that when the data of my table is dumped into my ObservableCollection (source item of the ListView) and my List View shows it, the ListView does not shows all the items in that are being supposed to be shown, i have tried by adding dynamically (without a database) items into my List View and by this way the problem seems to disappear, i am sure that the problem is not from my sqlite database beacuse also the problem in one past project that i use an api for getting my info the problem was the same, so i got in the conclusion that the problem was showing external information into my ListView so does anyone knows a possible solution for my problem, by the other way, it would be really helpful if someone could try doing a project with listview and sqlite database.
Important fact: The ListView in my XAML has the Frame controller, so when I don't use it, it shows me all the items from the database, I also don't know why
my current XAML code:
<ListView
SeparatorVisibility="None"
IsGroupingEnabled="True"
ItemsSource="{Binding TasksCollection}"
GroupDisplayBinding="{Binding Key}"
HasUnevenRows="True">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<TextCell
Text="{Binding Key}"
TextColor="White"/>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame
HeightRequest="150"
Margin="10"
HasShadow="True"
CornerRadius="25"
BackgroundColor="White">
<Grid
Padding="5">
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding GridExpandCommand}"/>
</Grid.GestureRecognizers>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Grid.Row="0"
Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Small"
HorizontalOptions="Start"
VerticalOptions="Start">
</Label>
<Image
HeightRequest="25"
Grid.Row="0"
Grid.Column="1"
Source="{Binding TaskIcon}"
HorizontalOptions="End"
VerticalOptions="Start">
</Image>
<Label
Grid.Row="1"
Grid.Column="0"
Text="{Binding Description}"
FontAttributes="Bold"
FontSize="Small"
HorizontalOptions="Start"
VerticalOptions="End">
</Label>
<Button
Grid.Row="1"
Grid.Column="1"
Text="{Binding IsDone}"
TextColor="White"
FontAttributes="Bold"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
FontSize="Small"
CornerRadius="100"
BackgroundColor="LawnGreen">
</Button>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My code for adding the items into the collection (I use MvvmHelpers for grouping the data with Grouping) is the following:
foreach (var item in new string[]
{ Languages.HightPriorText, Languages.MediumPriorText, Languages.LessPriorityText })
{
var sorted = from tasks in tableList
orderby tasks.PriorityLevel // orberby is a keyword of System.Linq namespace
group tasks by tasks.PriorityLevel into taskList
select new Grouping<string, TaskItemViewModel>(taskList.Key, taskList);
List<Grouping<string, TaskItemViewModel>> listItems = sorted.Where(t => t.Key == item).ToList();
foreach (var item2 in listItems)
VeryImportantList.Add(item2);
}
the result is the following:
The image of the result of the app
Any answer i will be noticed about it, and also for any question, it would be awesome some help please!
I have finally solved it, and as i expected was a bug of my current version of Xamarin.Forms (4.0.0) so i update to the newest version of it and everything returns ok, as i expected!
I am creating xamarin.forms page with a single ListView.
Each list item template consist of one vertical StackLayout which contains 3 StackLayouts inside. The problem is: I can see only first two stacklayouts
and the third is hidden or cut or skipped,i dont know, i cannot see it.
<ContentPage.Content>
<ListView x:Name="RoutesList" ItemsSource="{Binding Routes}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#eee" Orientation="Vertical" Padding="5,0,0,5" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" VerticalOptions="StartAndExpand">
<Label Text="{Binding Name}" FontAttributes="Bold"></Label>
<Label Text="{Binding StartDate}" HorizontalOptions="EndAndExpand"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal" BackgroundColor="#f94" >
<Label Text="{Binding RouteType}" FontAttributes="Bold"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Label Text="{Binding CreatorFirstName}" FontAttributes="Bold" HorizontalOptions="EndAndExpand"></Label>
<Label Text="{Binding CreatorLastName}" FontAttributes="Bold" HorizontalOptions="End"></Label>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
How to set layout properties correctly so all stacklayouts and their items contents will fit? All the binding properties are regular strings\dates. I know that there is GridLayout but i wonder how to do this using StackLayouts ?
You need to set the RowHeight property of the ListView to something that will show all items. Alternatively you may set HasUnevenRows to true, but it is a significantly slower option.
I am totally new to xamarin,
Following is my code :
<ListView x:Name="boxActivitiesList" ItemTapped="boxActivitiesList_ItemTapped" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Padding="25" VerticalOptions="Start" HorizontalOptions="Start">
<Label Text="{Binding Box}" TextColor="BlueViolet" FontSize="16" FontAttributes="Bold" LineBreakMode="TailTruncation" />
<TableView IsVisible="{Binding IsVisible}" Intent="Settings" HasUnevenRows="True" BackgroundColor="White">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="15,0">
<Label HorizontalOptions="Fill" Text="Remarks" VerticalOptions="Center" TextColor="Black"></Label>
<Editor x:Name="txtRemarks" HorizontalOptions="FillAndExpand"></Editor>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
<Button x:Name="btnSave" Text="Save" Clicked="btnSave_Clicked" CommandParameter="{Binding BoxId}" IsVisible="{Binding IsVisible}"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When I click on Editor, Keyboard does not show. Can you please tell me what I am doing wrong.
I'm not sure why the Editor is not working in the Table, however i would reconsider this design and just use a Grid to realize a more complex layout inside your parent ViewCell.
Although there should be nothing wrong with the way you have it, it does seem to be overly complicating things with more nested controls when its not really needed. Ergo, the nested table should really just be a layout like Grid or StackPanel
Lastly, Xamarin.Forms can be a little fickle at the best of times with the various devices it supports. so its best to keep things as simple as possible
Hi there, I am currently trying out the idea of a picker inside a listview.
I have assigned a name to said picker but I don't think I can reference this picker from code behind due to all the layers it has on top. Any suggestions on this?
<ListView ItemsSource="{Binding CUSs}" HasUnevenRows="True"
Margin="10,20"
ItemTapped="ListView_ItemTapped"
BackgroundColor="Silver">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout x:Name="ClientLevel" Padding="20">
<Label Text="{Binding .ClientName}"
TextColor="#000" FontSize="Small"/>
<StackLayout x:Name="UnitLevel" Padding="10" IsVisible="{Binding IsVisible}">
here --> <!--<Picker x:Name="SubPicker" Title="{Binding .UnitName}" HorizontalOptions="Start" IsVisible="True"/>-->
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Once I am able to reference this son-of-a-picker (sorry.Had to xD) I expect the code to work as intended. The user goes down the list and picks a picker for the list ( in this case there is only one of course)