Category / Section
How to customize the timescale labels appearance?
1 min read
Description:
This article describes how to customize the timescale labels appearance.
Solution:
This requirement can be achieved by setting the LabelTemplate property in timescale tier.
The following code sample illustrates the label template usage along with alignment customization.
[XAML]
<Grid.Resources>
<DataTemplate x:Key="TopTierLabelTemplate">
<Border BorderBrush="Blue" BorderThickness="2" Background="SkyBlue">
<TextBlock Text="{Binding Content}" Foreground="Red"
TextAlignment="{Binding LabelAlignment}" FontSize="25"/>
</Border>
</DataTemplate>
</Grid.Resources>
<gantt:SfGantt ItemsSource="{Binding TaskCollection}">
<gantt:SfGantt.TimescaleSettings>
<gantt:TimescaleSettings>
<gantt:TimescaleSettings.TopTier>
<gantt:TimescaleTier LabelTemplate="{StaticResource TopTierLabelTemplate}"/>
</gantt:TimescaleSettings.TopTier>
</gantt:TimescaleSettings>
</gantt:SfGantt.TimescaleSettings>
</gantt:SfGantt>
[C#]
this.Gantt.TimescaleSettings.TopTier.LabelTemplate = this.MainGrid.Resources["TopTierLabelTemplate"] as DataTemplate;
The following screenshot is the output of the above code.
Please find the required sample from the link.
