I've heard a couple things about ListView.
it takes up the full height of its container
on iOS it just goes ahead and adds empty rows until it takes up the full height
you have to use HasUnevenRows=True to be able to set its height even if all your rows are the same height.
It sure would be great if there were a way to get ListView to not display those extra empty rows though, right? Well, that's what I am trying to do.
<ListView
BackgroundColor="Green"
ItemsSource="{Binding Things}"
HasUnevenRows="True"
HeightRequest="5"> <!-- In the real code I am setting this in a ValueConverter. It's hard coded here for simplicity. -->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="This is text." />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Except I don't even know what it could possibly be doing. Here I use HeightRequest=5 and HeightRequest=50 there is a difference. But I can't tell what it is.
What's going on here?
Now this is a very interesting question. We have had similar issues with ListViews as unfortunately that unlimited scrolling is actually a standard behaviour on iOS, so you have to think of way around it. The way we have done it is basically count the amount of items within the list, this is pretty straight forward, because you only have to call for ListOfItems.Count. Next thing you want to do, you want to get the Height of your Single DataTemplate item. When you do that then just multiple count of your items by Height of single item and set that Value to HeightRequest. It is not ideal, but it does a job.
I understand why this works. What I don't understand is why the 50 other ways I tried did not work. So from that point of view I have no idea why this works.
Wrap it in a StackLayout:
<StackLayout>
<ListView
BackgroundColor="Green"
ItemsSource="{Binding Things}"
HasUnevenRows="True"
HeightRequest="5"> <!-- In the real code I am setting this in a ValueConverter. It's hard coded here for simplicity. -->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="This is text." />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
It might seem relevant at first but I'm not sure. My ListView was in a grid so it had
<ListView
Grid.Row="1"
Grid.Column="1"
... />
Which got moved into the StackLayout. Again, I know that seems glaringly relevant but I have my doubts. Unfortunately I don't have the time to rip everything out just to test that idea out.
Related
I was wondering if anyone else is experiencing this issue with the latest .Net maui preview(Version 17.2.0 Preview 1.0)
<CollectionView ItemsSource="{Binding EventList}" x:Name="Events_CollectionView" ItemsLayout="VerticalList" SelectionMode="Single">
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame>
<StackLayout Margin="0,0,0,0">
<Label Text="{Binding Seconds}" FontSize="35" FontAttributes="Bold" TextColor="White" HorizontalOptions="End"/>
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
This displays the seconds of my countdown and gets updated every second. The result:
You can see the edge of the screen and where it gets cut off.
Here is an example when the frame is removed leaving just the stack layout in the data template:
Edit:
It appears not to just apply to frames but when I have a stacklayout inside of a stacklayout in the collectionview it appears to produce a similar result.
It seems that adding a width request to the Label allowed the full text to be displayed.
My text is getting cutoff in my Panorama View, I am wondering is there away to wrap the text or make it smaller so it won't get cutoff?
Thanks
Have you tried changing the TitleTemplate?
<phone:Panorama Title="my application">
<phone:Panorama.TitleTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="50" Margin="0,50,0,0"/>
</DataTemplate>
</phone:Panorama.TitleTemplate>
</phone:Panorama>
My LongListSelector is not scrolling properly. When I scroll the list, it automatically reaching back to the top with its rubber band effect.
xaml is
<Grid x:Name="ContentPanel" Height="2000">
<toolkit:LongListSelector x:Name="ItemList" DataContext="Item" IsFlatList="True" StretchingBottom="LoadMoreData">
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Tag="{Binding ItemID}" Loaded="Grid_Loaded" MaxWidth="361" MaxHeight="100">
// some xaml code
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
</Grid>
can anyone help me ?
thanku
It's not scrolling correctly because you set the Height of the parent Grid to 2000. This causes the LongListSelector to take as much space as it may need as long as it's less than 2000 and only then starts scrolling. Considering you only have 800 (or a bit more) of height, you don't see the scrolling properly.
I have a UserControl that needs to contain a bunch of controls on top and a LongListSelector below them. Total height of the whole UserControl may (and almost always will) exceed the screen height and in that case a whole UserControl must be scrollable.
My current setup is as follows:
<staff:UserContentControl
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:MyApp.Controls"
xmlns:staff="clr-namespace:MyApp.Helpers"
x:Class="MyApp.Controls.RemoteHomePage"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}">
<ScrollViewer>
<ScrollViewer.Content>
<StackPanel>
<TextBlock Txt="Text1" Sign="#" />
<TextBlock Txt="Text2" Sign="#" />
<controls:Divider />
<TextBlock Txt="Text3" Sign="~" />
<TextBlock Txt="Text4" Sign="~" />
<controls:TextDivider Text="Divider text" />
<phone:LongListSelector ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</StackPanel>
</ScrollViewer.Content>
</ScrollViewer>
</staff:UserContentControl>
This solution satisfies my needs but also there's a big problem: currently LongListSelector takes really a lot of time to load when amount of items it contains is reasonably large. It takes 8 seconds to process 300 items and during that time the whole UI is blocked. If I remove everything but LongListSelector, like so:
<staff:UserContentControl
...>
<phone:LongListSelector ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</staff:UserContentControl>
then LongListSelector loads almost immediately even with significantly larger amount of items. But obviously I need those other controls above it so the question is what can I do solve this issue?
(Also related question: I was worried that LongListSelector inside ScrollViewer could cause double scrolling or something like that but eventually everything turned out just fine in this regard. I'm not sure if LongListSelector somehow knows that it is inside other scrollable control or if something else happens that I'm not aware of. Some explainantion why it works fine, although very slow, would be much appreciated.)
Don't use scroll viewer since it will make the longlistselector think it has an infinitely tall screen available and render all its items.
Instead to solve your usecase use the Header and Footer properties to add data above or below your list items.
You can't force ScrollViewer to virtualize LongListSelector items.
So you need to mimic it behaviour by LongListSelector only.
Make the first item contains all you required elements form StackPanel (1'st itemtemplate). And other elements will be basic LongListSelector elements (2'nd itemtemplate).
Here is explanation how to set different templates to the items: Styling a selected ListViewItem in Windows 8 CP
This is the code:
<ItemsControl x:Name="ContactsControl" ItemsSource="{Binding Contacts}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding ElementName=ContactsControl, Path=DataContext.PageName}" />
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
On the TextBlock I want to get date from the ItemsControl data context, so I use ElementName and in the 'Path' I use Path=DataContext.PageName.
So, On Blend I can see the data on the TextBlock as it should be, but when I run the emulator I cant see the data...
Why is it?
I'm working with VS2010 and Blend 4.
Thanks.
You are binding an items control to a list of Contacts. Traditionally you will then bind the textblock to a property of the class contained in the list. Why are you binding to another control and then bringing datacontext into the equation? Doesn't seem like something you normally do with a list.