title: WPF XAML Custom combo-box style as on attached image
body: <p>I have seen a combo-box in one existing WPF application and want to create similar in my own application. I will provide the screenshot of what I want and a code with the screenshot of what I have now.
  On the first picture, there is a combo-box when it's regular state and on the second when the popup is opened</p>
  
  <p><a href="https://i.stack.imgur.com/GRWuf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GRWuf.png" alt="combo-box in regular state"></a>&ensp;<a href="https://i.stack.imgur.com/mIDMa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mIDMa.png" alt="popup is opened"></a></p>
  
  <p>There are a few moments that I can't achieve. First is that when the popup is opened - it overlaps a toggle button. Second is the shadow around of popup. </p>
  
  <p>My current XAML Style is huge and I hope someone will go through it and he will suggest me how to edit it to achieve a style which I want:</p>
  
  <pre><code>&lt;ControlTemplate x:Key="ToggleButtonStyle" TargetType="ToggleButton" &gt;
      &lt;Grid&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition /&gt;
              &lt;ColumnDefinition Width="20" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Border x:Name="OutsideBorder" Grid.ColumnSpan="2" BorderThickness="0 0 0 3" Panel.ZIndex="2"
                          Width="0" BorderBrush="{StaticResource PrimaryColorBrush}"&gt;
          &lt;/Border&gt;
          &lt;Border
                x:Name="Border" 
                Grid.ColumnSpan="2"
                CornerRadius="0"
                Background="Transparent"
                BorderBrush="#111111"
                BorderThickness="0 0 0 1" &gt;
          &lt;/Border&gt;
          &lt;Path 
                x:Name="Arrow"
                Margin="0 0 4 0"
                Grid.Column="1"     
                Fill="#757575"
                Width="10" Height="6"
                Stretch="Fill"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Data="M7 10l5 5 5-5z"&gt;
          &lt;/Path&gt;
      &lt;/Grid&gt;
      &lt;ControlTemplate.Triggers&gt;
          &lt;Trigger Property="ToggleButton.IsChecked" Value="true"&gt;
              &lt;Trigger.EnterActions&gt;
                  &lt;BeginStoryboard&gt;
                      &lt;Storyboard Storyboard.TargetName="Container" AccelerationRatio="0.4" DecelerationRatio="0.4"&gt;
                          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetName="OutsideBorder" Storyboard.TargetProperty="(Border.Width)"&gt;
                              &lt;SplineDoubleKeyFrame KeyTime="00:00:0.15" Value="400"/&gt;
                          &lt;/DoubleAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/Trigger.EnterActions&gt;
              &lt;Trigger.ExitActions&gt;
                  &lt;BeginStoryboard&gt;
                      &lt;Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4"&gt;
                          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetName="OutsideBorder" Storyboard.TargetProperty="(Border.Width)"&gt;
                              &lt;SplineDoubleKeyFrame KeyTime="00:00:0.1" Value="0"/&gt;
                          &lt;/DoubleAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/Trigger.ExitActions&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
              &lt;Trigger.EnterActions&gt;
                  &lt;BeginStoryboard&gt;
                      &lt;Storyboard Storyboard.TargetName="Container" AccelerationRatio="0.4" DecelerationRatio="0.4"&gt;
                          &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Fill.Color"&gt;
                              &lt;SplineColorKeyFrame KeyTime="00:00:0.13" Value="{StaticResource PrimaryColor}"/&gt;
                          &lt;/ColorAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/Trigger.EnterActions&gt;
              &lt;Trigger.ExitActions&gt;
                  &lt;BeginStoryboard&gt;
                      &lt;Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4"&gt;
                         &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Fill.Color"&gt;
                              &lt;SplineColorKeyFrame KeyTime="00:00:0.13" Value="#757575"/&gt;
                          &lt;/ColorAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/Trigger.ExitActions&gt;
          &lt;/Trigger&gt;
      &lt;/ControlTemplate.Triggers&gt;
  &lt;/ControlTemplate&gt;
  
  &lt;Style x:Key="ComboBoxEx" TargetType="ComboBox"&gt;
      &lt;Setter Property="IsEditable" Value="False"/&gt;
      &lt;Setter Property="IsTextSearchEnabled" Value="False"/&gt;
      &lt;Setter Property="MaxDropDownHeight" Value="300"/&gt;
      &lt;Setter Property="IsSynchronizedWithCurrentItem" Value="True" /&gt;
      &lt;Setter Property="StaysOpenOnEdit" Value="True" /&gt;
      &lt;Setter Property="SnapsToDevicePixels" Value="true"/&gt;
      &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
      &lt;Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/&gt;
      &lt;Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/&gt;
      &lt;Setter Property="Foreground" Value="#757575"/&gt;
      &lt;Setter Property="ScrollViewer.CanContentScroll" Value="true"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ComboBox"&gt;
                  &lt;Grid&gt;
                      &lt;ToggleButton 
                          Name="ToggleButton" 
                          Template="{StaticResource ToggleButtonStyle}" 
                          Grid.Column="2" 
                          Focusable="false"
                          IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                          ClickMode="Press"&gt;
                      &lt;/ToggleButton&gt;
                      &lt;ContentPresenter
                          Name="ContentSite"
                          IsHitTestVisible="False" 
                          Content="{TemplateBinding SelectionBoxItem}"
                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                          Margin="3,3,23,3"
                          VerticalAlignment="Center"
                          HorizontalAlignment="Left" /&gt;
                      &lt;TextBox x:Name="PART_EditableTextBox"
                          Style="{x:Null}" 
                          Template="{StaticResource ComboBoxTextBox}" 
                          HorizontalAlignment="Left" 
                          VerticalAlignment="Center" 
                          Margin="3,3,23,3"
                          Focusable="True" 
                          Background="Transparent"
                          Visibility="Hidden"
                          IsReadOnly="{TemplateBinding IsReadOnly}"/&gt;
                      &lt;Popup 
                          Name="Popup"
                          Placement="Bottom"
                          IsOpen="{TemplateBinding IsDropDownOpen}"
                          AllowsTransparency="True" 
                          Focusable="False"
                          PopupAnimation="Slide"&gt;
                          &lt;Grid 
                              Name="DropDown"
                              SnapsToDevicePixels="True"                
                              MinWidth="{TemplateBinding ActualWidth}"
                              MaxHeight="{TemplateBinding MaxDropDownHeight}"&gt;
                              &lt;Border 
                                  x:Name="DropDownBorder"
                                  Background="Green"/&gt;
                              &lt;ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"&gt;
                                  &lt;StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /&gt;
                              &lt;/ScrollViewer&gt;
                          &lt;/Grid&gt;
                      &lt;/Popup&gt;
                  &lt;/Grid&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="HasItems" Value="false"&gt;
                          &lt;Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsEnabled" Value="false"&gt;
                          &lt;Setter Property="Foreground" Value="Gray"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsGrouping" Value="true"&gt;
                          &lt;Setter Property="ScrollViewer.CanContentScroll" Value="false"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true"&gt;
                          &lt;Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/&gt;
                          &lt;Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/&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;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;Style x:Key="SelectDocTemplateStyle" TargetType="ComboBox" BasedOn="{StaticResource ComboBoxEx}"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ComboBox"&gt;
                  &lt;Grid&gt;
                      &lt;ToggleButton 
                          Name="ToggleButton" 
                          Template="{StaticResource ToggleButtonStyle}" 
                          Focusable="false"
                          IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                          ClickMode="Press"&gt;
                      &lt;/ToggleButton&gt;
                      &lt;ContentPresenter
                          Name="ContentSite"
                          IsHitTestVisible="False" 
                          Content="{TemplateBinding SelectionBoxItem}"
                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                          Margin="6,3,23,3"
                          VerticalAlignment="Center"
                          HorizontalAlignment="Left" /&gt;
                      &lt;!-- Text box is not used here --&gt;
                      &lt;TextBox x:Name="PART_EditableTextBox" 
                          HorizontalAlignment="Left" 
                          FlowDirection="LeftToRight"
                          VerticalAlignment="Center" 
                          Margin="6,3,23,3"
                          Focusable="True"
                          Foreground="Purple"
                          CaretBrush="Aqua"
                          FontSize="14"
                          Padding="2"
                          FontFamily="{StaticResource LatoBoldItalic}"
                          BorderThickness="0"
                          Background="Transparent"
                          Visibility="Hidden"
                          IsReadOnly="{TemplateBinding IsReadOnly}"
                          Width="{TemplateBinding Width}"/&gt;
                      &lt;Popup 
                          Name="Popup"
                          Placement="Bottom"
                          IsOpen="{TemplateBinding IsDropDownOpen}"
                          AllowsTransparency="True" 
                          Focusable="False"
                          PopupAnimation="Slide"&gt;
                          &lt;Grid 
                            Name="DropDown"
                            SnapsToDevicePixels="True"                
                            MinWidth="{TemplateBinding ActualWidth}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}"&gt;
                              &lt;Border 
                              x:Name="DropDownBorder"
                              Background="#9E9E9E"&gt;
                              &lt;/Border&gt;
                              &lt;ScrollViewer Margin="0,0" SnapsToDevicePixels="True"&gt;
                                  &lt;StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Local" /&gt;
                              &lt;/ScrollViewer&gt;
                          &lt;/Grid&gt;
                      &lt;/Popup&gt;
                  &lt;/Grid&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="HasItems" Value="false"&gt;
                          &lt;Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsEnabled" Value="false"&gt;
                          &lt;Setter Property="Foreground" Value="Gray"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsGrouping" Value="true"&gt;
                          &lt;Setter Property="ScrollViewer.CanContentScroll" Value="false"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true"&gt;
                          &lt;Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/&gt;
                          &lt;Setter TargetName="DropDownBorder" Property="Margin" Value="0,0,0,0"/&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;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;Style x:Key="{x:Type ComboBoxItem}" x:Name="ComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}"&gt;
      &lt;Setter Property="SnapsToDevicePixels" Value="true"/&gt;
      &lt;Setter Property="Foreground" Value="#111111"/&gt;
      &lt;Setter Property="FontFamily" Value="{StaticResource LatoRegular}"/&gt;
      &lt;Setter Property="Cursor" Value="Hand"/&gt;
      &lt;Setter Property="HorizontalAlignment" Value="Stretch"/&gt;
      &lt;Setter Property="FlowDirection" Value="LeftToRight"/&gt;
      &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type ComboBoxItem}"&gt;
                  &lt;Border Name="Border"
                            Padding="10"
                            Background="#E0E0E0"
                            SnapsToDevicePixels="true"&gt;
                      &lt;ContentPresenter /&gt;
                  &lt;/Border&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsHighlighted" Value="true"&gt;
                          &lt;Setter TargetName="Border" Property="Background" Value="#BDBDBD"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsEnabled" Value="false"&gt;
                          &lt;Setter Property="Foreground" Value="#888888"/&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox"&gt;
      &lt;Border x:Name="PART_ContentHost"  Focusable="False" Background="Red" Width="{TemplateBinding Width}" /&gt;
  &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>So, my combo-box looks like this now and it is far away from what I want:</p>
  
  <p>regular state</p>
  
  <p><a href="https://i.stack.imgur.com/IH1tk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IH1tk.png" alt="regular state"></a></p>
  
  <p>popup opened</p>
  
  <p><a href="https://i.stack.imgur.com/SYUT6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SYUT6.png" alt="popup opened"></a></p>
  
  <p>The main questions are: </p>
  
  <ul>
  <li>How to create a drop shadow around the popup?</li>
  <li>How to make a popup which will overlay on the toggle button? </li>
  </ul>