From 74df976a0f75cf95aaa6c8035e663e8648758de7 Mon Sep 17 00:00:00 2001
From: Sander van Vliet <sander@codenizer.nl>
Date: Mon, 30 Oct 2023 20:16:17 +0100
Subject: [PATCH] Move route segment list into its own control

---
 .../.idea/avalonia.xml                        |   3 +
 .../Views/MainWindow.axaml                    | 169 +----------------
 .../Views/MainWindow.axaml.cs                 |  41 +---
 .../Views/RouteSegmentListView.axaml          | 176 ++++++++++++++++++
 .../Views/RouteSegmentListView.axaml.cs       |  58 ++++++
 5 files changed, 241 insertions(+), 206 deletions(-)
 create mode 100644 src/RoadCaptain.App.RouteBuilder/Views/RouteSegmentListView.axaml
 create mode 100644 src/RoadCaptain.App.RouteBuilder/Views/RouteSegmentListView.axaml.cs

diff --git a/.idea/.idea.RoadCaptain.Windows/.idea/avalonia.xml b/.idea/.idea.RoadCaptain.Windows/.idea/avalonia.xml
index ee7f6d79..e91a651c 100644
--- a/.idea/.idea.RoadCaptain.Windows/.idea/avalonia.xml
+++ b/.idea/.idea.RoadCaptain.Windows/.idea/avalonia.xml
@@ -3,10 +3,13 @@
   <component name="AvaloniaProject">
     <option name="projectPerEditor">
       <map>
+        <entry key="src/RoadCaptain.App.RouteBuilder/Views/BuildRoute.axaml" value="src/RoadCaptain.App.RouteBuilder/RoadCaptain.App.RouteBuilder.csproj" />
         <entry key="src/RoadCaptain.App.RouteBuilder/Views/MainWindow.axaml" value="src/RoadCaptain.App.RouteBuilder/RoadCaptain.App.RouteBuilder.csproj" />
         <entry key="src/RoadCaptain.App.RouteBuilder/Views/ManageRoutes.axaml" value="src/RoadCaptain.App.RouteBuilder/RoadCaptain.App.RouteBuilder.csproj" />
         <entry key="src/RoadCaptain.App.RouteBuilder/Views/OpenRouteDialog.axaml" value="src/RoadCaptain.App.RouteBuilder/RoadCaptain.App.RouteBuilder.csproj" />
+        <entry key="src/RoadCaptain.App.RouteBuilder/Views/RouteSegmentListView.axaml" value="src/RoadCaptain.App.RouteBuilder/RoadCaptain.App.RouteBuilder.csproj" />
         <entry key="src/RoadCaptain.App.RouteBuilder/Views/SaveRouteDialog.axaml" value="src/RoadCaptain.App.RouteBuilder/RoadCaptain.App.RouteBuilder.csproj" />
+        <entry key="src/RoadCaptain.App.RouteBuilder/Views/WorldSelector.axaml" value="src/RoadCaptain.App.RouteBuilder/RoadCaptain.App.RouteBuilder.csproj" />
         <entry key="src/RoadCaptain.App.Runner/Views/ElevationPlotWindow.axaml" value="src/RoadCaptain.App.Runner/RoadCaptain.App.Runner.csproj" />
         <entry key="src/RoadCaptain.App.Runner/Views/ElevationProfileWindow.axaml" value="src/RoadCaptain.App.Runner/RoadCaptain.App.Runner.csproj" />
         <entry key="src/RoadCaptain.App.Runner/Views/InGameNavigationWIndow.axaml" value="src/RoadCaptain.App.Runner/RoadCaptain.App.Runner.csproj" />
diff --git a/src/RoadCaptain.App.RouteBuilder/Views/MainWindow.axaml b/src/RoadCaptain.App.RouteBuilder/Views/MainWindow.axaml
index 0d29dd53..fdcf18c3 100644
--- a/src/RoadCaptain.App.RouteBuilder/Views/MainWindow.axaml
+++ b/src/RoadCaptain.App.RouteBuilder/Views/MainWindow.axaml
@@ -14,6 +14,7 @@
         xmlns:appConverters="clr-namespace:RoadCaptain.App.RouteBuilder.Converters"
         xmlns:map="clr-namespace:Codenizer.Avalonia.Map;assembly=Codenizer.Avalonia.Map"
         xmlns:roadCaptain="clr-namespace:RoadCaptain;assembly=RoadCaptain"
+        xmlns:views="clr-namespace:RoadCaptain.App.RouteBuilder.Views"
         mc:Ignorable="d"
         x:Class="RoadCaptain.App.RouteBuilder.Views.MainWindow"
         Icon="avares://RoadCaptain.App.Shared/icon.png"
@@ -325,173 +326,7 @@
 				</StackPanel>
 			</WrapPanel>
 
-			<Grid Grid.Row="0" Grid.RowSpan="2" Grid.Column="0">
-				<Grid.RowDefinitions>
-					<RowDefinition Height="56" />
-					<RowDefinition Height="*" />
-					<RowDefinition Height="100" />
-				</Grid.RowDefinitions>
-
-				<Border
-                Grid.Row="0"
-                CornerRadius="0,5,0,0" Background="#1192CC" BorderBrush="#cccccc"
-                            HorizontalAlignment="Stretch" Padding="8,4,0,0" Height="56">
-					<StackPanel DataContext="{Binding Path=ViewModel.Route,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window},Mode=OneWay}" Orientation="Vertical" VerticalAlignment="Top">
-						<StackPanel Orientation="Horizontal" Height="30">
-							<TextBlock Text="{Binding Path=TotalDistance,StringFormat=\{0:0.0\}}" FontSize="26" Foreground="White" FontWeight="Bold" VerticalAlignment="Bottom"/>
-							<TextBlock Text="km" FontSize="16" Foreground="White" FontWeight="Bold" VerticalAlignment="Bottom" Padding="2,0,0,2"/>
-						</StackPanel>
-
-						<StackPanel Orientation="Horizontal" Height="18">
-							<TextBlock Text="⬈" FontSize="15" Margin="0,-2,0,0" Padding="0" FontWeight="ExtraBold" />
-							<TextBlock Text="{Binding Path=TotalAscent,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
-							<TextBlock Text="m" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
-
-							<TextBlock Text="⬊" FontSize="15" Margin="0,-2,0,0" Padding="0" FontWeight="ExtraBold" />
-							<TextBlock Text="{Binding Path=TotalDescent,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
-							<TextBlock Text="m" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
-						</StackPanel>
-					</StackPanel>
-				</Border>
-				<ListBox Grid.Row="1"
-                          HorizontalAlignment="Stretch"
-                          Padding="0"
-                          Margin="0"
-                          Items="{Binding Path=Route.Sequence}"
-                          BorderThickness="0"
-                          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-                          ScrollViewer.VerticalScrollBarVisibility="Auto"
-                          VerticalAlignment="Stretch"
-                          Name="RouteListView"
-                          SelectionChanged="RouteListView_OnSelectionChanged"
-                          KeyUp="RouteListView_KeyUp">
-					<ListBox.Styles>
-						<Style Selector="ListBoxItem">
-							<Setter Property="Margin" Value="0" />
-							<Setter Property="Padding" Value="8,0,8,0" />
-						</Style>
-					</ListBox.Styles>
-					<ListBox.ItemTemplate>
-						<DataTemplate DataType="viewModels:SegmentSequenceViewModel">
-							<Grid Margin="0">
-								<Grid.Resources>
-									<Style Selector="TextBlock" x:Key="ListBoxItemStyle">
-										<Setter Property="Foreground" Value="Black" />
-										<Setter Property="FontWeight" Value="Bold" />
-										<Setter Property="FontSize" Value="18" />
-									</Style>
-								</Grid.Resources>
-								<Grid.RowDefinitions>
-									<RowDefinition Height="24" />
-									<RowDefinition Height="24" />
-								</Grid.RowDefinitions>
-								<Grid.ColumnDefinitions>
-									<ColumnDefinition Width="24" />
-									<ColumnDefinition />
-									<ColumnDefinition Width="24" />
-								</Grid.ColumnDefinitions>
-
-								<TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Path=SequenceNumber}" HorizontalAlignment="Center" Margin="0,4,0,0" />
-								<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=TurnGlyph}"  FontSize="14" Foreground="#1192CC"  Margin="4,-2,0,0"
-                                           Padding="0" FontWeight="ExtraBold" HorizontalAlignment="Left" VerticalAlignment="Center" />
-
-								<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Path=SegmentName}" Margin="4,4,0,0" TextTrimming="CharacterEllipsis" ToolTip.Tip="{Binding Path=SegmentId}" />
-
-								<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Margin="4,0,0,0" Grid.ColumnSpan="{Binding Path=ColumnSpan}">
-									<StackPanel Orientation="Horizontal" Height="18">
-										<TextBlock Text="{Binding Path=Distance,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
-										<TextBlock Text="km" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
-
-
-										<TextBlock Text="⬈" FontSize="15" Margin="0,-2,0,0" Padding="0" FontWeight="ExtraBold" />
-										<TextBlock Text="{Binding Path=Ascent,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
-										<TextBlock Text="m" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
-
-										<TextBlock Text="⬊" FontSize="15" Margin="0,-2,0,0" Padding="0" FontWeight="ExtraBold" />
-										<TextBlock Text="{Binding Path=Descent,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
-										<TextBlock Text="m" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
-									</StackPanel>
-								</StackPanel>
-
-								<Image Grid.Column="2" Grid.Row="0" Grid.RowSpan="2"
-                                       Source="{Binding Path=LoopImage,Converter={StaticResource BitmapConverter}}"
-                                       IsVisible="{Binding Path=LoopImage,Converter={StaticResource NullabilityConverter}}"
-                                       Width="24"
-                                       Height="56" />
-								<Button Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
-								        HorizontalAlignment="Right"
-								        VerticalAlignment="Top"
-								        Margin="0,4,4,0"
-								        Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=DataContext.ConfigureLoopCommand}"
-								        IsVisible="{Binding Path=Type, Converter={StaticResource BooleanConverter}, ConverterParameter={x:Static roadCaptain:SegmentSequenceType.LoopStart}}">
-									<Button.Template>
-										<ControlTemplate>
-											<Border
-												BorderBrush="#FF6141"
-												BorderThickness="4"
-												Background="#FF6141"
-												CornerRadius="25"
-												Padding="6,0,6,0">
-												<StackPanel>
-													<TextBlock
-														HorizontalAlignment="Center"
-														VerticalAlignment="Center"
-														Foreground="White"
-														FontWeight="Bold"
-														ToolTip.Tip="This loop will be followed a number of times and then continue with the rest of the route"
-												        Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=DataContext.Route.NumberOfLoops, FallbackValue=0, TargetNullValue=0}"
-														IsVisible="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=DataContext.Route.LoopMode, FallbackValue=false, TargetNullValue=false, Converter={StaticResource BooleanConverter}, ConverterParameter={x:Static roadCaptain:LoopMode.Constrained}}"
-														/>
-													<TextBlock
-														HorizontalAlignment="Center"
-														VerticalAlignment="Center"
-														Foreground="White"
-														FontWeight="Bold"
-														Text="∞" 
-														ToolTip.Tip="This is an infinite loop, you must end the activity yourself when you have had enough!"
-														IsVisible="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=DataContext.Route.LoopMode, FallbackValue=false, TargetNullValue=false, Converter={StaticResource BooleanConverter}, ConverterParameter={x:Static roadCaptain:LoopMode.Infinite}}"
-													/>
-												</StackPanel>
-											</Border>
-										</ControlTemplate>
-									</Button.Template>
-								</Button>
-							</Grid>
-						</DataTemplate>
-					</ListBox.ItemTemplate>
-				</ListBox>
-				<Grid Grid.Row="2" Background="#F2F2F2">
-					<Grid.RowDefinitions>
-						<RowDefinition Height="18" />
-						<RowDefinition />
-					</Grid.RowDefinitions>
-					<TextBlock Grid.Row="0" Text="Segments on route:" FontWeight="Bold" Margin="4,0,0,0" />
-					<ListBox Grid.Row="1"
-                             Name="MarkersOnRouteListBox"
-                             Margin="4,0,0,0"
-                             ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-                             ScrollViewer.VerticalScrollBarVisibility="Auto"
-                             VerticalAlignment="Stretch"
-							 BorderThickness="0"
-                             Items="{Binding Path=Route.Markers}"
-                             SelectionChanged="MarkersOnRouteListBox_OnSelectionChanged">
-						<ListBox.Styles>
-							<Style Selector="ListBoxItem">
-								<Setter Property="Margin" Value="0" />
-								<Setter Property="Padding" Value="8,0,8,0" />
-							</Style>
-						</ListBox.Styles>
-						<ListBox.ItemTemplate>
-							<DataTemplate DataType="viewModels:MarkerViewModel">
-								<StackPanel Orientation="Horizontal" Margin="0" VerticalAlignment="Center">
-									<TextBlock Text="{Binding Path=TypeGlyph}" Width="20" TextAlignment="Center" />
-									<TextBlock Text="{Binding Path=Name}" Margin="4,2,0,0" />
-								</StackPanel>
-							</DataTemplate>
-						</ListBox.ItemTemplate>
-					</ListBox>
-				</Grid>
-			</Grid>
+			<views:RouteSegmentListView Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Name="RouteSegmentListView" DataContext="{Binding}" />
 		</Grid>
 	</DockPanel>
 
diff --git a/src/RoadCaptain.App.RouteBuilder/Views/MainWindow.axaml.cs b/src/RoadCaptain.App.RouteBuilder/Views/MainWindow.axaml.cs
index e15c8398..a21a3934 100644
--- a/src/RoadCaptain.App.RouteBuilder/Views/MainWindow.axaml.cs
+++ b/src/RoadCaptain.App.RouteBuilder/Views/MainWindow.axaml.cs
@@ -87,9 +87,9 @@ private void WindowViewModelPropertyChanged(object? sender, PropertyChangedEvent
                     break;
                 case nameof(ViewModel.Route):
                     // Ensure the last added segment is visible
-                    if (RouteListView.ItemCount > 0)
+                    if (RouteSegmentListView.RouteListView.ItemCount > 0)
                     {
-                        RouteListView.ScrollIntoView(RouteListView.ItemCount - 1);
+                        RouteSegmentListView.RouteListView.ScrollIntoView(RouteSegmentListView.RouteListView.ItemCount - 1);
                     }
 
                     // Redraw when the route changes so that the
@@ -150,44 +150,7 @@ private void MainWindow_OnActivated(object? sender, EventArgs e)
         // not yet exist)
         // ReSharper disable UnusedMember.Local
         // ReSharper disable UnusedParameter.Local
-        private void RouteListView_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
-        {
-            if (e.AddedItems.Count == 1 && e.AddedItems[0] is SegmentSequenceViewModel viewModel && !string.IsNullOrEmpty(viewModel.SegmentId))
-            {
-                ViewModel.HighlightSegment(viewModel.SegmentId);
-            }
-            else
-            {
-                ViewModel.ClearSegmentHighlight();
-            }
-        }
 
-        private void MarkersOnRouteListBox_OnSelectionChanged(object? sender, SelectionChangedEventArgs e)
-        {
-            if (e.AddedItems.Count == 1 && e.AddedItems[0] is MarkerViewModel viewModel)
-            {
-                ViewModel.HighlightMarker(viewModel.Id);
-            }
-            else
-            {
-                ViewModel.ClearMarkerHighlight();
-            }
-        }
-
-        private void RouteListView_KeyUp(object sender, KeyEventArgs e)
-        {
-            if (sender is ListBox { SelectedItem: SegmentSequenceViewModel viewModel } && e.Key == Key.Delete)
-            {
-                if (viewModel == ViewModel.Route.Last)
-                {
-                    ViewModel.RemoveLastSegmentCommand.Execute(null);
-                    if (RouteListView.ItemCount > 0)
-                    {
-                        RouteListView.SelectedItem = RouteListView.Items.Cast<object>().Last();
-                    }
-                }
-            }
-        }
 
         private void ZoomIn_Click(object sender, RoutedEventArgs e)
         {
diff --git a/src/RoadCaptain.App.RouteBuilder/Views/RouteSegmentListView.axaml b/src/RoadCaptain.App.RouteBuilder/Views/RouteSegmentListView.axaml
new file mode 100644
index 00000000..1869d055
--- /dev/null
+++ b/src/RoadCaptain.App.RouteBuilder/Views/RouteSegmentListView.axaml
@@ -0,0 +1,176 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             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:viewModels="clr-namespace:RoadCaptain.App.RouteBuilder.ViewModels"
+             xmlns:roadCaptain="clr-namespace:RoadCaptain;assembly=RoadCaptain"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="RoadCaptain.App.RouteBuilder.Views.RouteSegmentListView">
+			<Grid>
+				<Grid.RowDefinitions>
+					<RowDefinition Height="56" />
+					<RowDefinition Height="*" />
+					<RowDefinition Height="100" />
+				</Grid.RowDefinitions>
+
+				<Border
+                Grid.Row="0"
+                CornerRadius="0,5,0,0" Background="#1192CC" BorderBrush="#cccccc"
+                            HorizontalAlignment="Stretch" Padding="8,4,0,0" Height="56">
+					<StackPanel DataContext="{Binding Path=ViewModel.Route,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window},Mode=OneWay}" Orientation="Vertical" VerticalAlignment="Top">
+						<StackPanel Orientation="Horizontal" Height="30">
+							<TextBlock Text="{Binding Path=TotalDistance,StringFormat=\{0:0.0\}}" FontSize="26" Foreground="White" FontWeight="Bold" VerticalAlignment="Bottom"/>
+							<TextBlock Text="km" FontSize="16" Foreground="White" FontWeight="Bold" VerticalAlignment="Bottom" Padding="2,0,0,2"/>
+						</StackPanel>
+
+						<StackPanel Orientation="Horizontal" Height="18">
+							<TextBlock Text="⬈" FontSize="15" Margin="0,-2,0,0" Padding="0" FontWeight="ExtraBold" />
+							<TextBlock Text="{Binding Path=TotalAscent,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
+							<TextBlock Text="m" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
+
+							<TextBlock Text="⬊" FontSize="15" Margin="0,-2,0,0" Padding="0" FontWeight="ExtraBold" />
+							<TextBlock Text="{Binding Path=TotalDescent,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
+							<TextBlock Text="m" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
+						</StackPanel>
+					</StackPanel>
+				</Border>
+				<ListBox Grid.Row="1"
+                          HorizontalAlignment="Stretch"
+                          Padding="0"
+                          Margin="0"
+                          Items="{Binding Path=Route.Sequence}"
+                          BorderThickness="0"
+                          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+                          ScrollViewer.VerticalScrollBarVisibility="Auto"
+                          VerticalAlignment="Stretch"
+                          Name="RouteListView"
+                          SelectionChanged="RouteListView_OnSelectionChanged"
+                          KeyUp="RouteListView_KeyUp">
+					<ListBox.Styles>
+						<Style Selector="ListBoxItem">
+							<Setter Property="Margin" Value="0" />
+							<Setter Property="Padding" Value="8,0,8,0" />
+						</Style>
+					</ListBox.Styles>
+					<ListBox.ItemTemplate>
+						<DataTemplate DataType="viewModels:SegmentSequenceViewModel">
+							<Grid Margin="0">
+								<Grid.Resources>
+									<Style Selector="TextBlock" x:Key="ListBoxItemStyle">
+										<Setter Property="Foreground" Value="Black" />
+										<Setter Property="FontWeight" Value="Bold" />
+										<Setter Property="FontSize" Value="18" />
+									</Style>
+								</Grid.Resources>
+								<Grid.RowDefinitions>
+									<RowDefinition Height="24" />
+									<RowDefinition Height="24" />
+								</Grid.RowDefinitions>
+								<Grid.ColumnDefinitions>
+									<ColumnDefinition Width="24" />
+									<ColumnDefinition />
+									<ColumnDefinition Width="24" />
+								</Grid.ColumnDefinitions>
+
+								<TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Path=SequenceNumber}" HorizontalAlignment="Center" Margin="0,4,0,0" />
+								<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=TurnGlyph}"  FontSize="14" Foreground="#1192CC"  Margin="4,-2,0,0"
+                                           Padding="0" FontWeight="ExtraBold" HorizontalAlignment="Left" VerticalAlignment="Center" />
+
+								<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Path=SegmentName}" Margin="4,4,0,0" TextTrimming="CharacterEllipsis" ToolTip.Tip="{Binding Path=SegmentId}" />
+
+								<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Margin="4,0,0,0" Grid.ColumnSpan="{Binding Path=ColumnSpan}">
+									<StackPanel Orientation="Horizontal" Height="18">
+										<TextBlock Text="{Binding Path=Distance,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
+										<TextBlock Text="km" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
+
+
+										<TextBlock Text="⬈" FontSize="15" Margin="0,-2,0,0" Padding="0" FontWeight="ExtraBold" />
+										<TextBlock Text="{Binding Path=Ascent,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
+										<TextBlock Text="m" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
+
+										<TextBlock Text="⬊" FontSize="15" Margin="0,-2,0,0" Padding="0" FontWeight="ExtraBold" />
+										<TextBlock Text="{Binding Path=Descent,StringFormat=\{0:0.0\}}" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" />
+										<TextBlock Text="m" FontSize="10" FontWeight="Bold" VerticalAlignment="Bottom" Padding="0,0,0,1.5"/>
+									</StackPanel>
+								</StackPanel>
+
+								<Image Grid.Column="2" Grid.Row="0" Grid.RowSpan="2"
+                                       Source="{Binding Path=LoopImage,Converter={StaticResource BitmapConverter}}"
+                                       IsVisible="{Binding Path=LoopImage,Converter={StaticResource NullabilityConverter}}"
+                                       Width="24"
+                                       Height="56" />
+								<Button Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
+								        HorizontalAlignment="Right"
+								        VerticalAlignment="Top"
+								        Margin="0,4,4,0"
+								        Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=DataContext.ConfigureLoopCommand}"
+								        IsVisible="{Binding Path=Type, Converter={StaticResource BooleanConverter}, ConverterParameter={x:Static roadCaptain:SegmentSequenceType.LoopStart}}">
+									<Button.Template>
+										<ControlTemplate>
+											<Border
+												BorderBrush="#FF6141"
+												BorderThickness="4"
+												Background="#FF6141"
+												CornerRadius="25"
+												Padding="6,0,6,0">
+												<StackPanel>
+													<TextBlock
+														HorizontalAlignment="Center"
+														VerticalAlignment="Center"
+														Foreground="White"
+														FontWeight="Bold"
+														ToolTip.Tip="This loop will be followed a number of times and then continue with the rest of the route"
+												        Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=DataContext.Route.NumberOfLoops, FallbackValue=0, TargetNullValue=0}"
+														IsVisible="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=DataContext.Route.LoopMode, FallbackValue=false, TargetNullValue=false, Converter={StaticResource BooleanConverter}, ConverterParameter={x:Static roadCaptain:LoopMode.Constrained}}"
+														/>
+													<TextBlock
+														HorizontalAlignment="Center"
+														VerticalAlignment="Center"
+														Foreground="White"
+														FontWeight="Bold"
+														Text="∞" 
+														ToolTip.Tip="This is an infinite loop, you must end the activity yourself when you have had enough!"
+														IsVisible="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=DataContext.Route.LoopMode, FallbackValue=false, TargetNullValue=false, Converter={StaticResource BooleanConverter}, ConverterParameter={x:Static roadCaptain:LoopMode.Infinite}}"
+													/>
+												</StackPanel>
+											</Border>
+										</ControlTemplate>
+									</Button.Template>
+								</Button>
+							</Grid>
+						</DataTemplate>
+					</ListBox.ItemTemplate>
+				</ListBox>
+				<Grid Grid.Row="2" Background="#F2F2F2">
+					<Grid.RowDefinitions>
+						<RowDefinition Height="18" />
+						<RowDefinition />
+					</Grid.RowDefinitions>
+					<TextBlock Grid.Row="0" Text="Segments on route:" FontWeight="Bold" Margin="4,0,0,0" />
+					<ListBox Grid.Row="1"
+                             Name="MarkersOnRouteListBox"
+                             Margin="4,0,0,0"
+                             ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+                             ScrollViewer.VerticalScrollBarVisibility="Auto"
+                             VerticalAlignment="Stretch"
+							 BorderThickness="0"
+                             Items="{Binding Path=Route.Markers}"
+                             SelectionChanged="MarkersOnRouteListBox_OnSelectionChanged">
+						<ListBox.Styles>
+							<Style Selector="ListBoxItem">
+								<Setter Property="Margin" Value="0" />
+								<Setter Property="Padding" Value="8,0,8,0" />
+							</Style>
+						</ListBox.Styles>
+						<ListBox.ItemTemplate>
+							<DataTemplate DataType="viewModels:MarkerViewModel">
+								<StackPanel Orientation="Horizontal" Margin="0" VerticalAlignment="Center">
+									<TextBlock Text="{Binding Path=TypeGlyph}" Width="20" TextAlignment="Center" />
+									<TextBlock Text="{Binding Path=Name}" Margin="4,2,0,0" />
+								</StackPanel>
+							</DataTemplate>
+						</ListBox.ItemTemplate>
+					</ListBox>
+				</Grid>
+			</Grid>
+</UserControl>
diff --git a/src/RoadCaptain.App.RouteBuilder/Views/RouteSegmentListView.axaml.cs b/src/RoadCaptain.App.RouteBuilder/Views/RouteSegmentListView.axaml.cs
new file mode 100644
index 00000000..506d76dc
--- /dev/null
+++ b/src/RoadCaptain.App.RouteBuilder/Views/RouteSegmentListView.axaml.cs
@@ -0,0 +1,58 @@
+using System.Linq;
+using Avalonia.Controls;
+using Avalonia.Input;
+using RoadCaptain.App.RouteBuilder.ViewModels;
+
+namespace RoadCaptain.App.RouteBuilder.Views
+{
+    public partial class RouteSegmentListView : UserControl
+    {
+        public RouteSegmentListView()
+        {
+            ViewModel = (DataContext as MainWindowViewModel)!; // Suppressed because it's initialized from XAML
+            
+            InitializeComponent();
+        }
+
+        private MainWindowViewModel ViewModel { get; }
+
+        private void RouteListView_KeyUp(object sender, KeyEventArgs e)
+        {
+            if (sender is ListBox { SelectedItem: SegmentSequenceViewModel viewModel } && e.Key == Key.Delete)
+            {
+                if (viewModel == ViewModel.Route.Last)
+                {
+                    ViewModel.RemoveLastSegmentCommand.Execute(null);
+                    if (RouteListView.ItemCount > 0)
+                    {
+                        RouteListView.SelectedItem = RouteListView.Items.Cast<object>().Last();
+                    }
+                }
+            }
+        }
+        
+        private void RouteListView_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            if (e.AddedItems.Count == 1 && e.AddedItems[0] is SegmentSequenceViewModel viewModel && !string.IsNullOrEmpty(viewModel.SegmentId))
+            {
+                ViewModel.HighlightSegment(viewModel.SegmentId);
+            }
+            else
+            {
+                ViewModel.ClearSegmentHighlight();
+            }
+        }
+        
+        private void MarkersOnRouteListBox_OnSelectionChanged(object? sender, SelectionChangedEventArgs e)
+        {
+            if (e.AddedItems.Count == 1 && e.AddedItems[0] is MarkerViewModel viewModel)
+            {
+                ViewModel.HighlightMarker(viewModel.Id);
+            }
+            else
+            {
+                ViewModel.ClearMarkerHighlight();
+            }
+        }
+    }
+}
\ No newline at end of file