张高兴的 UWP 开发笔记：用 Thumb 控件仿制一个可拖动 Button

　　在 WPF 上可用的控件拖动方法在 UWP 上大多没用，那干脆用 Thumb 仿制一个吧。

　　关于 Thumb 控件的教程也不多，毕竟在 WPF 控件拖动有很多种方法， Thumb 就显得很鸡肋了。下面我就简单的说说。（MSDN 文档）

　　不谈什么属性和方法，大多数都是继承的。主要说说 Thumb 的原生事件 DragStarted，DragDelta，DragCompleted。

　　DragStarted 和字面意思差不多，开始拖动的时候发生的。

　　DragDelta 拖动进行中，只要你鼠标不放就会一直进行。

　　DragCompleted 拖动结束后发生。

 

　　下面就来仿制一个可以拖动的圆形 Button，像 IPhone 的“小圆点”一样（像下图一样），只不过功能单一，仅仅用来打开 MainPage 里的汉堡菜单。本文仿制 Button 的时候只需要 DragDelta 事件。

　　实现很简单，我就不写示例了。

　　我有一个 SplitView “RootSplitView”，作为汉堡菜单的容器。

　　首先需要在合适的页面敲上一个 <Thumb />，给它个 Name="RootThumb"，我是把它放在页面右下角的。

<Thumb Name="RootThumb" Height="55" Width="55" HorizontalAlignment="Right" VerticalAlignment="Bottom" Canvas.ZIndex="101" />

　　这时设计器右下角应该出现了一个方块，但它不是我需要的圆形，下面打开 Blend 进行样式定制（前面讲 横向ListView 时提过）。默认的 Thumb 样式如下。

<Style x:Key="ThumbStyle1" TargetType="Thumb">
            <Setter Property="Background" Value="{ThemeResource ThumbBackground}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="BorderBrush" Value="{ThemeResource ThumbBorderBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver">