Vánoční nadílka Vánoční nadílka
Vánoční akce! Daruj lepší budoucnost blízkým nebo sobě. Až +50 % zdarma na dárkové poukazy. Více informací
Avatar
ORRNY99
Člen
Avatar
ORRNY99:12. října 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. října 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.