Hide the group header of a listview by binding in Windows Store App

Question

I'm trying to remove group headers for groups where the header title is empty. But I can not make the binding in HeaderContainerStyle work. Neither can I set visibility on the TextBlock in TemplateHeader 'cause that will leave a small space and not be completely invisible.

This is my XAML:

<Page.Resources>
    <CollectionViewSource 
        x:Name="MenuItemsGrouped" 
        IsSourceGrouped="True"
        Source="{Binding MenuItems}" />
</Page.Resources>

<ListView Grid.Row="1" Margin="0"
            ItemsSource="{Binding Source={StaticResource MenuItemsGrouped}}"
            IsSynchronizedWithCurrentItem="False"
            SelectionMode="Single"
            SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Title}" />
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.HeaderContainerStyle>
                <Style TargetType="ListViewHeaderItem">
                    <Setter Property="Visibility" Value="{Binding GroupHeaderVisibility}"></Setter>
                </Style>
            </GroupStyle.HeaderContainerStyle>
        </GroupStyle>
    </ListView.GroupStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0" Orientation="Horizontal">
                <TextBlock Text="{Binding Title}" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Does anyone have a solution - and maybe a reason the binding won't work?

EDIT:

Ok, it's is actually a limitation in Windows Store Apps and earlier Silverlight apps:

Windows Presentation Foundation (WPF) and Microsoft Silverlight supported the ability to use a Binding expression to supply the Value for a Setter in a Style. The Windows Runtime doesn't support a Binding usage for Setter.Value (the Binding won't evaluate and the Setter has no effect, you won't get errors, but you won't get the desired result either). When you convert XAML styles from WPF or Silverlight XAML, replace any Binding expression usages with strings or objects that set values, or refactor the values as shared StaticResource values rather than Binding-obtained values.

from http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.setter

And see also Silverlight: How to use a binding in setter for a style (or an equivalent work around)

SimonFisher SimonFisher · Accepted Answer · 2013-11-05T14:50:26

Just try to bind the Visibility of the root element of HeaderTemplate.

    <GroupStyle.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Title}" Visibility = "{Binding GroupHeaderVisibility}" />
        </DataTemplate>
    </GroupStyle.HeaderTemplate>

It should work.Good luck!

[Edit]

I have figured out a solution, it's not very elegant, but it works. Here are the steps:

Add this xaml code to your ListView:

    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

2.Get a copy of ContainerStyle of GroupStyle(Right click the Listview on the design surface.Select: "Edit GroupStyle"->"ContainerStyle"). Then remove this line from the attributes of ContentControl:

Margin = "4"

3.Apply the above ContainerStyle to your listview. It should work.

NOTE: Step 1 is necessary, because ContainerStyle is no longer honored on Windows 8.1 when ItemsPanel is an ItemsStackPanel(which is the default).

http://msdn.microsoft.com/en-us/library/windows/apps/dn263110.aspx

Hide the group header of a listview by binding in Windows Store App

2 Answers