Refactor UI

WhackerLinkConsoleV2/AlertTone.xaml

@@ -1,15 +1,34 @@
 <UserControl x:Class="WhackerLinkConsoleV2.Controls.AlertTone"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             Height="70" Width="150"
+             Height="55" Width="105"
              MouseLeftButtonDown="AlertTone_MouseLeftButtonDown"
              MouseMove="AlertTone_MouseMove"
              MouseRightButtonDown="AlertTone_MouseRightButtonDown"
-             DataContext="{Binding RelativeSource={RelativeSource Self}}">
+             DataContext="{Binding RelativeSource={RelativeSource Self}}" Background="#FF848484">
-    <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Background="Gray">
+    <Grid Margin="1,1,1,1" Background="#FF00BC48">
-        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+        <Grid.RowDefinitions>
-            <TextBlock Text="{Binding AlertFileName}" Margin="5" TextWrapping="Wrap" Foreground="White" HorizontalAlignment="Center"/>
+            <RowDefinition Height="31*"/>
-            <Button Content="Play Alert" Background="Green" Click="PlayAlert_Click" Foreground="White" Width="80" />
+            <RowDefinition Height="39*"/>
-        </StackPanel>
+        </Grid.RowDefinitions>
-    </Border>
+
+        <Button Click="PlayAlert_Click" VerticalContentAlignment="Bottom" HorizontalAlignment="Left" Margin="46,21,0,0" VerticalAlignment="Top" Height="28" Width="48" BorderBrush="#FFC1C1C1" BorderThickness="1,1,1,1" FontSize="10" FontFamily="Arial" Grid.RowSpan="2">
+            <Button.Resources>
+                <Style TargetType="{x:Type Border}">
+                    <Setter Property="CornerRadius" Value="2"/>
+                </Style>
+            </Button.Resources>
+            <Button.Background>
+                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
+                    <GradientStop Color="#FFF0F0F0" Offset="0.485"/>
+                    <GradientStop Color="#FFE3E3E3" Offset="0.517"/>
+                </LinearGradientBrush>
+            </Button.Background>
+            <Image Height="40" Width="63" Source="/page.png" Margin="0,-8,0,0"/>
+        </Button>
+        <TextBox HorizontalAlignment="Center" FontWeight="Bold" FontSize="10" TextWrapping="Wrap" Text="{Binding AlertFileName}" TextAlignment="Center" VerticalAlignment="Top" Width="100" Background="{x:Null}" BorderThickness="0,0,0,0" Height="24" Margin="0,4,0,0" Grid.RowSpan="2" TextChanged="TextBox_TextChanged" Foreground="White"/>
+
+    </Grid>
+
 </UserControl>
+

WhackerLinkConsoleV2/AlertTone.xaml.cs

@@ -102,5 +102,10 @@ namespace WhackerLinkConsoleV2.Controls
 
             ReleaseMouseCapture();
         }
+
+        private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
+        {
+
+        }
     }
 }

WhackerLinkConsoleV2/ChannelBox.xaml

@@ -1,69 +1,114 @@
 <UserControl x:Class="WhackerLinkConsoleV2.Controls.ChannelBox"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             Width="220" Height="96" Background="DodgerBlue">
+             Width="220" Height="100" Background="#FF0B004B">
+    <!-- Border wraps the entire Grid -->
+    <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="0">
+        <Grid Margin="5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="41"/>
+                <ColumnDefinition/>
+                <ColumnDefinition Width="30"/>
+            </Grid.ColumnDefinitions>
 
-    <UserControl.Resources>
+            <Grid.RowDefinitions>
-        <Style TargetType="Button">
+                <RowDefinition Height="2*"/>
-
+                <RowDefinition Height="51*"/>
-            <Setter Property="Template">
+                <RowDefinition Height="32.25"/>
-                <Setter.Value>
+                <RowDefinition Height="7.75"/>
-                    <ControlTemplate TargetType="Button">
+            </Grid.RowDefinitions>
-                        <Border Background="{TemplateBinding Background}">
-                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                        </Border>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-
-            <!-- Hover Effect -->
-            <Style.Triggers>
-                <Trigger Property="IsMouseOver" Value="True">
-                    <Setter Property="Background" Value="#2980b9"/>
-                    <!-- Hover Color -->
-                </Trigger>
-            </Style.Triggers>
-        </Style>
-    </UserControl.Resources>
-    <Grid Margin="5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="41"/>
-            <ColumnDefinition/>
-            <ColumnDefinition Width="30"/>
-        </Grid.ColumnDefinitions>
 
-        <Grid.RowDefinitions>
+            <!-- Left Side PTT Button -->
-            <RowDefinition Height="2*"/>
-            <RowDefinition Height="51*"/>
-            <RowDefinition Height="Auto"/>
-        </Grid.RowDefinitions>
 
-        <!-- Left Side PTT Button -->
+            <!-- Main Info Section -->
-        <Button  MouseEnter="PttButton_MouseEnter" MouseLeave="PttButton_MouseLeave" Background="#FF2870AF" Name="PttButton" Click="PTTButton_Click" Grid.RowSpan="3" HorizontalAlignment="Left" Width="52" Margin="-7,-5,0,-5" Grid.ColumnSpan="2" BorderThickness="0,0,0,0">
+            <Rectangle Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="40" Margin="1,0,0,0" 
-            <Image Source="pack://application:,,,/WhackerLinkConsoleV2;component/Assets/instantptt.png" Width="52" Height="90"/>
+                Grid.RowSpan="2" Grid.Row="2" VerticalAlignment="Top" 
-        </Button>
+                Width="116" StrokeThickness="0"
+                RadiusX="2" RadiusY="2">
+                <Rectangle.Fill>
+                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
+                        <GradientStop Color="#FFF0F0F0" Offset="0.485"/>
+                        <GradientStop Color="#FFE3E3E3" Offset="0.517"/>
+                    </LinearGradientBrush>
+                </Rectangle.Fill>
+            </Rectangle>
 
-        <!-- Main Info Section -->
+            <!-- Main Info Section -->
-        <StackPanel Grid.Column="1" HorizontalAlignment="Left" Width="129" Margin="8,-4,0,39" Grid.RowSpan="3">
+            <StackPanel Grid.Column="1" HorizontalAlignment="Left" Width="119" Margin="48,0,0,1" Grid.RowSpan="2" Grid.ColumnSpan="2">
-            <TextBlock Text="{Binding ChannelName}" FontWeight="Bold" Foreground="White" FontSize="15"/>
+                <TextBlock Text="{Binding ChannelName}" FontWeight="Bold" Foreground="White" FontSize="12"/>
-            <TextBlock Text="{Binding LastSrcId}" Foreground="LightGray" FontSize="12"/>
+                <TextBlock Text="{Binding LastSrcId}" Foreground="Gold" FontSize="10"/>
-            <TextBlock Text="{Binding SystemName}" Foreground="LightGray" FontSize="12"/>
+                <TextBlock Text="{Binding SystemName}" Foreground="Gold" FontSize="10"/>
-        </StackPanel>
+            </StackPanel>
+
+            <!-- Volume Slider -->
+            <Slider Minimum="0" Maximum="4" Value="{Binding Volume, Mode=TwoWay}" 
+        Height="21" VerticalAlignment="Top" x:Name="VolumeSlider" 
+        ValueChanged="VolumeSlider_ValueChanged" Margin="11,10,65,0" 
+        Grid.ColumnSpan="2" Grid.Row="2">
+                <Slider.Style>
+                    <Style TargetType="Slider">
+                        <Setter Property="Template">
+                            <Setter.Value>
+                                <ControlTemplate TargetType="Slider">
+                                    <Grid>
+                                        <!-- Background Track -->
+                                        <Rectangle Name="PART_TrackBackground" Height="4" Fill="Gray" 
+                                       VerticalAlignment="Center" Margin="4"/>
+
+                                        <!-- Track with Functional Movement -->
+                                        <Track Name="PART_Track" VerticalAlignment="Center">
+                                            <Track.DecreaseRepeatButton>
+                                                <!-- Make the left-side button invisible -->
+                                                <RepeatButton Width="0" Background="Transparent" BorderThickness="0"/>
+                                            </Track.DecreaseRepeatButton>
+                                            <Track.IncreaseRepeatButton>
+                                                <!-- Make the right-side button invisible -->
+                                                <RepeatButton Width="0" Background="Transparent" BorderThickness="0"/>
+                                            </Track.IncreaseRepeatButton>
+                                            <Track.Thumb>
+                                                <Thumb Name="PART_Thumb" Width="10" Height="20" Background="DarkGray"/>
+                                            </Track.Thumb>
+                                        </Track>
+                                    </Grid>
+                                </ControlTemplate>
+                            </Setter.Value>
+                        </Setter>
+                    </Style>
+                </Slider.Style>
+            </Slider>
 
-        <!-- Volume Slider -->
-        <Slider Grid.Column="2" Grid.RowSpan="3" Minimum="0" Maximum="4" Value="{Binding Volume, Mode=TwoWay}" 
-                Orientation="Vertical" Height="80" VerticalAlignment="Top" Name="VolumeSlider" 
-                ValueChanged="VolumeSlider_ValueChanged" Margin="5,1,5,0"/>
 
-        <!-- Bottom Buttons -->
-        <StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Margin="5,5,49,-5">
-            <Button Width="40" Height="40" Background="#FF2870AF" x:Name="PageSelectButton" Click="PageSelectButton_Click" BorderThickness="0,0,0,0">
-                <Image Source="pack://application:,,,/WhackerLinkConsoleV2;component/Assets/pageselect.png" Width="24" Height="24"/>
-            </Button>
-            <Button Width="40" Height="40" Background="#FF2870AF" x:Name="ChannelMarkerBtn" Click="ChannelMarkerBtn_Click" BorderThickness="0,0,0,0" Margin="1,0,0,0">
-                <Image Source="pack://application:,,,/WhackerLinkConsoleV2;component/Assets/channelmarker.png" Width="24" Height="24"/>
-            </Button>
 
-        </StackPanel>
+            <!-- Bottom Buttons -->
-    </Grid>
+            <StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Margin="81,0,-2,0" Grid.RowSpan="2" Grid.ColumnSpan="2">
-</UserControl>
+                <Button Width="40" Height="40" x:Name="PageSelectButton" Click="PageSelectButton_Click" BorderThickness="0,0,0,0">
+                    <Button.Resources>
+                        <Style TargetType="{x:Type Border}">
+                            <Setter Property="CornerRadius" Value="2"/>
+                        </Style>
+                    </Button.Resources>
+
+                    <Image Source="pack://application:,,,/WhackerLinkConsoleV2;component/Assets/pageselect.png" Width="39" Height="39"/>
+                </Button>
+                <Button Width="40" Height="40" x:Name="ChannelMarkerBtn" Click="ChannelMarkerBtn_Click" BorderThickness="0,0,0,0" Margin="5,0,0,0">
+                    <Button.Resources>
+                        <Style TargetType="{x:Type Border}">
+                            <Setter Property="CornerRadius" Value="2"/>
+                        </Style>
+                    </Button.Resources>
+
+                    <Image Source="pack://application:,,,/WhackerLinkConsoleV2;component/Assets/channelmarker.png" Width="36" Height="36"/>
+                </Button>
+            </StackPanel>
+            <Button Background= "lightgray" x:Name="PttButton" Click="PTTButton_Click" HorizontalAlignment="Left" Width="42" Margin="41,1,0,4" Grid.ColumnSpan="2" BorderThickness="1,1,1,1" BorderBrush="#FFC1C1C1" UseLayoutRounding="False" Grid.RowSpan="2">
+                <Button.Resources>
+                    <Style TargetType="{x:Type Border}">
+                        <Setter Property="CornerRadius" Value="2"/>
+                    </Style>
+                </Button.Resources>
+
+                <Image Source="/Assets/instantptt.png" Width="39" Height="40" Stretch="Fill"/>
+            </Button>
+        </Grid>
+    </Border>
+</UserControl>

WhackerLinkConsoleV2/ChannelBox.xaml.cs

@@ -37,6 +37,9 @@ namespace WhackerLinkConsoleV2.Controls
         private bool _emergency;
         private string _lastSrcId = "0";
         private double _volume = 1.0;
+        private LinearGradientBrush grayGradient;
+        private LinearGradientBrush redGradient;
+        private LinearGradientBrush orangeGradient;
 
         public FlashingBackgroundManager _flashingBackgroundManager;
 
@@ -152,6 +155,37 @@ namespace WhackerLinkConsoleV2.Controls
             LastSrcId = $"Last SRC: {LastSrcId}";
             UpdateBackground();
             MouseLeftButtonDown += ChannelBox_MouseLeftButtonDown;
+
+            grayGradient = new LinearGradientBrush
+            {
+                StartPoint = new Point(0.5, 0),
+                EndPoint = new Point(0.5, 1)
+            };
+
+            grayGradient.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#FFF0F0F0"), 0.485));
+            grayGradient.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#FFE3E3E3"), 0.517));
+
+            redGradient = new LinearGradientBrush
+            {
+                StartPoint = new Point(0.5, 0),
+                EndPoint = new Point(0.5, 1)
+            };
+
+            redGradient.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#FFFE0000"), 0.485));
+            redGradient.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#FFD50000"), 0.517));
+
+            orangeGradient = new LinearGradientBrush
+            {
+                StartPoint = new Point(0.5, 0),
+                EndPoint = new Point(0.5, 1)
+            };
+
+            orangeGradient.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#FFFFD200"), 0.485));
+            orangeGradient.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#FFE2BA00"), 0.517));
+
+            PttButton.Background = grayGradient;
+            PageSelectButton.Background = grayGradient;
+            ChannelMarkerBtn.Background = grayGradient;
         }
 
         private void ChannelBox_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
@@ -159,7 +193,7 @@ namespace WhackerLinkConsoleV2.Controls
             if (IsEditMode) return;
 
             IsSelected = !IsSelected;
-            Background = IsSelected ? (Brush)new BrushConverter().ConvertFrom("#FF1E90FF") : Brushes.Gray;
+            Background = IsSelected ? (Brush)new BrushConverter().ConvertFrom("#FF0B004B") : Brushes.Gray;
 
             if (IsSelected)
             {
@@ -176,9 +210,9 @@ namespace WhackerLinkConsoleV2.Controls
             if (IsEditMode) return;
 
             if (PttState)
-                PttButton.Background = new SolidColorBrush(Colors.Red);
+                PttButton.Background = redGradient;
             else
-                PttButton.Background = (Brush)new BrushConverter().ConvertFrom("#FF2870AF");
+                PttButton.Background = grayGradient;
         }
 
         private void UpdatePageColor()
@@ -186,9 +220,9 @@ namespace WhackerLinkConsoleV2.Controls
             if (IsEditMode) return;
 
             if (PageState)
-                PageSelectButton.Background = new SolidColorBrush(Colors.Orange);
+                PageSelectButton.Background = orangeGradient;
             else
-                PageSelectButton.Background = (Brush)new BrushConverter().ConvertFrom("#FF2870AF");
+                PageSelectButton.Background = grayGradient;
         }
 
         private void UpdateHoldColor()
@@ -196,18 +230,14 @@ namespace WhackerLinkConsoleV2.Controls
             if (IsEditMode) return;
 
             if (HoldState)
-                ChannelMarkerBtn.Background = new SolidColorBrush(Colors.Orange);
+                ChannelMarkerBtn.Background = orangeGradient;
             else
-                ChannelMarkerBtn.Background = (Brush)new BrushConverter().ConvertFrom("#FF2870AF");
+                ChannelMarkerBtn.Background = grayGradient;
         }
 
         private void UpdateBackground()
         {
-            Background = IsSelected ? (Brush)new BrushConverter().ConvertFrom("#FF1E90FF") : Brushes.DarkGray;
+            Background = IsSelected ? (Brush)new BrushConverter().ConvertFrom("#FF0B004B") : Brushes.DarkGray;
-
-            ChannelMarkerBtn.Background = IsSelected ? (Brush)new BrushConverter().ConvertFrom("#FF2870AF") : new SolidColorBrush(Colors.Gray);
-            PageSelectButton.Background = IsSelected ? (Brush)new BrushConverter().ConvertFrom("#FF2870AF") : new SolidColorBrush(Colors.Gray);
-            PttButton.Background = IsSelected ? (Brush)new BrushConverter().ConvertFrom("#FF2870AF") : new SolidColorBrush(Colors.Gray);
         }
 
         private void PTTButton_Click(object sender, RoutedEventArgs e)
@@ -255,7 +285,7 @@ namespace WhackerLinkConsoleV2.Controls
         {
             if (!IsSelected || PttState) return;
 
-            ((Button)sender).Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF2870AF"));
+            ((Button)sender).Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFDDDDDD"));
         }
     }
 }

WhackerLinkConsoleV2/MainWindow.xaml

@@ -2,14 +2,17 @@
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:WhackerLinkConsoleV2.Controls"
-        Title="WhackerLinkConsoleV2" Height="600" Width="1000" Background="#1e1e1e">
+        Title="WhackerLinkConsoleV2" Height="600" Width="1000" Background="#FFF2F2F2">
-    <Grid>
+    <Grid Background="#FFF2F2F2">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
-            <RowDefinition Height="*"/>
+            <RowDefinition Height="52" />
+            <RowDefinition/>
         </Grid.RowDefinitions>
 
-        <Menu VerticalAlignment="Top" Height="25" Grid.Row="0">
+        <Border BorderBrush="#FFDADADA" BorderThickness="1" Grid.Row="1" Background="#FFF2F2F2"/>
+
+        <Menu VerticalAlignment="Center" Height="25" Background="White">
             <MenuItem Header="File">
                 <MenuItem Header="Open Codeplug" Click="OpenCodeplug_Click"/>
             </MenuItem>
@@ -29,8 +32,81 @@
             <MenuItem Header="Clear Emergency" Click="ClearEmergency_Click" />
         </Menu>
 
-        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Grid.Row="1">
+        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Grid.Row="2">
-            <Canvas x:Name="ChannelsCanvas" Background="#1e1e1e" HorizontalAlignment="Stretch"/>
+            <Canvas x:Name="ChannelsCanvas" Background="#FFF2F2F2" VerticalAlignment="Top"/>
         </ScrollViewer>
+
+        <Button Content="1" VerticalContentAlignment="Bottom" HorizontalAlignment="Left" Margin="254,0,0,0" VerticalAlignment="Center" Height="46" Width="45" Click="Button_Click" BorderBrush="#FFC1C1C1" BorderThickness="1,1,1,1" Grid.Row="1" FontSize="10" FontFamily="Arial">
+            <Button.Resources>
+                <Style TargetType="{x:Type Border}">
+                    <Setter Property="CornerRadius" Value="2"/>
+                </Style>
+            </Button.Resources>
+            <Button.Background>
+                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
+                    <GradientStop Color="#FFF0F0F0" Offset="0.485"/>
+                    <GradientStop Color="#FFE3E3E3" Offset="0.517"/>
+                </LinearGradientBrush>
+            </Button.Background>
+        </Button>
+
+        <Image HorizontalAlignment="Left" Height="26" Grid.Row="1" VerticalAlignment="Center" Width="160" Source="/whackerlink-logo.png" Margin="6,0,0,0" Stretch="Fill"/>
+        <Image HorizontalAlignment="Left" Margin="259,3,0,3" Grid.Row="1" Width="37" Source="/alerttone.png" IsHitTestVisible="False"/>
+        <Button Content="2" VerticalContentAlignment="Bottom" HorizontalAlignment="Left" Margin="301,0,0,0" VerticalAlignment="Center" Height="46" Width="45" Click="Button_Click" BorderBrush="#FFC1C1C1" BorderThickness="1,1,1,1" Grid.Row="1" FontSize="10" FontFamily="Arial">
+            <Button.Resources>
+                <Style TargetType="{x:Type Border}">
+                    <Setter Property="CornerRadius" Value="2"/>
+                </Style>
+            </Button.Resources>
+            <Button.Background>
+                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
+                    <GradientStop Color="#FFF0F0F0" Offset="0.485"/>
+                    <GradientStop Color="#FFE3E3E3" Offset="0.517"/>
+                </LinearGradientBrush>
+            </Button.Background>
+        </Button>
+        <Image HorizontalAlignment="Left" Margin="306,3,0,3" Grid.Row="1" Width="37" Source="/alerttone.png" IsHitTestVisible="False"/>
+        <Button Content="3" VerticalContentAlignment="Bottom" HorizontalAlignment="Left" Margin="348,0,0,0" VerticalAlignment="Center" Height="46" Width="45" Click="Button_Click" BorderBrush="#FFC1C1C1" BorderThickness="1,1,1,1" Grid.Row="1" FontSize="10" FontFamily="Arial">
+            <Button.Resources>
+                <Style TargetType="{x:Type Border}">
+                    <Setter Property="CornerRadius" Value="2"/>
+                </Style>
+            </Button.Resources>
+            <Button.Background>
+                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
+                    <GradientStop Color="#FFF0F0F0" Offset="0.485"/>
+                    <GradientStop Color="#FFE3E3E3" Offset="0.517"/>
+                </LinearGradientBrush>
+            </Button.Background>
+        </Button>
+        <Image HorizontalAlignment="Left" Margin="353,3,0,3" Grid.Row="1" Width="37" Source="/alerttone.png" IsHitTestVisible="False"/>
+        <Button  VerticalContentAlignment="Bottom" HorizontalAlignment="Left" Margin="170,0,0,0" VerticalAlignment="Center" Height="46" Width="82" Click="Button_Click" BorderBrush="#FFC1C1C1" BorderThickness="1,1,1,1" Grid.Row="1" FontSize="10" FontFamily="Arial">
+            <Button.Resources>
+                <Style TargetType="{x:Type Border}">
+                    <Setter Property="CornerRadius" Value="2"/>
+                </Style>
+            </Button.Resources>
+            <Button.Background>
+                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
+                    <GradientStop Color="#FFF0F0F0" Offset="0.485"/>
+                    <GradientStop Color="#FFE3E3E3" Offset="0.517"/>
+                </LinearGradientBrush>
+            </Button.Background>
+        </Button>
+        <Image HorizontalAlignment="Left" Margin="188,3,0,4" Width="63" Source="/Assets/instantptt.png" IsHitTestVisible="False" Grid.Row="1" />
+        <Button Content="" VerticalContentAlignment="Bottom" HorizontalAlignment="Left" Margin="395,0,0,0" VerticalAlignment="Center" Height="46" Width="45" Click="Button_Click" BorderBrush="#FFC1C1C1" BorderThickness="1,1,1,1" Grid.Row="1" FontSize="10" FontFamily="Arial">
+            <Button.Resources>
+                <Style TargetType="{x:Type Border}">
+                    <Setter Property="CornerRadius" Value="2"/>
+                </Style>
+            </Button.Resources>
+            <Button.Background>
+                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
+                    <GradientStop Color="#FFF0F0F0" Offset="0.485"/>
+                    <GradientStop Color="#FFE3E3E3" Offset="0.517"/>
+                </LinearGradientBrush>
+            </Button.Background>
+        </Button>
+        <Image HorizontalAlignment="Left" Margin="400,3,0,3" Grid.Row="1" Width="37" Source="/clearemerg.png" IsHitTestVisible="False"/>
     </Grid>
 </Window>

WhackerLinkConsoleV2/MainWindow.xaml.cs

@@ -15,6 +15,7 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 * 
 * Copyright (C) 2024-2025 Caleb, K4PHP
+* Copyright (C) 2025 J. Dean
 * 
 */
 
@@ -182,7 +183,7 @@ namespace WhackerLinkConsoleV2
                         {
                             if (response.Status == (int)ResponseType.GRANT)
                             {
-                                systemStatusBox.Background = new SolidColorBrush(Colors.Green);
+                                systemStatusBox.Background = (Brush)new BrushConverter().ConvertFrom("#FF00BC48"); 
                                 systemStatusBox.ConnectionState = "Connected";
                             }
                             else
@@ -475,7 +476,6 @@ namespace WhackerLinkConsoleV2
                         Dispatcher.Invoke(() =>
                         {
                             //channel.PageState = false; // TODO: Investigate
-                            channel.PageSelectButton.Background = Brushes.Green;
                         });
                     }
                 }
@@ -564,7 +564,7 @@ namespace WhackerLinkConsoleV2
                                 }
                             }
 
-                            double totalDurationMs = ((double)pcmData.Length / 16000) * 1000 + 250;
+                            double totalDurationMs = ((double)pcmData.Length / 16000) * 1000 - 6000;
                             await Task.Delay((int)totalDurationMs);
 
                             GRP_VCH_RLS release = new GRP_VCH_RLS
@@ -579,7 +579,7 @@ namespace WhackerLinkConsoleV2
 
                             Dispatcher.Invoke(() =>
                             {
-                                channel.PageSelectButton.Background = Brushes.Green;
+
                             });
                         }
                     }
@@ -700,7 +700,7 @@ namespace WhackerLinkConsoleV2
                     Dispatcher.Invoke(() =>
                     {
                         if (channel.IsSelected)
-                            channel.Background = Brushes.DodgerBlue;
+                            channel.Background = (Brush)new BrushConverter().ConvertFrom("#FF0B004B"); 
                         else
                             channel.Background = new SolidColorBrush(Colors.DarkGray);
                     });
@@ -727,7 +727,7 @@ namespace WhackerLinkConsoleV2
                     channel.LastSrcId = "Last SRC: " + response.SrcId;
                     Dispatcher.Invoke(() =>
                     {
-                        channel.Background = new SolidColorBrush(Colors.DarkCyan);
+                        channel.Background = (Brush)new BrushConverter().ConvertFrom("#FF00BC48");    
                     });
                 } else if (channel.PageState && response.Status == (int)ResponseType.GRANT && response.Channel != null && response.SrcId == system.Rid && response.DstId == cpgChannel.Tgid)
                 {
@@ -836,17 +836,27 @@ namespace WhackerLinkConsoleV2
             element.CaptureMouse();
         }
 
+        private const int GridSize = 5; // Set grid size (adjust as needed)
+
         private void ChannelBox_MouseMove(object sender, MouseEventArgs e)
         {
             if (!isEditMode || !_isDragging || _draggedElement == null) return;
 
             Point currentPosition = e.GetPosition(ChannelsCanvas);
-            double newLeft = Math.Max(0, Math.Min(currentPosition.X - _offsetX, ChannelsCanvas.ActualWidth - _draggedElement.RenderSize.Width));
-            double newTop = Math.Max(0, Math.Min(currentPosition.Y - _offsetY, ChannelsCanvas.ActualHeight - _draggedElement.RenderSize.Height));
 
+            // Calculate the new position with snapping to the grid
+            double newLeft = Math.Round((currentPosition.X - _offsetX) / GridSize) * GridSize;
+            double newTop = Math.Round((currentPosition.Y - _offsetY) / GridSize) * GridSize;
+
+            // Ensure the box stays within canvas bounds
+            newLeft = Math.Max(0, Math.Min(newLeft, ChannelsCanvas.ActualWidth - _draggedElement.RenderSize.Width));
+            newTop = Math.Max(0, Math.Min(newTop, ChannelsCanvas.ActualHeight - _draggedElement.RenderSize.Height));
+
+            // Apply snapped position
             Canvas.SetLeft(_draggedElement, newLeft);
             Canvas.SetTop(_draggedElement, newTop);
 
+            // Save the new position if it's a ChannelBox
             if (_draggedElement is ChannelBox channelBox)
             {
                 _settingsManager.UpdateChannelPosition(channelBox.ChannelName, newLeft, newTop);
@@ -855,6 +865,7 @@ namespace WhackerLinkConsoleV2
             AdjustCanvasHeight();
         }
 
+
         private void ChannelBox_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
         {
             if (!isEditMode || !_isDragging || _draggedElement == null) return;
@@ -1003,5 +1014,10 @@ namespace WhackerLinkConsoleV2
                 channel.Emergency = false;
             }
         }
+
+        private void Button_Click(object sender, RoutedEventArgs e)
+        {
+
+        }
     }
 }

WhackerLinkConsoleV2/SystemStatusBox.xaml

@@ -1,13 +1,11 @@
 <UserControl x:Class="WhackerLinkConsoleV2.Controls.SystemStatusBox"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             Width="220" Height="96" Background="#334455" BorderBrush="Gray">
+             Width="105" Height="55" Background="#FF0B004B" BorderBrush="Gray" BorderThickness="1">
-    <Border Background="{Binding Background, RelativeSource={RelativeSource AncestorType=UserControl}}" CornerRadius="5" Padding="10">
+    <Border Background="{Binding Background, RelativeSource={RelativeSource AncestorType=UserControl}}" CornerRadius="5" Padding="10" BorderThickness="1,1,1,1">
-        <StackPanel>
+        <StackPanel Margin="-3,-1,-4,1">
-            <TextBlock Text="{Binding SystemName}" FontWeight="Bold" Foreground="White" FontSize="14"/>
+            <TextBlock Text="System 1" FontWeight="Bold" Foreground="White" FontSize="12"/>
-            <TextBlock Text="{Binding AddressPort}" Foreground="LightGray" FontSize="12"/>
+            <TextBlock Text="Connected" Foreground="Gold" FontSize="10"/>
-            <TextBlock Text="Connection State:" Foreground="LightGray" FontSize="12"/>
-            <TextBlock Text="{Binding ConnectionState}" Foreground="White" FontSize="12"/>
         </StackPanel>
     </Border>
 </UserControl>

WhackerLinkConsoleV2/WhackerLinkConsoleV2.csproj

@@ -10,10 +10,16 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <None Remove="alerttone.png" />
     <None Remove="Assets\channelmarker.png" />
     <None Remove="Assets\instantptt.png" />
+    <None Remove="Assets\page.png" />
     <None Remove="Assets\pageselect.png" />
     <None Remove="Assets\pttselect.png" />
+    <None Remove="clearemerg.png" />
+    <None Remove="connection.png" />
+    <None Remove="page.png" />
+    <None Remove="whackerlink-logo.png" />
   </ItemGroup>
 
  
@@ -28,12 +34,18 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Resource Include="alerttone.png" />
     <Resource Include="Assets\channelmarker.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
     <Resource Include="Assets\instantptt.png" />
+    <Resource Include="Assets\page.png" />
     <Resource Include="Assets\pageselect.png" />
     <Resource Include="Assets\pttselect.png" />
+    <Resource Include="clearemerg.png" />
+    <Resource Include="connection.png" />
+    <Resource Include="page.png" />
+    <Resource Include="whackerlink-logo.png" />
   </ItemGroup>
 
   <ItemGroup>