WPF用SkewTransform画3D柱状图

WPF用SkewTransform画3D柱状图

SkewTransform主要是对控件实现一种2-D扭曲，具体内容可以查看以下链接： http://msdn.microsoft.com/zh-cn/library/system.windows.media.skewtransform.aspx 从图中可以看到，3-D的柱状图呈现给人们的是三个面，所以，我们需要用三个Rectangle经过SkewTransform变换来呈现柱状图的3个面，并且三个面的颜色要相互协调，给

　　

　　SkewTransform主要是对控件实现一种2-D扭曲，具体内容可以查看以下链接：

　　http://msdn.microsoft.com/zh-cn/library/system.windows.media.skewtransform.aspx

　　从图中可以看到，3-D的柱状图呈现给人们的是三个面，所以，我们需要用三个Rectangle经过SkewTransform变换来呈现柱状图的3个面，并且三个面的颜色要相互协调，给人一种立体的感觉。首先，新建一个WPF窗体，窗体上放置一个Canvas。

<Window x:Class="_3DHistogram.Window1"
    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>

　　将各种已配好的颜色方案放在数组里，

private Color[,] colorsSolution = new Color[12, 3]
        {
           {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