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.