Sometimes we write small classes to be used in the chart context but they could be useful in other scenarios. RoundClipBorder is one of these classes, it derives from Border but it will clip its content using a rounded border. Let’s see what happens if you try a regular WPF border around a rectangular object

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

It actually looks very nice so you are probably wondering what all the fuss is about, if you look really closely the borders are thinner around the corners, let’s see what happens if we increase the CornerRadius to a bigger size.

Now you can clearly see what is going on, WPF is drawing the content and then drawing a rounded rectangle around it but its corners are getting into the content and what looked like a small thinner-around-the-corners issue has now turned into an overflow. RoundClipBorder works around this issue by creating a geometry and then clipping its child.

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

 

This class lives in the ChartFX.WPF.Controls assembly so you might have to add a reference to it in your project, if you are wondering why we created this class let me show you how our design time wizard allows you to bind data to the chart and then customize the chart tooltips to display rich content in your data.

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>

First step, let’s bind the chart to the object data provider in our page and pick the fields to be used in the plot and labels, to do this we start the chart wizard and select Configure Data

Now let’s configure the chart tooltips to display other data for the selected item, in the wizard we will now select Tooltips, after selecting all available fields in a similar page we get prompted for our tooltip configuration

Here is where our little control gets to be used, we will select Flag as the image field and for the Effect we will choose Round Clipped

Click Next and Accept, run your program and you will get the following chart and tooltip

JuanC