SkewTransform主要是对控件实现一种2-D扭曲,具体内容可以查看以下链接:
http://msdn.microsoft.com/zh-cn/library/system.windows.media.skewtransform.aspx
从图中可以看到,3-D的柱状图呈现给人们的是三个面,所以,我们需要用三个Rectangle经过SkewTransform变换来呈现柱状图的3个面,并且三个面的颜色要相互协调,给人一种立体的感觉。首先,新建一个WPF窗体,窗体上放置一个Canvas。
xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
Title= "Window1" Height= "600" Width= "800" WindowStartupLocation= "CenterScreen">
< Canvas x:Name= "PicBox">
< /Canvas>
< /Window>
将各种已配好的颜色方案放在数组里,
{
{Color.FromRgb(246,188,16),Color.FromRgb(194,153,11),Color.FromRgb(158,123,3)},
{Color.FromRgb(175,216,248),Color.FromRgb(135,173,196),Color.FromRgb(111,139,161)},
{Color.FromRgb(215,69,70),Color.FromRgb(167,55,54),Color.FromRgb(138,44,44)},
{Color.FromRgb(140,186,0),Color.FromRgb(112,147,1),Color.FromRgb(92,121,2)},
{Color.FromRgb(253,143,68),Color.FromRgb(200,114,55),Color.FromRgb(165,95,76)},
{Color.FromRgb(0,142,143),Color.FromRgb(0,113,113),Color.FromRgb(2,92,93)},
{Color.FromRgb(142,70,143),Color.FromRgb(117,56,116),Color.FromRgb(88,46,90)},
{Color.FromRgb(90,133,41),Color.FromRgb(70,107,30),Color.FromRgb(58,87,23)},
{Color.FromRgb(178,170,21),Color.FromRgb(142,133,0),Color.FromRgb(115,108,2)},
{Color.FromRgb(1,141,216),Color.FromRgb(3,112,175),Color.FromRgb(1,92,137)},
{Color.FromRgb(158,9,13),Color.FromRgb(130,7,10),Color.FromRgb(101,5,7)},
{Color.FromRgb(161,134,189),Color.FromRgb(127,105,151),Color.FromRgb(107,86,125)}
};
编写画单个柱状图的方法,函数根据提供的宽高以及颜色方案绘制相应的柱状图,
public StackPanel Draw3DHitsgram(Double width, Double height, int colorSolutionIndex)
{
StackPanel sp = new StackPanel()
{
Orientation = Orientation.Horizontal,
Height = height + width/3,
Width = width/3*4
};
Rectangle rect1 = new Rectangle()
{
Fill = new SolidColorBrush(colorsSolution[colorSolutionIndex, 0]),
Width = width,
Height = height,
VerticalAlignment = VerticalAlignment.Bottom
};
sp.Children.Add(rect1);
Rectangle rect2 = new Rectangle()
{
Fill = new SolidColorBrush(colorsSolution[colorSolutionIndex, 1]),
Width = width,
Height = width/3,
VerticalAlignment = VerticalAlignment.Top,
Margin = new Thickness(-width/3*2, 0, 0, 0),
RenderTransform = new SkewTransform(-45, 0, 0, 0)
};
sp.Children.Add(rect2);
Rectangle rect3 = new Rectangle()
{
Fill = new SolidColorBrush(colorsSolution[colorSolutionIndex, 2]),
Width = width/3,
Height = height,
VerticalAlignment = VerticalAlignment.Bottom,
Margin = new Thickness(-width/3, 0, 0, 0),
RenderTransform = new SkewTransform(0, -45, 0, 0)
};
sp.Children.Add(rect3);
return sp;
}
在窗体的构造函数中用Random生成随机的宽和高,调用上面的函数,将绘制的柱状图添加至Canvas
public Window1()
{
InitializeComponent();
Random r = new Random();
for (int i = 0; i < 12; i++)
{
StackPanel sp = Draw3DHitsgram((Double)(r.Next(20, 50)), (Double)(r.Next(40, 200)), i);
Canvas.SetLeft(sp, 20 + 70 * i);
Canvas.SetTop(sp, 250 - sp.Height);
this.PicBox.Children.Add(sp);
}
}
本文来自junwillday的博客,原文地址:http://blog.csdn.net/junwillday/article/details/7347894