agrobot_base/AgroBase/OperationControl/Controls/ManualControlPad.xaml

<UserControl x:Class="OperationControl.Controls.ManualControlPad"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:OperationControl.Controls"
             x:Name="Root" Focusable="True" MinWidth="382">

    <Border CornerRadius="8" Background="#111" BorderBrush="Black" BorderThickness="1" Width="382" MinHeight="66">
        <Canvas x:Name="cnvFundo">
            <Label Content="Controle" Foreground="White" Canvas.Left="0" HorizontalAlignment="Center" VerticalAlignment="Top" Canvas.Top="-5"/>

            <Grid HorizontalAlignment="Center" Canvas.Top="15" Canvas.Left="9" VerticalAlignment="Top">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <!-- header -->
                    <RowDefinition Height="Auto"/>
                    <!-- painel manual (altura animada) -->
                </Grid.RowDefinitions>

                <!-- ===== HEADER COMPACTO ===== -->
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="180"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <!-- Leituras à esquerda -->
                    <Grid HorizontalAlignment="Center" Width="180" TextBlock.FontSize="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="60"/>
                            <ColumnDefinition Width="60"/>
                            <ColumnDefinition Width="60"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <TextBlock Grid.Row="0" Grid.Column="0" Text="Velocidade" Foreground="#ddd"/>
                        <TextBlock Grid.Row="0" Grid.Column="1" Foreground="#ddd" Text="{Binding SpeedSpKmh, ElementName=Root, StringFormat={}{0:0.00} km/h}"/>
                        <TextBlock Grid.Row="0" Grid.Column="2" Foreground="#bbb" Opacity=".85" Text="{Binding SpeedCurKmh, ElementName=Root, StringFormat={}{0:0.00} km/h}"/>

                        <TextBlock Grid.Row="1" Grid.Column="0" Text="Direcional" Foreground="#ddd" Margin="0,2,0,0"/>
                        <TextBlock Grid.Row="1" Grid.Column="1" Foreground="#ddd" Margin="0,2,0,0" Text="{Binding AngleSpDeg, ElementName=Root, StringFormat={}{0:0.00}°}"/>
                        <TextBlock Grid.Row="1" Grid.Column="2" Margin="0,2,0,15" Foreground="#bbb" Opacity=".85" Text="{Binding AngleCurDeg, ElementName=Root, StringFormat={}{0:0.00}°}" Grid.RowSpan="2"/>

                        <TextBlock Grid.Row="2" Grid.Column="0" Text="Movimento" Foreground="#ddd" Margin="0,2,0,0"/>
                        <TextBlock Grid.Row="2" Foreground="#ddd" Margin="0,2,0,0" Text="{Binding MoveType, ElementName=Root}" HorizontalAlignment="Left" Width="120" Grid.Column="1" Grid.ColumnSpan="2"/>
                    </Grid>

                    <!-- Botões + Modo Manual à direita -->
                    <Canvas Grid.Column="1" Margin="0,0,-184,0">
                        <Button x:Name="btnEmergencia" FontFamily="Segoe UI Emoji" Width="70" Height="20" Click="OnEmergencyClick" HorizontalAlignment="Center" VerticalAlignment="Top" Canvas.Top="1">
                            <Button.Style>
                                <Style TargetType="Button">
                                    <!-- estado normal (desativado) -->
                                    <Setter Property="Content" Value="🚨"/>
                                    <Setter Property="Background" Value="#E74C3C"/>
                                    <Setter Property="Foreground" Value="White"/>
                                    <Setter Property="FontSize" Value="12"/>
                                    <Setter Property="ToolTip" Value="Ativar Parada de Emergência"/>

                                    <Style.Triggers>
                                        <!-- quando a emergência estiver ATIVA -->
                                        <DataTrigger Value="True" Binding="{Binding EmergencyActivated, RelativeSource={RelativeSource AncestorType=local:ManualControlPad}}">
                                            <Setter Property="Background" Value="White"/>
                                            <Setter Property="Foreground" Value="#E74C3C"/>
                                            <Setter Property="Content" Value="⛔"/>
                                            <Setter Property="ToolTip" Value="Desativar Parada de Emergência"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Button.Style>
                        </Button>

                        <Button x:Name="BtnPausa" Width="70" Height="20" Click="OnPauseClick" Canvas.Top="23" HorizontalAlignment="Left" VerticalAlignment="Center">
                            <Button.Style>
                                <Style TargetType="Button">
                                    <!-- estado normal (desativado) -->
                                    <Setter Property="Content" Value="⏸️"/>
                                    <Setter Property="Background" Value="Yellow"/>
                                    <Setter Property="Foreground" Value="Black"/>
                                    <Setter Property="ToolTip" Value="Colocar Operação em Espera"/>

                                    <Style.Triggers>
                                        <!-- quando a emergência estiver ATIVA -->
                                        <DataTrigger Value="True" Binding="{Binding PauseActivated, RelativeSource={RelativeSource AncestorType=local:ManualControlPad}}">
                                            <Setter Property="Content" Value="▶️"/>
                                            <Setter Property="Background" Value="#27AE60"/>
                                            <Setter Property="Foreground" Value="White"/>
                                            <Setter Property="ToolTip" Value="Retomar Operação"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Button.Style>
                        </Button>

                        <Button x:Name="BtnReferenciar" Width="108" Height="20" Click="OnRefClick" HorizontalAlignment="Center" VerticalAlignment="Top" Canvas.Left="75" Canvas.Top="1">
                            <Button.Style>
                                <Style TargetType="Button">
                                    <Setter Property="IsEnabled" Value="True"/>
                                    <Setter Property="Content" Value="⚙️ Recalibrar"/>
                                    <Setter Property="Background" Value="White"/>
                                    <Setter Property="Foreground" Value="Black"/>
                                    <Setter Property="ToolTip" Value="Realizar processo de calibragem do equipamento"/>

                                    <Style.Triggers>
                                        <DataTrigger Value="True" Binding="{Binding RefActivated, RelativeSource={RelativeSource AncestorType=local:ManualControlPad}}">
                                            <Setter Property="IsEnabled" Value="False"/>
                                            <Setter Property="Content" Value="🔄 Calibrando"/>
                                            <Setter Property="Foreground" Value="Black"/>
                                            <Setter Property="ToolTip" Value="Calibragem em andamento"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Button.Style>
                        </Button>

                        <ToggleButton x:Name="TgManual" Width="108" Height="20" Checked="OnManualToggle" Unchecked="OnManualToggle" Canvas.Left="75" Canvas.Top="23" HorizontalAlignment="Left" VerticalAlignment="Top">
                            <ToggleButton.Style>
                                <Style TargetType="ToggleButton">
                                    <Setter Property="Content" Value="Modo Manual: OFF"/>
                                    <Setter Property="Background" Value="#2c2c2c"/>
                                    <Setter Property="Foreground" Value="#ddd"/>
                                    <Style.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Content" Value="Modo Manual: ON"/>
                                            <Setter Property="Background" Value="#2ECC71"/>
                                            <Setter Property="Foreground" Value="Black"/>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </ToggleButton.Style>
                        </ToggleButton>

                    </Canvas>
                </Grid>

                <!-- ===== PAINEL MANUAL (expandível) ===== -->
                <Grid Grid.Row="1" ClipToBounds="True">
                    <!-- container com altura animada -->
                    <Border x:Name="ManualContainer" Height="0" Background="#00000000" HorizontalAlignment="Left" Width="366">
                        <Grid x:Name="ManualInner" Margin="0,10,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="190"/>
                            </Grid.ColumnDefinitions>

                            <!-- Ajustes -->
                            <Grid Margin="0,0,8,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <StackPanel Grid.Column="0">
                                    <DockPanel>
                                        <TextBlock Text="Velocidade " Foreground="#ddd"/>
                                        <TextBlock Text="{Binding SpeedPercent, ElementName=Root, StringFormat={}{0:0}%}" Foreground="#ddd" DockPanel.Dock="Right"/>
                                    </DockPanel>
                                    <Slider Minimum="0" Maximum="100" Value="{Binding SpeedPercent, ElementName=Root, Mode=TwoWay}"/>

                                    <DockPanel Margin="0 10 0 0">
                                        <TextBlock Text="Ângulo Máx " Foreground="#ddd"/>
                                        <TextBlock Text="{Binding MaxSteerDeg, ElementName=Root, StringFormat={}{0:0}°}" Foreground="#ddd" DockPanel.Dock="Right"/>
                                    </DockPanel>
                                    <Slider Minimum="0" Maximum="90" Value="{Binding MaxSteerDeg, ElementName=Root, Mode=TwoWay}"/>

                                    <TextBlock Margin="0 10 0 0" Text="Tipo de Movimento" Foreground="#ddd"/>
                                    <ComboBox ItemsSource="{Binding MoveModes, ElementName=Root}" SelectedItem="{Binding SelectedMoveMode, ElementName=Root, Mode=TwoWay}"/>
                                </StackPanel>

                            </Grid>

                            <!-- Joystick -->
                            <Grid Grid.Column="1" HorizontalAlignment="Center">
                                <Border CornerRadius="8" Background="#151515" BorderBrush="#333" BorderThickness="1" Padding="6" MouseDown="Pad_MouseDown" MouseMove="Pad_MouseMove" MouseUp="Pad_MouseUp">
                                    <Grid Width="120" Height="120" x:Name="Pad">
                                        <Ellipse Stroke="#444" StrokeThickness="1"/>
                                        <Ellipse Width="85" Height="85" Stroke="#444" StrokeThickness="1"/>
                                        <Ellipse Width="50"  Height="50"  Stroke="#444" StrokeThickness="1"/>
                                        <Ellipse Width="6" Height="6" Fill="#666"/>
                                        <Ellipse x:Name="Thumb" Width="18" Height="18" Fill="#2ECC71" Stroke="#0C0" StrokeThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
                                            <Ellipse.RenderTransform>
                                                <TranslateTransform x:Name="ThumbTT" />
                                            </Ellipse.RenderTransform>
                                        </Ellipse>
                                    </Grid>
                                </Border>

                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,4,0,0">
                                    <TextBlock Text="DIR:" Foreground="#bbb"/>
                                    <TextBlock Text="{Binding SteerCmd, ElementName=Root, StringFormat={}{0:+0.00;-0.00;0.00}}" Foreground="#ddd"/>
                                    <TextBlock Text="•" Foreground="#666"/>
                                    <TextBlock Text="MOV:" Foreground="#bbb"/>
                                    <TextBlock Text="{Binding ThrottleCmd, ElementName=Root, StringFormat={}{0:+0.00;-0.00;0.00}}" Foreground="#ddd"/>
                                </StackPanel>
                            </Grid>
                        </Grid>
                    </Border>
                </Grid>

            </Grid>
        </Canvas>

    </Border>
</UserControl>