Добавление метки в ItemsControl

Question

Визуальная презентация - не моя сильная сторона в программировании. Я разрабатываю небольшую программу для своей компании, чтобы помочь в обзоре расписания (также может быть описано как временная шкала).

Фон работает должным образом, поэтому я не включаю этот код здесь поскольку это не вопрос, почему он не отображает эти данные или около того. Мои вопросы больше касаются того, как представить это визуально лучше.

Временная шкала отображается как серая полоса, а затем заполняется кнопками на временной шкале, где происходит событие.

Я бы хотел как ваш совет, как я могу:

1. Добавьте метку слева от серой полосы.
2. Добавьте визуальную временную шкалу (т.е. временные метки) в виде градиента над серой полосой, поэтому он наглядно показывает, где на временной шкале 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>