We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Axis header template - layout not updated

Thread ID:

Created:

Updated:

Platform:

Replies:

150618 Jan 13,2020 03:42 PM UTC Jan 14,2020 08:55 AM UTC WPF 1
loading
Tags: SfChart
Ondrej Svoboda
Asked On January 13, 2020 03:42 PM UTC

Hi,
I have the following axis setup:
<chart:CategoryAxis Header="My header text" >
<chart:CategoryAxis.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="{Binding Path=Value, ElementName=slider}" />
</DataTemplate>
</chart:CategoryAxis.HeaderTemplate>
</chart:CategoryAxis>

Where FontSize is bound to a slider. My problem is when slider value is changed chart layout is not updated and header text is floating out of the chart control area and is not centered anymore. When window is resized, layout is updated and all looks good then.

I think this is a bug, could you please fix this?

Thanks

Hemalatha Marikumar [Syncfusion]
Replied On January 14, 2020 08:55 AM UTC

Hi Ondrej Svoboda, 
  
Greetings from Syncfusion. 
  
We have validated your query and we would like to let you know that currently we don’t have alignment support for ChartAxis Header. By default, the Axis Header aligned from center of corresponding width. So only it’s not aligned properly when dynamically change the FontSize. 
  
You can resolve this by setting the TextAlignment as Center and binding axis ActualWidth value to the TextBlock Width property. And also, manually positioned the axis Header by override the SfChart to position the same when maximizing and minimizing the window as per in the below code snippet. 
                                                
Code Snippet [Xaml]: 
<local:SfChartExt x:Name="chart" > 
  
<syncfusion:CategoryAxis Header="My header text" > 
                    <syncfusion:CategoryAxis.HeaderTemplate> 
                        <DataTemplate> 
                                <TextBlock Text="{Binding}" Width="{Binding ElementName=primaryAxis, Path=ActualWidth}" TextAlignment="Center"  FontSize="{Binding Path=Value, ElementName=slider}" /> 
                        </DataTemplate> 
                    </syncfusion:CategoryAxis.HeaderTemplate> 
  
</local:SfChartExt> 
  
  
Code Snippet [C#]: 
  
public class SfChartExt : SfChart 
    { 
        protected override Size ArrangeOverride(Size arrangeBounds) 
        { 
            var size = base.ArrangeOverride(arrangeBounds); 
  
            // Positioning the Primary Axis. 
            ContentControl xAxisHeader = PrimaryAxis.GetType().GetField("headerContent", 
            System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).GetValue(PrimaryAxis) as ContentControl; 
            Canvas.SetLeft(xAxisHeader, 0); 
  
            // Positioning the Secondary Axis. 
            ContentControl yAxisHeader = SecondaryAxis.GetType().GetField("headerContent", 
            System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).GetValue(SecondaryAxis) as ContentControl; 
            Canvas.SetLeft(yAxisHeader, -(SecondaryAxis.DesiredSize.Height - yAxisHeader.DesiredSize.Height) / 2); 
  
            return size; 
        } 
    } 
  
 
And we have prepared a sample based on your requirement and download the sample from the below link. 
  
  
Please let us know if need any further assistance on this. 
  
Regards, 
Hemalatha M. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon