title: WPF ComboBox: how to set focus on it's togglebutton
body: <p>I'm trying to get a <code>ComboBox</code> to match a visual design, so its <code>ToggleButton</code> has a blue border when the <code>ComboBox</code> has focus. I can't figure out how to do this and can't find an example.</p>
  
  <p>When the <code>ComboBox</code> gets focus, the <code>TextBox</code> inside gets the dashed focus visual. How do I pass the <code>ComboBox</code> focus state down to the <code>ToggleButton</code>, so that it's blue border style is turned on?</p>
  
  <p>Here is my <code>ComboBox</code> template:</p>
  
  <pre><code>&lt;ControlTemplate x:Key="ComboBoxCT" TargetType="{x:Type ComboBox}"&gt;
      &lt;Grid x:Name="gLayoutRoot"
          Margin="{TemplateBinding Margin}" 
          HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalAlignment}" 
          MinWidth="{TemplateBinding MinWidth}" 
          MinHeight="{TemplateBinding MinHeight}" 
          MaxWidth="{TemplateBinding MaxWidth}" 
          MaxHeight="{TemplateBinding MaxHeight}" 
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"&gt;
          &lt;ToggleButton x:Name="ToggleButton" 
              Grid.Column="2" 
              Focusable="false"
              IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
              ClickMode="Press" 
              Style="{DynamicResource ComboBoxToggleStyle}" 
              /&gt;
          &lt;AccessText x:Name="ContentSite" 
              Style="{StaticResource ComboBoxAccessTextStyle}" 
              Text="{TemplateBinding SelectionBoxItem}" 
              Foreground="{TemplateBinding Foreground}"/&gt;
          &lt;TextBox x:Name="PART_EditableTextBox"
              Style="{x:Null}" 
              HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
              VerticalAlignment="{TemplateBinding VerticalAlignment}" 
              Margin="2,3,17,2"
              Focusable="True" 
              Background="{DynamicResource InnerBgLight}"
              Visibility="Hidden"
              IsReadOnly="{TemplateBinding IsReadOnly}"&gt;
              &lt;TextBox.Template&gt;
                  &lt;ControlTemplate TargetType="TextBox"&gt;
                      &lt;Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" /&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/TextBox.Template&gt;
          &lt;/TextBox&gt;
          &lt;Popup x:Name="Popup"
              Placement="Bottom"
              IsOpen="{TemplateBinding IsDropDownOpen}"
              AllowsTransparency="True" 
              Focusable="False"
              PopupAnimation="Slide"&gt;
                  &lt;Grid x:Name="DropDown"
                      SnapsToDevicePixels="True"                
                      MinWidth="{TemplateBinding ActualWidth}"
                      MaxHeight="{TemplateBinding MaxDropDownHeight}"&gt;
                          &lt;Border x:Name="OuterBorder"
                              Style="{DynamicResource OuterBorderBottomRestStyle}"
                              Background="{DynamicResource InnerBorder}"&gt;
                              &lt;Border x:Name="InnerBorder" 
                                  Style="{DynamicResource InnerBottomBorderStyle}"&gt;
                                  &lt;ScrollViewer x:Name="scvCbxItems" SnapsToDevicePixels="True"&gt;
                                      &lt;StackPanel x:Name="spCbxItemsPanel" IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /&gt;
                                  &lt;/ScrollViewer&gt;
                              &lt;/Border&gt;
                          &lt;/Border&gt;
                  &lt;/Grid&gt;
              &lt;/Popup&gt;
          &lt;/Grid&gt;
          &lt;ControlTemplate.Triggers&gt;
              &lt;Trigger Property="HasItems" Value="false"&gt;
                  &lt;Setter TargetName="InnerBorder" Property="MinHeight" Value="95"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsGrouping" Value="true"&gt;
                  &lt;Setter Property="ScrollViewer.CanContentScroll" Value="false"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsEditable" Value="true"&gt;
                  &lt;Setter Property="IsTabStop" Value="false"/&gt;
                  &lt;Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/&gt;
                  &lt;Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsEnabled" Value="false"&gt;
                  &lt;Setter Property="Foreground" Value="{DynamicResource FgDisabledBrush}"/&gt;
                  &lt;Setter Property="OpacityMask" TargetName="OuterBorder" Value="{DynamicResource OuterBgDisabledOpacityMask}"/&gt;
              &lt;/Trigger&gt;  
          &lt;/ControlTemplate.Triggers&gt;
      &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>And here's my <code>ToggleButton</code> template:</p>
  
  <pre><code>    &lt;ControlTemplate x:Key="ComboBoxToggleCT" TargetType="{x:Type ToggleButton}"&gt;
      &lt;Border x:Name="OuterBorder" 
          Style="{DynamicResource OuterBorderTopRestStyle}"&gt;
          &lt;Border x:Name="InnerBorder" 
              Style="{DynamicResource InnerTopBorderStyle}"&gt;
                  &lt;Path x:Name="Arrow" 
                      HorizontalAlignment="Right" VerticalAlignment="Center"
                      Margin="5"
                      Fill="{DynamicResource FgBrush}"
                      Data="{DynamicResource DownArrowGeometry}"/&gt;
          &lt;/Border&gt;
      &lt;/Border&gt;
      &lt;ControlTemplate.Triggers&gt;
          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
              &lt;Setter Property="Style" TargetName="OuterBorder" Value="{DynamicResource OuterBorderTopSelectStyle}"/&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="IsEnabled" Value="false"&gt;
              &lt;Setter Property="OpacityMask" TargetName="OuterBorder" Value="{DynamicResource OuterBgDisabledOpacityMask}"/&gt;
              &lt;Setter Property="Fill" TargetName="Arrow" Value="{DynamicResource FgDisabledBrush}"/&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="IsPressed" Value="True"&gt;
              &lt;Setter Property="Style" TargetName="OuterBorder" Value="{DynamicResource OuterBorderTopSelectStyle}"/&gt;
              &lt;Setter Property="Style" TargetName="InnerBorder" Value="{DynamicResource InnerBorderTopFocusStyle}"/&gt;
          &lt;/Trigger&gt;
          &lt;!--&lt;Trigger Property="IsKeyboardFocused" Value="True"&gt;--&gt;
          &lt;Trigger Property="IsKeyboardFocused" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsFocused}"&gt;
              &lt;Setter Property="Style" TargetName="OuterBorder" Value="{DynamicResource OuterBorderBottomFocusStyle}"/&gt;
              &lt;Setter Property="Style" TargetName="InnerBorder" Value="{DynamicResource InnerBorderTopFocusStyle}"/&gt;
          &lt;/Trigger&gt;
      &lt;/ControlTemplate.Triggers&gt;
  
  &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>As you can see I try to bind to the <code>ComboBox</code>'s focus state, but that doesn't work inside the <code>Trigger</code>.</p>
  
  <p>Any help appreciated. Sorry for the noob question. Thanks!</p>