Create Border for smart label in code behind

[falukky]

I have RadCartesianChart and i am create the AreaSeries view code behind:

RadCartesianChart chart = new RadCartesianChart();
chart.HorizontalAxis = new CategoricalAxis();
chart.VerticalAxis = new LinearAxis();
chart.HorizontalAxis.Visibility = System.Windows.Visibility.Collapsed;
chart.VerticalAxis.Visibility = System.Windows.Visibility.Collapsed;

// Get the style
Style smartLabelStyle = (Style)this.Resources["labelStyle"];

// Create new labelDefinition and set its DefaultVisualStyle property
ChartSeriesLabelDefinition labelDefinition = new ChartSeriesLabelDefinition()
            {
                DefaultVisualStyle = smartLabelStyle,
                Format = "{0:N2}",
                Margin = new Thickness(-40, 0, 0, 0)
            };

MyInstanse = new AreaSeries(); // this is my series
MyInstanse .ShowLabels = true;
MyInstanse .LabelDefinitions.Add(labelDefinition);

chart.Series.Add(MyInstanse);

And this is my XAML label style:
 <Style x:Key="labelStyle" TargetType="TextBlock">
   <Setter Property="Foreground" Value="Gainsboro" />
   <Setter Property="Background" Value="Transparent" />
</Style>

So all i want to add is border around my Label like in this example:

 http://docs.telerik.com/devtools/wpf/controls/radchartview/features/labels/smart-labels.html

 

[David]

I just did this in code-behind today. Hopefully, the code snippets below will point you in the right direction.

MyInstanse.LabelDefinitions.Add(new ChartSeriesLabelDefinition() { Template = this.Resources["labelTemplate"] as DataTemplate });

           

<DataTemplate x:Key="labelTemplate">
    <Border
        Background="Transparent"
        BorderThickness="1"
        BorderBrush="Gainsboro"
        SnapsToDevicePixels="True"
        CornerRadius="1">
        <TextBlock
            Text="{Binding Label}"
            FontSize="8"
            MinWidth="4"
            Margin="1,1,1,0"
            Foreground="Gainsboro" />
    </Border>
</DataTemplate>

[Anna]

Hi,

Thank you for sharing your code snippet with us.

The code for this particular example can be found in our demos, under the Smart Labels example for ChartView. The result you are going for is achieved in the example by using a data template for the label definition. The specific code looks like this.

<telerik:ChartSeriesLabelDefinition VerticalAlignment="Top" Margin="0 0 0 6">
    <telerik:ChartSeriesLabelDefinition.Template>
        <DataTemplate>
            <Border Background="{telerik:Windows8Resource ResourceKey=AccentBrush}" BorderBrush="White" BorderThickness="1">
                <TextBlock Text="{Binding Label}" Foreground="White" FontFamily="Segoe UI" Margin="2 0 2 1" FontSize="10" />
            </Border>
        </DataTemplate>
    </telerik:ChartSeriesLabelDefinition.Template>
</telerik:ChartSeriesLabelDefinition>

Since you've defined your label definition in code behind, you can set the data template as a resource in XAML. Just as the code snippet in your last reply.

<DataTemplate x:Key="labelTemplate">
    <Border Background="Blue">
        <TextBlock Text="{Binding Value}" Foreground="White" FontFamily="Segoe UI" Margin="2 0 2 1" FontSize="10" />
    </Border>
</DataTemplate>

And then use it in code behind:

ChartSeriesLabelDefinition labelDefinition = new ChartSeriesLabelDefinition()
{
    DefaultVisualStyle = smartLabelStyle,
    Template = (DataTemplate)this.Resources["labelTemplate"],
    Format = "{0:N2}",
    Margin = new Thickness(-40, 0, 0, 0)
};

Please, don't hesitate to let me know if you have any concerns or further questions regarding this.

Regards,
Anna
Telerik

[falukky]

When i am using my lebelStyle i am removed all the label in order to see only one label (i am populate my chart with real time data via timer) this way: 

for (int i = 0; i < interfaces[0].LineSeries.DataPoints.Count - 1; i++)
    interfaces[0].LineSeries.DataPoints[i].Label = "";

And after that just add the new point so in this way i can see my label only once. 

But with your DataTemplate i can see over each point the label, why this strange behavior and how can i removed all the label and see only one ?

[Martin Ivanov]

Hi falukky,

RadChartView renders a TextBlock element for each data point's label regardless if the Label property's value is an empty string or another value. This is why when you define a data template a visual element is displayed for each label. I can suggest you couple approaches for achieving your requirement:

• You can bind the visibility of the root element in the label's template to the value with an IValueConverter. If the label's value is an empty string, return Visibility.Collapsed, otherwise return Visibility.Visible. Note that the DataContext passed in the Template of the LabelDefinition is an model of type DataPoint which contains information of the corresponding data point.
  

  <telerik:ChartSeriesLabelDefinition.Template>
      <DataTemplate>
          <TextBlock Text="{Binding Label}" Visibility="{Binding Label, Converter={StaticResource labelToVisbilityConverter}}" Foreground="White" FontFamily="Segoe UI" Margin="2 0 2 1" FontSize="10" />
      </DataTemplate>
  </telerik:ChartSeriesLabelDefinition.Template>

• You can use a chart custom annotation to draw a label at the desired position on the plot area.

I hope this information helps.

Regards,
Martin
Telerik