WPF 自定義BarChartControl（可左右滑動的柱狀圖）

自定義可左右滑動、拖拽滑動的平面柱狀圖在做這種樣式控制項之前，可先瀏覽我之前預研的控制項： A、自定義左右滑動ScrollViewer(可拖動滑動） B、自定義Bar柱狀圖 OK，現在說下控制項具體設計過程： 1）採用Grid佈局，這樣可以將Y軸的標題設置平均高度，X軸的柱子也可以平均。當然X軸也會存 ...

自定義可左右滑動、拖拽滑動的平面柱狀圖

在做這種樣式控制項之前，可先瀏覽我之前預研的控制項：

A、自定義左右滑動ScrollViewer(可拖動滑動）

B、自定義Bar柱狀圖

OK，現在說下控制項具體設計過程：

1）採用Grid佈局，這樣可以將Y軸的標題設置平均高度，X軸的柱子也可以平均。

　　當然X軸也會存在一個問題，當數據較少時，只有倆個柱子難道就佈滿界面？

　　很簡單，在Grid中多添加一個ColumnDefinition就行了，柱子的寬度設置成可配置，額外的一個設置成預設填充。

2）Bar採用RadioButton,因為有Checked屬性，之後整個控制項SelectionChanged的事件源可以從這來

3）滑動條容器，我這邊比較熟悉DevExpress控制項，所以用的是ScrollBox，然後修改其中的模板。

其它的一些設置比較簡單，就不說了，直接看代碼

1、UserControl界面

<UserControl x:Class="BarChartControlDemo.BarChartControl"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
            mc:Ignorable="d" 
            d:DesignHeight="100" d:DesignWidth="200" Loaded="BarChartControl_OnLoaded">
    <UserControl.Resources>
        <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Grid Height="0"></Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <ControlTemplate x:Key="LightedBtnTemplate" TargetType="RadioButton">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="5"></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition Height="5"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5"></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="5"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Rectangle Grid.Row="1" Grid.Column="1" Fill="{TemplateBinding Background}"></Rectangle>

                <Grid x:Name="Grid_00" Grid.Row="0" Grid.Column="0"></Grid>
                <Grid x:Name="Grid_02" Grid.Row="0" Grid.Column="2"></Grid>
                <Grid x:Name="Grid_20" Grid.Row="2" Grid.Column="0"></Grid>
                <Grid x:Name="Grid_22" Grid.Row="2" Grid.Column="2"></Grid>
                <Grid x:Name="Grid_Top" Grid.Row="0" Grid.Column="1"></Grid>
                <Grid x:Name="Grid_Bottom" Grid.Row="2" Grid.Column="1"></Grid>
                <Grid x:Name="Grid_Left" Grid.Row="1" Grid.Column="0"></Grid>
                <Grid x:Name="Grid_Right" Grid.Row="1" Grid.Column="2"></Grid>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="Grid_00" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="Transparent" Offset="0.5"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="Grid_02" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="Transparent" Offset="0.5"></GradientStop>
                            </LinearGradientBrush>

                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="Grid_20" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="Transparent" Offset="0.5"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="Grid_22" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="Transparent" Offset="0.5"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="Grid_Top" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="1,1" EndPoint="1,0">
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="Transparent" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="Grid_Bottom" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="Transparent" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="Grid_Left" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="1,1" EndPoint="0,1">
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="Transparent" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="Grid_Right" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="Transparent" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid x:Name="HeaderGrid" Grid.Row="0" Grid.Column="1" Height="20">
        </Grid>

        <Grid x:Name="LeftGrid" Grid.Row="1" Grid.Column="0" Width="20">
        </Grid>
        <Border x:Name="MainBorder" Grid.Row="1" Grid.Column="1" BorderThickness="2,0,2,0" BorderBrush="Black">
        </Border>
        <Grid x:Name="MainGridForRow1" Grid.Row="1" Grid.Column="1">

        </Grid>

        <Grid x:Name="MainGridFrom0To1Content" Grid.Row="0" Grid.RowSpan="3" Grid.Column="1">
            <dxlc:ScrollBox x:Name="MyScrollBoxFrom0To1" HorizontalScrollBarStyle="{StaticResource ScrollBarStyle1}" Padding="0" Margin="0">
                <Grid x:Name="MainBarContent" VerticalAlignment="Stretch">

                </Grid>
            </dxlc:ScrollBox>
            <Button x:Name="BtnLeft" Height="30" Margin="5" Opacity="0.5" Click="BtnLeft_OnClick" Background="Transparent" Content="向左滑" HorizontalAlignment="Left" Visibility="Visible">
                <Button.Template>
                    <ControlTemplate>
                        <Grid VerticalAlignment="Center">
                            <Path Stroke="White" StrokeThickness="3" Data="m0,13 L13,0"></Path>
                            <Path Stroke="White" StrokeThickness="3" Data="m0,11 L13,24"></Path>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <Button x:Name="BtnRight" Height="25" Margin="5" Click="BtnRight_OnClick" Background="Transparent" Content="向右滑" HorizontalAlignment="Right" Visibility="Visible">
                <Button.Template>
                    <ControlTemplate>
                        <Grid VerticalAlignment="Center">
                            <Path Stroke="White" StrokeThickness="3" Data="m13,13 L0,0"></Path>
                            <Path Stroke="White" StrokeThickness="3" Data="m13,11 L0,24"></Path>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Grid>

        <!--<Grid x:Name="RightGrid" Grid.Row="1" Grid.Column="2">
            </Grid>-->

        <Grid x:Name="BottomGrid" Grid.Row="2" Grid.Column="1" Height="20">
        </Grid>
    </Grid>
</UserControl>

View Code

2、UserControl後臺

 public partial class BarChartControl : UserControl
    {
        public BarChartControl()
        {
            InitializeComponent();
        }

        public Brush BorderBrush
        {
            get { return (Brush)GetValue(BorderBrushProperty); }
            set { SetValue(BorderBrushProperty, value); }
        }

        public static readonly DependencyProperty BorderBrushProperty = DependencyProperty.Register("BorderBrush",
        typeof(Brush), typeof(BarChartControl),
        new PropertyMetadata(Brushes.Black));

        public Thickness BorderThickness
        {
            get { return (Thickness)GetValue(BorderThicknessProperty); }
            set { SetValue(BorderThicknessProperty, value); }
        }

        public static readonly DependencyProperty BorderThicknessProperty = DependencyProperty.Register("BorderThickness",
        typeof(Thickness), typeof(BarChartControl),
        new PropertyMetadata(new Thickness(1.0, 0.0, 1.0, 1.0)));

        public AxisYModel AxisY
        {
            get { return (AxisYModel)GetValue(AxisYProperty); }
            set { SetValue(AxisYProperty, value); }
        }

        public static readonly DependencyProperty AxisYProperty = DependencyProperty.Register("AxisY",
        typeof(AxisYModel), typeof(BarChartControl),
        new PropertyMetadata(new AxisYModel()));

        public AxisXModel AxisX
        {
            get { return (AxisXModel)GetValue(AxisXProperty); }
            set { SetValue(AxisXProperty, value); }
        }

        public static readonly DependencyProperty AxisXProperty = DependencyProperty.Register("AxisX",
        typeof(AxisXModel), typeof(BarChartControl),
        new PropertyMetadata(new AxisXModel()));
        public double HeaderHeight
        {
            get { return (double)GetValue(HeaderHeightProperty); }
            set { SetValue(HeaderHeightProperty, value); }
        }
        public static readonly DependencyProperty HeaderHeightProperty = DependencyProperty.Register("HeaderHeight",
        typeof(double), typeof(BarChartControl), new PropertyMetadata(10.0));
        public string Header
        {
            get { return (string)GetValue(HeaderProperty); }
            set { SetValue(HeaderProperty, value); }
        }
        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header",
        typeof(string), typeof(BarChartControl), new PropertyMetadata());

        private void BarChartControl_OnLoaded(object sender, RoutedEventArgs e)
        {
            MainBorder.BorderBrush = BorderBrush;
            MainBorder.BorderThickness = BorderThickness;

            HeaderGrid.Height = HeaderHeight;
            MainBarContent.Height = MyScrollBoxFrom0To1.ActualHeight - 17;
            LeftGrid.Width = AxisY.Width;

            SetYTitlesContent();

            SetXDatasContent();
        }

        private void SetXDatasContent()
        {
            var axisXModel = AxisX;
            if (axisXModel.Datas.Count > 0)
            {
                int count = axisXModel.Datas.Count;
                double barArea = axisXModel.BarWidth + axisXModel.MarginWidth * 2;

                for (int i = 0; i < count + 1; i++)
                {
                    MainBarContent.ColumnDefinitions.Add(new ColumnDefinition()
                    {
                        Width = new GridLength(barArea)
                    });
                }
                int index = 0;
                foreach (var data in axisXModel.Datas)
                {
                    //主內容
                    var stackPanel = new StackPanel();
                    stackPanel.Orientation = Orientation.Vertical;

                    var tbl = new TextBlock();
                    tbl.Height = 15;
                    tbl.Text = data.Value.ToString();
                    tbl.Foreground = axisXModel.ForeGround;
                    tbl.HorizontalAlignment = HorizontalAlignment.Center;
                    stackPanel.Children.Add(tbl);

                    var radioButton = new RadioButton();
                    radioButton.Template = (ControlTemplate)this.Resources["LightedBtnTemplate"];
                    radioButton.Width = axisXModel.BarWidth;
                    double maxValue = AxisY.Titles.Max(i => i.Value);
                    radioButton.Height = (data.Value / maxValue) * (this.ActualHeight - BottomGrid.Height - HeaderHeight + 10);
                    var linearBrush = new LinearGradientBrush()
                    {
                        StartPoint = new Point(1, 0),
                        EndPoint = new Point(1, 1),
                        GradientStops = new GradientStopCollection() { 
                                            new GradientStop()
                                            {
                                                Color = data.FillBrush, Offset = 0
                                            }, new GradientStop()
                                            {
                                                Color = data.FillEndBrush, Offset = 1
                                            }
                                        }       
                    };
                    radioButton.Background = linearBrush;
                    radioButton.HorizontalAlignment = HorizontalAlignment.Center;
                    radioButton.Click += RadioButton_OnClick;
                    stackPanel.Children.Add(radioButton);

                    //底部
                    var bottomTbl = new TextBlock();
                    bottomTbl.Text = data.Name;
                    bottomTbl.Foreground = axisXModel.ForeGround;
                    bottomTbl.VerticalAlignment = VerticalAlignment.Center;
                    bottomTbl.TextAlignment = TextAlignment.Center;
                    bottomTbl.HorizontalAlignment = HorizontalAlignment.Center;
                    double textBlockWidth = axisXModel.LabelWidth;
                    bottomTbl.Width = axisXModel.LabelWidth;

                    stackPanel.Children.Add(bottomTbl);
                    Grid.SetColumn(stackPanel, index);
                    stackPanel.Margin = new Thickness(0, 0, -textBlockWidth / 2, -17);
                    stackPanel.VerticalAlignment = VerticalAlignment.Bottom;
                    stackPanel.HorizontalAlignment = HorizontalAlignment.Right;

                    MainBarContent.Children.Add(stackPanel);
                    MainBarContent.Background = Brushes.Transparent;
                    index++;
                }
                double mainBarContentWidth = count * barArea;
                if (mainBarContentWidth > MainGridFrom0To1Content.ActualWidth)
                {
                    BtnLeft.Visibility = Visibility.Visible;
                    BtnRight.Visibility = Visibility.Visible;
                }
            }

        }

        public delegate void BarSelectionChangedEventArgs(object sender, RoutedEventArgs e);

        public event BarSelectionChangedEventArgs BarSelectionChanged;
        private void RadioButton_OnClick(object sender, RoutedEventArgs e)
        {
            var currentButton = sender as RadioButton;
            foreach (var element in MainBarContent.Children)
            {
                var stackPanel = element as StackPanel;
                var button = stackPanel.Children[1] as RadioButton;
                if (button != currentButton)
                {
                    button.IsChecked = false;
                }
            }
            if (BarSelectionChanged!=null)
            {
                BarSelectionChanged(sender, e);
            }
        }
        private void SetYTitlesContent()
        {
            var axisYModel = AxisY;