I have this ComboBox in my WPF app. I was requested to make it clickable for the text but I was able to make only the arrow clickable. Is there a way to achieve this? I would say I have been working with WPF for a few months but it is a little difficult for me to customize some of the UI compoments and ComboBox is one of them. Any insight would be much appreciated.

Xaml:

                <Border Height="35"
                        VerticalAlignment="Top"
                        Background="#fafafa"
                        CornerRadius="2">
                    <ComboBox Width="Auto"
                              Height="30"
                              VerticalAlignment="Center"
                              ItemsSource="{Binding NetGrossItemSource}"
                              SelectedItem="{Binding SelectedProductionType}"
                              Style="{StaticResource CustomComboBox}">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock VerticalAlignment="Center"
                                           FontSize="14"
                                           Foreground="{StaticResource font-gray}"
                                           Text="{Binding}" />
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </Border>

Style:

 <Style x:Key="CustomComboBox" TargetType="{x:Type ComboBox}">
     <Setter Property="SnapsToDevicePixels" Value="true" />
     <Setter Property="OverridesDefaultStyle" Value="true" />
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
     <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="{x:Type ComboBox}">
                 <Grid>
                     <ToggleButton
                         x:Name="ToggleButton"
                         Grid.Column="2"
                         Margin="0,-2,0,0"
                         HorizontalAlignment="Right"
                         ClickMode="Press"
                         Focusable="false"
                         IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                         Template="{StaticResource ComboBoxToggleButton}" />
                     <ContentPresenter
                         x:Name="ContentSite"
                         Margin="3,3,23,3"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Stretch"
                         Content="{TemplateBinding SelectionBoxItem}"
                         ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                         ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                         IsHitTestVisible="False"
                         TextBlock.FontWeight="Medium" />
                     <Popup
                         x:Name="Popup"
                         AllowsTransparency="True"
                         Focusable="False"
                         IsOpen="{TemplateBinding IsDropDownOpen}"
                         Placement="Bottom"
                         PopupAnimation="Slide">
                         <Grid
                             x:Name="DropDown"
                             MinWidth="{TemplateBinding ActualWidth}"
                             MaxHeight="{TemplateBinding MaxDropDownHeight}"
                             SnapsToDevicePixels="True">
                             <Border
                                 x:Name="DropDownBorder"
                                 BorderThickness="1"
                                 CornerRadius="4">
                                 <Border.BorderBrush>
                                     <SolidColorBrush Color="#ADB7C9" />
                                 </Border.BorderBrush>
                                 <Border.Background>
                                     <SolidColorBrush Color="White" />
                                 </Border.Background>

                             </Border>
                             <ScrollViewer
                                 Margin="0"
                                 Padding="2,4"
                                 SnapsToDevicePixels="True">
                                 <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                             </ScrollViewer>
                         </Grid>
                     </Popup>
                     <VisualStateManager.VisualStateGroups>
                         <VisualStateGroup x:Name="CommonStates">
                             <VisualState x:Name="Normal" />
                             <VisualState x:Name="MouseOver" />
                             <VisualState x:Name="Disabled">
                                 <Storyboard>
                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="(TextElement.Foreground).                                                 (SolidColorBrush.Color)">
                                         <EasingColorKeyFrame KeyTime="0" Value="#FF888888" />
                                     </ColorAnimationUsingKeyFrames>
                                 </Storyboard>
                             </VisualState>
                         </VisualStateGroup>
                         <VisualStateGroup x:Name="EditStates">
                             <VisualState x:Name="Editable">
                                 <Storyboard>
                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="(UIElement.Visibility)">
                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                     </ObjectAnimationUsingKeyFrames>
                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentSite" Storyboard.TargetProperty="(UIElement.Visibility)">
                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
                                     </ObjectAnimationUsingKeyFrames>
                                 </Storyboard>
                             </VisualState>
                             <VisualState x:Name="Uneditable" />
                         </VisualStateGroup>
                     </VisualStateManager.VisualStateGroups>
                 </Grid>
                 <ControlTemplate.Triggers>
                     <Trigger Property="HasItems" Value="false" />
                     <Trigger Property="IsGrouping" Value="true">
                         <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                     </Trigger>
                     <Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
                         <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4" />
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

I have also tried out this solution so I can make something similar but it looks strange when rendering on the UI.