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实现

            
                
                    "Auto" />
                    "*" />
                
                "PART_ListViewStateName" Background="RoyalBlue" Padding="0" Margin="0" BorderThickness="0"
                                            ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                                            ScrollViewer.HorizontalScrollMode="Enabled" 
                                            ScrollViewer.VerticalScrollBarVisibility="Disabled" 
                                            ScrollViewer.VerticalScrollMode="Disabled" ItemHeight="45"
                                            ItemTemplate="{StaticResource DT_Pivot}"
                                            ItemsSource="{Binding MyItemSources}">
                    
                        
                    
                
                "PART_RectStateName" Fill="Red"  Height="2" Width="130" Grid.Row="1" Opacity="1" Margin="0,-2,0,0" HorizontalAlignment="Left" >
                    
                        
                    
                
            

基本实现思路是

初始化的时候 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