今天在网上,学习WPF时,无意中看到如下一张图,也不知道是哪个美工丢给哪个开发人员的,图我直接复制过来的。具体美工图片如下:
猛的这么一看,刚学习WPF,看到这样的图,直接吓缩了回去!得学到什么程度才能画出这个图形。我后来想了想,直接用Polygon不就能画出来吗?差点把我学习WPF的勇气给吓回去,哈哈。其实这玩意也没有什么技术含量,废话不多说,直接上代码,小弟不才,仅供参考:
<Window x:Class="test.draw"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:test"
mc:Ignorable="d"
Title="draw" Height="400" Width="400" Background="#0A4589">
<Grid>
<Canvas Width="250" Height="300" Margin="10" Background="#0A4589">
<Polygon Stroke="#77ABE5" StrokeThickness="2" Fill="#042C5F" Points="30,20 40,10 220,10 220,275 210,280 30,280 " Margin="0,5,0,0"/>
<Polygon Stroke="#77ABE5" StrokeThickness="2" Fill="#022046" Points="20,20 25,10 140,10 140,30 20,30 " Canvas.Top="-6" Canvas.Left="42" HorizontalAlignment="Center"/>
<TextBlock Text="历史数据" Foreground="White" Margin="100,5,100,10"></TextBlock>
</Canvas>
</Grid>
</Window>
我给大家解释下, 建立宽度和高度都为400的窗口,背景颜色为:#0A4589,然后我们利用Canvas布局控件,宽度250,高度300,边界10,北京颜色同样使用:#0A4589,我们使用Polygon 来先画大的形状,stroke 笔颜色为:#77ABE5,StrokeThickness笔的线条粗度为2,Fill填充颜色为#042C5F, Points是位置,可以放N组,格式"数字,数字" 为一组,分别表示X坐标和Y坐标的点,根据标点,把线连接起来图形就画好了。接着再画中间的图形,这个我就不细说了,用的同样是polygon ,最后我们用TextBlock 文本块 写上所需要的数据,颜色,调整好位置,基本图形就出来了,第一次画这样的图形,谨慎食用啊,具体实践效果如下所示:
第一次用WPF画图形,如有更好的建议,请与我沟通交流。