title: Removing outer border of toggle button wpf
body: <p>So I have looked through numerous questions where people want to mess with borders of their buttons. I am using a toggle button (WPF) and it seems like there is an 'inner' border and an 'outer' border. I can manage to change the inner boarder to red, but I have no clue how to change the color of the outer border, or even get rid of it. I have gotten rid of the chrome button or whatever that comes with the aero theme, but I still cannot change this border. This is the picture of what I am getting for toggle buttons:</p>
  
  <p><img src="https://i.stack.imgur.com/Hkw89.png" alt="enter image description here"></p>
  
  <p>As you can see there is white in the borders. Here is my code for that style:</p>
  
  <pre><code>&lt;Style x:Key="Style1" TargetType="{x:Type ToggleButton}"&gt;
          &lt;Setter Property="Background" Value="Black"/&gt;
          &lt;Setter Property="BorderBrush" Value="Red"/&gt;
          &lt;Setter Property="BorderThickness" Value="0"/&gt;
          &lt;Setter Property="Foreground" Value="White"/&gt;
          &lt;Setter Property="HorizontalContentAlignment" Value="Center"/&gt;
          &lt;Setter Property="VerticalContentAlignment" Value="Center"/&gt;
          &lt;Setter Property="Padding" Value="1"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type ToggleButton}"&gt;
                      &lt;Button BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"  SnapsToDevicePixels="true" Foreground="White"&gt;
                          &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/&gt;
                      &lt;/Button&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsKeyboardFocused" Value="true"&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsChecked" Value="true"&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsEnabled" Value="false"&gt;
                              &lt;Setter Property="Foreground" Value="#ADADAD"/&gt;
                          &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>I am using it like this:</p>
  
  <pre><code>&lt;ListBox SelectionMode="Single" Name="touchPanel"  Grid.Row="2" Grid.Column="3" Width="Auto" Height="Auto" VerticalAlignment="Top" Background="Black" BorderThickness="0"&gt;
          &lt;RadioButton Width="60" Height="60" Name="mouseTouchSelection" IsChecked="True" Content="Mouse" Style="{DynamicResource RadioButtonStyle1}" /&gt;
          &lt;RadioButton Width="60" Height="60" Name="panTouchSelection"  BorderThickness="0"  Content="Pan" Style="{DynamicResource RadioButtonStyle1}"  /&gt;
          &lt;RadioButton Width="60" Height="60" Name="rotateTouchSelection" Content="Rotate" Style="{DynamicResource RadioButtonStyle1}"/&gt;
          &lt;RadioButton Width="60" Height="60" Name="zoomBoxTouchSelection" Content="Box Zoom" Style="{DynamicResource RadioButtonStyle1}" /&gt;
      &lt;/ListBox&gt;
  </code></pre>
  
  <p>But what I would like the buttons to look like is:</p>
  
  <p><img src="https://i.stack.imgur.com/gDbwh.png" alt="enter image description here"></p>
  
  <p>I achieved the above buttons by just overriding the default button style, but I can't seem to do it with the Toggle Button. I tried overriding Radio Button also, and I had the same problem. What am I missing? Can I somehow use the Button style instead of the toggle button style? I am just starting to learn Styles, so don't be to harsh! Appreciate all input though!</p>