@CraigDunn If I try using a ListView.Header like your example, it pads the top of the ListView but the space is blank. If I try with a ListView.HeaderTemplate (wrapping the StackLayout in a DataTemplate), there is no header at all. If I just put Header="{Binding VALUE}" in the ListView declaration, I can get the text to show up. Has anyone gotten this working with a template/label?
It is looking for the Header property on the ListView to be the binding source for the HeaderTemplate.
If you set the Header property to a string, you can surface that in the template like this:
<ListView x:Name="listView" Header="TEST HEADER"> <!-- this object will be the bindingcontext -->
<ListView.HeaderTemplate >
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Label Text="--"/>
<Label Text="{Binding .}"/> <!-- use the object in Header as the binding source -->
<Label Text="--"/>
</StackLayout>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Without setting the Header property, the binding source is null. Alternatively you could set the page's BindingContext to a string and reference that, either in code
BindingContext = "TEST HEADER C#";
listView.SetBinding (ListView.HeaderProperty, new Binding("."));
or this XAML
<ListView x:Name="listView" Header="{Binding .}">
OR now you know how it works, you can manipulate the binding context of the page, the listview and the Header property to control what binding context is set for the HeaderTemplate.
Final note: as you've already noticed, if you set the Header but not a header template, the Header object itself is rendered as the "header". This can be a simple string, or a non-bindable view
class Monkey {
public string Name {get;set;}
public string Description {get;set;}
}
class MonkeyVM {
public List<Monkey> Monkeys { get; set; }
public string Intro { get { return "Monkey Header"; }}
public string Summary { get { return " There were " + Monkeys.Count + " monkeys"; }}
}
public partial class HeaderFooterXaml : ContentPage
{
public HeaderFooterXaml ()
{
InitializeComponent ();
var monkeys = new List<Monkey> {
new Monkey {Name="Xander", Description="Writer"},
new Monkey {Name="Rupert", Description="Engineer"},
new Monkey {Name="Tammy", Description="Designer"},
new Monkey {Name="Blue", Description="Speaker"},
};
BindingContext = new MonkeyVM {Monkeys = monkeys};
}
}
I'm also having issues with the ListView.Header and ListView.Footer. Same error as JesseM, "XamlParseException .... No Property of name Header". Similar error for footer.
@JesseM@JoshLoschen
It looks like you are putting the ListView where your ContentPage should go. Your ListView needs to be within a ContentPage. Then, you should put all of your header content into a DataTemplate attribute and then put that DataTemplate attribute into the ListView.HeaderTemplate property. Then you will set your BindingContext within the ListView.Header property.
See below for one of my stripped down pages, which is a ContentPage with a single ListView in it. Then in the code-behind, I am simply setting the ContentPage's BindingContext to my ViewModel.
You would put your ListView.Header content in place of the single <Label Text="{Binding Name}"/> part below. The bindings and other parts would only work for me (using the ListView.HeaderTemplate) if I set the correct {Binding} within ListView.Header, so be sure to do that. It will become the ListView.HeaderTemplate's BindingContext. Below I am just setting the 'ListView.Header' binding to the ContentPage's BindingContext.
Also note that I am using the ListView groups, which you do not have to use if you don't want to.
@CraigDunn is there a way to add GroupFooterTemplate? I mean, let's call it this way as, in iOS you have a GetHeightForFooter and GetViewForFooter but that's not available in Xamarin Forms custom renderer. Any ideas how to implement it in both platforms with custom renderers? Do you have it in the roadmap?
Anything from the native platform would be available in a custom renderer, so if you want really fine-grained control over some UI element (whether it's UITableView or something else) then a custom renderer is often the way to go.
There's no GroupFooterTemplate currently available (that I can see).
Is there a reason why both header and footer dont cover the whole width of the listview? In the example below you'll see that on the right side of header and footer Aqua background of ListView is visible
Is there a reason why both header and footer dont cover the whole width of the listview? In the example below you'll see that on the right side of header and footer Aqua background of ListView is visible
Posts
I would love to see a sample about using the footer in a listview correctly too
There's some mention in the listview doc.
This also works
Note that header/footer is separate from
GroupDisplay
which is covered in the LabelledSectionsList sample.@CraigDunn If I try using a ListView.Header like your example, it pads the top of the ListView but the space is blank. If I try with a ListView.HeaderTemplate (wrapping the StackLayout in a DataTemplate), there is no header at all. If I just put Header="{Binding VALUE}" in the ListView declaration, I can get the text to show up. Has anyone gotten this working with a template/label?
It is looking for the
Header
property on theListView
to be the binding source for theHeaderTemplate
.If you set the
Header
property to a string, you can surface that in the template like this:Without setting the
Header
property, the binding source isnull
. Alternatively you could set the page'sBindingContext
to a string and reference that, either in codeor this XAML
OR now you know how it works, you can manipulate the binding context of the page, the listview and the
Header
property to control what binding context is set for theHeaderTemplate
.Final note: as you've already noticed, if you set the
Header
but not a header template, theHeader
object itself is rendered as the "header". This can be a simple string, or a non-bindable view@CraigDunn Thank you! That worked for me.
@LeeOlsen cool. Note that there still might be a bug with using
StackLayout
in theFooterTemplate
, so steer clear of complex footers for now.Here's a more complex example
and the codebehind:
This was really useful! Thanks.
thanks @CraigDunn !!!
When I use ListView.Header, I get an exception:
Xamarin.Forms.Xaml.XamlParseException: Position 13:8. No Property of name Header found
I am doing it exactly as you suggest in Post#3 of this thread @CraigDunn
@JesseM what version of Xamarin.Forms are you using?
Have you tried the ListView sample (see the xaml )?
I just did the fresh install last week.
Edit - thought you meant what version of xamarin.
Forms is 4.0.30319
Here is the code:
I'm also having issues with the ListView.Header and ListView.Footer. Same error as JesseM, "XamlParseException .... No Property of name Header". Similar error for footer.
@JesseM @JoshLoschen
It looks like you are putting the
ListView
where yourContentPage
should go. YourListView
needs to be within aContentPage
. Then, you should put all of your header content into aDataTemplate
attribute and then put thatDataTemplate
attribute into theListView.HeaderTemplate
property. Then you will set yourBindingContext
within theListView.Header
property.See below for one of my stripped down pages, which is a ContentPage with a single
ListView
in it. Then in the code-behind, I am simply setting theContentPage
'sBindingContext
to myViewModel
.You would put your
ListView.Header
content in place of the single<Label Text="{Binding Name}"/>
part below. The bindings and other parts would only work for me (using theListView.HeaderTemplate
) if I set the correct{Binding}
withinListView.Header
, so be sure to do that. It will become theListView.HeaderTemplate
'sBindingContext
. Below I am just setting the 'ListView.Header' binding to theContentPage
'sBindingContext
.Also note that I am using the
ListView
groups, which you do not have to use if you don't want to.@CraigDunn is there a way to add GroupFooterTemplate? I mean, let's call it this way as, in iOS you have a GetHeightForFooter and GetViewForFooter but that's not available in Xamarin Forms custom renderer. Any ideas how to implement it in both platforms with custom renderers? Do you have it in the roadmap?
Anything from the native platform would be available in a custom renderer, so if you want really fine-grained control over some UI element (whether it's UITableView or something else) then a custom renderer is often the way to go.
There's no
GroupFooterTemplate
currently available (that I can see).Hi, I am having ListView inside Content View page, How can i add the Header to listview?
Listview has a Header property or HeaderTemplate
Hey everyone,
Is there a reason why both header and footer dont cover the whole width of the listview? In the example below you'll see that on the right side of header and footer Aqua background of ListView is visible
Thanks
Try adding a StackLayout to hold your elements. This should do the trick.
<ListView BackgroundColor="Aqua" HasUnevenRows="True"> <ListView.Header> <StackLayout HorizontalOptions="FillAndExpand" BackgroundColor="Fuchsia"> <Label Text="header"/> </StackLayout> </ListView.Header> <ListView.Footer> <StackLayout HorizontalOptions="FillAndExpand" BackgroundColor="Blue"> <Label Text="footer" BackgroundColor="Blue"/> </StackLayout> </ListView.Footer> <ListView.ItemTemplate> <DataTemplate> <Label Text="body" BackgroundColor="Red"/> </DataTemplate> </ListView.ItemTemplate> </ListView>
Thank you so much @CraigDunn
Hi Can we Bind The Footer in a Listview Dynamically?