[WPF] [AMindMap] 开发手记-2 （UI ANode的绘制）
本来是想先把技术点整理一遍，但看Redhat是非常愿意看UI的部分，那就从UI开始说吧。
先把基础部件都搞下。
| ANode 用户控件 的 简单描述 |
首先，ANode 用户控件，注意，是用户控件，不是自定义控件，我好像在什么地方看过
说这两个是有些区别的，用户控件是继承自UserControl,自定义控件是继承自Control，
至于区别，我忘了，想知道的，就放狗搜一下吧，懒得研究了。先来个预览图。好知道
什么是ANode。↓↓↓↓↓
| ANode 的 功能描述 |
| ANode 目前 的 功能描述（我一下子也搞不清楚，具体想要啥，咱还是渐进开发吧） |
|
事实上，写到这里的时候，我的ANode已经做好了，描述的基本功能都出来了。
我就分解一下好了。
| ANode 的 创建 |
工具方面，当然还是用 
爽一点，爱丫爱丫，项目都没建立，
算了，就画吧。打开Blend，或者用Blend打开新建的工程（当然是用户控件工程）。
为了讲解方便，我也新建一个BNode，一步一步写出来。
看新建的UserControl的Xaml部分
1 <UserControl x:Class="BNode" 2 xmlns="http://schemas.microsoft.com/winfx/2006 3 /xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006 5 /xaml" 6 xmlns:mc="http://schemas.openxmlformats.org 7 /markup-compatibility/2006" 8 xmlns:d="http://schemas.microsoft.com/expression 9 /blend/2008" 10 mc:Ignorable="d" 11 d:DesignHeight="300" d:DesignWidth="300"> 12 <Grid> 13 14 </Grid> 15 </UserControl> 16
这个代码不用解释了吧，先整理一下UserControl标签内容，干掉10，11行，没用的，差不多。
下面，这个Grid是个好东西，我们的控件自由伸缩适应文本内容，就全靠他了。
ANode大致的结构是这样的↓↓↓↓↓↓
先给Grid划分一下行和列，这里我们要三行三列，用处一会儿再说。
1 <Grid x:Name="NodeGrid" Background="Transparent"> 2 <Grid.ColumnDefinitions> 3 <ColumnDefinition Width="10"/> 4 <ColumnDefinition Width="*"/> 5 <ColumnDefinition Width="10"/> 6 </Grid.ColumnDefinitions> 7 <Grid.RowDefinitions> 8 <RowDefinition Height="10"/> 9 <RowDefinition Height="*"/> 10 <RowDefinition Height="10"/> 11 </Grid.RowDefinitions> 12 </Grid>
注意，划分出来的效果是这样的，第二行和第二列的宽度是*号，其他的是固定的。
顺便加上名字，还有背景色，因为以后要用到这个Grid，还要用他的事件，所以要加背景色。
一个小小的Grid好可怜啊，中间列和中间行，因为没有内容支撑已经看不见了。
现在就给他里面放一个内容，加一个Grid，还是因为Grid的自由放缩，一想到就爽。这个Grid主要作用
就是整理空间，确定二行二列这个格子，然后，向里面放内容。
<Grid Grid.Column="1" Grid.Row="1">
</Grid>
标记他的Grid.Column和Grid.Row，为1，这样他就被装入中间的格子了。
在这个Grid中，加入一个Border作为背景色和边框的载体，也就是背景层。
1 <Border x:Name="NodeBackground" 2 Background="#FF6C6262" 3 CornerRadius="12" 4 BorderThickness="1" 5 BorderBrush="#FF6C6262" > 6 <Border.Effect> 7 <DropShadowEffect 8 RenderingBias="Quality" ShadowDepth="0"/> 9 </Border.Effect> 10 </Border>
装饰层要稍微复杂一些，一个Grid中放入Border，让这个Border站上半部空间，在设置Border的渐变
背景色。让他看起来像是一个光点。
1 <Grid> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="50*"/> 4 <RowDefinition Height="50*"/> 5 </Grid.RowDefinitions> 6 <Border Grid.Row="0" Margin="3,3,3,0" 7 CornerRadius="10" Opacity="0.2"> 8 <Border.Background> 9 <LinearGradientBrush EndPoint="0.5,1" 10 StartPoint="0.5,0"> 11 <GradientStop Color="#7FFFFFFF" Offset="1"/> 12 <GradientStop Color="White"/> 13 </LinearGradientBrush> 14 </Border.Background> 15 </Border> 16 </Grid>
Border的透明度只有0.2，并且，背景色是白色渐变的。看起来是这样的↓↓↓↓
在黑色背景上，0.2透明度的白色光点。
接下来就是遮罩层，因为除了这个光点装饰，背景看起来平淡无奇，所以加上一个遮罩，使之看起来更立体。
并且光点更柔和，这个遮罩层的代码是这样的
1 <Border x:Name="NodeBorder" 2 CornerRadius="12" 3 BorderThickness="1" 4 Opacity="0.6" 5 BorderBrush="#4CFFFFFF" 6 > 7 <Border.Background> 8 <LinearGradientBrush EndPoint="0.5,1" 9 StartPoint="0.5,0"> 10 <GradientStop Color="#99FFFFFF" Offset="1"/> 11 <GradientStop Color="#4CFFFFFF"/> 12 <GradientStop Color="#58FFFFFF" 13 Offset="0.5"/> 14 </LinearGradientBrush> 15 </Border.Background> 16 </Border>
透明度是0.6，白色渐变，不能掺杂其他的颜色，否则跟背景混色之后，就恶心了。
给背景色上个颜色，就看出效果来了，还可以的。
如何？一个玻璃气泡就诞生了。
接下来是文字层，不用说也是Border，再放上一个TextBlock。
1 <Border> 2 <TextBlock x:Name="NodeText" 3 Text="{Binding Text, Mode=OneWay}" 4 FontSize="12" 5 HorizontalAlignment="Center" 6 VerticalAlignment="Center" 7 TextWrapping="WrapWithOverflow" 8 Cursor="IBeam" 9 Margin="10,10,10,20" 10 MinWidth="46" 11 FontWeight="Bold" /> 12 </Border>
这里面倒是有几点要说明的。
1.Text属性，已经绑定了，后台的一个TextProperty属性，这个属性是DependencyProperty。
2.横向纵向对其方式都是居中的。
3.Margin根据需要设置，使得，Border向TextBlock外扩展一定范围，而不是紧贴着Textblock。
同时，Border也向外推最外层的容器Grid，使整个的控件，都变大。
4.MinWidth也是有讲究的，等会儿加上输入用的TextBox，就看出来了。
好多，最后，在最外层加上一个TextBox
1 <TextBox x:Name="NodeTextInput" 2 Text="{Binding Text, Mode=TwoWay, 3 UpdateSourceTrigger=PropertyChanged}" 4 FontSize="12" 5 Focusable="True" 6 HorizontalAlignment="Center" 7 VerticalAlignment="Bottom" 8 AcceptsReturn="True" 9 Margin="10,0,10,20" 10 MinWidth="50" 11 BorderThickness="0" 12 FontStretch="UltraExpanded" 13 Padding="0" 14 FontWeight="Bold" 15 />
1.Text绑定在之前TextBlock同样的属性上面，不同的是双向绑定的。
2.MinWidth被设置成50，跟TextBlock的46对应，因为TextBox和TextBlock内容的Left是不同的，
通过这个值，找齐一下。
至此，ANode的外观算是基本搞定了。接下来就是填上其他东西。
先来搞一下，工具栏，顺便也解释一下最开始的Grid为什么要分那么多格子。
工具栏的图样，我就不在这里展开了，我之前在Post里说过了。请参考
用 Microsoft Expression Design 制作图形资源一文。
我在这里先定义了两个按钮，一个是用来添加同级主题的，另一个添加下一级子主题。
1 <Grid x:Name="ToolsPanel" Grid.Column="2" Grid.Row="1" > 2 <Rectangle Name="NewFriend" 3 Fill="{DynamicResource NewFriendSource}" 4 Margin="-10,0" Width="25" 5 UseLayoutRounding="False"/> 6 </Grid>
这是 增加同级主题的按钮，用Rectangle，我还不知道鼠标事件好用不，先这样吧。
不行换别的。这里绑定了一个资源，就是用Design画的那个，其实，这个资源手写，也是能写出来的。
我就不讲了，想了解，可以搜搜，有很多。无非是画线。
至于Margin的-10，我说实话，我就是用Blend拖出来的，我不知道为啥，我也没想。
另外一个按钮，是一样的，不讲了。
看这个效果
注意到了吧，这两个按钮，是放在Grid旁边的格子里的，这些格子会随着控件的变大，而随动，这是
Grid分割的用处之一。还有个用处，下次说吧。
写了好长了，要不要分段一下呀。下一节，ANode的状态，敬请期待。
