正是我们在网格里面能够拖动的分隔线,首要说说 Thumb

  DragCompleted 拖动截止后发出。

那五个事件怎么用吧?能够这么想象一下,起首拖动时把控件变成羊毛白,在拖动进度中改变控件的职位(前面说了,它私下认可不做别的动作,所以要手动处理),当成功后把外观恢复生机,那样就因此了那多个事件。

 

private void Thumb_DragDelta(object sender,
System.Windows.Controls.Primitives.DragDelta伊夫ntArgs e) { Thumb myThumb
= (Thumb)sender; double nTop = Canvas.GetTop(myThumb) +
e.VerticalChange; double nLeft = Canvas.GetLeft(myThumb) +
e.HorizontalChange; //幸免Thumb控件被拖出容器。 if (nTop <= 0) nTop =
0; if (nTop >= (g.Height – myThumb.Height)) nTop = g.Height –
myThumb.Height; if (nLeft <= 0) nLeft = 0; if (nLeft >= (g.Width –
myThumb.Width)) nLeft = g.Width – myThumb.Width; Canvas.SetTop(myThumb,
nTop); Canvas.SetLeft(myThumb, nLeft); tt.Text = “Top:” +
nTop.ToString() + “\nLeft:” + nLeft.ToString(); }

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

往深一层想,它是什么样?对,正是我们常见的滚动条里面包车型客车滑块,就是大家在网格里面能够拖动的分隔线,就是窗口右下角用于通过拖动来改变窗口大小的小东西。

  小编有3个 SplitView “RootSplitView”,作为奥克兰菜单的器皿。

<Window.Resources> <ControlTemplate x:Key=”ct”
TargetType=”{x:Type Thumb}”> <Grid x:Name=”bg”>
<Grid.Background> <LinearGradientBrush StartPoint=”0.2,0″
EndPoint=”0.77,0.9″> <GradientStop Color=”#aa0311″
Offset=”0.1″/> <GradientStop Color=”#cccccc” Offset=”0.62″/>
<GradientStop Color=”#82C3FF” Offset=”0.89″/>
</LinearGradientBrush> </Grid.Background> </Grid>
<ControlTemplate.Triggers> <Trigger Property=”IsDragging”
Value=”True”> <Setter TargetName=”bg” Property=”Background”
Value=”Gray”/> </Trigger> </ControlTemplate.Triggers>
</ControlTemplate> </Window.Resources> <Canvas x:Name=”g”
Width=”300″ Height=”300″ Margin=”0,0″> <Thumb Canvas.Top=”0″
Canvas.Left=”0″ Width=”35″ Height=”35″ Template=”{StaticResource ct}”
DragDelta=”Thumb_DragDelta”/> <TextBlock Canvas.Top=”2″
Canvas.Left=”2″ x:Name=”tt” FontSize=”24″ ></TextBlock>
</Canvas>

<Style x:Key="ThumbStyle1" TargetType="Thumb">
            <Setter Property="Background" Value="Transparent"/>
            <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 x:Name="RootGrid">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle RadiusY="25" RadiusX="25" Fill="Gray" Opacity="0.6" Stroke="{ThemeResource SystemControlBackgroundAccentBrush}" StrokeThickness="3" />
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE700;" FontSize="22" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                            <Border x:Name="BackgroundPointerOver" BorderBrush="{ThemeResource ThumbBorderBrushPointerOver}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Opacity="0"/>
                            <Border x:Name="BackgroundPressed" BorderBrush="{ThemeResource ThumbBorderBrushPressed}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

然则,笔者在这些例子中,使用了控件模板的触 发器,这样更有利一点。

  DragStarted 和字面意思差不多,起始拖动的时候产生的。

把Thumb放到三个Canvas中,因为它是绝无仅有三个是相对定位的控件,接着大家为Thumb定义模板,弄美丽一点。

  不谈什么性质和艺术,大多数都以往续的。主要说说 Thumb
的原惹祸件 DragStartedDragDeltaDragCompleted

DragCompleted——不用说,这一个一定是在拖动操作甘休后产生。

  那时设计器右下角应该出现了三个肆方,但它不是本人急需的圈子,上边打开
Blend 实行体制定制(前边讲 横向ListView 时提过)。私下认可的 Thumb
样式如下。

图片 1

图片 2

 

private void MainThumb_DragDelta(object sender, DragDeltaEventArgs e)
{
  // 两个 double 类型,用来记录偏移量
  thumbX += e.HorizontalChange;
  thumbY += e.VerticalChange;

  MainThumb.Margin = new Thickness(0, 0, -thumbX, -thumbY);
}

DragStarted——当您在它上边按下鼠标左键,开首拖动时发出;

  上边就来仿制一个足以拖动的圈子 Button,像 三星手提式有线电电话机的“小圆点”一样(像下图壹律),只可是成效单1,仅仅用来开辟 MainPage
里的达拉斯菜单。本文仿制 Button 的时候只供给 DragDelta 事件。

 

  

代码不是很复杂,笔者就不多解释了,首如若处理预防把Thumb拖出大家看得出边沿,不然的话,就拖不回来了。

  那时,设计器里应该出现了那么些玩意儿(得意~~~)

Thumb的中坚事件有:

  DragDelta 拖动实行中,只要你鼠标不放就会一贯进展。

 

  首先必要在适合的页面敲上一个 <Thumb />,给它个
Name=”RootThumb”,笔者是把它位于页面右下角的。

抑或用一个事例来证实呢,然而,照旧先说一下主要的事物。

  上面说说拖动怎么落到实处,供给编写制定 DragDelta 事件。由于 Win10设备系统庞大,UWP 上谈控件坐标没啥意思,那也正是 WPF
上的控件拖动方案没用的缘由。若是您在设计器里像 WinForm
壹样拖拽控件设计布局的话,xaml 会给被拖拽的控件三个 Margin,因而 Thumb
的拖拽实现也用的 Margin。首先你须求定义多少个 double 私有字段记录 X, Y
轴的位移量。设计目标是 Thumb
在右下角,而页面包车型地铁坐标零点在左上角,只须要将 Thumb 的 Margin 的
Right,Bottom 给2个位移量的负值即可。完整代码如下。

请看演示

  完结非常的粗略,笔者就不写示例了。

DragDelta——只要您的拖动仍在操作(没放手鼠标左键),它就会持续地发生;

  关于 Thumb 控件的学科也不多,毕竟在 WPF 控件拖动有很多样措施, Thumb
就呈现很鸡肋了。上边作者就归纳的说说。(MSDN
文档

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">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                            <Border x:Name="BackgroundPointerOver" BorderBrush="{ThemeResource ThumbBorderBrushPointerOver}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource ThumbBackgroundPointerOver}" Opacity="0"/>
                            <Border x:Name="BackgroundPressed" BorderBrush="{ThemeResource ThumbBorderBrushPressed}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource ThumbBackgroundPressed}" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

  在 WPF 上可用的控件拖动方法在 UWP 上基本上没用,那差不离用 Thumb
仿制二个吧。

 

  Button 的 Click 事件怎么落到实处吗?有 PointerPressed 和 Tapped
八个备选事件。未来的交互事件有二种:Mouse 伊芙nts(鼠标事件),Touch
伊芙nts(触摸事件)和 Pointer
伊芙nts(指针事件),分别为差异的装备提供不一样的交互格局。说那样多废话其实平素尝试就好了。。。在
Thumb 的 xml 标记里添加 Tapped=”RootThumb_Tapped”,事件代码如下

 

  这样,多个圆形的可拖动 Button 就用 Thumb 仿制成功了。

 

图片 3

 

  因为急需三个圆形并且在这之中有个埃及开罗菜单的图标的仿制
Button,我们要求在暗中同意样式提过的 RootGrid 里画个圆,顺便来个 TextBlock
用来显示秘Luli马菜单的图标。定制好的样式如下。

下一场,在后台处监护人件

private void MainThumb_Tapped(object sender, TappedRoutedEventArgs e)
{
  RootSplitView.IsPaneOpen = !RootSplitView.IsPaneOpen;
}

其壹控件,真不佳介绍,MSDN上也是魂飞魄散几句,反正便是足以让用户拖动的玩意儿,可是,你会意识,当你在该控件上拖动时,它从不影响,也正是说那些东西暗中认可不做其它操作的,它是赖在那里什么都不干,除非您去踢上脚。

 

 

还要,那些控件就好像二个4方鸭,你踢一脚它就前进一步,你不踢,它又在那边尸位素餐,什么都不干了。

相关文章