用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