WPF 自定义柱状图 BarChart

WPF 自定义柱状图

当前的Telerik控件、DevExpress控件在图表控件方面做得不错，但是有时项目中需要特定的样式，不是只通过修改图表的模板和样式就能实现的。

或者说，通过修改当前的第三方控件以达到项目中UI的界面效果，花费的时间远比重新自定义一个控件要长得多！

所以直接自定义柱状图吧~下面是柱状图的效果：

WPF 自定义柱状图 BarChart

Git代码下载：https://github.com/Kybs0/BarChartControl

1、新建一个UserControl，在界面上添加一些简单的布局

<UserControl x:Class="WpfApplication11.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" 
            mc:Ignorable="d" 
            d:DesignHeight="100" d:DesignWidth="200" Loaded="BarChartControl_OnLoaded">
    <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">
        </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="MainGridFrom0To1" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2">

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

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

View Code