Create Border for smart label in code behind

5 posts, 0 answers
  1. falukky
    falukky avatar
    2 posts
    Member since:
    Sep 2015

    Posted 10 Sep 2015 Link to this post

    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

     

  2. David
    David avatar
    3 posts
    Member since:
    Apr 2013

    Posted 11 Sep 2015 in reply to falukky Link to this post

    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>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Anna
    Admin
    Anna avatar
    99 posts

    Posted 14 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. falukky
    falukky avatar
    2 posts
    Member since:
    Sep 2015

    Posted 16 Sep 2015 in reply to Anna Link to this post

    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 ?

  6. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 21 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready