WPF周日历数据模板

Question

I want to create a weekly calendar UserControl. In the end it should look something like this .

I have an ObservableCollection with Events. Each Event has an start DateTime and an end DateTime. I also have a Grid where I would like to place each event:

   <Grid x:Name="week_Grid" Margin="38,0,0,0" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
</Grid>

Each column represents a week day. The button for each event must have the correct length and offset according to the start/end DateTimes also be in the correct column.

Currently all I managed to do is create a ListBox:

<ListBox Width="400" Margin="10" ItemsSource="{Binding Path=Events}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Path=Id}" />
                        <TextBlock Text="{Binding Path=Start}" />
                        <TextBlock Text="{Binding Path=End}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

But how can I freely position the elements in the grid, assign the correct GridColumn according to the day of the week and position it correctly at the correct time of the day? The Grid does not allow to set an ItemSource.

I also have to manage events that start on a different day than they end. These events need more then one button. Is it even possible to do this with DataTemplates or do I have to manually iterate over the event and create a buttons for each event manually? Which is the best approach?

Answer 1

I decided that it is not possible to do this with just a DataTemplate. I was not able to realise all the necessary logic (eg adding multiple elements for events spanning multiple days). I instead added an Event Handler in the View to do it manually:

private void EventsChanged(object sender, NotifyCollectionChangedEventArgs e)
{
       switch (e.Action)
       {
           case NotifyCollectionChangedAction.Add:
              break;
           case NotifyCollectionChangedAction.Replace:
              break;
           case NotifyCollectionChangedAction.Remove:
              break;
           case NotifyCollectionChangedAction.Reset:
              break;
           case NotifyCollectionChangedAction.Move:
              break;
       }
}

And simply passed it to the ViewModel:

public EventViewModel(System.Collections.Specialized.NotifyCollectionChangedEventHandler changed)
{
    ...
    Events = new ObservableCollection<Event>();
    Events.CollectionChanged += changed;
    ...
}

Taking care of the mentioned problems is then straight forward.