WPF 自定义BarChartControl（可左右滑动的柱状图）

自定义可左右滑动、拖拽滑动的平面柱状图

 

在做这种样式控件之前，可先浏览我之前预研的控件：

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