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 ...

随机推荐

JavaScript 消息框
警告框 alert(); 确认框 var message=confirm("你喜欢javascript吗"); if(message==true){ document.write( ...
css—各浏览器下的背景色渐变
.linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0 ...
spring4+hibernate4+struts2环境搭建
tomact配置请查看下面的文章 javaEE_maven_struts2_tomcat_first http://www.cnblogs.com/luotuoke/p/4543686.html po ...
webstorm主题网址
http://www.phpstorm-themes.com/ http://www.riaway.com/theme.php
python django整理（五）配置favicon.ico，解决警告Not Found: /favicon.ico(转载)
版权声明:本文为博主原创文章,欢迎交流分享,未经博主允许不得转载. https://blog.csdn.net/HHTNAN/article/details/78549561 Django 浏览器打开 ...
Docker镜像的备份和恢复
备份: docker save -o [tar包真实路径] [镜像名 ] 如:docker save -o /usr/docker_data/mongo-backup.tar mongo 导出: ...
实现路由器自动登录校园网(edu)
准备工作: (1)一个可以刷openwrt固件的路由器,如大多人使用的crazybox版本的路由. (2)一个可用的edu账号. (3)一个浏览器(firfox,chrome) 下面开始: 一:刷op ...
Hbash语句
下面我们看看HBase Shell的一些基本操作命令,我列出了几个常用的HBase Shell命令,如下: 名称命令表达式创建表 create '表名称', '列名称1','列名称2','列名 ...
ElasticSearch 深度分页解决方案
常见深度分页方式 from+size 另一种分页方式 scroll scroll + scan search_after 的方式 es 库 scroll search 的实现常见深度分页方式 fro ...
Qt Quick 之 QML 与 C++ 混合编程具体解释
Qt Quick 技术的引入.使得你能够高速构建 UI ,具有动画.各种绚丽效果的 UI 都不在话下.但它不是万能的.也有非常多局限性,原来 Qt 的一些技术,比方低阶的网络编程如 QTcpSocke ...

Win10 UI入门 导航滑动条 求UWP工作

Win10 UI入门 导航滑动条 求UWP工作的更多相关文章

随机推荐

热门专题

Win10 UI入门导航滑动条求UWP工作

Win10 UI入门导航滑动条求UWP工作的更多相关文章