文档章节

使用Chart FX for WPF简化图表(一)

咲晚杍
 咲晚杍
发布于 2013/11/21 11:12
字数 713
阅读 636
收藏 3

    有时候你需要漂亮的图表和大量比较绚丽的动画效果,但是有时候又没有必要展示太多视觉上的控件,想要最小化图表空间,使用WPF图表控件Chart FX for WPF就可以很好的实现这两种需求。

    比如说你有一系列的产品,你想要展示关于这些产品一些列的信息,包括产品名称、版本等。

public class ProductInfo
{
    public string Name { get; set; }
    public string Version { get; set; }
    public List<ProductDownloads> Downloads { get; set; }
    public string LatestRelease { get; set; } 
}

public class ProductDownloads
{
    public double Count { get; set; }
}
For simplicity we will use a templated listbox to show multiple columns so our first approach to the problem will look like this
<ListBox Grid.IsSharedSizeScope="true">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" SharedSizeGroup="ColumnName"/>
          <ColumnDefinition Width="Auto" SharedSizeGroup="ColumnVersion"/>
          <ColumnDefinition Width="150" />
          <ColumnDefinition Width="Auto" SharedSizeGroup="ColumnRelease"/>
        </Grid.ColumnDefinitions>
        <TextBlock VerticalAlignment="Center" Grid.Column="0"
                          Text="{Binding Path=Name}" Margin="4,0"/>
        <TextBlock VerticalAlignment="Center" Grid.Column="1"
                          Text="{Binding Path=Version}" Margin="4,0"/>
        <cfx:Chart x:Name="chart1" Grid.Column="2"
                        ItemsSource="{Binding Path=Downloads}"
                        Gallery="Line" Margin="4,0">
          <cfx:Chart.Series>
            <cfx:SeriesAttributes BindingPath="Count"/>
          </cfx:Chart.Series>
          <cfx:Chart.LegendBox>
            <cfx:LegendBox Visibility="Collapsed"/>
          </cfx:Chart.LegendBox>
        </cfx:Chart>
        <TextBlock VerticalAlignment="Center" Grid.Column="3"
                          Text="{Binding Path=LatestRelease}" Margin="4,0"/>
      </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>


 

现在在我们上面得到的示例的基础上进行图表的简化:

<cfx:Chart x:Name="chart1" Grid.Column="2" ItemsSource="{Binding Path=Downloads}"
                Gallery="Line" Margin="4,0" Height="20">
  <cfx:Chart.Series>
    <cfx:SeriesAttributes BindingPath="Count" Stroke="Black" StrokeThickness="1">
      <cfx:SeriesAttributes.Marker>
        <cfx:MarkerAttributes Visibility="Collapsed"/>
      </cfx:SeriesAttributes.Marker>
    </cfx:SeriesAttributes>
  </cfx:Chart.Series>
  <cfx:Chart.LegendBox>
    <cfx:LegendBox Visibility="Collapsed"/>
  </cfx:Chart.LegendBox>
  <cfx:Chart.AxisY>
    <cfx:Axis Visibility="Collapsed"/>
  </cfx:Chart.AxisY>
  <cfx:Chart.AxisX>
    <cfx:Axis Visibility="Collapsed"/>
  </cfx:Chart.AxisX>
  <cfx:Chart.PlotArea>
    <cfx:PlotAreaAttributes Margin="0" AxesStyle="None"
             Background="{x:Null}" Stroke="{x:Null}"/>
  </cfx:Chart.PlotArea>
  <cfx:Chart.Template>
    <ControlTemplate>
      <Border cfx:Chart.PanelName="Plot"/>
    </ControlTemplate>
  </cfx:Chart.Template>
</cfx:Chart>

    在这一步中,我们做了一些简单的变化,比如说隐藏了里那个轴和标记,同时还设置了一些笔刷,值得注意的是,在这里的plotarea通常是指页边空白包围,但是在一些小的图表中,不需要这个页边空白。因此我们可以将图表的高度设置到20。

    我们也简化了图表模版,通过使用预先定义好的样式可以很好实现,但是这个样式允许使用legend box或者是dataview。

WPF图表控件Chart FX使用方法系列:如何简化图表

    接下来就是一些调试就可以完成了,注意在默认的情况下,列表框将会改变选定项的前景色为白色,在DataTemplate中需要一个触发器来完成这个操作:

<DataTemplate.Triggers>
  <DataTrigger
          Binding="{Binding RelativeSource={RelativeSource FindAncestor,
                         AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
          Value="True">
    <Setter TargetName="series" Property="Stroke" Value="White" />
  </DataTrigger>
</DataTemplate.Triggers>

    因为 DataTemplate 实际上应用于 ContentPresenter,我们需要触发器找到ListBoxItem类型的第一个ancestor。

WPF图表控件Chart FX使用方法系列:如何简化图表

    虽然说这个图表很小,但是依然支持鼠标的停靠操作,显示提示信息,具体代码如下:

<cfx:SeriesAttributes.ToolTips>
      <cfx:ToolTipAttributes x:Name="tooltips" IsEnabled="False"/>
    </cfx:SeriesAttributes.ToolTips> 
  <DataTemplate.Triggers>
    <DataTrigger
            Binding="{Binding RelativeSource={RelativeSource FindAncestor,
                          AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
            Value="True">
      <Setter TargetName="series" Property="Stroke" Value="White" />
      <Setter TargetName="tooltips" Property="IsEnabled" Value="True" />
    </DataTrigger>
  </DataTemplate.Triggers>

本文转载自:http://www.evget.com/article/2013/3/6/18597.html

咲晚杍
粉丝 7
博文 75
码字总数 8143
作品 0
渝中
私信 提问
使用Chart FX for WPF简化图表(二)

在上一篇文章《使用Chart FX for WPF简化图表(一)》中实现了图表的简化,节省了大量的控件。在本次的文章中,我们将会增加新的功能到已经简化了的图表上。图表中所绘制的范围上有一个最大和最...

咲晚杍
2013/11/25
183
0
DevExpress v17.2新版亮点—WPF篇(六)

用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExpress WPF v17.2 新的Hamburger Menu、Scheduler Control、Dialogs (CTP)、Dat...

Miss_Hello_World
2018/01/11
42
0
DevExpress v18.1新版亮点——WPF篇(五)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExpress WPF v18.1 的新功能,快来下载试用新版本!点击下载>> Spreadsheet ...

Miss_Hello_World
2018/08/14
20
0
DevExpress v18.1新版亮点——WinForms篇(七)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExpress WinForms v18.1 的新功能,快来下载试用新版本!点击下载>> Skins an...

Miss_Hello_World
2018/07/05
42
0
【更新】Infragistics Ultimate UI for WPF v18.2(三):Excel引擎

下载Infragistics Ultimate UI for WPF最新版本 Infragistics Ultimate UI for WPF是一款提供高速的网格和图表,轻松创建仿Office应用程序的WPF界面框架,从广度和深度两方面使得开发者在缩短...

电池盒
2018/12/20
13
0

没有更多内容

加载失败,请刷新页面

加载更多

【0911】linux软件包安装和卸载

【0911】linux软件包安装和卸载 一、安装软件包的三种方法 1、rpm工具:与win中的exe安装包类似,红帽子公司包管理系统 2、yum工具:属于一种用python开发的工具,支持自动的安装依赖的包 3、...

飞翔的竹蜻蜓
29分钟前
3
0
【外行学IT】手机网页自适应之rem和viewport

在写手机网页时,对于像素的问题会非常困惑,初学者很多时候会因为那么一个小点的问题解决不了,或者无法理解透彻就放弃了学习。 我在学习写手机网页时也困惑了许久,出现过下面的问题: 图片...

前端老手
40分钟前
5
0
三、Java设计模式之单一职责原则

定义:不要存在多于一个导致类变更的原因。 一个类、接口、方法只负责一项职责 优点:降低类的复杂度、提高类的可读性,提高系统的可维护性、降低变更引起的风险

东风破2019
47分钟前
4
0
搭建高可用MongoDB集群(分片)

搭建高可用MongoDB集群(分片) KaliArch关注1人评论28269人阅读2017-12-04 21:57:41 MongoDB基础请参考:https://blog.51cto.com/kaliarch/2044423 MongoDB(replica set)请参考:https:/...

linjin200
今天
6
0
Pandas DataFrame创建方法大全

Pandas是Python的数据分析利器,DataFrame是Pandas进行数据分析的基本结构,可以把DataFrame视为一个二维数据表,每一行都表示一个数据记录。本文将介绍创建Pandas DataFrame的6种方法。 创建...

汇智网教程
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部