Pre loader

Text Annotation Resizing with ControlTemplates

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
1
0

Hi,

I’ve been trying to make the textannotations resize with the graph itself, because the text becomes very large compared to the graph if the window is sized to be smaller.

I’ve seen some people have asked the same question before me, but the solution with the Scale Transforms is offsetting the annotations when the graph is resized, which doesn’t look good, and the ControlTemplate Solution here: https://www.scichart.com/questions/question/text-annotation-size isn’t working and puts up a background color which I can’t seem to get rid of.

I also looked at making a controltemplate for BoxAnnotations but I’m using Properties that aren’t defined in BoxAnnotation such as the HorizontalAnchorPoint.

This is the template I’m trying to use:

            <Style TargetType="{x:Type SciChart:TextAnnotation}">
            <Setter Property="Template">
                <Setter.Value>
                        <ControlTemplate TargetType="SciChart:TextAnnotation">
                            <Border x:Name="PART_TextAnnotationRoot"
        Margin="{TemplateBinding Margin}"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="{TemplateBinding CornerRadius}">
                                <Viewbox Stretch="{TemplateBinding TextStretch}">
                                    <TextBox x:Name="PART_InputTextArea"
             Margin="{TemplateBinding Padding}"
             VerticalAlignment="{TemplateBinding VerticalAlignment}"
             AcceptsReturn="True"
             Background="Transparent"
             BorderThickness="0"
             FontFamily="{TemplateBinding FontFamily}"
             FontSize="{TemplateBinding FontSize}"
             FontWeight="{TemplateBinding FontWeight}"
             Foreground="{TemplateBinding Foreground}"
             IsEnabled="{Binding CanEditText,
                                 RelativeSource={RelativeSource TemplatedParent}}"
             IsTabStop="{TemplateBinding IsEditable}"
             Text="{Binding Text,
                            RelativeSource={RelativeSource TemplatedParent},
                            Mode=TwoWay}"
             TextAlignment="{TemplateBinding TextAlignment}"
             TextWrapping="Wrap" />
                                </Viewbox>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
            </Setter>
        </Style>

Any help would be appreciated.

  • You must to post comments
Best Answer
0
0

A lot of people ask about this, but fundamentally the approach of Viewbox is not going to work, as the Annotation is placed on a canvas, so the annotation will always size to fit its contents (not restrict content size – which is required for Viewbox to work).

What you could do instead however is use a simple binding to the parent canvas width and dynamically adjust FontSize of the TextAnnotation. Please find an example below:

XAML

<Window x:Class="Abt.Controls.SciChart.Wpf.TestSuite.TestCases.AnnotationDynamicResize.AnnotationsDymamicResize"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        xmlns:annotationDynamicResize="clr-namespace:Abt.Controls.SciChart.Wpf.TestSuite.TestCases.AnnotationDynamicResize"
        Title="AnnotationsDymamicResize" Height="300" Width="300">
    <Grid>
        <Grid.Resources>
            <annotationDynamicResize:AnnotationFontSizeConverter x:Key="FontSizeConverter"/>
        </Grid.Resources>
        <s:SciChartSurface>
            <s:SciChartSurface.XAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.Annotations>
                <s:TextAnnotation Text="Hello World!" FontSize="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}, Converter={StaticResource FontSizeConverter}}" />
            </s:SciChartSurface.Annotations>
        </s:SciChartSurface>
    </Grid>
</Window>

Code

using System.Windows;

namespace Abt.Controls.SciChart.Wpf.TestSuite.TestCases.AnnotationDynamicResize
{
    public partial class AnnotationsDymamicResize : Window
    {
        public AnnotationsDymamicResize()
        {
            InitializeComponent();
        }
    }

    public class AnnotationFontSizeConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            double width = (double) value;

            if (width < 100)
                return 10;

            if (width > 1000)
                return 19;

            return width*0.01 + 9;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Result

enter image description here

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies