CommunityToolkit/WindowsCommunityToolkit

Setting the size of header content breaks scroll header behaviors

Open

#3,952 opened on 2021年4月20日

GitHub で見る
 (4 comments) (0 reactions) (0 assignees)C# (1,403 forks)batch import
bug :bug:controls :control_knobs:help wantedsample app 🖼

Repository metrics

Stars
 (5,708 stars)
PR merge metrics
 (30d に merged PR はありません)

説明

Describe the bug

Setting the size of the child content of the header will break scroll header behaviors.

  • Is this bug a regression in the toolkit? If so, what toolkit version did you last see it work:

Steps to Reproduce

  • Can this be reproduced in the Sample App? (Either in a sample as-is or with new XAML pasted in the editor.) If so, please provide custom XAML or steps to reproduce. If not, let us know why it can't be reproduced (e.g. more complex setup, environment, dependencies, etc...)

Steps to reproduce the behavior:

  1. Go to scroll header page in sample app
  2. Add a width property to "MyHeaderGrid"
  3. Header stays at the top, behavior doesn't work

From the toolkit sample app:

    <ListView Name="listView">
      <interactivity:Interaction.Behaviors>
        <behaviors:StickyHeaderBehavior />
      </interactivity:Interaction.Behaviors>
      <ListView.Header>
        <Grid x:Name="MyHeaderGrid"
          MinHeight="250"
          Background="{ThemeResource Brush-Blue-01}"
          Width="500"
          >
          <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Margin="12"
                    FontSize="48"
                    FontWeight="Bold"
                    Foreground="White"
                    Text="Scroll Header"
                    TextAlignment="Center"
                    TextWrapping="WrapWholeWords" />
            <TextBlock Margin="12,0,12,12"
                    VerticalAlignment="Center"
                    Foreground="White"
                    Text="The scroll header supports quick return, sticky and fade behavior. If fade is enabled the header fades out while scrolling down. If quick return is enabled the header hides when the ListView is scrolled down and reappears immediately as soon as the ListView is scrolled up again. If sticky is enabled the header is displayed regardless of scrolling."
                    TextAlignment="Center"
                    TextWrapping="WrapWholeWords" />
          </StackPanel>
        </Grid>
      </ListView.Header>
      <ListView.ItemTemplate>
        <DataTemplate>
          <Grid MinHeight="100" Background="{ThemeResource Brush-Grey-04}">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image x:Name="ToolkitLogo"
                   Grid.Column="0"
                   Width="100"
                   Height="100"
                   Margin="0,0,24,0"
                   Source="ms-appx:///Assets/ToolkitLogo.png" />
            <TextBlock Grid.Column="1"
                       VerticalAlignment="Center"
                       Text="{Binding Title}"
                       TextTrimming="CharacterEllipsis" />
          </Grid>
        </DataTemplate>
      </ListView.ItemTemplate>
      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
          <Setter Property="Padding" Value="12,12,24,12" />
        </Style>
      </ListView.ItemContainerStyle>
    </ListView>

Expected behavior

The behavior should work despite size being set.

Screenshots

This is with the sticky header behavior.

https://user-images.githubusercontent.com/59544401/115451354-efe60c80-a1d1-11eb-8002-cf47fdf45f13.mp4

Environment

NuGet Package(s): 
Microsoft.Toolkit.Uwp.UI.Behaviors

Package Version(s): 7.0.1

Windows 10 Build Number:

  • Fall Creators Update (16299)
  • April 2018 Update (17134)
  • October 2018 Update (17763)
  • May 2019 Update (18362)
  • May 2020 Update (19041)
  • Insider Build (build number: 19043.962)

App min and target version:

  • Fall Creators Update (16299)
  • April 2018 Update (17134)
  • October 2018 Update (17763)
  • May 2019 Update (18362)
  • May 2020 Update (19041)
  • Insider Build ( )

Device form factor:

  • Desktop
  • Xbox
  • Surface Hub
  • IoT

Visual Studio

  • 2017 (version: )
  • 2019 (version: 16.9.4)
  • 2019 Preview (version: )

Additional context

Add any other context about the problem here.

コントリビューターガイド