如何基于开始时间和结束时间在Tablegrid上绘制矩形网格条

Question

我是c＃，WPF和

的新手

目前，我能够绘制一个矩形网格条，如下所示： 使用我的WPF代码：

<Window x:Class="FunctionalFun.UI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp_Ui_dESIGN"
        xmlns:gc="clr-namespace:FunctionalFun.UI"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Name="myFirstGrid" Width="1000" Height="314" Canvas.Top="206">

        <Grid.Resources>
            <x:Array x:Key="Tasks" Type="{x:Type gc:Task}">
                <gc:Task  Name="Task 1" Start="05:00" End="12:10"/>

            </x:Array>

        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="10"/>
        </Grid.RowDefinitions>
        <Grid.Effect>
            <DropShadowEffect Color="#FFDEDADA" ShadowDepth="3"/>
        </Grid.Effect>
        <ItemsControl Grid.Row="0"  ItemsSource="{StaticResource Tasks}" Margin="50,30,0,-50">

            <ItemsControl.ItemContainerStyle>
                <Style>

                    <Setter Property="gc:GanttRowPanel.StartDate" Value="{Binding Path=Start}"/>
                    <Setter Property="gc:GanttRowPanel.EndDate" Value="{Binding Path=End}"/>
                </Style>

            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="#FF007F99" BorderThickness="0.1" CornerRadius="15,15,15,15">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF2FD9FD" Offset="0"/>
                                <GradientStop Color="#FFCAF6FF" Offset="0.112"/>
                                <GradientStop Color="#FF47D8F7" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="{Binding Path=Name}"/>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

和Task.cs文件

namespace FunctionalFun.UI
{
    public class Task
    {
        public string Name { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
    }
}

日期在水平轴上，我需要基于来自两个不同列的两个日期显示网格。

所有放置在表格网格AS顶部的网格数据如下所示：

例如，如果开始日期是2016年9月8日，结束日期是2016年8月13日，那么我需要绘制一个包含五列的网格。

请帮助我解决此问题。