Why does ListView Item Template show buttons but with no text?

Question

I have an WPF application with this XAML...

<ListView
    ScrollViewer.HorizontalScrollBarVisibility="Hidden"
    ScrollViewer.VerticalScrollBarVisibility="Hidden"
    ItemsSource="{Binding HTMLControlNames}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Button  Content="{Binding Name}"></Button>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

The bindings are correct and there is data in the ObservableCollection property that implements INPC.

I added the Expression Dark Theme which is also working but this is the output from the markup above:

enter image description here

The buttons are there, they just aren't showing the text... BTW the number of buttons is equal to the count of items in the collection.

Here's the property in the ViewModel, single stepping shows me there are items (the proper ones) in the collection.

    public ObservableCollection<ControlName> HTMLControlNames
    {
        get { return _HTMLControlNames; }
        set
        {
            _HTMLControlNames = value;
            PropChanged("HTMLControlNames");
        }
    }

Lastly the ControlName Class:

public class ControlName
{
    public string Name { get; set; }
}

If I don't use ExpressionDark.xaml the content shows up!

Here's more information: Top part of the control shows up ok... If I don't use DataTemplate as in the top half of this control the buttons are fine.

enter image description here

Here's the default Control Template (just a grid with a content presenter)..

enter image description here

Have you checked the control template for `ExpressionDark`? Is the text a white color? — BradleyDotNET, Feb 12 '15 at 23:37
I added more information showing it's not a theme issue, it must be a binding issue? Neither of the two suggestions above are on right track, but thanks! — JWP, Feb 13 '15 at 00:05
Have you tried using `RelativeSource` binding as mentioned in [this link](http://stackoverflow.com/questions/8053873/how-to-bind-a-specific-observablecollection-items-property-to-a-customcontrols)? — amitthk, Feb 13 '15 at 03:36
I usually use [Snoop](https://snoopwpf.codeplex.com/) to debug such problems. With that tool you could easily check whether those buttons are generated by the ListView, but the buttons are missing their contents because of the theming. You could also check with Snoop whether there are any binding errors that might cause these issues. — wigy, Feb 13 '15 at 14:11

score 1 · Accepted Answer · answered Feb 13 '15 at 13:31

What you are seeing that you think is a button in the ListView control is actually the header area. You can see this more clearly by adding columns to the header:

<ListView.View>
    <GridView>
        <GridViewColumn Header="Test" />
    </GridView>
</ListView.View>

The list view items are actually the thin lighter-grey strips below this header.

I've not had much experience in templating list views (I usually use list boxes), but in the theme you are using, the list view seems to be templated in such a way that it basically ignores the item template. You can see that it does by using a daft template like this:

<ListView.ItemTemplate>
    <DataTemplate>
        <Rectangle Fill="Orange" Width="20" Height="20" />
    </DataTemplate>
</ListView.ItemTemplate>

You will see that no orange rectangles appear in the list view, even when the collection that you bind to has elements in it.

I'm not quite sure how you can get around this problem. Maybe someone with more experience of templating list view controls can chime in.

Thanks Stephen that got me one step closer. If I add the Gridview column as you show above, all of the element's show up now but I can only see the Type of the Element it is bound to, as opposed to the value of that type. — JWP, Feb 13 '15 at 15:25
@JohnPeters Yeah, I'm not quite sure what's going on there. Obviously something to do with the theming as I'm sure it would work properly with a standard list view template. — Steven Rands, Feb 13 '15 at 15:33
I'll post back final solution soon as now I have the context showing thanks to you! — JWP, Feb 13 '15 at 15:35

score 0 · Answer 2 · answered Feb 13 '15 at 16:00

Thanks to Stephen this is the solution so far:

<ListView.View>
        <GridView>
            <GridViewColumn x:Name="xHtmlControlcol"
                        Header="Filter For:"
                        Width="{Binding ActualWidth,
                        ElementName=XListView, 
                        Mode=OneWay}">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Button  Content="{Binding Name}"
                                 Width="{Binding ActualWidth,
                                 ElementName =XListView,
                            Mode=OneWay}" BorderThickness="1,0" />
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>

It produces this: Note that there's still one small issue with the left margin which I don't know how to fix right now.

enter image description here

The Trick to this is that when using Data Binding:

Use the ItemsSource to bind to collection of ListView
Use the ListView.View as shown above to set up a GridViewColumn.
Use the GridViewColumn.CellTemplate to inject the control type you want.
Make sure the injected control is bound to the proper Content path name.

Why does ListView Item Template show buttons but with no text?

2 Answers2