Hide HeaderContent from the top of a ListView

495 Views Asked by At

I have a

<DockPanel>
    <!-- Header -->
    <Button DockPanel.Dock="Top" Command="{Binding CreateAccountCommand}" Margin="{StaticResource ControlMargin}" Style="{StaticResource IconButtonStyle}">
        <StackPanel>
            <MahAppsIconPacks:PackIconFontAwesome Kind="Pencil" />
            <TextBlock>create account</TextBlock>
        </StackPanel>
    </Button>

    <!-- Accounts list -->
    <ListView SelectionMode="Single" SelectedIndex="0" ItemsSource="{Binding AccountViewModels}" SelectedItem="{Binding SelectedItem}" Style="{StaticResource AccountsList}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <LocalViews:AccountView Margin="{StaticResource ControlMargin}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListView>
</DockPanel>

It renders with a black separator on top of it, which is quite ugly. How do I hide it? I have tried setting different styles, but there is no ListViewColumnHeader.

http://i.imgur.com/0UnW1QW.png

In the live tree it shows as header content ... not separator, my bad. How do I remove it?

enter image description here

This doesn't work:

<Style TargetType="ListView" x:Key="AccountsList" BasedOn="{StaticResource {x:Type ListView}}">
        <Style.Resources>
            <Style TargetType="HeaderedContentControl">
                <Setter Property="Visibility" Value="Collapsed" />
            </Style>
        </Style.Resources>
    </Style>
2

There are 2 best solutions below

5
Joe On BEST ANSWER

Are you using any of the View capabilities of ListView? (e.g. GridView etc which I believe is the default. In which case, the separator is probably the header section, but empty). If you're not, try just using a ListBox instead. It has no header as default.

Edit: I just checked this theory, but it appears I can't reproduce your issue at all. Here's a ListBox as you've got your code (and a ListView for good measure):

<Window.Resources>
    <x:Array x:Key="Items" Type="sys:String">
        <sys:String>Item 1</sys:String>
        <sys:String>Item 2</sys:String>
        <sys:String>Item 3</sys:String>
    </x:Array>
</Window.Resources>
<StackPanel Margin="20">
    <TextBlock Text="ListBox:"/>
    <ListBox Height="100" ItemsSource="{StaticResource Items}" BorderBrush="Transparent">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListBox>
    <TextBlock Text="ListView:"/>
    <ListView Height="100" ItemsSource="{StaticResource Items}" BorderBrush="Transparent">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListView>
</StackPanel>

It may be the different themes on Windows 7 however, I'm using Windows 10.

enter image description here

0
Toby Crawford On

I believe this is a result of the MahApps template. It's not the default behaviour of a standard WPF ListView.

You would have to adjust the MahApps template to get rid of it. Something like this:

<Style TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListView}}">
    <Setter Property="BorderThickness" Value="0" />
</Style>

The MahApps code and resources are all open source. I think the particular problem you are having is driven by the BorderThickness setter here:

https://github.com/MahApps/MahApps.Metro/blob/develop/src/MahApps.Metro/MahApps.Metro/Styles/Controls.ListView.xaml

 <Style x:Key="MetroListView" TargetType="{x:Type ListView}">
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="AlternationCount" Value="2" />
    <Setter Property="Background" Value="{DynamicResource WhiteBrush}" />
    <Setter Property="BorderBrush" Value="{DynamicResource BlackBrush}" />
    <Setter Property="BorderThickness" Value="0 1 0 0" />