Is there a way to do what ListViewHeaderItem exactly do?

173 views Asked by At

I want to realize a custom view just like ListView.

Now the problem is I want get a Tapped event from group header, maybe more.
It always creates GroupItem as group view, and can't be change.

I found what ListView do is create ListViewHeaderItem by the system and added to the visual tree when realizing the GroupStyle.HeaderTemplate. My question is any way to do this?

cs:

public class CustomView : ItemsControl

xaml:

<CollectionViewSource x:Name="itemCVS" IsSourceGrouped="True" 
               Source="{x:Bind Groups}" ItemsPath="Items"/>
...
<CustomView ItemsSource="{x:Bind itemCVS.View}">
  <CustomView.GroupStyle>
    <GroupStyle.HeaderTemplate>
      <DataTemplate>
        <TextBlock Text="{Binding}"/>
      </DataTemplate>
    </GroupStyle.HeaderTemplate>
    <GroupStyle.Panel>
      <ItemsPanelTemplate>
        <CustomPanel/>
      </ItemsPanelTemplate>
    </GroupStyle.Panel>
  </CustomView.GroupStyle>
</CustomView>

CustomView Visual Tree:

CustomView
 Windows.UI.Xaml.Controls.Border
  Windows.UI.Xaml.Controls.ScrollViewer
   Windows.UI.Xaml.Controls.Border
    Windows.UI.Xaml.Controls.Grid
     Windows.UI.Xaml.Controls.ScrollContentPresenter
      Windows.UI.Xaml.Controls.ItemsPresenter
       Windows.UI.Xaml.Controls.ContentControl
       CustomPanel
        Windows.UI.Xaml.Controls.GroupItem
         Windows.UI.Xaml.Controls.Grid
          Windows.UI.Xaml.Controls.ContentControl
           Windows.UI.Xaml.Controls.ContentPresenter
            Windows.UI.Xaml.Controls.TextBlock
          Windows.UI.Xaml.Controls.ItemsControl
           Windows.UI.Xaml.Controls.ItemsPresenter
            Windows.UI.Xaml.Controls.ContentControl
            CustomPanel
             Item 1
             Item 2

ListView Visual Tree:

Windows.UI.Xaml.Controls.ListView
 Windows.UI.Xaml.Controls.Border
  Windows.UI.Xaml.Controls.ScrollViewer
   Windows.UI.Xaml.Controls.Border
    Windows.UI.Xaml.Controls.Grid
     Windows.UI.Xaml.Controls.ScrollContentPresenter
      Windows.UI.Xaml.Controls.ItemsPresenter
       Windows.UI.Xaml.Controls.ContentControl
       Windows.UI.Xaml.Controls.ItemsStackPanel
        Windows.UI.Xaml.Controls.ListViewHeaderItem
        Windows.UI.Xaml.Controls.ListViewHeaderItem
        Windows.UI.Xaml.Controls.ListViewItem 1
        Windows.UI.Xaml.Controls.ListViewItem 2
1

There are 1 answers

1
dear_vv On

You code has generated the HeaderItem.

Because your CustomerView inherits from ItemsControl, the generated HeaderItem has no style.

So if you want to do this, please manually add to change the style like following.

<CustomerView.GroupStyle>
    <GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <ListViewHeaderItem>
                    <StackPanel>
                        <TextBlock Text="{Binding Key}"/>
                    </StackPanel>
                </ListViewHeaderItem>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
    </GroupStyle>
 </CustomerView.GroupStyle>