Diskuze: WPF - scrollviewer se záhlavím (Sticky Header)

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

ORRNY99

Člen

ORRNY99:12.10.2018 16:07

Zdravím,
potřeboval bych trochu poradit. Snažím se vytvořit ve WPF komponentu scrollviewer se "záhlavím". Při scrollování se mění výška záhlaví a komponent uvnitř. Viz obrázek.
Zkoušel jsem to v UWP a tam to jde bezvadně. Ale přenést to do WPF je už složitější. Budu rád za jakoukoliv radu jak tohoto docílit ve WPF.

viz zdrojový kód v UWP:

<ScrollViewer x:Name="MainScrollViewer" >

          <Grid x:Name="MainContentsGrid">
              <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition />
              </Grid.RowDefinitions>

              <Grid x:Name="MainContents" Grid.Row="1" >
                  <StackPanel>
                      <Rectangle Fill="#DAECF4" Height="200" />
                      <Rectangle Fill="#91C5DD" Height="200" />
                      <Rectangle Fill="#DAECF4" Height="200" />
                      <Rectangle Fill="#91C5DD" Height="200" />
                      <Rectangle Fill="#DAECF4" Height="200" />
                      <Rectangle Fill="#91C5DD" Height="200" />
                      <Rectangle Fill="#DAECF4" Height="200" />
                      <Rectangle Fill="#91C5DD" Height="200" />
                      <Rectangle Fill="#DAECF4" Height="200" />
                      <Rectangle Fill="#91C5DD" Height="200" />
                  </StackPanel>
              </Grid>

              <StackPanel x:Name="ScrollHeader">
                  <StackPanel Orientation="Horizontal" Background="#7F2A2A78" >
                      <Border
                          x:Name="HeaderLogo"
                          Width="300"
                          Height="300"
                          BorderThickness="10" >
                          <Ellipse Fill="{StaticResource HeaderLogoGradient}" />
                      </Border>

                      <StackPanel VerticalAlignment="Center" >
                          <TextBlock x:Name="HeaderText" FontSize="25" Text="Sticky Header" Foreground="#FFFFFF"/>
                      </StackPanel>
                  </StackPanel>
              </StackPanel>

          </Grid>
      </ScrollViewer>

code behind:

CompositionPropertySet scrollerPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MainScrollViewer);
           Compositor compositor = scrollerPropertySet.Compositor;
           // Get the visual that represents our HeaderTextBlock
           // And define the progress animation string
           var headerVisual = ElementCompositionPreview.GetElementVisual(ScrollHeader);
           String progress = "Clamp(Abs(scroller.Translation.Y) / 300.0, 0.0, 1.0)";

           // Create the expression and add in our progress string.
           var textExpression = compositor.CreateExpressionAnimation("Lerp(1.5, 1, " + progress + ")");
           textExpression.SetReferenceParameter("scroller", scrollerPropertySet);

           // Shift the header by 50 pixels when scrolling down
           var offsetExpression = compositor.CreateExpressionAnimation($"-scroller.Translation.Y - {progress} * 150");
           offsetExpression.SetReferenceParameter("scroller", scrollerPropertySet);
           headerVisual.StartAnimation("Offset.Y", offsetExpression);

           // Logo scale and transform
           var logoHeaderScaleAnimation = compositor.CreateExpressionAnimation("Lerp(Vector2(1,1), Vector2(0.5, 0.5), " + progress + ")");
           logoHeaderScaleAnimation.SetReferenceParameter("scroller", scrollerPropertySet);

           var logoVisual = ElementCompositionPreview.GetElementVisual(HeaderLogo);
           logoVisual.StartAnimation("Scale.xy", logoHeaderScaleAnimation);

           var logoVisualOffsetAnimation = compositor.CreateExpressionAnimation($"Lerp(0, 150, {progress})");
           logoVisualOffsetAnimation.SetReferenceParameter("scroller", scrollerPropertySet);
           logoVisual.StartAnimation("Offset.Y", logoVisualOffsetAnimation);

           // Offset the header title
           Visual textVisual = ElementCompositionPreview.GetElementVisual(HeaderText);
           Vector3 finalOffset = new Vector3(-150, 100, 0);
           var headerOffsetAnimation = compositor.CreateExpressionAnimation($"Lerp(Vector3(0,0,0), finalOffset, {progress})");
           headerOffsetAnimation.SetReferenceParameter("scroller", scrollerPropertySet);
           headerOffsetAnimation.SetVector3Parameter("finalOffset", finalOffset);
           textVisual.StartAnimation(nameof(Visual.Offset), headerOffsetAnimation);

Odpovědět

12.10.2018 16:07

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.