UWP可折叠页面标题
我正在尝试实现可折叠页面标题。主要思想是我必须根据scrollviewer中的更改来更改页眉的高度（最小高度为60，最大值为160）。
这是我想要实现的结果。
页眉的初始状态
页面标题
我的XAML代码：
<controls:CollapsablePageHeader>
<controls:CollapsablePageHeader>
<Grid x:Name="CollapsablePageHeaderGrid" MinHeight="150" Background="{StaticResource ApplicationAccentBackgroundColorBrush}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Text="25 905" HorizontalAlignment="Center" FontSize="50" Foreground="{StaticResource ApplicationAlternativeAccentColorBrush}"/>
<controls:TengeSignControl FontSize="50" Foreground="{StaticResource ApplicationAlternativeAccentColorBrush}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/CreditCard.png" Height="20" Width="20" Margin="0,5,5,0"/>
<TextBlock Text="Bank of Arkham City" FontSize="{StaticResource BigTextSize}" Foreground="{StaticResource ApplicationAlternativeAccentColorBrush}"/>
</StackPanel>
</StackPanel>
</Grid>
</controls:CollapsablePageHeader>
</controls:CollapsablePageHeader>
<ScrollViewer x:Name="MainScrollViewer" Grid.Row="1" IsTabStop="False" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Layout for user favorite payment templates-->
<toolkitControls:DropShadowPanel Style="{StaticResource DefaultCardDropShadowEffect}">
<Grid Style="{StaticResource CardConontrolElement}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Uid="Favorites" Style="{StaticResource SectionHeaderTextBlock}" HorizontalAlignment="Left" />
<GridView x:Name="UserTemplatesSelector" Grid.Row="1" ItemsSource="{Binding PaymentTemplates}" ItemTemplate="{StaticResource UserTemplatesDataTemplate}" Margin="-10,0,-10,0" Padding="10,0,0,0" Style="{StaticResource DefaultHorizontalGridView}" ItemContainerStyle="{StaticResource DefaultHorizontalGridViewItemContainer}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</toolkitControls:DropShadowPanel>
<!-- Layout for last operations -->
<toolkitControls:DropShadowPanel Grid.Row="1" Margin="0,20,0,0" Style="{StaticResource DefaultCardDropShadowEffect}">
<Grid Style="{StaticResource CardConontrolElement}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Uid="LastOperations" Style="{StaticResource SectionHeaderTextBlock}"/>
<ListView x:Name="LastOperationsListView" Grid.Row="1" ItemsSource="{Binding LastTransactions}" ItemTemplate="{StaticResource LastOperationsDataTemplate}" Margin="0,10,0,0" ItemContainerStyle="{StaticResource DefaultListViewItemContainer}"/>
<Button x:Name="ShowMoreOperationsButton" Content="Показать всё" Grid.Row="2" Style="{StaticResource TiltableAccentButton}"/>
</Grid>
</toolkitControls:DropShadowPanel>
<!-- Layour for bound cards -->
<toolkitControls:DropShadowPanel Grid.Row="2" Margin="0,20" Style="{StaticResource DefaultCardDropShadowEffect}">
<Grid Style="{StaticResource CardConontrolElement}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Uid="LastOperations" Style="{StaticResource SectionHeaderTextBlock}" Typography.Capitals="AllSmallCaps"/>
<ListView x:Name="BoundCardListView" Grid.Row="1" ItemsSource="{Binding BoundCards}" ItemTemplate="{StaticResource BoundCardsDataTemplate}" Margin="0,10,0,0" ItemContainerStyle="{StaticResource DefaultListViewItemContainer}"/>
<Button x:Name="ShowMoreCardsButton" Content="Показать всё" Grid.Row="2" Style="{StaticResource TiltableAccentButton}"/>
</Grid>
</toolkitControls:DropShadowPanel>
</Grid>
</ScrollViewer>`
我尝试使用Compositor.CreateExpressionAnimation实现此功能，但效果不佳。谁能告诉我怎么做？
更新
尝试设置Scale.X或Scale.Y值的动画时引发异常，但我无法弄清楚原因。其他视觉项目在缩放动画方面效果很好。
ExpressionNode headerTranslationAnimation = EF.Conditional(progressNode < 1, 0, -scrollingProperties.Translation.Y - clampSizeNode);
headerVisual.StartAnimation("Offset.Y", headerTranslationAnimation);
ExpressionNode headerScaleAnimation = EF.Lerp(1, 1.25f, EF.Clamp(scrollingProperties.Translation.Y / 50, 0, 1));
headerVisual.StartAnimation("Scale.X", headerScaleAnimation);
headerVisual.StartAnimation("Scale.Y", headerScaleAnimation);
headerVisual.StartAnimation处的例外情况：
System.ArgumentException: 'The parameter is incorrect.The animation failed to connect.'
更新了xaml：
<Grid x:Name="LayoutRoot" Style="{StaticResource DefaultLayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="MainScrollViewer" IsTabStop="False" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="CollapsiblePageHeader" Height="150" VerticalAlignment="Top">
<ScrollViewer>
<Grid>
<Rectangle Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle.Fill>
<ImageBrush ImageSource="ms-appx:///Assets/Samples/SampleParallaxImage.jpg"/>
</Rectangle.Fill>
</Rectangle>
<StackPanel>
<StackPanel x:Name="TitleContainer" VerticalAlignment="Top" HorizontalAlignment="Center" Orientation="Horizontal">
<TextBlock x:Name="TitleText" Text="25 905" FontSize="50" Foreground="{StaticResource ApplicationAlternativeAccentColorBrush}"/>
<controls:TengeSignControl x:Name="TitleImage" FontSize="50" Foreground="{StaticResource ApplicationAlternativeAccentColorBrush}"/>
</StackPanel>
<StackPanel x:Name="SubtitleContainer" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" Orientation="Horizontal">
<Image x:Name="SubtitleImage" Source="/Assets/CreditCard.png" Height="20" Width="20" Margin="0,5,5,0"/>
<TextBlock x:Name="SubtitleText" Text="Bank of Arkham City" FontSize="{StaticResource BigTextSize}" Foreground="{StaticResource ApplicationAlternativeAccentColorBrush}"/>
</StackPanel>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Layout for user favorite payment templates-->
<toolkitControls:DropShadowPanel Grid.Row="1" Style="{StaticResource DefaultCardDropShadowEffect}">
<Grid Style="{StaticResource CardConontrolElement}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Uid="Favorites" Style="{StaticResource SectionHeaderTextBlock}" HorizontalAlignment="Left" />
<GridView x:Name="UserTemplatesSelector" Grid.Row="1" ItemsSource="{Binding PaymentTemplates}" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Disabled" ItemTemplate="{StaticResource UserTemplatesDataTemplate}" Margin="-10,0,-10,0" Padding="10,0,0,0" Style="{StaticResource DefaultGridView}" ItemContainerStyle="{StaticResource DefaultGridViewItemContainer}"/>
</Grid>
</toolkitControls:DropShadowPanel>
<!-- Layout for last operations -->
<toolkitControls:DropShadowPanel Grid.Row="2" Margin="0,20,0,0" Style="{StaticResource DefaultCardDropShadowEffect}">
<Grid Style="{StaticResource CardConontrolElement}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Uid="LastOperations" Style="{StaticResource SectionHeaderTextBlock}"/>
<ListView x:Name="LastOperationsListView" Grid.Row="1" ScrollViewer.VerticalScrollMode="Disabled" ItemsSource="{Binding LastTransactions}" ItemTemplate="{StaticResource LastOperationsDataTemplate}" Margin="0,10,0,0" ItemContainerStyle="{StaticResource DefaultListViewItemContainer}"/>
<Button x:Name="ShowMoreOperationsButton" Content="Показать всё" Grid.Row="2" Style="{StaticResource TiltableAccentButton}"/>
</Grid>
</toolkitControls:DropShadowPanel>
<!-- Layour for bound cards -->
<toolkitControls:DropShadowPanel Grid.Row="3" Margin="0,20" Style="{StaticResource DefaultCardDropShadowEffect}">
<Grid Style="{StaticResource CardConontrolElement}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Привязанные карты" Style="{StaticResource SectionHeaderTextBlock}" Typography.Capitals="AllSmallCaps"/>
<ListView x:Name="BoundCardListView" Grid.Row="1" ScrollViewer.VerticalScrollMode="Disabled" ItemsSource="{Binding BoundCards}" ItemTemplate="{StaticResource BoundCardsDataTemplate}" Margin="0,10,0,0" ItemContainerStyle="{StaticResource DefaultListViewItemContainer}"/>
<Button x:Name="ShowMoreCardsButton" Content="Показать всё" Grid.Row="2" Style="{StaticResource TiltableAccentButton}"/>
</Grid>
</toolkitControls:DropShadowPanel>
</Grid>
</Grid>
</ScrollViewer>
<CommandBar x:Name="PaymentOperations" Grid.Row="1">
<AppBarButton x:Name="VendorPayment" Label="Оплата поставщиков" Icon="Shop" Click="MerchantPayment_Click"/>
<AppBarButton x:Name="p2pPayment" Label="P2P оплата" Icon="Remote" Click="PersonToPersonPayment_Click"/>
<AppBarButton x:Name="w2wPayment" Label="Перевод с кошелька на кошелек" Icon="Manage" Click="WalletToWalletPayment_Click"/>
</CommandBar>
</Grid>
完整的xaml.cs：
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
// Get the PropertySet that contains the scroll values from MyScrollViewer
_scrollerPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MainScrollViewer);
_compositor = _scrollerPropertySet.Compositor;
// Create a PropertySet that has values to be referenced in the ExpressionAnimations below
_props = _compositor.CreatePropertySet();
_props.InsertScalar("progress", 0);
_props.InsertScalar("clampSize", 150);
_props.InsertScalar("scaleFactor", 0.7f);
// Get references to our property sets for use with ExpressionNodes
var scrollingProperties = _scrollerPropertySet.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
var props = _props.GetReference();
var progressNode = props.GetScalarProperty("progress");
var clampSizeNode = props.GetScalarProperty("clampSize");
var scaleFactorNode = props.GetScalarProperty("scaleFactor");
// Create and start an ExpressionAnimation to track scroll progress over the desired distance
ExpressionNode progressAnimation = EF.Clamp(-scrollingProperties.Translation.Y / clampSizeNode, 0, 1);
_props.StartAnimation("progress", progressAnimation);
// Get the backing visual for the header so that its properties can be animated
Visual headerVisual = ElementCompositionPreview.GetElementVisual(CollapsiblePageHeader);
// Create and start an ExpressionAnimation to clamp the header's offset to keep it onscreen
ExpressionNode headerTranslationAnimation = EF.Conditional(progressNode < 1, 0, -scrollingProperties.Translation.Y - clampSizeNode);
// Works fine
headerVisual.StartAnimation("Offset.Y", headerTranslationAnimation);
ExpressionNode headerScaleAnimation = EF.Lerp(1, 1.25f, EF.Clamp(scrollingProperties.Translation.Y / 50, 0, 1));
// Exception here
headerVisual.StartAnimation("Scale.X", headerScaleAnimation);
headerVisual.StartAnimation("Scale.Y", headerScaleAnimation);
//Set the header's CenterPoint to ensure the overpan scale looks as desired
headerVisual.CenterPoint = new Vector3((float)(CollapsiblePageHeader.ActualWidth / 2), (float)CollapsiblePageHeader.ActualHeight, 0);
// Create and start an ExpressionAnimation to scale the profile image with scroll position
ExpressionNode scaleAnimation = EF.Lerp(1, scaleFactorNode, progressNode);
// Get backing visuals for the text blocks so that their properties can be animated
Visual titleVisual = ElementCompositionPreview.GetElementVisual(TitleText);
Visual titleImageVisual = ElementCompositionPreview.GetElementVisual(TitleImage);
Visual subtitleVisual = ElementCompositionPreview.GetElementVisual(SubtitleText);
Visual subtitleImageVisual = ElementCompositionPreview.GetElementVisual(SubtitleImage);
// Create an ExpressionAnimation that moves between 1 and 0 with scroll progress, to be used for text block opacity
ExpressionNode textOpacityAnimation = EF.Clamp(1 - (progressNode * 2), 0, 1);
// Start opacity and scale animations on the text block visuals
titleVisual.StartAnimation("Scale.X", scaleAnimation);
titleVisual.StartAnimation("Scale.Y", scaleAnimation);
titleImageVisual.StartAnimation("Scale.X", scaleAnimation);
titleImageVisual.StartAnimation("Scale.Y", scaleAnimation);
subtitleVisual.StartAnimation("Opacity", textOpacityAnimation);
subtitleVisual.StartAnimation("Scale.X", scaleAnimation);
subtitleVisual.StartAnimation("Scale.Y", scaleAnimation);
subtitleImageVisual.StartAnimation("Opacity", textOpacityAnimation);
subtitleImageVisual.StartAnimation("Scale.X", scaleAnimation);
subtitleImageVisual.StartAnimation("Scale.Y", scaleAnimation);
// Get the backing visuals for the text and button containers so that their properites can be animated
Visual subtitleContainerVisual = ElementCompositionPreview.GetElementVisual(SubtitleContainer);
// When the header stops scrolling it is 150 pixels offscreen. We want the text header to end up with 50 pixels of its content
// offscreen which means it needs to go from offset 0 to 100 as we traverse through the scrollable region
ExpressionNode contentOffsetAnimation = progressNode * 100;
subtitleContainerVisual.StartAnimation("Offset.Y", contentOffsetAnimation);
}
1 个答案:
答案 0 :(得分：2)
如果您的最低目标版本是周年纪念更新，则可以在没有社区工具包的情况下轻松完成此操作。考虑到这一点，让我们带您完成解决方案。
- 您需要参考WindowsDevLabs的GitHub存储库。你可以找到它here。
- 现在，一旦您下载了回购，请将Expression Builder项目添加到您的解决方案中。你已经全部准备好了。
- 现在，对于最后一部分，只需在示例部分下载的Repo中查找＆＃34;缩小标题＆＃34;
page并从codeBehind复制粘贴代码并制作您的UI和代码背后的必要更改引用了＃34;收缩标题中的Desinger和Code Behind＆＃34;下载回购的页面。
请注意：您可以在商店的链接上看到商店中有关同一个回购的有效应用：Windows Dev Labs UI App
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？