[WPF] [AMindMap] 开发手记-3 （UI ANode的状态动画）

上回说道，ANode的外观绘制，今天继续动画部分。

我对ANode的各个状态做了一个小总结

ANode 的 状态

ANode 的 状态

1.普通状态（NormalStatus） 2.选中状态（SelectedStatus） 3.编辑状态（EditStatus） 4.拖动状态（DragStatus）

基本动画

针对于这几个状态之间的变换，我采用动画的方式，逐一介绍

在介绍我们设定的各种状态前，让我们看看具体都涉及哪些动画。

动画直接写Xaml

1 <!--边框变为1--> 2 <ThicknessAnimationUsingKeyFrames 3 Storyboard.TargetProperty="(Border.BorderThickness)" 4 Storyboard.TargetName="NodeBorder"> 5 <EasingThicknessKeyFrame KeyTime="0" Value="1"/> 6 </ThicknessAnimationUsingKeyFrames>

ANode边框变小

1 <!--边框阴影变为5--> 2 <DoubleAnimationUsingKeyFrames 3 Storyboard.TargetProperty="(UIElement.Effect) 4 .(DropShadowEffect.BlurRadius)" 5 Storyboard.TargetName="NodeBackground"> 6 <EasingDoubleKeyFrame KeyTime="0" Value="5"/> 7 </DoubleAnimationUsingKeyFrames>

阴影缩小为5

1 <!--输入框隐藏--> 2 <DoubleAnimationUsingKeyFrames 3 Storyboard.TargetProperty="(UIElement.Opacity)" 4 Storyboard.TargetName="NodeTextInput"> 5 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 6 </DoubleAnimationUsingKeyFrames>

输入文本框隐藏

1 <!--创建工具栏隐藏--> 2 <DoubleAnimationUsingKeyFrames 3 Storyboard.TargetProperty="(UIElement.Opacity)" 4 Storyboard.TargetName="NewFriend"> 5 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 6 </DoubleAnimationUsingKeyFrames> 7 <DoubleAnimationUsingKeyFrames 8 Storyboard.TargetProperty="(UIElement.Opacity)" 9 Storyboard.TargetName="NewSubNode"> 10 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 11 </DoubleAnimationUsingKeyFrames>

工具栏隐藏

这里所用的隐藏，并不是设置Visible，而是将透明度变为0，只写一个KeyTime，

即可在任何状态下直接变成你想要的状态。

动画 的 组合

大概，需要的动画，就差不多写完了，在不同的状态下，只要改变参数就可以了。

现在将这些动画，分配给各个状态。在我们想要ANode变成什么状态时，就播放相应的动画。

现在就开始设置各个状态的动画面板（StoryBoard）

1.普通状态

，普通状态下，控件边框缩小为1，阴影也缩小为5，隐藏工具栏等

1 <!--正常状态--> 2 <Storyboard x:Key="NormalStatus"> 3 <!--边框变为1--> 4 <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="NodeBorder"> 5 <EasingThicknessKeyFrame KeyTime="0" Value="1"/> 6 </ThicknessAnimationUsingKeyFrames> 7 <!--边框阴影变为5--> 8 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="NodeBackground"> 9 <EasingDoubleKeyFrame KeyTime="0" Value="5"/> 10 </DoubleAnimationUsingKeyFrames> 11 <!--输入框隐藏--> 12 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 13 Storyboard.TargetName="NodeTextInput"> 14 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 15 </DoubleAnimationUsingKeyFrames> 16 <!--创建工具栏隐藏--> 17 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 18 Storyboard.TargetName="NewFriend"> 19 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 20 </DoubleAnimationUsingKeyFrames> 21 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 22 Storyboard.TargetName="NewSubNode"> 23 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 24 </DoubleAnimationUsingKeyFrames> 25 </Storyboard>

2.选中状态：边框 4 阴影 10 工具栏出现

1 <!--选中状态--> 2 <Storyboard x:Key="SelectedStatus"> 3 <!--边框变为4--> 4 <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" 5 Storyboard.TargetName="NodeBorder"> 6 <EasingThicknessKeyFrame KeyTime="0" Value="4"/> 7 </ThicknessAnimationUsingKeyFrames> 8 <!--边框阴影变为10--> 9 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" 10 Storyboard.TargetName="NodeBackground"> 11 <EasingDoubleKeyFrame KeyTime="0" Value="10"/> 12 </DoubleAnimationUsingKeyFrames> 13 <!--输入框隐藏--> 14 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 15 Storyboard.TargetName="NodeTextInput"> 16 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 17 </DoubleAnimationUsingKeyFrames> 18 <!--创建工具栏显现--> 19 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 20 Storyboard.TargetName="NewFriend"> 21 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/> 22 </DoubleAnimationUsingKeyFrames> 23 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 24 Storyboard.TargetName="NewSubNode"> 25 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/> 26 </DoubleAnimationUsingKeyFrames> 27 </Storyboard>

3.编辑状态：边框 4 阴影 10 隐藏工具栏 显示输入框

1 <!--编辑状态--> 2 <Storyboard x:Key="EditStatus"> 3 <!--鼠标变为手--> 4 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="ANodeObject"> 5 <DiscreteObjectKeyFrame KeyTime="0"> 6 <DiscreteObjectKeyFrame.Value> 7 <Cursor>Hand</Cursor> 8 </DiscreteObjectKeyFrame.Value> 9 </DiscreteObjectKeyFrame> 10 </ObjectAnimationUsingKeyFrames> 11 <!--边框变为4--> 12 <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" 13 Storyboard.TargetName="NodeBorder"> 14 <EasingThicknessKeyFrame KeyTime="0" Value="4"/> 15 </ThicknessAnimationUsingKeyFrames> 16 <!--边框阴影变为10--> 17 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" 18 Storyboard.TargetName="NodeBackground"> 19 <EasingDoubleKeyFrame KeyTime="0" Value="10"/> 20 </DoubleAnimationUsingKeyFrames> 21 <!--输入框显现--> 22 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 23 Storyboard.TargetName="NodeTextInput"> 24 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/> 25 </DoubleAnimationUsingKeyFrames> 26 <!--创建工具栏隐藏--> 27 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 28 Storyboard.TargetName="NewFriend"> 29 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 30 </DoubleAnimationUsingKeyFrames> 31 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 32 Storyboard.TargetName="NewSubNode"> 33 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 34 </DoubleAnimationUsingKeyFrames> 35 </Storyboard>

4.拖动状态：比选中状态少一个工具栏而已

1 <!--拖动状态--> 2 <Storyboard x:Key="DragStatus"> 3 <!--鼠标变为移动--> 4 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="ANodeObject"> 5 <DiscreteObjectKeyFrame KeyTime="0"> 6 <DiscreteObjectKeyFrame.Value> 7 <Cursor>SizeAll</Cursor> 8 </DiscreteObjectKeyFrame.Value> 9 </DiscreteObjectKeyFrame> 10 </ObjectAnimationUsingKeyFrames> 11 <!--边框变为4--> 12 <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="NodeBorder"> 13 <EasingThicknessKeyFrame KeyTime="0" Value="4"/> 14 </ThicknessAnimationUsingKeyFrames> 15 <!--边框阴影变为10--> 16 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="NodeBackground"> 17 <EasingDoubleKeyFrame KeyTime="0" Value="10"/> 18 </DoubleAnimationUsingKeyFrames> 19 <!--输入框隐藏--> 20 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 21 Storyboard.TargetName="NodeTextInput"> 22 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 23 </DoubleAnimationUsingKeyFrames> 24 <!--创建工具栏隐藏--> 25 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 26 Storyboard.TargetName="NewFriend"> 27 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 28 </DoubleAnimationUsingKeyFrames> 29 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 30 Storyboard.TargetName="NewSubNode"> 31 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 32 </DoubleAnimationUsingKeyFrames> 33 </Storyboard>

这样，状态动画就做完了，放在<UserControl.Resources>中，作为动画资源，等待调用。

下面，这些状态的触发，可以在Xaml中设置，也可以在代码中启动，将不需要在代码中启动

的动画添加到触发器<UserControl.Triggers>当中。

1 <UserControl.Triggers> 2 <!--启动时设置为正常状态--> 3 <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 4 <BeginStoryboard x:Name="OnLoaded_BeginStoryboard" 5 Storyboard="{StaticResource NormalStatus}"/> 6 </EventTrigger> 7 <!--鼠标在NodeText上抬起时设置为编辑状态--> 8 <EventTrigger RoutedEvent="Mouse.PreviewMouseUp" SourceName="NodeTextInput"> 9 <BeginStoryboard x:Name="EditStatus_BeginStoryboard" 10 Storyboard="{StaticResource EditStatus}"/> 11 </EventTrigger> 12 <!--NodeTextInput失去焦点时，变成普通状态--> 13 <EventTrigger RoutedEvent="Keyboard.LostKeyboardFocus" SourceName="NodeTextInput"> 14 <BeginStoryboard Storyboard="{StaticResource NormalStatus}"/> 15 </EventTrigger> 16 </UserControl.Triggers>

其实最后一个失去焦点的动画，可以不写在Xaml中，因为，ANode失去焦点有几种情况，

主要发生在UI的事件中。

完整 的 代码

那么，目前的ANode Xaml部分就介绍完了，如果后续有需要，可以继续在这个结构基础上

添加即可。

贴一个完整的代码。

1 <UserControl x:Class="ANode" x:Name="ANodeObject" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" Cursor="Hand" 6 > 7 <UserControl.Resources> 8 <DrawingBrush x:Key="NewFriendSource" Stretch="None"> 9 <DrawingBrush.Drawing> 10 <DrawingGroup> 11 <DrawingGroup.Children> 12 <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 17.5914,16.3333L 2.25811,16.3333C 1.56327,16.3333 0.999996,15.6636 0.999996,14.8374L 0.999996,2.49591C 0.999996,1.66974 1.56327,1 2.25811,1L 17.5914,1L 24,8.71332L 17.5914,16.3333 Z "> 13 <GeometryDrawing.Pen> 14 <Pen Thickness="1" LineJoin="Round" Brush="#FFBCBCB3"/> 15 </GeometryDrawing.Pen> 16 </GeometryDrawing> 17 <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 6.66936,7.17059L 11.0569,7.17059C 12.1615,7.17059 13.0569,8.06598 13.0569,9.17059L 13.0569,12.1517C 13.0569,13.2563 12.1615,14.1517 11.0569,14.1517L 6.66936,14.1517C 5.56479,14.1517 4.66936,13.2563 4.66936,12.1517L 4.66936,9.17059C 4.66936,8.06598 5.56479,7.17059 6.66936,7.17059 Z "> 18 <GeometryDrawing.Pen> 19 <Pen LineJoin="Round" Brush="#FFA9A9A6"/> 20 </GeometryDrawing.Pen> 21 </GeometryDrawing> 22 <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 8.02445,7.17059L 4.4598,2.93213"> 23 <GeometryDrawing.Pen> 24 <Pen LineJoin="Round" Brush="#FF000000"/> 25 </GeometryDrawing.Pen> 26 </GeometryDrawing> 27 <GeometryDrawing Brush="#FFFFC800" Geometry="F1 M 17.8081,5.81027L 15.7027,6.15466L 17.2235,7.95245L 15.9447,8.9368L 14.7892,6.79465L 13.6794,8.9368L 12.4006,7.95245L 13.8918,6.1449L 11.7795,5.81027L 12.3001,4.24701L 14.248,5.10681L 13.8621,2.68375L 15.6159,2.68375L 15.3396,5.11658L 17.2738,4.24701L 17.8081,5.81027 Z "/> 28 </DrawingGroup.Children> 29 </DrawingGroup> 30 </DrawingBrush.Drawing> 31 </DrawingBrush> 32 <DrawingBrush x:Key="NewSubSource" Stretch="None"> 33 <DrawingBrush.Drawing> 34 <DrawingGroup> 35 <DrawingGroup.Children> 36 <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 2.40969,1.00002L 19.5903,1.00002C 20.3689,1.00002 21,1.63118 21,2.40975L 21,14.0399C 21,14.8184 20.3689,15.4496 19.5903,15.4496L 15.185,15.4496L 11.2203,19.4144L 7.34276,15.4496L 2.40969,15.4496C 1.63113,15.4496 0.999995,14.8184 0.999995,14.0399L 0.999995,2.40975C 0.999995,1.63118 1.63113,1.00002 2.40969,1.00002 Z "> 37 <GeometryDrawing.Pen> 38 <Pen Thickness="1" LineJoin="Round" Brush="#FFBCBCB3"/> 39 </GeometryDrawing.Pen> 40 </GeometryDrawing> 41 <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 7.78709,7.44625L 13.185,7.44625C 14.2896,7.44625 15.185,8.34169 15.185,9.44625L 15.185,12.0249C 15.185,13.1295 14.2896,14.0249 13.185,14.0249L 7.78709,14.0249C 6.68251,14.0249 5.78708,13.1295 5.78708,12.0249L 5.78708,9.44625C 5.78708,8.34169 6.68251,7.44625 7.78709,7.44625 Z "> 42 <GeometryDrawing.Pen> 43 <Pen LineJoin="Round" Brush="#FFA9A9A6"/> 44 </GeometryDrawing.Pen> 45 </GeometryDrawing> 46 <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 10.2511,7.44619L 10.2471,2.58602"> 47 <GeometryDrawing.Pen> 48 <Pen LineJoin="Round" Brush="#FF000000"/> 49 </GeometryDrawing.Pen> 50 </GeometryDrawing> 51 <GeometryDrawing Brush="#FFFFC800" Geometry="F1 M 19.6998,6.25523L 17.5943,6.59962L 19.1152,8.39738L 17.8364,9.38176L 16.6809,7.23961L 15.5711,9.38176L 14.2923,8.39738L 15.7835,6.58986L 13.6712,6.25523L 14.1918,4.69194L 16.1397,5.55177L 15.7538,3.12871L 17.5076,3.12871L 17.2313,5.56154L 19.1655,4.69194L 19.6998,6.25523 Z "/> 52 </DrawingGroup.Children> 53 </DrawingGroup> 54 </DrawingBrush.Drawing> 55 </DrawingBrush> 56 <!--正常状态--> 57 <Storyboard x:Key="NormalStatus"> 58 <!--边框变为1--> 59 <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="NodeBorder"> 60 <EasingThicknessKeyFrame KeyTime="0" Value="1"/> 61 </ThicknessAnimationUsingKeyFrames> 62 <!--边框阴影变为5--> 63 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="NodeBackground"> 64 <EasingDoubleKeyFrame KeyTime="0" Value="5"/> 65 </DoubleAnimationUsingKeyFrames> 66 <!--输入框隐藏--> 67 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 68 Storyboard.TargetName="NodeTextInput"> 69 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 70 </DoubleAnimationUsingKeyFrames> 71 <!--创建工具栏隐藏--> 72 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 73 Storyboard.TargetName="NewFriend"> 74 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 75 </DoubleAnimationUsingKeyFrames> 76 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 77 Storyboard.TargetName="NewSubNode"> 78 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 79 </DoubleAnimationUsingKeyFrames> 80 </Storyboard> 81 <!--选中状态--> 82 <Storyboard x:Key="SelectedStatus"> 83 <!--边框变为4--> 84 <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" 85 Storyboard.TargetName="NodeBorder"> 86 <EasingThicknessKeyFrame KeyTime="0" Value="4"/> 87 </ThicknessAnimationUsingKeyFrames> 88 <!--边框阴影变为10--> 89 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" 90 Storyboard.TargetName="NodeBackground"> 91 <EasingDoubleKeyFrame KeyTime="0" Value="10"/> 92 </DoubleAnimationUsingKeyFrames> 93 <!--输入框隐藏--> 94 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 95 Storyboard.TargetName="NodeTextInput"> 96 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 97 </DoubleAnimationUsingKeyFrames> 98 <!--创建工具栏显现--> 99 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 100 Storyboard.TargetName="NewFriend"> 101 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/> 102 </DoubleAnimationUsingKeyFrames> 103 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 104 Storyboard.TargetName="NewSubNode"> 105 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/> 106 </DoubleAnimationUsingKeyFrames> 107 </Storyboard> 108 <!--编辑状态--> 109 <Storyboard x:Key="EditStatus"> 110 <!--鼠标变为手--> 111 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="ANodeObject"> 112 <DiscreteObjectKeyFrame KeyTime="0"> 113 <DiscreteObjectKeyFrame.Value> 114 <Cursor>Hand</Cursor> 115 </DiscreteObjectKeyFrame.Value> 116 </DiscreteObjectKeyFrame> 117 </ObjectAnimationUsingKeyFrames> 118 <!--边框变为4--> 119 <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" 120 Storyboard.TargetName="NodeBorder"> 121 <EasingThicknessKeyFrame KeyTime="0" Value="4"/> 122 </ThicknessAnimationUsingKeyFrames> 123 <!--边框阴影变为10--> 124 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" 125 Storyboard.TargetName="NodeBackground"> 126 <EasingDoubleKeyFrame KeyTime="0" Value="10"/> 127 </DoubleAnimationUsingKeyFrames> 128 <!--输入框显现--> 129 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 130 Storyboard.TargetName="NodeTextInput"> 131 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/> 132 </DoubleAnimationUsingKeyFrames> 133 <!--创建工具栏隐藏--> 134 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 135 Storyboard.TargetName="NewFriend"> 136 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 137 </DoubleAnimationUsingKeyFrames> 138 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 139 Storyboard.TargetName="NewSubNode"> 140 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 141 </DoubleAnimationUsingKeyFrames> 142 </Storyboard> 143 <!--拖动状态--> 144 <Storyboard x:Key="DragStatus"> 145 <!--鼠标变为移动--> 146 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="ANodeObject"> 147 <DiscreteObjectKeyFrame KeyTime="0"> 148 <DiscreteObjectKeyFrame.Value> 149 <Cursor>SizeAll</Cursor> 150 </DiscreteObjectKeyFrame.Value> 151 </DiscreteObjectKeyFrame> 152 </ObjectAnimationUsingKeyFrames> 153 <!--边框变为4--> 154 <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="NodeBorder"> 155 <EasingThicknessKeyFrame KeyTime="0" Value="4"/> 156 </ThicknessAnimationUsingKeyFrames> 157 <!--边框阴影变为10--> 158 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="NodeBackground"> 159 <EasingDoubleKeyFrame KeyTime="0" Value="10"/> 160 </DoubleAnimationUsingKeyFrames> 161 <!--输入框隐藏--> 162 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 163 Storyboard.TargetName="NodeTextInput"> 164 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 165 </DoubleAnimationUsingKeyFrames> 166 <!--创建工具栏隐藏--> 167 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 168 Storyboard.TargetName="NewFriend"> 169 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 170 </DoubleAnimationUsingKeyFrames> 171 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 172 Storyboard.TargetName="NewSubNode"> 173 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 174 </DoubleAnimationUsingKeyFrames> 175 </Storyboard> 176 </UserControl.Resources> 177 <UserControl.Triggers> 178 <!--启动时设置为正常状态--> 179 <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 180 <BeginStoryboard x:Name="OnLoaded_BeginStoryboard" 181 Storyboard="{StaticResource NormalStatus}"/> 182 </EventTrigger> 183 <!--鼠标在NodeText上抬起时设置为编辑状态--> 184 <EventTrigger RoutedEvent="Mouse.PreviewMouseUp" SourceName="NodeTextInput"> 185 <BeginStoryboard x:Name="EditStatus_BeginStoryboard" 186 Storyboard="{StaticResource EditStatus}"/> 187 </EventTrigger> 188 <!--NodeTextInput失去焦点时，变成普通状态--> 189 <EventTrigger RoutedEvent="Keyboard.LostKeyboardFocus" SourceName="NodeTextInput"> 190 <BeginStoryboard Storyboard="{StaticResource NormalStatus}"/> 191 </EventTrigger> 192 </UserControl.Triggers> 193 <Grid x:Name="NodeGrid" Background="Transparent" > 194 <Grid.ColumnDefinitions> 195 <ColumnDefinition Width="10"/> 196 <ColumnDefinition Width="*"/> 197 <ColumnDefinition Width="10"/> 198 </Grid.ColumnDefinitions> 199 <Grid.RowDefinitions> 200 <RowDefinition Height="10"/> 201 <RowDefinition Height="*"/> 202 <RowDefinition Height="10"/> 203 </Grid.RowDefinitions> 204 <Grid Grid.Column="1" Grid.Row="1"> 205 <Border x:Name="NodeBackground" Background="#FF6C6262" CornerRadius="12" 206 BorderThickness="1" BorderBrush="#FF6C6262" > 207 <Border.Effect> 208 <DropShadowEffect RenderingBias="Quality" ShadowDepth="0"/> 209 </Border.Effect> 210 </Border> 211 <Grid> 212 <Grid.RowDefinitions> 213 <RowDefinition Height="50*"/> 214 <RowDefinition Height="50*"/> 215 </Grid.RowDefinitions> 216 <Border Grid.Row="0" Margin="3,3,3,0" CornerRadius="10" Opacity="0.2"> 217 <Border.Background> 218 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 219 <GradientStop Color="#7FFFFFFF" Offset="1"/> 220 <GradientStop Color="White"/> 221 </LinearGradientBrush> 222 </Border.Background> 223 </Border> 224 </Grid> 225 <Border x:Name="NodeBorder" 226 CornerRadius="12" 227 BorderThickness="1" 228 Opacity="0.6" 229 BorderBrush="#4CFFFFFF" 230 > 231 <Border.Background> 232 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 233 <GradientStop Color="#99FFFFFF" Offset="1"/> 234 <GradientStop Color="#4CFFFFFF"/> 235 <GradientStop Color="#58FFFFFF" Offset="0.5"/> 236 </LinearGradientBrush> 237 </Border.Background> 238 </Border> 239 <Border> 240 <TextBlock x:Name="NodeText" 241 Text="{Binding Text, Mode=OneWay}" 242 FontSize="12" 243 HorizontalAlignment="Center" VerticalAlignment="Center" 244 TextWrapping="WrapWithOverflow" 245 Cursor="IBeam" 246 Margin="10,10,10,20" 247 MinWidth="46" 248 FontWeight="Bold" /> 249 </Border> 250 <TextBox x:Name="NodeTextInput" 251 Text="{Binding Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 252 FontSize="12" 253 Focusable="True" 254 HorizontalAlignment="Center" VerticalAlignment="Bottom" 255 AcceptsReturn="True" 256 Margin="10,0,10,20" 257 MinWidth="50" 258 BorderThickness="0" 259 FontStretch="UltraExpanded" 260 Padding="0" 261 FontWeight="Bold" 262 /> 263 </Grid> 264 <Grid x:Name="ToolsPanel" Grid.Column="2" Grid.Row="1" > 265 <Rectangle Name="NewFriend" Fill="{DynamicResource NewFriendSource}" Margin="-10,0" Width="25" UseLayoutRounding="False"/> 266 </Grid> 267 <Canvas x:Name="ToolsPanel1" Grid.Column="3" Grid.Row="3"> 268 <Rectangle Name="NewSubNode" Fill="{DynamicResource NewSubSource}" Width="26" Height="21" Margin="-10,-15,0,0"></Rectangle> 269 </Canvas> 270 </Grid> 271 </UserControl> 272

下期预告，代码中的动画触发和几个基本属性。