Win10 UI入门 导航滑动条 求UWP工作
借鉴了 段博琼 大哥写的导航滑动，自己实现了一个类似安卓 IOS 导航滑动条
支持等比例 分割 tabView 支持动画滑动
效果如下图
WYGrid 你可以想象一个GridView itemsWrapGridPanel.Orientation = Orientation.Vertical; 垂直方向的控件 自定义一个项高 ItemHeight 并绑定到最高属性
var itemsWrapGridPanel = ItemsPanelRoot as ItemsWrapGrid;
var b = new Binding()
{
Source = this,
Path = new PropertyPath("ItemHeight")
};
if (itemsWrapGridPanel != null)
{
itemsWrapGridPanel.Orientation = Orientation.Vertical;
}
this.SetBinding(MaxHeightProperty, b);
容器样式来自于 GridViewItem styles and templates
xaml实现
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ctl:WYGrid x:Name="PART_ListViewStateName" Background="RoyalBlue" Padding="" Margin="" BorderThickness=""
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled" ItemHeight=""
ItemTemplate="{StaticResource DT_Pivot}"
ItemsSource="{Binding MyItemSources}">
<ctl:WYGrid.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="" />
<Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}" />
<Setter Property="AllowDrop" Value="False" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="-2" />
<Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource SystemControlFocusVisualPrimaryBrush}" />
<Setter Property="FocusVisualPrimaryThickness" Value="" />
<Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource SystemControlFocusVisualSecondaryBrush}" />
<Setter Property="FocusVisualSecondaryThickness" Value="" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Grid x:Name="ContentBorder"
Control.IsTemplateFocusTarget="True"
BorderThickness=""
RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<ScaleTransform x:Name="ContentBorderScale" />
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
<DiscreteObjectKeyFrame KeyTime="" Value="" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
<DiscreteObjectKeyFrame KeyTime="" Value="" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
<DiscreteObjectKeyFrame KeyTime="" Value="" />
</ObjectAnimationUsingKeyFrames> <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
<DiscreteObjectKeyFrame KeyTime="" Value="" />
</ObjectAnimationUsingKeyFrames> <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="PressedSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
<DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
<DiscreteObjectKeyFrame KeyTime="" Value="" />
</ObjectAnimationUsingKeyFrames> <PointerDownThemeAnimation TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ContentBorder"
Storyboard.TargetProperty="Opacity"
Duration=""
To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
Background="SkyBlue" FontSize="" Margin="0,10,0,10"/>
<Rectangle x:Name="PlaceholderRect" Visibility="Visible" Fill="Red" Height="" Width="" VerticalAlignment="Bottom"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ctl:WYGrid.ItemContainerStyle>
</ctl:WYGrid>
<Rectangle x:Name="PART_RectStateName" Fill="Red" Height="" Width="" Grid.Row="" Opacity="" Margin="0,-2,0,0" HorizontalAlignment="Left" >
<Rectangle.RenderTransform>
<TranslateTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
基本实现思路是
初始化的时候 PivotItemLoading 来初始化导航条的位置
PART_RectStateName 显示动画 透明为1， gridview 里面的 PlaceholderRect 透明 为0 当点击的时候 SelectionChanged 被call 查找ContentPresenter 和 Rectangle 来确定位置和宽度，启动动画，之后让
PART_RectStateName 显示动画 透明为0， gridview 里面的 PlaceholderRect 透明 为1 下面是动画的代码，思路清楚了接下来很快就做好了。
private Storyboard StoryBordTemp(double formW, double toW, Point newPoint, Point oldPoint)
{
var storyBoard = new Storyboard();
var extendAnimation = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(0.5)), From = formW, To = toW, EnableDependentAnimation = true };
QuarticEase easing = new QuarticEase();
easing.EasingMode = EasingMode.EaseOut;
easing.Ease(0.3);
extendAnimation.EasingFunction = easing; Storyboard.SetTarget(extendAnimation, _rectangle);
Storyboard.SetTargetProperty(extendAnimation, "Width"); var xAnimation = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(0.5)), From = newPoint.X, To = oldPoint.X, EnableDependentAnimation = true };
QuarticEase xEasing = new QuarticEase();
xEasing.EasingMode = EasingMode.EaseOut;
xEasing.Ease(0.3);
xAnimation.EasingFunction = xEasing; Storyboard.SetTarget(xAnimation, _rectangle);
Storyboard.SetTargetProperty(xAnimation, "(UIElement.RenderTransform).(TranslateTransform.X)"); storyBoard.Children.Add(extendAnimation);
storyBoard.Children.Add(xAnimation);
storyBoard.Begin();
return storyBoard;
}
详情请查看 https://github.com/androllen/CCUWPToolkit
Win10 UI入门 导航滑动条 求UWP工作的更多相关文章
- Win10 UI入门 SliderRectangle
看了@段博琼大哥导航滑动的思路,自己又做了一个类似与黄油相机里面的一个功能 <Grid x:Name="> <Grid.ColumnDefinitions> < ...
- Win10 UI入门窗口由默认500px to 320px
https://code.msdn.microsoft.com/Layout-for-windows-that-ba648e1c/ https://msdn.microsoft.com/library ...
- Win10 UI入门 pivot multiable DataTemplate
this is a dynamic pivot with sliderable navigation and multiableDatatemplate Control 看了 alexis 大哥的pi ...
- Win10 UI入门 圆形控件
动态模版绑定 http://blog.csdn.net/XXChen2/article/details/4552554
- Win10 UI入门RelativePanel(2)
自适应 1) Gif: 添加动画 2)
- Win10 UI入门 RenderTransform属性分析之Translate 平移变形
对齐方式是中心底部对齐: HorizontalAlignment="Center" VerticalAlignment="Bottom" 以底部边为起始线,向上 ...
- Win10 UI入门RelativePanel
<RelativePanel Background="Black" > <Rectangle x:Name=" RelativePanel.AlignH ...
- UWP Control Toolkit Collections 求UWP工作
1. it is like wechat wait-sliderdeleteitem in iOS 看起来比较像微信删掉项 now support listview and gridview in C ...
- IOS开发－UI学习－UISlider（滑动条）的使用
滑动条即UISlider,是我们常见的软件中设置音量,亮度等的滑条,初始化及基本设置如下: // 新建滑动条 UISlider *slider = [[UISlider alloc]initWithF ...
随机推荐
- CorelDRAW三十周年庆典暨2019新耀发布会，诚邀您的莅临！
30年时光荏苒!眨眼风惊雨过. 在1989年的春天,CorelDRAW 1.0正式发布,一经面世就掀起了图形设计行业革命浪潮,这个图形工具不仅给设计师提供了矢量图像.页面设计,更能应用于网站制作.位图 ...
- switch 语句来选择要执行的多个代码块之一。
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码 }
- Python内置数据结构之元组tuple
1. Python序列之元组:不可修改的序列 元组其实跟列表差不多,也是存一组数,只不是它一旦创建,便不能像列表式的增删改,只能查,切片,所以元组又叫只读列表. 元组用圆括号括起(这是通常采用的做法) ...
- python之异常处理模块
一 . python 内置的异常类 在程序运行过程中,如果出现错误,python解释器会创建一个异常对象,并抛出给系统运行时.即程序终止正常执行流程,转而执行异常处理流程. 在某种特殊条件下,代码中也 ...
- [JoyOI] 1035 棋盘覆盖 （二分图匹配）
题目描述 给出一张nn(n<=100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少12的多米诺骨牌进行掩盖. 输入格式 第一行为n,m(表示有m个删除的格子) 第二行到m+1行为x,y,分 ...
- P1546 最短网络 Agri-Net （kruskal）
题目背景 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 题目描述 约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享给其 ...
- 02.OOP面向对象-2.例子
class clothes: #初始化属性 def __init__(self,name,color): self.name = name self.color = color #转字符串 def _ ...
- 《你又怎么了我错了行了吧》【Alpha】Scrum meeting 5
第五天 日期:2019/6/18 前言: 第5次会议在女生宿舍召开 冲刺第5天,对所有工作做了总结.继续完善编码工作. 1.1 今日完成任务情况以及明天任务安排 姓名 当前阶段任务 下一阶段任务 刘 ...
- 邓_ php SESSION
学会php session可以在很多地方使用,比如做一个后台登录的功能,要让程序记住用户的session,其实很简单,看了下面的文章你就明白了. PHP session用法其实很简单它可以把用户提交的 ...
- 阻止a标签跳页，使用单击事件函数处理该请求
阻止a标签跳页href="javascript:void(0)" 单击该标签时 页面不跳页 使用单击事件函数来处理该单击请求 返回上一层页面 ---------------- ...