在触屏设备上,手指滑动页面,或者单击导航选项时,增加导航下横线滑动的效果: 这个版本有点简单粗暴,同事在项目中优化了一下算法。这里只是简单记录一下大致思路: 1、导航使用 ListView 控件,下面使用 Pivot 控件 大致结构为: 页面中的 ListView: ...
在触屏设备上,手指滑动页面,或者单击导航选项时,增加导航下横线滑动的效果:
这个版本有点简单粗暴,同事在项目中优化了一下算法。这里只是简单记录一下大致思路:
1、导航使用 ListView 控件,下面使用 Pivot 控件
大致结构为:
页面中的 ListView:
<ListView x:Name="listview" VerticalAlignment="Top" Margin="0,40,0,0" Background="White" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollMode="Disabled" SelectionChanged="listView_SelectionChanged"> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListViewItem"> <!--选中色设置为 红色--> <ListViewItemPresenter CheckBrush="{x:Null}" ContentMargin="{TemplateBinding Padding}" CheckMode="Inline" ContentTransitions="{x:Null}" CheckBoxBrush="{x:Null}" DragForeground="{x:Null}" DragOpacity="0" DragBackground="{x:Null}" DisabledOpacity="0" FocusBorderBrush="{x:Null}" FocusSecondaryBorderBrush="{x:Null}" HorizontalContentAlignment="Center" PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" PressedBackground="{x:Null}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{x:Null}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectionCheckMarkVisualEnabled="True" SelectedForeground="Red" SelectedPointerOverBackground="{x:Null}" SelectedBackground="{x:Null}" VerticalContentAlignment="Center" SelectedPressedBackground="{x:Null}" Foreground="Black"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListView.ItemContainerStyle> <ListView.ItemsPanel> <ItemsPanelTemplate> <ItemsStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ListView.ItemsPanel> <ListView.ItemTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <TextBlock Text="{Binding Text}" FontSize="20" Margin="20,10"/> <!--作为位移指示条--> <Rectangle x:Name="rect" Fill="Red" Height="2" HorizontalAlignment="Stretch" Grid.Row="1" Opacity="0" Loaded="rect_Loaded"> <Rectangle.RenderTransform> <CompositeTransform/> </Rectangle.RenderTransform> </Rectangle> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>
原标题:15、导航滑动动画
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。