pro3_control_panel_v2/Views/Pages/MainPage.xaml

<UserControl x:Class="AmebaPro3_ControlPanel.Views.Pages.MainPage"
             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:controls="clr-namespace:AmebaPro3_ControlPanel.Views.Controls"
             mc:Ignorable="d"
             d:DesignHeight="720"
             d:DesignWidth="1280">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="480"/>
    </Grid.ColumnDefinitions>

    <!-- AmebaPro3 UART console -->
    <controls:ConsolePanel DataContext="{Binding AmebaConsole}">
      <controls:ConsolePanel.HeaderContent>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
          <ComboBox Width="160"
                    ItemsSource="{Binding AvailablePorts}"
                    SelectedItem="{Binding SelectedPort}"
                    Margin="0,0,8,0"/>
          <TextBox Width="150"
                   Text="{Binding BaudRate}"
                   Margin="0,0,8,0"/>
          <Button Content="Connect"
                  Command="{Binding ConnectCommand}"
                  Width="140"
                  Margin="0,0,8,0">
            <Button.Style>
              <Style TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
                <Setter Property="Content" Value="Connect"/>
                <Setter Property="Command" Value="{Binding ConnectCommand}"/>
                <Style.Triggers>
                  <DataTrigger Binding="{Binding IsConnected}" Value="True">
                    <Setter Property="Content" Value="Disconnect"/>
                    <Setter Property="Command" Value="{Binding DisconnectCommand}"/>
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </Button.Style>
          </Button>
          <Button Content="TeraTerm"
                  Command="{Binding OpenTeraTermCommand}"
                  Width="120"
                  Style="{StaticResource BaseButtonStyle}"/>
        </StackPanel>
      </controls:ConsolePanel.HeaderContent>
    </controls:ConsolePanel>

    <!-- Right stack -->
    <Grid Grid.Column="1" Margin="12,0,0,0">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="8"/>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>

      <!-- Flash Image Card -->
      <Border Style="{StaticResource CardStyle}">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>
          <TextBlock Text="Flash Image"
                     Style="{StaticResource SectionHeaderTextStyle}"/>

          <Grid Grid.Row="1" Margin="0,8,0,0">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="BootloaderPathTextBox"
                     Grid.Column="0"
                     IsReadOnly="True"
                     Text="{Binding BootloaderPath}"
                     Margin="0,0,8,0"/>
            <Button x:Name="BrowseBootloaderButton"
                    Grid.Column="1"
                    Content="Browse"
                    Width="110"
                    Command="{Binding BrowseBootloaderCommand}"
                    Style="{StaticResource BaseButtonStyle}"/>
          </Grid>

          <Grid Grid.Row="2" Margin="0,8,0,0">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="AppPathTextBox"
                     Grid.Column="0"
                     IsReadOnly="True"
                     Text="{Binding ApplicationPath}"
                     Margin="0,0,8,0"/>
            <Button x:Name="BrowseAppButton"
                    Grid.Column="1"
                    Content="Browse"
                    Width="110"
                    Command="{Binding BrowseAppCommand}"
                    Style="{StaticResource BaseButtonStyle}"/>
          </Grid>

          <Button x:Name="FlashImageButton"
                  Grid.Row="3"
                  Content="Flash Image"
                  Command="{Binding FlashImageCommand}"
                  Style="{StaticResource PrimaryButtonStyle}"
                  Margin="0,12,0,0"/>
        </Grid>
      </Border>

      <!-- Arduino Controller Card -->
      <Border Grid.Row="2" Style="{StaticResource CardStyle}">
        <StackPanel>
          <TextBlock Text="Arduino Controller"
                     Style="{StaticResource SectionHeaderTextStyle}"/>

          <StackPanel Orientation="Horizontal" Margin="0,0,0,8">
            <ComboBox x:Name="ArduinoComComboBox"
                      Width="160"
                      ItemsSource="{Binding ArduinoPorts}"
                      SelectedItem="{Binding SelectedArduinoPort}"
                      Margin="0,0,8,0"/>
            <TextBox x:Name="ArduinoBaudTextBox"
                     Width="140"
                     Text="{Binding ArduinoBaudRate}"
                     Margin="0,0,8,0"/>
            <Button x:Name="ArduinoConnectButton"
                    Width="130"
                    Content="Connect"
                    Command="{Binding ArduinoConnectCommand}">
              <Button.Style>
                <Style TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
                  <Setter Property="Content" Value="Connect"/>
                  <Style.Triggers>
                    <DataTrigger Binding="{Binding IsArduinoConnected}" Value="True">
                      <Setter Property="Content" Value="Disconnect"/>
                    </DataTrigger>
                  </Style.Triggers>
                </Style>
              </Button.Style>
            </Button>
          </StackPanel>

          <UniformGrid Columns="4" Margin="0,0,0,8">
            <Button x:Name="ArduinoResetButton"
                    Content="Reset"
                    Command="{Binding ArduinoResetCommand}"
                    Style="{StaticResource BaseButtonStyle}"
                    Margin="0,0,8,0"/>
            <Button x:Name="ArduinoDownloadButton"
                    Content="Download Mode"
                    Command="{Binding ArduinoDownloadCommand}"
                    Style="{StaticResource BaseButtonStyle}"
                    Margin="0,0,8,0"/>
            <Button x:Name="ArduinoNormalButton"
                    Content="Normal Mode"
                    Command="{Binding ArduinoNormalCommand}"
                    Style="{StaticResource BaseButtonStyle}"
                    Margin="0,0,8,0"/>
            <Button x:Name="ArduinoTestModeButton"
                    Content="Test Mode"
                    Command="{Binding ArduinoTestModeCommand}"
                    Style="{StaticResource BaseButtonStyle}"/>
          </UniformGrid>

          <StackPanel Orientation="Vertical">
            <TextBlock Text="Test mode"
                       Style="{StaticResource CaptionTextStyle}"/>
            <ComboBox x:Name="ArduinoTestSelectComboBox"
                      ItemsSource="{Binding ArduinoTests}"
                      SelectedItem="{Binding SelectedArduinoTest}"
                      Margin="0,4,0,0"/>
          </StackPanel>
        </StackPanel>
      </Border>
    </Grid>
  </Grid>
</UserControl>