ListView with ScrollHeader and WrapPanel (ItemsPanel.ItemsPanelTemplate)

Question

I have a ListView in my page. and i using of ScrollHeader with Mode="Fade" And for my ItemsPanelTemplate i use of WrapPanel control. So, my listview items with ScrollHeader content in the form of horizontally aligned together. I want to be ScrollHeader content be top and stretch horizontally and listview items below ScrollHeader content and form be vertically

My code:

<ListView ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Disabled">
        <ListView.Header>
            <controls:ScrollHeader VerticalAlignment="Top" Mode="Fade">
                <StackPanel>
                    <Grid Margin="20,20,20,0">
                        <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Ellipse x:Name="imageProfile" extensions:Mouse.Cursor="Hand" Width="75" Opacity=".90">
                            <Ellipse.Fill>
                                <ImageBrush ImageSource="{Binding UserDetail.ProfilePicUrl}"/>
                            </Ellipse.Fill>
                        </Ellipse>

                        <Grid Margin="10,0,0,0" Grid.Column="1" VerticalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid VerticalAlignment="Top" Margin="5,0,5,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <StackPanel x:Name="panelPostCount" Opacity=".70" HorizontalAlignment="Center">
                                    <TextBlock x:Name="txblblCountPost" Text="{Binding UserDetail.MediaCount, FallbackValue='0'}" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    <TextBlock x:Name="txblblPosts" Text="Posts" Margin="5,0,5,0" FontSize="13" FontWeight="Bold" VerticalAlignment="Center"/>
                                </StackPanel>

                                <StackPanel x:Name="panelFollowers" Opacity=".70" Grid.Column="1" Orientation="{Binding Orientation, ElementName=panelPostCount, Mode=TwoWay}" HorizontalAlignment="Center" Tapped="panelFollowers_Tapped">
                                    <TextBlock Text="{Binding UserDetail.FollowerCount, FallbackValue='0'}" FontSize="{Binding FontSize, ElementName=txblblCountPost, Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    <TextBlock Text="Followers" Margin="5,0,5,0" FontSize="{Binding FontSize, ElementName=txblblPosts, Mode=OneWay}" FontWeight="Bold" VerticalAlignment="Center"/>
                                </StackPanel>

                                <StackPanel Opacity=".70" Grid.Column="2" Orientation="{Binding Orientation, ElementName=panelPostCount, Mode=TwoWay}" HorizontalAlignment="Center">
                                    <TextBlock Text="{Binding UserDetail.FollowingCount, FallbackValue='0'}" FontSize="{Binding FontSize, ElementName=txblblCountPost, Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    <TextBlock Text="Following" Margin="5,0,5,0" FontSize="{Binding FontSize, ElementName=txblblPosts, Mode=OneWay}" FontWeight="Bold" VerticalAlignment="Center"/>
                                </StackPanel>
                            </Grid>

                            <Button x:Name="btnEditProfile" Margin="5,10,5,0" Grid.Row="1" extensions:Mouse.Cursor="Hand"  HorizontalAlignment="Stretch" Content="Edit Profile" BorderThickness=".5" Opacity=".65" Style="{ThemeResource ButtonRevealStyle}" Click="btnEditProfile_Click"/>
                        </Grid>
                    </Grid>

                    <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="15,10,0,0">
                        <FontIcon Opacity=".80" Visibility="{Binding UserDetail.IsVerified, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" Glyph="&#xEC61;" VerticalAlignment="Center" FontSize="15"/>
                        <TextBlock Text="{Binding UserDetail.FullName}" Margin="5,0,0,0" Visibility="{Binding UserDetail.FullName, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" Opacity=".65" FontWeight="Bold"/>
                    </StackPanel>
                    <TextBlock Text="{Binding UserDetail.Biography}" Visibility="{Binding UserDetail.Biography, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" TextWrapping="Wrap" TextAlignment="Left" Opacity=".65" HorizontalAlignment="Left" Margin="15,5,0,0"/>
                    <HyperlinkButton Content="{Binding UserDetail.ExternalUrl}" Visibility="{Binding UserDetail.ExternalUrl, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" NavigateUri="{Binding UserDetail.ExternalUrl}" Opacity=".75" HorizontalAlignment="Left" Margin="15,5,0,0"/>


                    <Grid Height="1" Background="White" Opacity=".10" Margin="10,15,10,0"/>

                    <Grid Margin="35,10,35,10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <FontIcon x:Name="btnGridView" Grid.Column="0" extensions:Mouse.Cursor="Hand" Opacity=".80" Glyph="&#xE8A9;" Foreground="{ThemeResource SystemAccentColor}" Tapped="btnGridView_Tapped"/>
                        <FontIcon x:Name="btnSingleView" Grid.Column="1" extensions:Mouse.Cursor="Hand" Opacity=".80" Glyph="&#xE7C4;" Tapped="btnSingleView_Tapped"/>
                        <FontIcon Grid.Column="2" extensions:Mouse.Cursor="Hand" Opacity=".80" Glyph="&#xE8D4;"/>
                    </Grid>
                </StackPanel>
            </controls:ScrollHeader>
        </ListView.Header>

        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                 <controls:WrapPanel />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

        <ListView.ItemTemplate>
            <DataTemplate>
                <templates:InstaMediaTenplate />
            </DataTemplate>
        </ListView.ItemTemplate>

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Margin" Value="0,15,0,0"/>
                <Setter Property="Padding" Value="0"/>
            </Style>
        </ListView.ItemContainerStyle>

    </ListView>

Answer 1

I found two ways to accomplish this. The first is to restyle the ListView to stack the header and items.

<ListView ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.Template>
        <ControlTemplate TargetType="ListView">
            <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                    <StackPanel>
                        <ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                        <ItemsPresenter Padding="{TemplateBinding Padding}"/>
                    </StackPanel>
                </ScrollViewer>
            </Border>
        </ControlTemplate>
    </ListView.Template>
</ListView>

It's important to have the ItemsPresenter not bind the Header property to the header of the ListView.

The second it to change your layout to have the ScrollViewer and header outside of the ListView and using a FadeHeaderBehavior like such

<ScrollViewer ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <interactivity:Interaction.Behaviors>
        <behaviors:FadeHeaderBehavior x:Name="FadeBehavior"/>
    </interactivity:Interaction.Behaviors>
    <StackPanel>
        <StackPanel x:Name="Header" Loaded="Header_Loaded">
           <!-- Header content here -->
        </StackPanel>
        <ListView>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ListView>
    </StackPanel>
</ScrollViewer>

Due to a weird issue with binding the HeaderElement property you need to set it when the header element is loaded

private void Header_Loaded(object sender, RoutedEventArgs e)
{
    FadeBehavior.HeaderElement = (UIElement)sender;
}