改动SVG代码获得图标

CDR操作中，经常会用到将图形旋转90度。如果要做出这样一个图标该怎么做呢？下面介绍一种方法。

在iconfont-阿里巴巴矢量图标库中搜索“旋转90度”。如下图：

下载时选择复制SVG代码。粘贴到记事本中。稍微调整一下代码，把width="200" height="200"移动到path的后面，把path后面的p-id="1668"去掉，如下图：

 

所示：把path整条代码复制到Blend代码中，如下图：

由于HTML代码不同于xmal代码，所以代码处有错误发生。把path全部改成大写的Path，把Path后面的字母d改为Data，把width和height改为大写。代码的错误一会儿就消失了，改小控件视图比例，可以看见Path的模样，如下图：

给Path的Fill填充颜色，比如下图：

Path还是没有颜色。对象和时间线中，保持Path选中状态，右击>分组>Canvas，代码Path外边套了1个Canvas。如下图：

展开对象和时间线的Canvas，选中Path，右击>布局>重置大小。就可以看见Path的填充色了。如下图：

把鼠标放到视图中Path的左上角或其它角，当出现缩放箭头时按住Shift键拖动一下，让它产生一个新的尺寸。把Data后面的属性都回车敲到第2行。如下图：

把代码改为以下：

Fill="#FFAE1B1B" Height="16" Canvas.Left="0" Stretch="Fill" Canvas.Top="0" Width="16"

打开上次课程完成的AddonCommands.xaml文档，复制CallCalc的Canvas到下面，并改动一下，成为代码：

<Canvas.ToolTip>
<StackPanel MaxWidth="255">
<TextBlock FontWeight="UltraBlack"  FontSize="14">所选全屏</TextBlock>
<TextBlock TextWrapping="Wrap">所选区域全屏显示</TextBlock>
</StackPanel>
</Canvas.ToolTip>

         

把Blend中的Path整条代码复制到上面代码的空行处，效果如下：

把Path的填充色改为左边的绿色，效果如下：

这次制作图标的意义在于不做重绘，直接对SVG的代码进行更改获得适合自己的路径。

调整图标呈现形式

为了把图标的提示做得好看一点，跟Coreldraw的相似，在SelectionFullScreen的Canvas代码块里面前面位置加入以下代码：                        

<Canvas.ToolTip>
<StackPanel MaxWidth="255">
<TextBlock FontWeight="UltraBlack"  FontSize="14">所选全屏</TextBlock>
<TextBlock TextWrapping="Wrap">所选区域全屏显示</TextBlock>
</StackPanel>
</Canvas.ToolTip>

同时去掉Canvas的ToolTip原来的属性。

Canvas.ToolTip：设置所属Canvas的提示元素。

StackPanel：Stack堆栈，一堆，堆叠。堆栈是C#线程中常用的词语。Panel，面板。StackPanel就是其里面的元素将是堆叠式排列，而不会有重叠，默认是垂直排列。详细文档见visualstudio的 将对象组织到布局容器中 - Visual Studio (Windows) | Microsoft Docs一文，网址：

https://docs.microsoft.com/zh-cn/visualstudio/xaml-tools/organize-objects-into-layout-containers-in-xaml-designer?view=vs-2022

MaxWidth：最大宽度，不设定其宽度Width，让StackPanel宽度为自动，随内容物自动伸缩，但规定其宽度延伸最大只能到255像素。

TextBlock：文字块，其和TextBox的最大区别就是TextBox可以提供输入更改文字接口，而TextBlock用户无法选择其中的文本。当然你把TextBox设置为Focusable="False"照样是无法选择文本。

FontWeight：文字粗细。

FontSize：文字大小，像素单位，double双精度浮点数。

TextWrapping="Wrap"：TextWrapping，文字缠绕属性。Wrap则为实现缠绕，文字排版若超出容器边界则自动换行排列。

同样后面的几个Canvas也分别复制更改为以下代码：

<Canvas.ToolTip>
<StackPanel MaxWidth ="255">
<TextBlock FontWeight="UltraBlack"  FontSize="14">导出图片</TextBlock>
<TextBlock TextWrapping="Wrap">所选区域导出效果图</TextBlock>
</StackPanel>
</Canvas.ToolTip>
<Canvas.ToolTip>
<StackPanel MaxWidth ="255">
<TextBlock FontWeight="UltraBlack"  FontSize="14">微信文字</TextBlock>
<TextBlock TextWrapping="Wrap">处理从微信中复制的文字，还原其行排列，以便粘贴</TextBlock>
</StackPanel>
</Canvas.ToolTip>
<Canvas.ToolTip>
<StackPanel MaxWidth ="255">
<TextBlock FontWeight="UltraBlack"  FontSize="14">粘贴文字</TextBlock>
<TextBlock TextWrapping="Wrap">所选文字（可以只选择文字图形）替换为剪贴板中的文字</TextBlock>
</StackPanel>
</Canvas.ToolTip>
<Canvas.ToolTip>
<StackPanel MaxWidth ="255">
<TextBlock FontWeight="UltraBlack"  FontSize="14">调出计算</TextBlock>
<TextBlock TextWrapping="Wrap">调出电脑系统的计算器</TextBlock>
</StackPanel>
</Canvas.ToolTip>
<Canvas.ToolTip>
<StackPanel MaxWidth ="255">
<TextBlock FontWeight="UltraBlack"  FontSize="14">旋转90度</TextBlock>
<TextBlock TextWrapping="Wrap">所选区域逆时针旋转90度</TextBlock>
</StackPanel>
</Canvas.ToolTip>

提示：复制代码块可以点击代码前面的“-“号收缩代码块后，3次鼠标左键全选后复制。生成并更新工具栏后，其效果如下图：