[WPF] [AMindMap] 开发手记-3 （UI ANode的状态动画）-优快云博客

本文详细介绍了ANode控件在不同状态下的动画实现，包括普通、选中、编辑和拖动状态，通过XAML代码展示了如何使用各种动画效果来改变边框、阴影及工具栏的显示状态。

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

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

ANode 的状态

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

基本动画

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

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

动画直接写Xaml

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

ANode边框变小

1  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  4 < ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty ="(Border.BorderThickness)" Storyboard.TargetName ="NodeBorder" > 5 < EasingThicknessKeyFrame KeyTime ="0" Value ="1" /> 6 </ ThicknessAnimationUsingKeyFrames > 7  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 < ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty ="(Border.BorderThickness)" 5 Storyboard.TargetName ="NodeBorder" > 6 < EasingThicknessKeyFrame KeyTime ="0" Value ="4" /> 7 </ ThicknessAnimationUsingKeyFrames > 8  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  12 < ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty ="(Border.BorderThickness)" 13 Storyboard.TargetName ="NodeBorder" > 14 < EasingThicknessKeyFrame KeyTime ="0" Value ="4" /> 15 </ ThicknessAnimationUsingKeyFrames > 16  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  12 < ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty ="(Border.BorderThickness)" Storyboard.TargetName ="NodeBorder" > 13 < EasingThicknessKeyFrame KeyTime ="0" Value ="4" /> 14 </ ThicknessAnimationUsingKeyFrames > 15  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  8 < EventTrigger RoutedEvent ="Mouse.PreviewMouseUp" SourceName ="NodeTextInput" > 9 < BeginStoryboard x:Name ="EditStatus_BeginStoryboard" 10 Storyboard =" {StaticResource EditStatus} " /> 11 </ EventTrigger > 12  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  59 < ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty ="(Border.BorderThickness)" Storyboard.TargetName ="NodeBorder" > 60 < EasingThicknessKeyFrame KeyTime ="0" Value ="1" /> 61 </ ThicknessAnimationUsingKeyFrames > 62  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  84 < ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty ="(Border.BorderThickness)" 85 Storyboard.TargetName ="NodeBorder" > 86 < EasingThicknessKeyFrame KeyTime ="0" Value ="4" /> 87 </ ThicknessAnimationUsingKeyFrames > 88  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  119 < ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty ="(Border.BorderThickness)" 120 Storyboard.TargetName ="NodeBorder" > 121 < EasingThicknessKeyFrame KeyTime ="0" Value ="4" /> 122 </ ThicknessAnimationUsingKeyFrames > 123  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  154 < ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty ="(Border.BorderThickness)" Storyboard.TargetName ="NodeBorder" > 155 < EasingThicknessKeyFrame KeyTime ="0" Value ="4" /> 156 </ ThicknessAnimationUsingKeyFrames > 157  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  184 < EventTrigger RoutedEvent ="Mouse.PreviewMouseUp" SourceName ="NodeTextInput" > 185 < BeginStoryboard x:Name ="EditStatus_BeginStoryboard" 186 Storyboard =" {StaticResource EditStatus} " /> 187 </ EventTrigger > 188  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

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

转载于:https://www.cnblogs.com/allofalan/archive/2012/04/12/2443326.html