Wpf combo box custom style is not working properly

See more:

WPF

Hi,

I have created one demo application with Default Combobox provided with WPF and another with Custom Style. I am adding three values in both the comboboxes like below:

<ComboBox HorizontalAlignment="Left" Margin="51,30,0,0" VerticalAlignment="Top" Width="120">
            <ComboBoxItem>HI</ComboBoxItem>
            <ComboBoxItem>Hello</ComboBoxItem>
            <ComboBoxItem>HHIS</ComboBoxItem>
        </ComboBox>

and with Custom Style :

<ComboBox style="{DynamicResource ComboBoxFlatStyle}" HorizontalAlignment="Left" Margin="51,30,0,0" VerticalAlignment="Top" Width="120">
           <ComboBoxItem>HI</ComboBoxItem>
           <ComboBoxItem>Hello</ComboBoxItem>
           <ComboBoxItem>HHIS</ComboBoxItem>
       </ComboBox>

Below is the style code for my combobox:

<!-- Flat ComboBox -->
  <SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#e3e9ef" />
  <SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#00000000" />
  <SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" />
  <SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" />
  <SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" />

  <ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
      <Grid>
          <Grid.ColumnDefinitions>
              <ColumnDefinition />
              <ColumnDefinition Width="20" />
          </Grid.ColumnDefinitions>
          <Border Grid.ColumnSpan="2" Name="Border"
            BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"
            CornerRadius="3" BorderThickness="1, 1, 1, 1"
            Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
          <Border Grid.Column="1" Margin="1, 1, 1, 1" BorderBrush="#444" Name="ButtonBorder"
            CornerRadius="0, 0, 0, 0" BorderThickness="0, 0, 0, 0"
            Background="{StaticResource ComboBoxNormalBackgroundBrush}" />

          <Path Name="Arrow" Grid.Column="1"
          Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
          HorizontalAlignment="Center" Fill="#444"
          VerticalAlignment="Center" />
      </Grid>
      <ControlTemplate.Triggers>
          <Trigger Property="UIElement.IsMouseOver" Value="True">
              <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
          </Trigger>
          <Trigger Property="ToggleButton.IsChecked" Value="True">
              <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
              <Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/>
          </Trigger>
          <Trigger Property="UIElement.IsEnabled" Value="False">
              <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
              <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
              <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
              <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
              <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
          </Trigger>
      </ControlTemplate.Triggers>
  </ControlTemplate>

  <Style x:Key="ComboBoxFlatStyle"  TargetType="{x:Type ComboBox}">
      <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
      <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
      <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
      <Setter Property="TextElement.Foreground" Value="Black"/>
      <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
      <Setter Property="MinWidth" Value="180"/>
      <Setter Property="MinHeight" Value="30"/>
      <Setter Property="FontSize" Value="16"/>
      <Setter Property="Padding" Value="5,0,0,0"/>
      <Setter Property="Cursor" Value="Hand"></Setter>
      <Setter Property="Control.Template">
          <Setter.Value>
              <ControlTemplate TargetType="ComboBox">
                  <Grid>
                      <ToggleButton Name="ToggleButton" Grid.Column="2"
              ClickMode="Press" Focusable="False"
              IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
              Template="{StaticResource ComboBoxToggleButtonTemplate}"/>

                      <ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
                            HorizontalAlignment="Left" VerticalAlignment="Center"
                            Content="{TemplateBinding ComboBox.SelectionBoxItem}"
                            ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
                      <TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3"
                   IsReadOnly="{TemplateBinding IsReadOnly}"
                   Visibility="Hidden" Background="Transparent"
                   HorizontalAlignment="Left" VerticalAlignment="Center"
                   Focusable="True" >
                          <TextBox.Template>
                              <ControlTemplate TargetType="TextBox" >
                                  <Border Name="PART_ContentHost" Focusable="False" />
                              </ControlTemplate>
                          </TextBox.Template>
                      </TextBox>
                      <!-- Popup showing items -->
                      <Popup Name="Popup" Placement="Bottom"
                 Focusable="False" AllowsTransparency="True"
                 IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                 PopupAnimation="Slide">
                          <Grid Name="DropDown" SnapsToDevicePixels="True"
                  MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                  MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
                              <Border Name="DropDownBorder" Background="#00000000" Margin="0, 1, 0, 0"
                      CornerRadius="0" BorderThickness="1,1,1,1"
                      BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/>
                              <ScrollViewer Margin="4" SnapsToDevicePixels="True">
                                  <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
                              </ScrollViewer>
                          </Grid>
                      </Popup>
                  </Grid>
                  <ControlTemplate.Triggers>
                      <Trigger Property="ItemsControl.HasItems" Value="False">
                          <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
                      </Trigger>
                      <Trigger Property="UIElement.IsEnabled" Value="False">
                          <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                      </Trigger>
                      <Trigger Property="ItemsControl.IsGrouping" Value="True">
                          <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                      </Trigger>
                      <Trigger Property="ComboBox.IsEditable" Value="True">
                          <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
                          <Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                          <Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
                      </Trigger>
                  </ControlTemplate.Triggers>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

Now, my query is, when I am working with default combobox, we can select value even after not clicking on text but with custom style we must need to click on Text to select the item. Also I can see there is lag with custom ComboBox style. Not sure why.

Can someone please help, why it is, Am I doing something wrong with style?

Thanks

What I have tried:

I have created code and attached on top.