TrayWindow.xaml

<?xml version="1.0" encoding="utf-8"?>

<Window
    x:Class="Coder.Desktop.App.TrayWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Coder.Desktop.App"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="Coder">

    <Window.SystemBackdrop>
        <DesktopAcrylicBackdrop />
    </Window.SystemBackdrop>

    <StackPanel
        Orientation="Vertical"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Top"
        Padding="20"
        Spacing="10">

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <TextBlock
                Grid.Column="0"
                Text="CoderVPN"
                FontSize="18"
                VerticalAlignment="Center" />
            <ProgressRing
                Grid.Column="1"
                IsActive="{x:Bind GlobalToggleSwitch.IsOn, Mode=OneWay}"
                Width="24"
                Height="24"
                Margin="10,0"
                HorizontalAlignment="Right" />
            <ToggleSwitch
                x:Name="GlobalToggleSwitch"
                Grid.Column="2"
                OnContent=""
                OffContent=""
                Margin="0,0,-110,0"
                HorizontalAlignment="Right" />
        </Grid>

        <local:HorizontalRule />

        <TextBlock
            Text="Workspaces"
            FontWeight="semibold"
            Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />

        <ItemsRepeater ItemsSource="{x:Bind Agents}">
            <ItemsRepeater.Layout>
                <StackLayout Orientation="Vertical" />
            </ItemsRepeater.Layout>

            <ItemsRepeater.ItemTemplate>
                <DataTemplate x:DataType="local:Agent">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <HyperlinkButton
                            Grid.Column="0"
                            Command="{x:Bind AgentHostnameButton_ClickCommand}"
                            Margin="-10,0,0,0"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Left">

                            <StackPanel
                                Orientation="Horizontal"
                                HorizontalAlignment="Stretch"
                                Spacing="10">

                                <Canvas
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Height="14" Width="14"
                                    Margin="0,1,0,0">

                                    <Ellipse
                                        Fill="{x:Bind StatusColor}"
                                        Opacity="0.2"
                                        Width="14"
                                        Height="14"
                                        Canvas.Left="0"
                                        Canvas.Top="0" />

                                    <Ellipse
                                        Fill="{x:Bind StatusColor}"
                                        Width="8"
                                        Height="8"
                                        VerticalAlignment="Center"
                                        Canvas.Left="3"
                                        Canvas.Top="3" />
                                </Canvas>

                                <!-- This cannot have any whitespace at all to avoid adding spaces between the elements, so it's populated from code instead -->
                                <!-- TODO: I couldn't get ellipsis to work without hardcoding a width here -->
                                <TextBlock
                                    Loaded="{x:Bind AgentHostnameText_OnLoaded}"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Stretch"
                                    HorizontalTextAlignment="Left"
                                    TextTrimming="CharacterEllipsis"
                                    TextWrapping="NoWrap"
                                    Width="180" />
                            </StackPanel>
                        </HyperlinkButton>

                        <HyperlinkButton
                            Grid.Column="1"
                            x:Name="AgentHostnameCopyButton"
                            Command="{x:Bind AgentHostnameCopyButton_ClickCommand}"
                            CommandParameter="{Binding ElementName=AgentHostnameCopyButton}"
                            Margin="0,0,-10,0"
                            VerticalAlignment="Stretch">

                            <FontIcon
                                Glyph="&#xE8C8;"
                                FontSize="16"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                        </HyperlinkButton>
                    </Grid>
                </DataTemplate>
            </ItemsRepeater.ItemTemplate>
        </ItemsRepeater>

        <HyperlinkButton
            Margin="-10,0,-10,0"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Left"
            Click="ButtonBase_OnClick">

            <TextBlock Text="Show more" Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
        </HyperlinkButton>

        <local:HorizontalRule />

        <HyperlinkButton
            Margin="-10,0,-10,0"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Left">

            <TextBlock Text="Create workspace" Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />
        </HyperlinkButton>

        <local:HorizontalRule />

        <HyperlinkButton
            Margin="-10,0,-10,0"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Left"
            Click="{x:Bind SignIn_Click}">

            <TextBlock Text="Sign in" Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />
        </HyperlinkButton>

        <!-- For some strange reason, setting OpenCommand and ExitCommand here doesn't work, see .cs -->
        <local:TrayIcon x:Name="TrayIcon" />
    </StackPanel>
</Window>