【Telerik控件学习】-制作3D效果的柱状图(ChartView)

简介: 首先,定义柱状图,并设置自定义的DataTemplate ...

首先,定义柱状图,并设置自定义的DataTemplate

        <telerik:RadCartesianChart >
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis Minimum="0"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:CategoricalAxis IsInverse="True" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="X" />
            </telerik:RadCartesianChart.Grid>
            <telerik:BarSeries ItemsSource="{Binding ChartDatas}" CategoryBinding="Name" ValueBinding="Value" ShowLabels="True" IsSelected="True" >
                <telerik:BarSeries.PointTemplate>
                    <DataTemplate>
                        <kpiCtrl:Histogram CategoryName="{Binding Converter={StaticResource histogramColorConverter}}"/>
                    </DataTemplate>
                </telerik:BarSeries.PointTemplate>
                <telerik:BarSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition Format="{}{0:0.00}" HorizontalAlignment="Center" VerticalAlignment="Center" DefaultVisualStyle="{StaticResource barSeriesLabelStyle}" />
                </telerik:BarSeries.LabelDefinitions>
            </telerik:BarSeries>
        </telerik:RadCartesianChart>
View Code

接着自定义用户控件:Histogram,CategoryName属性用来区分不同属性名显示不同色系

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

        public string CategoryName
        {
            get { return (string)GetValue(CategoryNameProperty); }
            set { SetValue(CategoryNameProperty, value); }
        }

        public static readonly DependencyProperty CategoryNameProperty =
            DependencyProperty.Register("CategoryName", typeof(string), typeof(Histogram), new PropertyMetadata(null,new PropertyChangedCallback(CategoryNameChanged)));

        private static void CategoryNameChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var obj = d as Histogram;
            if (obj != null && obj.CategoryName == "限值")
            {
               obj.rect1.Fill=new SolidColorBrush(Color.FromRgb(246,188,16));
               obj.rect2.Fill = new SolidColorBrush(Color.FromRgb(194, 153, 11));
               obj.rect3.Fill = new SolidColorBrush(Color.FromRgb(158, 123, 3));
            }
            else
            {
                obj.rect1.Fill = new SolidColorBrush(Color.FromRgb(175, 216, 248));
                obj.rect2.Fill = new SolidColorBrush(Color.FromRgb(135, 173, 196));
                obj.rect3.Fill = new SolidColorBrush(Color.FromRgb(111, 139, 161));
            }
        }
    }
View Code
<UserControl x:Class="RunTime.WPF.UserCtrl.KpiCtrl.Histogram"
             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="300" d:DesignWidth="300">
    <Grid Height="80">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="20"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <Rectangle Fill="#AFD8F8" Grid.Column="0" Grid.Row="0" x:Name="rect1"/>
        <Rectangle Fill="#87ADC4" Grid.Column="1" Grid.Row="0" x:Name="rect2">
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="0" AngleY="45"></SkewTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Fill="#6F8BA1"  Grid.Row="1" Grid.Column="0" x:Name="rect3">
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="45" AngleY="0"></SkewTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</UserControl>
View Code

别忘了把将CategoricalDataPoint中的Category属性转换成绑定的属性

    /// <summary>
    /// 柱图Category转换
    /// </summary>
    public class HistogramColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var cat = value as CategoricalDataPoint;
            if (cat != null) return cat.Category.ToString();
            return string.Empty;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
View Code

完工,看看3D柱图效果

 

 

img_8f0a90f3cbaa0e044fb8bf7b13c4317b.jpe

文章作者:原子蛋
文章出处:https://www.cnblogs.com/lizzie-xhu/
个人网站:https://www.lancel0t.cn/
个人博客:https://blog.lancel0t.cn/
微信公众号:原子蛋Live+
扫一扫左侧的二维码(或者长按识别二维码),关注本人微信公共号,获取更多资源。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

目录
相关文章
|
前端开发 C#
WPF 曲线图表控件(自制)(一)
原文:WPF 曲线图表控件(自制)(一) 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/koloumi/article/details/77509283 由于公司需要所以自写了一个简单的曲线图表控件,在此分享。
1932 0
|
9月前
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
134 1
|
人工智能 搜索推荐 C#
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
结合Photoshop和WPF,共同创建一个矢量的个性化进度条。
502 0
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
|
C#
WPF 曲线图表控件(自制)(二)
原文:WPF 曲线图表控件(自制)(二) 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/koloumi/article/details/77521872 如果还有不懂的请去资源区下载控件包含所有源码 http://download.csdn.net/download/koloumi/9947692 接下来将代码上的。
1069 0
|
Web App开发 C# Windows
制作一个简单的WPF图片浏览器
原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动。先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片进行灰度处理4.  对选定图片进行裁切处理5.  无限制的恢复功能6. 类似加入购物车的功能以下来看看其实现过程。
946 0
|
Web App开发 C# Windows
WPF图片浏览器(显示大图、小图等)
原文:WPF图片浏览器(显示大图、小图等) 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangshubo1989/article/details/46784601 1.概述                最近利用WPF做了一个图片浏览器,能够将文件夹中的所有图片以小图的形式显示,并将选中的图片以512*512大小显示。
2501 0