WPF - Simple timeline in DataGrid - wpf

Question

i need to realize a simple timeline in a datagrid (72 months).
Today i started with a test (class and xaml below), where i create a property for each month as bool, create a datagridview with 74 columns (Title,Amount and 72 months), and bind each month-column (DataGridTemplateColumn) to the bool value (with da datatrigger to turn it red). Finally it looks ok and works, but i think, there must be a better way to realize it (e.g. don't create a property for each month/don't create a DataGridTemplateColumn for each month)
Thanks in advance for your inputs!
Best regards,
Flo
Class:
public class TestItem
{
public string Ttile { get; set; }
public int Amount { get; set; }
public bool Month1 { get; set; }
public bool Month2 { get; set; }
}
Xaml:
<DataGrid x:Name="TimeLineDataGrid" Grid.Row="1" AutoGenerateColumns="False" CanUserAddRows="False" HeadersVisibility="Column">
<DataGrid.Columns>
<DataGridTextColumn x:Name="TitleTextColumn" Binding="{Binding Title}">
<DataGridTextColumn.Header>
<TextBlock TextAlignment="Center" Text="laufende und geplante
Vorhaben" />
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn x:Name="AmountColumn" Binding="{Binding Amount}" Header="Amount">
</DataGridTextColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Name="textbox1" HorizontalAlignment="Stretch" Margin="0" Padding="0" VerticalAlignment="Stretch">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Month1}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Name="textbox1" HorizontalAlignment="Stretch" Margin="0" Padding="0" VerticalAlignment="Stretch">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Month2}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>

Answer 1

Had the same problem. It's not a great solution, but i've made just one DataGridTemplateColumn with lots of different additional classes and resources. Took a lot of time - not a great solution, but m.b. will be helpful for you, so now it looks as something like that:
<DataGridTemplateColumn
x:Name="MainGanttColumn" Width="SizeToCells">
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="BorderBrush" Value="#FFB2BECE"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC3D4EB" Offset="1"/>
<GradientStop Color="#FFECF5FC"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="ControlTimeLine" TargetType="DataGridColumnHeader">
<Border x:Name="BackgroundBorder" Margin="0" BorderThickness="1,0,1,0" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
<Border.Child>
<ItemsControl DataContext="{Binding Source={StaticResource ProxyElement},Path=Data.GanttCalendar}" Margin="0" Style="{StaticResource GanttHeaderStyle}"/>
</Border.Child>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<ItemsControl Panel.ZIndex="3" Margin="0" ItemsSource="{Binding GanttTasks}" Name="Lines">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:GanttElementsPanel DataContext="{Binding Source={StaticResource ProxyElement},Path=Data.GanttCalendar}" MinDate="{Binding MinDate}" MaxDate="{Binding MaxDate}" GanttVariant="{Binding GanttVariant}" DayWidth="{StaticResource GridLineDayWidth}" MonthWidth="{StaticResource GridLineMonthWidth}" YearWidth="{StaticResource GridLineYearWidth}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="local:GanttElementsPanel.StartDate" Value="{Binding Path=Start}"/>
<Setter Property="local:GanttElementsPanel.EndDate" Value="{Binding Path=End}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Style="{StaticResource RectangleStyle}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ContentControl Panel.ZIndex="0" Margin="0" Padding="0" ContentTemplate="{StaticResource GanttGridLinesTemplate}" Content="{Binding Source={StaticResource ProxyElement},Path=Data.GridLines}" Height="{Binding ElementName=Lines.ActualHeight}"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
Result Image