title: Problem with the mouse click on toggleButton in WPF
body: <p>I made a custom control template that turns a groupbox into an expander (clicking on the header expands/collapses the content of the groupbox). It works fine except that mouse clicks don't always go through: sometimes it doesn't expand/collapse when you click on the header, esp. when you click inside the "o"s in the word "Colors". I organically thought it was caused by the text in the header trapping mouse clicks which prevent them from going through so I played around with the <em>IsHitTestVisible</em> and <em>IsFocusable</em> properties on the content header, etc., which doesn't seem to have any effect. A header that only contains empty strings or even no content seems to have the same issue.</p>
  
  <p>The XAML is posted below.</p>
  
  <p>(BTW, this <a href="http://simeonpilgrim.com/blog/2007/12/28/wpf-making-a-expander-look-like-a-groupbox/" rel="nofollow">post</a> which turns an expander into a groupbox seems to have similar issue: If you click right inside the arrow, the togglebutton won't toggle.)</p>
  
  <pre><code>&lt;Window x:Class="TestCollapsibleGroupBoxStyle.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="MainWindow" Height="350" Width="525"&gt;
  &lt;Window.Resources&gt;
  
      &lt;BooleanToVisibilityConverter x:Key="boolToVizConverter"/&gt;
  
      &lt;Color x:Key="HyperlinkHoverBlue"&gt;#FF0088CC&lt;/Color&gt;
      &lt;SolidColorBrush x:Key="HyperlinkHoverBlueBrush" Color="{StaticResource HyperlinkHoverBlue}" /&gt;
      &lt;PathGeometry x:Key="TreeArrow"&gt;
          &lt;PathGeometry.Figures&gt;
              &lt;PathFigureCollection&gt;
                  &lt;PathFigure IsFilled="True"
                                      StartPoint="0 0"
                                      IsClosed="True"&gt;
                      &lt;PathFigure.Segments&gt;
                          &lt;PathSegmentCollection&gt;
                              &lt;LineSegment Point="0 6"/&gt;
                              &lt;LineSegment Point="6 0"/&gt;
                          &lt;/PathSegmentCollection&gt;
                      &lt;/PathFigure.Segments&gt;
                  &lt;/PathFigure&gt;
              &lt;/PathFigureCollection&gt;
          &lt;/PathGeometry.Figures&gt;
      &lt;/PathGeometry&gt;
      &lt;BorderGapMaskConverter x:Key="BorderGapMaskConverter"/&gt;
  
      &lt;Style x:Key="CollapsibleGroupBoxStyle" TargetType="{x:Type GroupBox}" BasedOn="{StaticResource {x:Type GroupBox}}"&gt;
          &lt;Style.Resources&gt;
  
              &lt;Style x:Key="ToggleHeaderStyle" TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}"&gt;
                  &lt;Setter Property="MinWidth" Value="72"/&gt;
                  &lt;Setter Property="Padding" Value="2,1"/&gt;
                  &lt;Setter Property="SnapsToDevicePixels" Value="True"/&gt;
                  &lt;Setter Property="FontSize" Value="18"/&gt;
                  &lt;Setter Property="Template"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ControlTemplate TargetType="ToggleButton"&gt;
                              &lt;Border Background="Transparent" MinHeight="30"
                                  Padding="{TemplateBinding Padding}" Focusable="False"&gt;
                                  &lt;Grid Background="Transparent" SnapsToDevicePixels="False"&gt;
                                      &lt;ContentPresenter Margin="{TemplateBinding Padding}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  Focusable="False"
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                                      &lt;Path x:Name="ExpandPath"
                                              VerticalAlignment="Center"
                                              Margin="4,2,0,0"
                                            HorizontalAlignment="Right"
                                              Fill="Transparent"
                                              Stroke="#FF989898"
                                              Data="{StaticResource TreeArrow}"&gt;
                                          &lt;Path.RenderTransform&gt;
                                              &lt;RotateTransform Angle="135"
                                                           CenterX="3"
                                                           CenterY="3"/&gt;
                                          &lt;/Path.RenderTransform&gt;
                                      &lt;/Path&gt;
  
                                  &lt;/Grid&gt;
                              &lt;/Border&gt;
                              &lt;ControlTemplate.Triggers&gt;
                                  &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                                      &lt;Trigger.Setters&gt;
                                          &lt;Setter Property="Foreground" Value="{StaticResource HyperlinkHoverBlueBrush}"/&gt;
                                          &lt;Setter TargetName="ExpandPath" Property="Stroke" Value="#FF1BBBFA"/&gt;
                                          &lt;Setter TargetName="ExpandPath" Property="Fill" Value="Transparent"/&gt;
                                      &lt;/Trigger.Setters&gt;
                                  &lt;/Trigger&gt;
                                  &lt;Trigger Property="IsChecked" Value="True"&gt;
                                      &lt;Setter TargetName="ExpandPath" Property="RenderTransform"&gt;
                                          &lt;Setter.Value&gt;
                                              &lt;RotateTransform Angle="180"
                                                                   CenterX="3"
                                                                   CenterY="3"/&gt;
                                          &lt;/Setter.Value&gt;
                                      &lt;/Setter&gt;
                                      &lt;Setter TargetName="ExpandPath" Property="Fill" Value="#FF595959"/&gt;
                                      &lt;Setter TargetName="ExpandPath" Property="Stroke" Value="#FF262626"/&gt;
                                  &lt;/Trigger&gt;
                              &lt;/ControlTemplate.Triggers&gt;
                          &lt;/ControlTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Style&gt;
          &lt;/Style.Resources&gt;
          &lt;Setter Property="Background" Value="Transparent"/&gt;
          &lt;Setter Property="BorderBrush"
                      Value="Gray"/&gt;
          &lt;Setter Property="BorderThickness"
                      Value="1"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type GroupBox}"&gt;
                      &lt;Grid SnapsToDevicePixels="true"&gt;
                          &lt;Grid.ColumnDefinitions&gt;
                              &lt;ColumnDefinition Width="6"/&gt;
                              &lt;ColumnDefinition Width="Auto"/&gt;
                              &lt;ColumnDefinition Width="*"/&gt;
                              &lt;ColumnDefinition Width="6"/&gt;
                          &lt;/Grid.ColumnDefinitions&gt;
                          &lt;Grid.RowDefinitions&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                              &lt;RowDefinition Height="*"/&gt;
                              &lt;RowDefinition Height="6"/&gt;
                          &lt;/Grid.RowDefinitions&gt;
                          &lt;Border CornerRadius="4"
                                      Grid.Row="1"
                                      Grid.RowSpan="3"
                                      Grid.Column="0"
                                      Grid.ColumnSpan="4"
                                      BorderThickness="{TemplateBinding BorderThickness}"
                                      BorderBrush="Transparent"
                                      Background="{TemplateBinding Background}"/&gt;
                          &lt;Border x:Name="Header"
                                      Padding="3,1,3,0"
                                      Grid.Row="0"
                                      Grid.RowSpan="2"
                                      Grid.Column="1"&gt;
                              &lt;ToggleButton x:Name="headerToggleBtn" 
                                      Content="{TemplateBinding Header}"
                                      Style="{StaticResource ToggleHeaderStyle}"&gt;
                              &lt;/ToggleButton&gt;
                          &lt;/Border&gt;
                          &lt;ContentPresenter x:Name="ContentSite" Grid.Row="2"
                                          Grid.Column="1"
                                          Grid.ColumnSpan="2"
                                          Margin="{TemplateBinding Padding}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                          &lt;Border CornerRadius="4"
                                      Grid.Row="1"
                                      Grid.RowSpan="3"
                                      Grid.ColumnSpan="4"
                                      BorderThickness="{TemplateBinding BorderThickness}"
                                      BorderBrush="White"&gt;
                              &lt;Border.OpacityMask&gt;
                                  &lt;MultiBinding Converter="{StaticResource BorderGapMaskConverter}"
                                                          ConverterParameter="7"&gt;
                                      &lt;Binding ElementName="Header"
                                                   Path="ActualWidth"/&gt;
                                      &lt;Binding RelativeSource="{RelativeSource Self}"
                                                   Path="ActualWidth"/&gt;
                                      &lt;Binding RelativeSource="{RelativeSource Self}"
                                                   Path="ActualHeight"/&gt;
                                  &lt;/MultiBinding&gt;
                              &lt;/Border.OpacityMask&gt;
  
                              &lt;Border BorderThickness="{TemplateBinding BorderThickness}"
                                          BorderBrush="{TemplateBinding BorderBrush}"
                                          CornerRadius="3"&gt;
                                  &lt;Border BorderThickness="{TemplateBinding BorderThickness}"
                                              BorderBrush="White"
                                              CornerRadius="2"/&gt;
                              &lt;/Border&gt;
                          &lt;/Border&gt;
                      &lt;/Grid&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;DataTrigger Binding="{Binding ElementName=headerToggleBtn, Path=IsChecked}" Value="False"&gt;
                              &lt;Setter Property="Visibility" TargetName="ContentSite" Value="Collapsed"/&gt;
                          &lt;/DataTrigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
  
      &lt;/Style&gt;
  
  &lt;/Window.Resources&gt;
  &lt;StackPanel Orientation="Horizontal"&gt;
      &lt;GroupBox Header="Colors" Style="{StaticResource CollapsibleGroupBoxStyle}"&gt;
          &lt;StackPanel Orientation="Vertical"&gt;
              &lt;RadioButton GroupName="colorGrp" Content="Red"/&gt;
              &lt;RadioButton GroupName="colorGrp" Content="Blue"/&gt;
              &lt;RadioButton GroupName="colorGrp" Content="Red"/&gt;
          &lt;/StackPanel&gt;
      &lt;/GroupBox&gt;
  
      &lt;GroupBox&gt;
          &lt;GroupBox.Header&gt;
              &lt;ToggleButton Name="ToggleHeader"&gt;
                  &lt;TextBlock Text="Colors" FontSize="18"/&gt;
              &lt;/ToggleButton&gt;
          &lt;/GroupBox.Header&gt;
          &lt;StackPanel Orientation="Vertical" Visibility="{Binding ElementName=ToggleHeader, Path=IsChecked, Mode=TwoWay, Converter={StaticResource boolToVizConverter}}"&gt;
              &lt;RadioButton GroupName="colorGrp" Content="Red"/&gt;
              &lt;RadioButton GroupName="colorGrp" Content="Blue"/&gt;
              &lt;RadioButton GroupName="colorGrp" Content="Red"/&gt;
          &lt;/StackPanel&gt;
      &lt;/GroupBox&gt;
  
      &lt;GroupBox Header="      " Style="{StaticResource CollapsibleGroupBoxStyle}"&gt;
          &lt;StackPanel Orientation="Vertical"&gt;
              &lt;RadioButton GroupName="colorGrp" Content="Red"/&gt;
              &lt;RadioButton GroupName="colorGrp" Content="Blue"/&gt;
              &lt;RadioButton GroupName="colorGrp" Content="Red"/&gt;
          &lt;/StackPanel&gt;
      &lt;/GroupBox&gt;
  &lt;/StackPanel&gt;
  &lt;/Window&gt;
  </code></pre>