c# - 日历编程: How can I place,创建并确定使用MVVM表示任务的项目？

Question

我在这里只是一个概念性问题。首先，我正在使用C#和XAML以及MVVM-Light Toolkit对Windows 8.1应用程序进行编程。
目前，我正在制定由日历支持的日程表。日历应具有“DayView”，该“DayView”由左侧的从顶部到底部的时间轴组成。现在，在该时间线的右侧，我想显示类似于矩形的内容，以可视化方式显示给定任务的高度，该高度代表其持续时间。每个任务都有一个开始时间，因此该矩形的顶部应放置在时间线中相应条目的旁边。

好吧，我希望我在这里基本上想说的应该看起来与Windows 8附带的Calendar-App类似，我将在这里发布一个屏幕截图。

现在，我已经尝试或想到了很多事情，这些事情导致了或多或少的复杂问题。我最好的方法是创建一个列表，将其放在该时间轴的右侧。现在，List将包含大量的项目(可能每个像素一个)，这些项目的大小将发生变化。然后，大小为0或与任务的持续时间有关，取决于是否存在一个。

但这会导致巨大的问题，因为涉及到条目更改或同时具有多个任务，因为这些项目不会重叠。而且我不想在每页上放置超过一两个，因为性能问题会显得过分...

我遇到的问题之一是，我正在使用MVVM-Concept，并且不知道如何能够在不触摸背后代码的情况下创建新的UI元素(如矩形)。这就是为什么我到目前为止唯一想到的就是列表...

我希望我的意思很清楚。

非常感谢您的帮助!

时髦花生

Answer 1

使用网格作为ItemsControl的ItemsPanel解决的问题:

<ItemsControl Grid.Column="2" ItemsSource="{Binding Day.ItemsList, Source={StaticResource Locator}}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid Width="20"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Height="{Binding Height}" Width="20" Margin="{Binding Margin}">
                <Grid.Background>
                    <SolidColorBrush Opacity="{Binding Opacity}" Color="{Binding ColorHash, Converter={StaticResource HexToColorConverter}}"/>
                </Grid.Background>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>  

带有以下数据:

ItemsList = new ObservableCollection<object>(tmpPeriodsList.Select((x, i) => new
    {
        ColorHash = x.ColorHash,
        Index = i,
        Margin = StartPosition(i),
        Opacity = 0.6,
        Height = 45,
    }));