彩票走势图

WPF图表控件Chart FX使用方法系列:如何绘制可视化圆角边框

原创|使用教程|编辑:郝浩|2013-02-17 14:23:31.000|阅读 949 次

概述:有时候需要编写一个在图表文本中使用的小类,而且需要在其他的场景中也可以使用。现在来看一下如何在Chart FX for WPF中绘制可视化圆角边框,RoundClipBorder就是这些类中的一个,它源自于边缘,但是会使用圆形的边界来放置内容,接下来来一起看一下一个矩形的边框。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

有时候需要编写一个在图表文本中使用的小类,而且需要在其他的场景中也可以使用。现在来看一下如何在Chart FX for WPF中绘制可视化圆角边框,RoundClipBorder就是这些类中的一个,它源自于边缘,但是会使用圆形的边界来放置内容,接下来来一起看一下一个矩形的边框:

<Border CornerRadius="5" BorderBrush="Black" BorderThickness="2">
  <Image Source="pack://siteoforigin:,,,/img/US.png"/>
</Border>

如何在Chart FX for WPF中绘制可视化圆角边框

如果你仔细的看,会发现在边界的地方时比较薄的,下面来看看如果增加边角半径会发生什么样的状况呢?

如何在Chart FX for WPF中绘制可视化圆角边框

 

从上面的图中,显而易见的发现,WPF绘制的图表的内容,然后再绘制一个矩形包围内容,但是现在发现,这个矩形进入了内容的部分,变成了一个溢出的问题,RoundClipBorder通过创建一个几何图形,然后切断它的子组成部分就可以了。

<cfxControls:RoundClipBorder CornerRadius="12"
 BorderBrush="Black" BorderThickness="2">
<Image Source="pack://siteoforigin:,,,/img/US.png"/>
</cfxControls:RoundClipBorder>

如何在Chart FX for WPF中绘制可视化圆角边框

 

还可以将数据绑定到图表,然后自定义图表工具提示和显示数据:

public class CountryData
{
    public string Name { get; set; }
    public double Population { get; set; }
    public string Language { get; set; }
    public string Flag { get; set; }
    public double Sales { get; set;}
}
<Window.Resources>
  <ObjectDataProvider x:Key="countryData"
                      ObjectType="{x:Type localData:CountrySalesList}" />
</Window.Resources>
<Grid>
  <ChartFX:Chart>
  </ChartFX:Chart>
</Grid>

第一步:将图表绑定到页面中对象数据提供应用程序,然后再选择区域用于绘制和标签,在这里可以启动图表创建导航来选择配置数据。

如何在Chart FX for WPF中绘制可视化圆角边框

 

第二步:配置图表提示工具用于显示来自选定项目中的其他的数据,在导航中,我们现在选择导航,在导航工具显示的配置页面中选择了所有的可用区域。

如何在Chart FX for WPF中绘制可视化圆角边框

 

第三步:选择Flag作为图像区域,为了达到最后的效果,选择了圆形剪切。

如何在Chart FX for WPF中绘制可视化圆角边框

 

第四步:单击完成,运行应用程序就会出现如下所示的图表和提示:

如何在Chart FX for WPF中绘制可视化圆角边框


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP