向 ItemsControl 添加标签

Question

在编程方面，视觉呈现不是我的强项。我正在为我的公司开发一个小程序，以帮助进行时间表概述（也可以描述为时间线）。

后台工作按预期工作，所以我没有在此处包含此代码，因为这不是为什么不显示此数据的问题。我的问题更多是关于如何更好地在视觉上呈现它。

时间轴显示为灰色条，然后在事件发生的时间轴上填充按钮。

我希望得到您的建议：

在灰色条的左侧添加标签。
在灰色条上方添加一个视觉时间轴（即时间戳）作为渐变，以便直观地显示时间轴中的 3 点钟位置和 6 点钟位置。

或者，我会提出一些建议，告诉我在哪里可以阅读更多相关信息，这是正确方向的提示。

谢谢！

<Window x:Class="Test.BookingOverview"
        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:Test"
        mc:Ignorable="d"
        Title="Bokningsöversikt" Height="450" Width="800">
    <Window.Resources>
        <local:EventLengthConverter x:Key="mEventLengthConverter"/>
    </Window.Resources>
    <Grid>
<ItemsControl ItemsSource="{Binding Path=TimeLines}" Margin="10,90,10,27" >
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>

                            <ItemsControl x:Name="TimeLine" ItemsSource="{Binding Path=Events}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <Grid x:Name="EventContainer" Height="20" Margin="5" Background="Gainsboro">

                                        </Grid>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>

                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Button Grid.Column="1" Background="Yellow" VerticalAlignment="Stretch" HorizontalAlignment="Left">
                                            <Button.Margin>
                                                <MultiBinding Converter="{StaticResource mEventLengthConverter}">
                                                    <Binding ElementName="TimeLine" Path="DataContext.Duration"/>
                                                    <Binding Path="Start"/>
                                                    <Binding ElementName="EventContainer" Path="ActualWidth"/>
                                                </MultiBinding>
                                            </Button.Margin>
                                            <Button.Width>
                                                <MultiBinding Converter="{StaticResource mEventLengthConverter}">
                                                    <Binding ElementName="TimeLine" Path="DataContext.Duration"/>
                                                    <Binding Path="Duration"/>
                                                    <Binding ElementName="EventContainer" Path="ActualWidth"/>
                                                </MultiBinding>
                                            </Button.Width>
                                            <Button.Content>
                                                <TextBlock Text="{Binding customer}"></TextBlock>
                                            </Button.Content>
                                            <Button.ContextMenu>
                                                <ContextMenu Name="Test">
                                                    <MenuItem Header="Testar contextmenu"></MenuItem>
                                                    <Separator></Separator>
                                                    <MenuItem Header="Testar igen"></MenuItem>
                                                </ContextMenu>
                                            </Button.ContextMenu>
                                            <Button.ToolTip>
                                                <ToolTip Content="Testar"></ToolTip>
                                            </Button.ToolTip>

                                        </Button>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
    </Grid>

Aepot 让我走上了正确的方向，但目前它正在创建标签行，然后是实际时间线。很可能是由于使用 ItemsControls 我无法理解的原因。

根据Aepot的建议修改代码：

<StackPanel Orientation="Vertical" Margin="90,123,0,0">
            <TextBlock Text="Bokningsöversikt"></TextBlock>
            
            <ItemsControl ItemsSource="{Binding Path=TimeLines}" >
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ItemsControl x:Name="TimeLine" ItemsSource="{Binding Path=Events}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <Grid x:Name="EventContainer" Grid.Column="2" Height="20" Margin="5" Background="Gainsboro"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>

                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock FontSize="10" Margin="0,0,0,0" Padding="10,0,0,0" Grid.Column="1" Background="Transparent" VerticalAlignment="Center" HorizontalAlignment="Left">
                                        <TextBlock.Text>
                                            <Binding ElementName="EventContainer" Path="DataContext.RegNr"/>
                                        </TextBlock.Text>
                                    </TextBlock>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            <ItemsControl ItemsSource="{Binding Path=TimeLines}" >
                <ItemsControl.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="{Binding RegNr}"/>
                        <Separator></Separator>
                        <MenuItem Header="Test"></MenuItem>
                    </ContextMenu>
                </ItemsControl.ContextMenu>

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ItemsControl x:Name="TimeLine" ItemsSource="{Binding Path=Events}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <Grid x:Name="EventContainer" Grid.Column="2" Height="20" Margin="5" Background="Gainsboro"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>

                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Button Grid.Column="2" Background="Yellow" VerticalAlignment="Stretch" HorizontalAlignment="Left">
                                        <Button.Margin>
                                            <MultiBinding Converter="{StaticResource mEventLengthConverter}">
                                                <Binding ElementName="TimeLine" Path="DataContext.Duration"/>
                                                <Binding Path="Start"/>
                                                <Binding ElementName="EventContainer" Path="ActualWidth"/>
                                            </MultiBinding>
                                        </Button.Margin>
                                        <Button.Width>
                                            <MultiBinding Converter="{StaticResource mEventLengthConverter}">
                                                <Binding ElementName="TimeLine" Path="DataContext.Duration"/>
                                                <Binding Path="Duration"/>
                                                <Binding ElementName="EventContainer" Path="ActualWidth"/>
                                            </MultiBinding>
                                        </Button.Width>
                                        <Button.Content>
                                            <TextBlock Text="{Binding customer}"></TextBlock>
                                        </Button.Content>
                                        <Button.ContextMenu>
                                            <ContextMenu Name="Test">
                                                <MenuItem Header="Testar contextmenu"></MenuItem>
                                                <Separator></Separator>
                                                <MenuItem Header="Testar igen"></MenuItem>
                                            </ContextMenu>
                                        </Button.ContextMenu>
                                        <Button.ToolTip>
                                            <ToolTip Content="Testar"></ToolTip>
                                        </Button.ToolTip>
                                    </Button>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>

Answer 1

注意： 在显示文本时使用 TextBlock 而不是 Label，因为它对此进行了更好的优化。

尝试用 StackPanel 包装控件。

<DockPanel>
    <TextBlock Text="My timeline"/>
    <StackPanel Orientation="Vertical">
        <ItemsControl .../><!-- with TextBlocks for labeling timeline -->
        <ItemsControl .../><!-- existing one -->
    </StackPanel>
</DockPanel>

您也可以使用 StackPanel 作为控件在 ItemsPanelTemplate 中使用。

或者这样，如果你熟悉HTML <table>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <TextBlock Grid.RowSpan="2" Text="My timeline"/>
    <ItemsControl Grid.Column="1" .../><!-- with TextBlocks for labeling timeline -->
    <ItemsControl Grid.Column="1" Grid.Row="1" .../><!-- existing one -->
</Grid>

向 ItemsControl 添加标签

Adding a label to an ItemsControl

c#

wpf

timeline

data-visualization

datatemplate