Merge branch 'design-of-program-screen' into 'develop'

improved design of programlist screen as well as input dialog, made text of...

See merge request !58

InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_2ProgramsList.xaml

@@ -5,8 +5,9 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:InnoLabProjektDektopApp"
         xmlns:header="clr-namespace:InnoLabProjektDektopApp.Screens.Templates"
-        mc:Ignorable="d">
-    <Grid>
+        mc:Ignorable="d"
+      Background="{StaticResource BACKGROUND_PRIMARY_BRUSH}">
+    <Grid VerticalAlignment="Center">
         <StackPanel Margin="20,20,20,20">
             <Grid>
                 <Grid.ColumnDefinitions>
@@ -14,168 +15,124 @@
                     <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
 
-                <Button Width="40" 
-        Height="40" 
-        Background="White" 
-        BorderBrush="Black" 
-        BorderThickness="1" 
-        HorizontalAlignment="Left" 
-        VerticalAlignment="Top" 
-        Click="BackButton_Click">
-                    <Button.Template>
-                        <ControlTemplate TargetType="Button">
-                            <Grid>
-                                <Ellipse Fill="Gray" />
-                                <TextBlock Text="←" 
-                           FontSize="16" 
-                           VerticalAlignment="Center" 
-                           HorizontalAlignment="Center" />
-                            </Grid>
-                        </ControlTemplate>
-                    </Button.Template>
-                </Button>
-
-
                 <!-- Überschrift -->
                 <TextBlock Grid.Column="0"
                            Style="{StaticResource Header1}" 
                            Text="Edit the list of distracting programs" 
-                           HorizontalAlignment="Left" Margin="0,46,0,-46" />
+                           HorizontalAlignment="Left" />
 
                 <!-- Suchfeld -->
-                <DockPanel Grid.Column="1" HorizontalAlignment="Right" Margin="10,0,0,0">
-                    <!-- TextBox für Suche -->
+
+                <Border  CornerRadius="10" Padding="10" Grid.Column="1" HorizontalAlignment="Right" Margin="10,0,0,0" Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}">
+                    <!-- Input Field with Placeholder -->
                     <Grid>
                         <TextBox x:Name="SearchBox"
+                                 Margin="10,0"
                  Width="150"
                  Height="30"
                  FontSize="14"
                  VerticalAlignment="Center"
                  Padding="5"
                  HorizontalAlignment="Left"
-                 Foreground="Black" 
                  Background="Transparent"
-                 BorderBrush="Gray" 
-                 BorderThickness="1" 
+                 Foreground="{StaticResource TEXT_PRIMARY_BRUSH}"
+                 BorderBrush="{StaticResource TEXT_SECONDARY_BRUSH}"
+                 BorderThickness="0"
                  TextChanged="SearchBox_TextChanged" />
-
                         <TextBlock x:Name="SearchPlaceholder"
                    Text="Search..."
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left"
-                   Foreground="Gray"
+                   Foreground="{StaticResource TEXT_SECONDARY_BRUSH}"
                    FontSize="14"
                    Padding="5"
                    IsHitTestVisible="False"
-                   Margin="5,0,0,0" />
-                    </Grid>
+                   Margin="15,0,0,0" />
+
+                        <!-- Untere Linie als Border -->
+                        <Border Height="1"
+                Background="{StaticResource TEXT_PRIMARY_BRUSH}"
+                VerticalAlignment="Bottom"
+                HorizontalAlignment="Stretch"
+                Margin="10,0,40,0" />
 
-                    <!-- Lupe-Symbol -->
-                    <Button Width="30" 
+                        <Border Width="30"
 Height="30"
-                            Margin="5,0,0,0" 
+Margin="165,0,0,0"
 VerticalAlignment="Center"
-                            HorizontalAlignment="Right">
+HorizontalAlignment="Right"
+>
                             <TextBlock Text="🔍"
        FontSize="14"
        VerticalAlignment="Center"
-                                   HorizontalAlignment="Center" />
-                    </Button>
-                </DockPanel>
-            </Grid>
-            <TextBlock Style="{StaticResource StandardText}" Margin="0,40,0,0"
-                       Text="By clicking on a toggle, you can change the programs that should be marked as distracting." />
+       HorizontalAlignment="Center" 
+                                       />
 
-            <Border Background="#2C2C2C" CornerRadius="10" Padding="10" Margin="0,10,0,0">
-                <Grid>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="2*" />
-                        <ColumnDefinition Width="3*" />
-                        <ColumnDefinition Width="2*" />
-                        <ColumnDefinition Width="Auto" />
-                    </Grid.ColumnDefinitions>
+                        </Border>
+                    </Grid>
+                </Border>
 
-                    <!-- Label -->
-                    <TextBlock Text="Add a distracting program:" 
-        VerticalAlignment="Center" 
-        Foreground="White" 
-        FontSize="14" 
-        FontWeight="Bold" 
-        Grid.Column="0" 
-        Margin="10,0,10,0" />
 
-                    <!-- Input Field with Placeholder -->
-                    <Grid Grid.Column="1" VerticalAlignment="Center" Margin="0,0,10,0">
-                        <TextBox x:Name="UrlInputBox" 
-  VerticalAlignment="Center" 
-  Padding="5" 
-  FontSize="14" 
-  Background="Transparent" 
-  Foreground="White" 
-  BorderBrush="Gray" 
-  BorderThickness="1" 
-  TextChanged="UrlInputBox_TextChanged" />
-                        <TextBlock x:Name="UrlPlaceholder" 
-    Text="process name" 
-    VerticalAlignment="Center" 
-    Foreground="Gray" 
-    FontSize="14" 
-    Padding="5" 
-    IsHitTestVisible="False" 
-    Margin="5,0,0,0" />
             </Grid>
+            <TextBlock  Margin="0,10,0,0"
+                       Text="On the left side, you can find the programs that you marked as distracting. On the left, you find all currently running programs that you can potentially add to the distracting programs." />
+
 
-                    <!-- Add Button -->
-                    <Button Width="30" 
-     Height="30" 
-     VerticalAlignment="Center" 
-     HorizontalAlignment="Right" 
-     Grid.Column="3" 
-     Margin="0" 
-     BorderThickness="0" 
-     ToolTip="Add"
-      Click="AddButton_Click">
-                        <TextBlock Text="+" 
-            FontSize="20" 
-            Foreground="#333436" 
-            VerticalAlignment="Center" 
-            HorizontalAlignment="Center" 
-                        />
-                    </Button>
-                </Grid>
-            </Border>
 
             <!-- Überschrift -->
-            <Grid>
-                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,10,0,10" Width="350">
+            <Grid Margin="0,20">
+                <!-- Define two equal columns -->
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+
+                <!-- Left Column StackPanel -->
+                <StackPanel Grid.Column="0" Margin="20,10,10,8">
+                    <!-- Header -->
+                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,0,15">
                         <CheckBox x:Name="OtherProgramsCheckBox" IsChecked="True" VerticalAlignment="Center"/>
                         <TextBlock x:Name="HeaderTextBlock"
                        Style="{StaticResource Header2}" 
-                                Text="CATEGORY" RenderTransformOrigin="0.548,1.689" Margin="10,0,0,0"/>
+                       Text="CATEGORY"
+                       Margin="10,0,0,0"/>
                     </StackPanel>
-                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,10,0,10" Width="430">
+
+                    <!-- ScrollViewer for Items -->
+                    <ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="200">
+                        <StackPanel x:Name="ItemsPanel" />
+                    </ScrollViewer>
+                </StackPanel>
+
+                <!-- Right Column StackPanel -->
+                <StackPanel Grid.Column="1" Margin="20,10,20,8">
+                    <!-- Header -->
+                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,0,0,0" >
                         <TextBlock x:Name="HeaderTextBlock2"
                        Style="{StaticResource Header2}" 
-                                Text="Running Programs" RenderTransformOrigin="0.548,1.689" Margin="0,0,0,0" HorizontalAlignment="Right"/>
-                    <Button Width="110" Margin="150,0,0,0" ToolTip="Refresh" Click="RefreshButton_Click">
-                        <TextBlock Text="Click to Refresh"/>
-                    </Button>
-                </StackPanel>
-            </Grid>
+                       Text="Running Programs"
+                       VerticalAlignment="Center"/>
+
+                        <!-- Refresh Button -->
+                        <Border Margin="10,0,0,0" Style="{StaticResource RoundedButtonBorder}" MouseDown="RefreshButton_Click" Width="40" Height="40" VerticalAlignment="Center">
+                            <Viewbox Width="20" Height="20" HorizontalAlignment="Center">
+                                <Path Margin="-4,0,0,0" Fill="Black" Data="M12,4V1L8,5L12,9V6C15.3,6 18,8.7 18,12C18,15.3 15.3,18 12,18C8.7,18 6,15.3 6,12H4C4,16.4 7.6,20 12,20C16.4,20 20,16.4 20,12C20,7.6 16.4,4 12,4Z"/>
+                            </Viewbox>
+                        </Border>
                     </StackPanel>
-        <Grid>
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="*" />
-                <ColumnDefinition Width="*" />
-            </Grid.ColumnDefinitions>
-            <ScrollViewer VerticalScrollBarVisibility="Auto" Margin="20,225,10,8" Grid.Column="0">
-                <StackPanel x:Name="ItemsPanel" />
-            </ScrollViewer>
-            <ScrollViewer VerticalScrollBarVisibility="Auto" Margin="10,225,20,8" Grid.Column="1">
+
+                    <!-- ScrollViewer for Running Programs -->
+                    <ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="200">
                         <StackPanel x:Name="ItemsPanel2" />
                     </ScrollViewer>
+                </StackPanel>
             </Grid>
 
 
+
+        </StackPanel>
+        
+
+
     </Grid>
 </Page>
\ No newline at end of file

InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_2ProgramsList.xaml.cs

@@ -73,65 +73,6 @@ namespace InnoLabProjektDektopApp
         }
 
 
-
-        private void AddButton_Click(object sender, RoutedEventArgs e)
-        {
-            string enteredUrl = UrlInputBox.Text.Trim();
-
-            if (string.IsNullOrEmpty(enteredUrl))
-            {
-                MessageBox.Show("Please enter a URL.", "Invalid Input", MessageBoxButton.OK, MessageBoxImage.Warning);
-                return;
-            }
-
-            // Add the new URL to the current category
-            if (!_data.ContainsKey("Programs"))
-            {
-                _data["Programs"] = new List<ProcessEntry>();
-            }
-
-            // Check if the process is already in the list
-            if (_data["Programs"].Any(p => p.ProcessName.Equals(enteredUrl, StringComparison.CurrentCultureIgnoreCase)))
-            {
-                MessageBox.Show($"Process '{enteredUrl}' is already added.", "Info", MessageBoxButton.OK, MessageBoxImage.Information);
-                UrlInputBox.Clear();
-                return;
-            }
-
-            _data["Programs"].Add(new ProcessEntry
-            {
-                ProcessName = enteredUrl.ToLower(),
-                MainWindowTitle = enteredUrl,
-                IsDistracting = true
-            });
-
-            // Save changes to the JSON
-            SaveData();
-
-            // Add to UI dynamically
-            var stackPanel = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(5, 2, 5, 2) };
-
-            var checkBox = new CheckBox
-            {
-                Content = $"{enteredUrl}: {enteredUrl}",
-                Margin = new Thickness(5),
-                IsChecked = true,
-                Tag = new ProcessEntry { ProcessName = enteredUrl, MainWindowTitle = enteredUrl, IsDistracting = true }
-            };
-
-            checkBox.Checked += CheckBox_CheckedChanged;
-            checkBox.Unchecked += CheckBox_CheckedChanged;
-
-            stackPanel.Children.Add(checkBox);
-            ItemsPanel.Children.Add(stackPanel);
-
-            // Clear the input field
-            UrlInputBox.Clear();
-
-            // Refresh Panel to exclude duplicates
-            RefreshRunningProcessList();
-        }
-
         private void RefreshButton_Click(object sender, RoutedEventArgs e)
         {
             RefreshRunningProcessList();
@@ -146,39 +87,72 @@ namespace InnoLabProjektDektopApp
                     item.MainWindowTitle.Contains(filter, StringComparison.CurrentCultureIgnoreCase)
                     )
                     .ToList();
+
             ItemsPanel2.Children.Clear();
+
             foreach (var process in windowedProcesses)
             {
-                // check if the process is not already in the list
-                if (_data["Programs"].Any(p => p.ProcessName.Equals(process.Name, StringComparison.CurrentCultureIgnoreCase))) continue;
+                // Prüfen, ob der Prozess bereits in der Liste ist
+                if (_data["Programs"].Any(p => p.ProcessName.Equals(process.Name, StringComparison.CurrentCultureIgnoreCase)))
+                    continue;
 
-                var stackPanel = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(5, 2, 5, 2) };
+                // Grid für bessere Platzverteilung
+                var newGrid = new Grid { Margin = new Thickness(5, 2, 5, 2) };
 
-                var button = new Button
-                {
-                    Content = "+",
-                    Width = 30,
-                    Margin = new Thickness(5)
-                };
+                // Spalten:
+                // 1. Dynamische Spalte für den TextBlock
+                // 2. Feste Spalte für den Button
+                newGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
+                newGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
 
+                // TextBlock für Prozessname mit TextWrapping
                 var textBlock = new TextBlock
                 {
                     Text = $"{process.MainWindowTitle} ({process.Name})",
                     Margin = new Thickness(5),
-                    ToolTip = $"{process.MainWindowTitle} ({process.Name})"
+                    ToolTip = $"{process.MainWindowTitle} ({process.Name})",
+                    TextWrapping = TextWrapping.Wrap
                 };
 
-                button.Click += (s, args) =>
+                // Button als Border mit Style "RoundedButtonBorder"
+                var addButtonBorder = new Border
+                {
+                    Style = (Style)Application.Current.Resources["RoundedButtonBorder"],
+                    Child = new TextBlock
+                    {
+                        Text = "+",
+                        Margin = new Thickness(0, 0, 0, 4),
+                        HorizontalAlignment = HorizontalAlignment.Center,
+                        VerticalAlignment = VerticalAlignment.Center,
+                        Foreground = (Brush)Application.Current.Resources["BACKGROUND_PRIMARY_BRUSH"],
+                        FontSize = 24,
+                        FontWeight = FontWeights.Bold
+                    },
+                    Margin = new Thickness(5, 0, 10, 0), // Rechts Abstand zur Scrollbar/Rand
+                    Cursor = Cursors.Hand,
+                    Width = 30,  // Feste Breite
+                    Height = 30  // Feste Höhe
+                };
+
+                // Klick-Event für Button
+                addButtonBorder.MouseDown += (s, args) =>
                 {
                     AddProcessFromList(process.Name, process.MainWindowTitle);
                 };
 
-                stackPanel.Children.Add(button);
-                stackPanel.Children.Add(textBlock);
-                ItemsPanel2.Children.Add(stackPanel);
+                // Elemente ins Grid setzen
+                Grid.SetColumn(textBlock, 0);  // Dynamische Spalte für Text
+                Grid.SetColumn(addButtonBorder, 1); // Button bleibt konstant rechts
+
+                newGrid.Children.Add(textBlock);
+                newGrid.Children.Add(addButtonBorder);
+
+                // Zum UI-Stack hinzufügen
+                ItemsPanel2.Children.Add(newGrid);
             }
         }
 
+
         private void AddProcessFromList(string processName, string mainWindowTitle)
         {
             // Check if the process is already in the list
@@ -220,29 +194,60 @@ namespace InnoLabProjektDektopApp
         private void ShowNewItemInList(string processName, string mainWindowTitle, bool isDistracting)
         {
             // Add to UI dynamically
-            var newStackPanel = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(5, 2, 5, 2) };
+            var newGrid = new Grid { Margin = new Thickness(5, 2, 5, 2) };
+
+            // Zwei Spalten: 1. für CheckBox + Text, 2. für den Button
+            newGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
+            newGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
+
             var newCheckBox = new CheckBox
             {
-                Content = $"{mainWindowTitle} ({processName})",
+              
                 Margin = new Thickness(5),
                 IsChecked = isDistracting,
                 ToolTip = $"{mainWindowTitle} ({processName})",
                 Tag = new ProcessEntry { ProcessName = processName, MainWindowTitle = mainWindowTitle, IsDistracting = isDistracting }
             };
+
+            var textBlock = new TextBlock
+            {
+                Text = $"{mainWindowTitle} ({processName})",
+                TextWrapping = TextWrapping.Wrap,
+            };
+            newCheckBox.Content = textBlock;
+
+
             newCheckBox.Checked += CheckBox_CheckedChanged;
             newCheckBox.Unchecked += CheckBox_CheckedChanged;
 
-            var editButton = new Button
-            {
-                Content = "Edit",
-                Margin = new Thickness(5, 0, 0, 0),
-                Tag = newCheckBox // Store reference to checkbox for easier editing
+            var editButtonBorder = new Border
+            {
+                Style = (Style)Application.Current.Resources["RoundedButtonBorder"],
+                Child = new TextBlock
+                {
+                    Text = "Edit",
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    Foreground = (Brush)Application.Current.Resources["BACKGROUND_PRIMARY_BRUSH"],
+                    FontWeight = FontWeights.Bold
+                },
+                Margin = new Thickness(5, 0, 10, 0),
+                Cursor = Cursors.Hand,
+                Width = 50,
+                Height = 30,
+                CornerRadius = new CornerRadius(10)
             };
-            editButton.Click += (s, e) => EditItemInList(processName, mainWindowTitle);
+            editButtonBorder.MouseDown += (s, e) => EditItemInList(processName, mainWindowTitle);
+
+            // Elemente ins Grid setzen
+            Grid.SetColumn(newCheckBox, 0);
+            Grid.SetColumn(editButtonBorder, 1);
 
-            newStackPanel.Children.Add(newCheckBox);
-            newStackPanel.Children.Add(editButton);
-            ItemsPanel.Children.Add(newStackPanel);
+            newGrid.Children.Add(newCheckBox);
+            newGrid.Children.Add(editButtonBorder);
+
+            // Element zum UI-Stack hinzufügen
+            ItemsPanel.Children.Add(newGrid);
         }
 
         private void EditItemInList(string processName, string mainWindowTitle)
@@ -257,20 +262,6 @@ namespace InnoLabProjektDektopApp
             RefreshProgramList();
         }
 
-
-        private void UrlInputBox_TextChanged(object sender, TextChangedEventArgs e)
-        {
-            // Überprüfen, ob die TextBox leer ist
-            if (!string.IsNullOrEmpty(UrlInputBox.Text))
-            {
-                UrlPlaceholder.Visibility = Visibility.Collapsed; // Placeholder ausblenden
-            }
-            else
-            {
-                UrlPlaceholder.Visibility = Visibility.Visible; // Placeholder anzeigen
-            }
-        }
-
         public void RefreshProgramList()
         {
             ItemsPanel.Children.Clear();
@@ -348,12 +339,6 @@ namespace InnoLabProjektDektopApp
                 MessageBox.Show($"Error saving data: {ex.Message}");
             }
         }
-
-        private void BackButton_Click(object sender, RoutedEventArgs e)
-        {
-            this.NavigationService.Navigate(new Distractions());
-        }
-
         public class ProcessEntry
         {
             [JsonPropertyName("processName")]

InnoLabProjektDektopApp/InnoLabProjektDektopApp/Styles/Styles.xaml

@@ -25,6 +25,62 @@
     <SolidColorBrush x:Key="TEXT_SECONDARY_BRUSH" Color="{StaticResource TEXT_SECONDARY_COLOR}" />
 
 
+    <Style x:Key="InputDialogBorderButtonStyle" TargetType="Border">
+        <!-- Standardwerte -->
+        <Setter Property="Width" Value="75"/>
+        <Setter Property="Height" Value="30"/>
+        <Setter Property="CornerRadius" Value="3"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="BorderBrush" Value="Gray"/>
+        <Setter Property="Background" Value="#E5E5E5"/>
+        <!-- Standardgrau -->
+        <Setter Property="Cursor" Value="Hand"/>
+
+        <!-- Triggers für Effekte -->
+        <Style.Triggers>
+            <!-- Maus-Hover-Effekt -->
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Background" Value="#D6D6D6"/>
+                <!-- Dunkleres Grau -->
+            </Trigger>
+
+            <!-- Fokus-Effekt (blaue Umrandung) -->
+            <Trigger Property="IsKeyboardFocusWithin" Value="True">
+                <Setter Property="BorderBrush" Value="#0078D7"/>
+                <!-- Blau wie in Windows -->
+                <Setter Property="BorderThickness" Value="2"/>
+            </Trigger>
+
+            <!-- Deaktivierter Zustand -->
+            <Trigger Property="IsEnabled" Value="False">
+                <Setter Property="Background" Value="#F1F1F1"/>
+                <!-- Helleres Grau -->
+                <Setter Property="BorderBrush" Value="Gray"/>
+                <Setter Property="Opacity" Value="0.6"/>
+                <!-- Button wird leicht transparent -->
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+
+    <Style x:Key="InputDialogBorderButtonTextStyle" TargetType="TextBlock">
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="FontWeight" Value="SemiBold"/>
+        <Setter Property="HorizontalAlignment" Value="Center"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="Foreground" Value="Black"/>
+
+        <!-- Deaktivierter Zustand -->
+        <Style.Triggers>
+            <Trigger Property="IsEnabled" Value="False">
+                <Setter Property="Foreground" Value="Gray"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+
+
+
     <Style TargetType="RadioButton">
         <Setter Property="Template">
             <Setter.Value>

InnoLabProjektDektopApp/InnoLabProjektDektopApp/Utils/InputDialog.xaml

@@ -3,12 +3,20 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Input Dialog" Height="150" Width="300" WindowStartupLocation="CenterOwner">
     <StackPanel Margin="10">
-        <TextBlock x:Name="PromptText" Text="Enter your input:" Margin="0,0,0,10" TextWrapping="Wrap"/>
+        <TextBlock x:Name="PromptText" Text="Enter your input:" Margin="0,0,0,10" TextWrapping="Wrap" Foreground="{StaticResource BACKGROUND_PRIMARY_BRUSH}"/>
         <TextBox x:Name="InputTextBox" Margin="0,0,0,10"/>
         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-            <Button Content="OK" Click="OK_Click" Width="75" Margin="0,0,10,0" IsDefault="True"/>
-            <Button Content="Cancel" Click="Cancel_Click" Width="75" IsCancel="True"/>
+            <!-- OK Button -->
+            <Border Style="{StaticResource InputDialogBorderButtonStyle}" MouseDown="OK_Click" Margin="0,0,10,0">
+                <TextBlock Text="OK" Style="{StaticResource InputDialogBorderButtonTextStyle}"/>
+            </Border>
+
+            <!-- Cancel Button -->
+            <Border Style="{StaticResource InputDialogBorderButtonStyle}" MouseDown="Cancel_Click">
+                <TextBlock Text="Cancel" Style="{StaticResource InputDialogBorderButtonTextStyle}"/>
+            </Border>
         </StackPanel>
+
     </StackPanel>
 </Window>