Вертикальная линия времени

Question

Я занимаюсь разработкой приложения с использованием фреймворка UWP. Мне нужно построить вертикальную шкалу времени, как на картинке ниже. Я ищу идеи о том, как подойти к моей проблеме. ! https://www.google.com/search?biw=1347&bih=680&tbm=isch&sa=1&ei=_q7BXJ6tBInhkgXB44XIBA&q=ndroid+vertical+time+line&oq=ndroid+vertical+time+line&gs_l=img.3...404393.405025..405582...0.0..0.63.325.7......0....1..gws-wiz-img.mykSprC8u9I#imgrc=6EM_ynLqrPIIkM:

С уважением Тодор Косев

Answer 1

Я бы предложил использовать ListView или ItemsControl, где шаблон Item имеет линию и эллипс справа с 0 вертикальными и горизонтальными полями для шаблона данных.Таким образом, вы можете управлять содержимым и атрибутами временной шкалы с помощью привязки данных.

    <ListView x:Name="Timeline">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Height="60">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Line  X1="15" Stroke="Green" X2="15" Y1="0" Y2="60" StrokeThickness="2"/>
                    <Ellipse Fill="LightGreen" Width="30" Height="30" HorizontalAlignment="Left"/>
                    <TextBlock Text="{Binding}" 
                      Grid.Column="1" VerticalAlignment="Center" 
                      Margin="4"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>