你的位置:首页 > 软件开发 > ASP.net > 15、导航滑动动画

15、导航滑动动画

发布时间:2016-07-10 14:00:06
在触屏设备上,手指滑动页面,或者单击导航选项时,增加导航下横线滑动的效果:  这个版本有点简单粗暴,同事在项目中优化了一下算法。这里只是简单记录一下大致思路: 1、导航使用 ListView 控件,下面使用 Pivot 控件   大致结构为: 页面中的 ListView: ...

 

  在触屏设备上,手指滑动页面,或者单击导航选项时,增加导航下横线滑动的效果:

15、导航滑动动画

  这个版本有点简单粗暴,同事在项目中优化了一下算法。这里只是简单记录一下大致思路:

 

1、导航使用 ListView 控件,下面使用 Pivot 控件

  大致结构为:

15、导航滑动动画

 

页面中的 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 (#换成@)。

可能感兴趣文章

我的浏览记录