文档章节

使用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

没有更多内容

加载失败,请刷新页面

加载更多

for循环

九九乘法表 示例:for(int i = 1; i <= 9; i++){ for (int j = 1; j <= i; j++) { // 每次开始i循环,j都会重新定义为j=1,然后开始循环计算 System.out.print(j +......

Shutting
3分钟前
1
0
小王子1

一定要帅! 韩国设计师品牌 insgram全世界得网红 韩国潮男穿搭 HM 找到穿衣服最好看的人,跟他比,比他好看。 在兴趣前,不要表现目的性,压力 关系是不热就冷的! 不喜欢压力,不喜欢负责任...

阿锋zxf
22分钟前
5
0
时间戳

1 loadTimeString(ts) { var d = new Date(); if (String(ts).length == 10) { d = new Date(ts * 1000); ......

东方巨人
23分钟前
3
0
Redis Cluster

Redis Cluster 集群 redis集群有以下几种方式 普通一主多从 普通一主多从+哨兵 cluster分片模式 一主多从 搭建方式网上很多,就不多描述了。 这种集群方式,一般master用作写,slave用做读,...

lazy~
24分钟前
4
0
 介绍一款优秀的通用管理权限快速开发框架

这是一套以权限管理为主的轻量化快速开发框架,配置有流程、专业表单、权限、app、企业微信等基础功能模块,在开发通用软件的效率上很有优势。 软件平台常用研发需求分析 《那些年我们一起做...

我想造火箭
40分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部