用wpf实现简单的柱状图控件

因为最近的一个项目里需要用到柱状图，找了一些第三方的控件，UI部分定制化不强，很难保证与现有界面的统一。项目当中用到的图形也比较简单，所以干脆自己动手实现。

下面是最终的效果。

首先讲一下设计思路

　　图形控件主要分为四部分：一水平文本，垂直文本，背景线条，以及最主要的柱形部分。

　　第一步先绘制背景，因为水平文本和垂直文本都是根据数据源动态计算的，所以内容无法固定。为了方便计算这里以Grid控件为基类，在Grid的基础上进行绘制，因为通过添加Grid的行和列能够很好的控制控件内容的布局。

class WpfChart : Grid
{


.......


}

 接下来要定义控件的数据源。柱状图的数据源比较简单，可以通过简单的键值对进行设计。为了方便绑定，这里将数据源设计为依赖属性

public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable<KeyValuePair<string, double>>), typeof(WpfChart), new PropertyMetadata(new List<KeyValuePair<string,double>>(), OnItemsSourcePropertyChanged));
 
public IEnumerable<KeyValuePair<string,double>> ItemsSource
{
    get { return (List<KeyValuePair<string, double>>)GetValue(ItemsSourceProperty); }
 6     set { SetValue(ItemsSourceProperty, value); }
 7 }

为了方便布局，这里将整个控件划分成三个区域，分别用三个Grid控件进行管理这三块区域的内容。

private readonly Grid _gridTextH = new Grid();
private readonly Grid _gridTextV = new Grid();
private readonly Grid _gridContent = new Grid();

下面进行垂直、水平内容的添加 ，垂直文本通通放到_gridTextH控件内，水平文本通通放到_gridTextV控件内。

1、通过获取数据源中的最大值，计算控件中需要显示的行数。

2、添加对应的表格线到_gridTextH中。

3、通过获取数据源的长度，添加控件对应的水平文本。

        void DrawHTextCollection()
        {
            _gridTextH.ColumnDefinitions.Clear();
            _gridTextH.RowDefinitions.Clear();
            _gridTextH.Children.Clear();
            _gridTextH.Margin = new Thickness(_viewPortPad.Left, 0, 0, 0);
            _gridTextH.RowDefinitions.Add(new RowDefinition() {Height = new GridLength(1, GridUnitType.Star)});
            _gridTextH.RowDefinitions.Add(new RowDefinition()
            {
                Height = new GridLength(_viewPortPad.Bottom, GridUnitType.Pixel)
            });

            TextBlock tb;

            foreach (var v in ItemsSource)
            {
                _gridTextH.Children.Add(
                    tb =
                        new TextBlock()
                        {
                            Text = v.Key,
                            HorizontalAlignment = HorizontalAlignment.Center,
                            VerticalAlignment = VerticalAlignment.Top,
                            Margin = new Thickness(0, 10, 0, 0)

                        });
                _gridTextH.ColumnDefinitions.Add(new ColumnDefinition());
                Grid.SetRow(tb, 1);
                Grid.SetColumn(tb, _gridTextH.ColumnDefinitions.Count - 1);
            }
        }




       void DrawVTextCollection()
        {
            TextBlock tb;
            Border border;
            _gridTextV.RowDefinitions.Clear();
            _gridTextV.Children.Clear();
            _gridTextV.ColumnDefinitions.Clear();
            _gridTextV.Margin = new Thickness(0, _viewPortPad.Top, 0, _viewPortPad.Bottom);
            _gridTextV.ColumnDefinitions.Add(new ColumnDefinition()
            {
                Width = new GridLength(_viewPortPad.Left, GridUnitType.Pixel)
            });
            _gridTextV.ColumnDefinitions.Add(new ColumnDefinition()
            {
                Width = new GridLength(1, GridUnitType.Star)
            });
            foreach (var v in GetVTextCollection())
            {
                _gridTextV.Children.Add(
                    tb =
                        new TextBlock()
                        {
                            Text = v.ToString(),
                            Margin = new Thickness(0, 0, 5, 0),
                            HorizontalAlignment = HorizontalAlignment.Right,
                            VerticalAlignment = VerticalAlignment.Bottom
                        });
                _gridTextV.Children.Add(
                    border =
                        new Border()
                        {
                            BorderBrush = new SolidColorBrush((Color) ColorConverter.ConvertFromString("#FFc0c0c0")),
                            BorderThickness = new Thickness(0, 0, 0, 1),
                            VerticalAlignment = VerticalAlignment.Bottom
                        });
                _gridTextV.RowDefinitions.Add(new RowDefinition());
                Grid.SetRow(tb, _gridTextV.RowDefinitions.Count - 1);
                Grid.SetColumn(border, 1);
                Grid.SetRow(border, _gridTextV.RowDefinitions.Count - 1);
            }
        }

下面是背景生成后的效果图。

最后就是最重要的内容区域了。通通放到_gridContent中。

void DrawCoordinate()
{
    Rectangle rectangle;
    TextBlock tb;
    _gridContent.ColumnDefinitions.Clear();
    _gridContent.RowDefinitions.Clear();
    _gridContent.Children.Clear();

    //_gridContent.Margin = new Thickness(_viewPortPad.Left, 0, 0, _viewPortPad.Bottom);
    _gridContent.ColumnDefinitions.Add(new ColumnDefinition()
    {
        Width = new GridLength(_viewPortPad.Left, GridUnitType.Pixel)
    });
    _gridContent.RowDefinitions.Add(new RowDefinition()
    {
        Height = new GridLength(1, GridUnitType.Star)
    });
    _gridContent.RowDefinitions.Add(new RowDefinition()
    {
        Height = new GridLength(_viewPortPad.Bottom, GridUnitType.Pixel)
    });

    var maxHeight = _gridContent.ActualHeight - _viewPortPad.Top - _viewPortPad.Bottom;
    var maxWidth = _gridContent.ActualWidth - _viewPortPad.Left;

    var list = ItemsSource;
    foreach (var v in list)
    {
        var xx = maxHeight*(v.Value/_chartMaxNumber);
        _gridContent.Children.Add(
            rectangle =
                new Rectangle()
                {
                    Fill = _defaultBrush,
                    Height = maxHeight*(v.Value/_chartMaxNumber),
                    Width = maxWidth/list.Count()*0.6,
                    VerticalAlignment = VerticalAlignment.Bottom
                });
        var doubleAnimation = new DoubleAnimation(0, maxHeight*(v.Value/_chartMaxNumber),
            new Duration(new TimeSpan(0, 0, 0, 0, 1000)));

        rectangle.BeginAnimation(Rectangle.HeightProperty, doubleAnimation);

        rectangle.Tag = v.Value;

        if (v.Value == this._maxValue)
            rectangle.Fill = _maxValueBrush;
        _gridContent.Children.Add(
            tb =
                new TextBlock()
                {
                    Text = v.Value.ToString("f"),
                    Margin = new Thickness(0, 0, 0, maxHeight*(v.Value/_chartMaxNumber) + 5),
                    VerticalAlignment = VerticalAlignment.Bottom,
                    HorizontalAlignment = HorizontalAlignment.Center,

                }
            );


        var thicknessAnimation = new ThicknessAnimation(new Thickness(0, 0, 0, 0),
            new Thickness(0, 0, 0, maxHeight*(v.Value/_chartMaxNumber) + 5),
            new Duration(new TimeSpan(0, 0, 0, 0, 1000)));
        tb.BeginAnimation(TextBlock.MarginProperty, thicknessAnimation);

        rectangle.MouseEnter += Rectangle_MouseEnter;
        rectangle.MouseLeave += Rectangle_MouseLeave;
        _gridContent.ColumnDefinitions.Add(new ColumnDefinition());
        Grid.SetColumn(rectangle, _gridContent.ColumnDefinitions.Count - 1);
        Grid.SetColumn(tb, _gridContent.ColumnDefinitions.Count - 1);
    }
}

生成的控件功能虽然简单，但定制化很强，任何地方都能修改，摆脱了使用第三方控件的束缚。

 代码位置：http://download.csdn.net/detail/shushukui/9512216