📄 src/App/Views/Panels/VasttrafikPanel.axaml
<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:vm="using:MMirror.App.ViewModels.Panels"
             xmlns:v="using:MMirror.App.Views.Panels"
             mc:Ignorable="d"
             d:DesignWidth="720"
             d:DesignHeight="1280"
             x:Class="MMirror.App.Views.Panels.VasttrafikPanel"
             x:DataType="vm:VasttrafikPanelViewModel">
    <Design.DataContext>
        <vm:VasttrafikPanelViewModel/>
    </Design.DataContext>
    <UserControl.Resources>
        <x:Double x:Key="spacing">4</x:Double>
        <Thickness x:Key="spacingTop">0,4,0,0</Thickness>
        <Thickness x:Key="spacingRight">0,0,4,0</Thickness>
        <Thickness x:Key="spacingAll">4,2</Thickness>
    </UserControl.Resources>
    <UserControl.Styles>
        <Style Selector="TextBlock.label">
            <Setter Property="VerticalAlignment" Value="Bottom" />
        </Style>
        <Style Selector="TextBlock.time">
            <Setter Property="FontFeatures" Value="+tnum" />
            <Setter Property="TextAlignment" Value="End" />
        </Style>
    </UserControl.Styles>
    <Grid Grid.IsSharedSizeScope="True" RowDefinitions="Auto,*" RowSpacing="{StaticResource spacing}" ColumnSpacing="{StaticResource spacing}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="Name" />
            <ColumnDefinition SharedSizeGroup="Type" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition SharedSizeGroup="Next" />
            <ColumnDefinition SharedSizeGroup="NextNext" />
            <ColumnDefinition SharedSizeGroup="Platform" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Classes="h1 label" Text="{Binding StopName}" />
        <TextBlock Grid.Row="0" Grid.Column="3" Classes="label" Text="Nästa" />
        <TextBlock Grid.Row="0" Grid.Column="4" Classes="label" Text="Därefter" />
        <TextBlock Grid.Row="0" Grid.Column="5" Classes="label" Text="Läge" />

        <ItemsControl Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" ItemsSource="{Binding Departures}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Spacing="{StaticResource spacing}" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid ColumnSpacing="{StaticResource spacing}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="Name" />
                            <ColumnDefinition SharedSizeGroup="Type" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition SharedSizeGroup="Next" />
                            <ColumnDefinition SharedSizeGroup="NextNext" />
                            <ColumnDefinition SharedSizeGroup="Platform" />
                        </Grid.ColumnDefinitions>
                        <Border Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Center" Padding="{StaticResource spacingAll}"
                                BorderThickness="2" CornerRadius="4" BorderBrush="{DynamicResource SystemControlForegroundBaseHighBrush}">
                            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Center" TextAlignment="Center"
                                       Text="{Binding Name}" />
                        </Border>
                        <!-- TODO: Add "Type" icons -->
                        <TextBlock Grid.Column="2" Classes="h2" IsVisible="{Binding Via, Converter={x:Static ObjectConverters.IsNull}}" TextWrapping="Wrap" Text="{Binding Direction}" />
                        <TextBlock Grid.Column="2" Classes="h2" IsVisible="{Binding Via, Converter={x:Static ObjectConverters.IsNotNull}}" TextWrapping="Wrap">
                            <Run Text="{Binding Direction}" />
                            <Span FontSize="16">via <Run Text="{Binding Via}" /></Span>
                        </TextBlock>
                        <TextBlock Grid.Column="3" Classes="h2 time" Text="{v:MinutesLeftBinding {Binding Next}, CurrentTime={Binding $parent[UserControl].DataContext.CurrentTime}}" />
                        <TextBlock Grid.Column="4" Classes="h2 time" Text="{v:MinutesLeftBinding {Binding NextNext}, CurrentTime={Binding $parent[UserControl].DataContext.CurrentTime}}" />
                        <Ellipse Grid.Column="5" Width="{Binding #platform.Bounds.Height}" Height="{Binding #platform.Bounds.Height}"
                                 HorizontalAlignment="Center" VerticalAlignment="Top" Margin="{StaticResource spacingTop}"
                                 Fill="{DynamicResource SystemControlForegroundBaseHighBrush}" />
                        <TextBlock Name="platform" Grid.Column="5"
                                   HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="{StaticResource spacingTop}"
                                   Foreground="{DynamicResource SystemRegionBrush}"
                                   TextAlignment="Center" FontWeight="ExtraBold"
                                   Text="{Binding Platform}" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>