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

发布网友发布时间：2022-04-28 20:56

共1个回答

热心网友时间：2022-06-23 04:18

有时候需要编写一个在图表文本中使用的小类，而且需要在其他的场景中也可以使用。现在来看一下如何在Chart FX for WPF中绘制可视化圆角边框，RoundClipBorder就是这些类中的一个，它源自于边缘，但是会使用圆形的边界来放置内容，接下来来一起看一下一个矩形的边框： <Border CornerRadius="5" BorderBrush="Black" BorderThickness="2"> <Image Source="pack://siteoforigin:,,,/img/US.png"/> </Border> 如果你仔细的看，会发现在边界的地方时比较薄的，下面来看看如果增加边角半径会发生什么样的状况呢？从上面的图中，显而易见的发现，WPF绘制的图表的内容，然后再绘制一个矩形包围内容，但是现在发现，这个矩形进入了内容的部分，变成了一个溢出的问题，RoundClipBorder通过创建一个几何图形，然后切断它的子组成部分就可以了。 <cfxControls:RoundClipBorder CornerRadius="12" BorderBrush="Black" BorderThickness="2"> <Image Source="pack://siteoforigin:,,,/img/US.png"/> </cfxControls:RoundClipBorder> 还可以将数据绑定到图表，然后自定义图表工具提示和显示数据： 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> 第一步：将图表绑定到页面中对象数据提供应用程序，然后再选择区域用于绘制和标签，在这里可以启动图表创建导航来选择配置数据。第二步：配置图表提示工具用于显示来自选定项目中的其他的数据，在导航中，我们现在选择导航，在导航工具显示的配置页面中选择了所有的可用区域。第三步：选择Flag作为图像区域，为了达到最后的效果，选择了圆形剪切。第四步：单击完成，运行应用程序就会出现如下所示的图表和提示：