带有ScrollHeader和WrapPanel的ListView（ItemsPanel.ItemsPanelTemplate）

Posted 2021-04-02

我的页面中有一个ListView。我使用ScrollHeader与Mode =“Fade”和我的ItemsPanelTemplate使用WrapPanel控件。所以，我的listview项目与ScrollHeader内容以水平对齐的形式存在。我希望ScrollHeader内容能够在顶部和水平拉伸，而listview项目在ScrollHeader内容和窗体之间是垂直的

我的代码：

<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>

答案

我找到了两种方法来实现这一目标。第一个是重新放置ListView以堆叠标题和项目。

<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>

让ItemsPresenter不将Header属性绑定到ListView的头部是很重要的。

第二个它改变您的布局，使ScrollViewer和标题在ListView之外，并使用像这样的FadeHeaderBehavior

<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>

由于绑定HeaderElement属性的奇怪问题，您需要在加载header元素时设置它

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