feat: Click outside the Popup to close it

Author: yanjinhuagood

src/WPFDevelopers.Shared/Controls/MultiSelectComboBox/MultiSelectComboBox.cs

@@ -26,6 +26,7 @@ namespace WPFDevelopers.Controls
     [TemplatePart(Name = PART_DropDownPanel, Type = typeof(Panel))]
     [TemplatePart(Name = ListViewTemplateNameSearch, Type = typeof(DataGrid))]
     [TemplatePart(Name = DropDownScrollViewer, Type = typeof(ScrollViewer))]
+    [TemplatePart(Name = PART_Border, Type = typeof(Border))]
 
     public class MultiSelectComboBox : ListView
     {
@@ -36,6 +37,9 @@ public class MultiSelectComboBox : ListView
         private const string PART_DropDownPanel = "PART_DropDown";
         private const string ListViewTemplateNameSearch = "PART_SearchSelector";
         private const string DropDownScrollViewer = "DropDownScrollViewer";
+        private const string PART_Border = "PART_Border";
+
+        public static readonly RoutedCommand ToggleDropDownCommand = new RoutedCommand();
 
         public static readonly DependencyProperty IsDropDownOpenProperty =
             DependencyProperty.Register("IsDropDownOpen", typeof(bool), typeof(MultiSelectComboBox),
@@ -95,6 +99,7 @@ public static readonly DependencyProperty MaxDropDownHeightProperty
         private Panel _panelDropDown;
         private ScrollViewer _scrollViewer;
         private CheckBox _checkBox;
+        private Border _border;
         private string _theLastText;
         private bool _isUpdating;
 
@@ -353,8 +358,19 @@ public override void OnApplyTemplate()
             }
             SyncListViewViews();
             Loaded += OnMultiSelectComboBox_Loaded;
+            _border = GetTemplateChild(PART_Border) as Border;
+            if(_border != null)
+                _border.MouseUp += OnBorder_MouseUp;
+
+        }
+      
+        private void OnBorder_MouseUp(object sender, MouseButtonEventArgs e)
+        {
+            IsDropDownOpen = !IsDropDownOpen;
+            e.Handled = true;
         }
 
+       
         private void OnMultiSelectComboBox_Loaded(object sender, RoutedEventArgs e)
         {
             UpdateText();

src/WPFDevelopers.Shared/Themes/MultiSelectComboBox.xaml

@@ -117,7 +117,7 @@
                         </Storyboard>
                     </ControlTemplate.Resources>
                     <Border
-                        Name="PART_Border"
+                        x:Name="PART_Border"
                         Width="{TemplateBinding Width}"
                         Height="{TemplateBinding Height}"
                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
@@ -127,19 +127,21 @@
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{Binding Path=(helpers:ElementHelper.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}"
                         SnapsToDevicePixels="True">
-                        <Grid Grid.IsSharedSizeScope="True">
+                        <Grid Background="Transparent" Grid.IsSharedSizeScope="True">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" SharedSizeGroup="ComboBoxButton" />
                             </Grid.ColumnDefinitions>
                             <ScrollViewer
+                                x:Name="PART_TagScrollViewer"
                                 Margin="{TemplateBinding Padding}"
                                 HorizontalScrollBarVisibility="Disabled"
-                                VerticalScrollBarVisibility="Auto">
+                                VerticalScrollBarVisibility="Auto"
+                                Visibility="Collapsed">
                                 <controls:SimpleWrapPanel
                                     x:Name="PART_SimpleWrapPanel"
-                                    Spacing="2"
-                                    Visibility="Collapsed" />
+                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    Spacing="2" />
                             </ScrollViewer>
                             <TextBox
                                 Name="PART_EditableTextBox"
@@ -184,7 +186,7 @@
                                 IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                 Placement="Bottom"
                                 PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
-                                StaysOpen="False">
+                                StaysOpen="True">
                                 <controls:SmallPanel
                                     x:Name="PART_DropDown"
                                     MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
@@ -286,7 +288,7 @@
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="ShowType" Value="Tag">
-                            <Setter TargetName="PART_SimpleWrapPanel" Property="Visibility" Value="Visible" />
+                            <Setter TargetName="PART_TagScrollViewer" Property="Visibility" Value="Visible" />
                             <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Collapsed" />
                             <Setter TargetName="PART_SimpleWrapPanel" Property="MinHeight" Value="21.6" />
                         </Trigger>