一天的自定义时间表 XAML

Question

我正在尝试创建仅一天（单列）的自定义计划，其中计划的元素绑定到 ObservableCollection：

public ObservableCollection<Content> ContentsToTransfer { get; set; }

现在我有这样的代码：

<Grid HorizontalAlignment="Stretch" Margin="430,52,444,0" x:Name="grid1" VerticalAlignment="Stretch" Width="Auto" OpacityMask="Black" Opacity="1" Background="#FFC2ECEC" ShowGridLines="False" >
            <Grid.Resources>
                <Style x:Key="VerticalSeparatorStyle" 
                    TargetType="{x:Type Separator}"
                    BasedOn="{StaticResource {x:Type Separator}}">
                    <Setter Property="Margin" Value="0,0,0,0"/>
                    <Setter Property="LayoutTransform">
                        <Setter.Value>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <TransformCollection>
                                        <RotateTransform Angle="90"/>
                                    </TransformCollection>
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>

            <Separator Grid.ColumnSpan="7" HorizontalAlignment="Stretch" Margin="0,132" x:Name="separator4" VerticalAlignment="Stretch" Width="Auto" Grid.Row="3" Grid.RowSpan="2" Background="Aqua" HorizontalContentAlignment="Stretch" Foreground="Aqua" OpacityMask="Aqua" />
            <Separator HorizontalAlignment="Stretch" Margin="0,132" x:Name="separator2" VerticalAlignment="Stretch" Width="Auto" Background="Aqua" Grid.ColumnSpan="7" Grid.Row="1" Grid.RowSpan="2" HorizontalContentAlignment="Stretch" Foreground="Aqua" />
            <Separator HorizontalAlignment="Stretch" x:Name="separator1" VerticalAlignment="Stretch" Background="Aqua" Grid.Row="2" Grid.ColumnSpan="7" Margin="0,129" Grid.RowSpan="2" HorizontalContentAlignment="Stretch" Foreground="Aqua" />
            <Separator HorizontalAlignment="Stretch" Margin="0,128" x:Name="separator3" VerticalAlignment="Stretch" Background="Aqua" Grid.ColumnSpan="7" Grid.RowSpan="2" Width="Auto" HorizontalContentAlignment="Stretch" Foreground="Aqua" />

            <Rectangle Height="Auto" HorizontalAlignment="Stretch" x:Name="rectangle1" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.RowSpan="5" />

        </Grid>

我现在要做的是将 ObservableCollection 绑定到该网格，这样每次将内容添加到 ObservableCollection 时，它也会出现在网格上。我还想给它添加一个调度程序的行为。

你能帮帮我吗？

我做的对吗？

有比这样做更好的解决方案吗？

Answer 1

无法将集合绑定到 Grid，因为网格不是 ItemsControl。但是，您可以将集合绑定到 ListBox、ListView 或 WrapPanel 等。在这种情况下，我建议使用 ItemsControl，其中 ItemsPanel 是 StackPanel，方法如下：

<ItemsControl ItemsSource="{Binding ContentsToTransfer}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- Your Template Here -->
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

在您的 DataTemplate 中，您只需定义每个 Content 的外观。有关 DataTemplate 的更多信息，请参阅 documentation

一天的自定义时间表 XAML

Custom schedule for one day XAML

c#

wpf

xaml

scheduler