Added SearchableComboBox control

Author: aronium

Aronium.Wpf.Toolkit.Demo/MainWindow.xaml

@@ -7,6 +7,7 @@
         Style="{DynamicResource Window}"
         SnapsToDevicePixels="True"
         FocusManager.FocusedElement="{Binding ElementName=cbTabPlacement}"
+        DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
         Title="MainWindow" Height="750" Width="950">
 
     <Window.Resources>
@@ -25,6 +26,7 @@
         <Style TargetType="{x:Type aronium:SplitButton}" BasedOn="{StaticResource {x:Type aronium:SplitButton}}">
             <Setter Property="Height" Value="{StaticResource ButtonHeightGlobal}" />
         </Style>
+
     </Window.Resources>
 
     <Grid>
@@ -101,6 +103,13 @@
 
             <TabControl Grid.Row="1" Name="tabControl" SnapsToDevicePixels="True" BorderBrush="{DynamicResource Accent}">
                 <TabItem Header="Tab item 1">
+
+                    <TabItem.Resources>
+                        <Style TargetType="{x:Type GroupBox}" BasedOn="{StaticResource {x:Type GroupBox}}">
+                            <Setter Property="Padding" Value="5 2" />
+                        </Style>
+                    </TabItem.Resources>
+                    
                     <ScrollViewer VerticalScrollBarVisibility="Auto">
 
                         <Grid>
@@ -144,13 +153,13 @@
                                         </aronium:LiveSearchTextBox.ItemTemplate>
                                     </aronium:LiveSearchTextBox>
 
-                                    <aronium:Callout CalloutType="Info" Margin="5">
+                                    <aronium:Callout CalloutType="Info" Margin="0 5">
                                         Info callout
                                     </aronium:Callout>
-                                    <aronium:Callout CalloutType="Error" Margin="5">
+                                    <aronium:Callout CalloutType="Error" Margin="0 5">
                                         Error callout
                                     </aronium:Callout>
-                                    <aronium:Callout CalloutType="Warning" Margin="5">
+                                    <aronium:Callout CalloutType="Warning" Margin="0 5">
                                         Warning callout
                                     </aronium:Callout>
                                 </StackPanel>
@@ -160,26 +169,44 @@
 
                             <GroupBox Header="Combo Box" Grid.Column="2" SnapsToDevicePixels="True">
                                 <StackPanel>
-                                    <ComboBox Margin="0,5" Width="180" HorizontalAlignment="Left">
+                                    <ComboBox Margin="0,5">
                                         <ComboBoxItem Content="Item 1" />
                                         <ComboBoxItem Content="Item 2" />
                                         <ComboBoxItem Content="Item 3" />
                                         <ComboBoxItem Content="Item 4" />
                                         <ComboBoxItem Content="Item 5" />
                                     </ComboBox>
 
-                                    <ComboBox IsEditable="True" Margin="0,5" Width="180" HorizontalAlignment="Left">
+                                    <ComboBox IsEditable="True" Margin="0,5">
                                         <ComboBoxItem Content="Editable Item 1" />
                                         <ComboBoxItem Content="Editable Item 2" />
                                         <ComboBoxItem Content="Editable Item 3" />
                                         <ComboBoxItem Content="Editable Item 4" />
                                         <ComboBoxItem Content="Editable Item 5" />
                                     </ComboBox>
 
-                                    <ComboBox IsEnabled="False" Margin="0,5" Width="180" HorizontalAlignment="Left">
+                                    <ComboBox IsEnabled="False" Margin="0,5">
                                         <ComboBoxItem IsSelected="True" Content="Disabled" />
                                     </ComboBox>
 
+                                    <TextBlock>
+                                        <Run Text="Selected country:" />
+                                        <Run Text="{Binding SelectedCountry, TargetNullValue='(none)'}" />
+                                    </TextBlock>
+                                    <aronium:SearchableComboBox Margin="0,5,5,5" 
+                                                                ItemsSource="{Binding Countries}"
+                                                                Watermark="Search countries..." 
+                                                                NoItemsText="No results"
+                                                                AllowNullSelection="False">
+                                        <ComboBox.SelectedItem>
+                                            <Binding Path="SelectedCountry" UpdateSourceTrigger="PropertyChanged">
+                                                <Binding.ValidationRules>
+                                                    <aronium:NotNullValidation ValidatesOnTargetUpdated="True"/>
+                                                </Binding.ValidationRules>
+                                            </Binding>
+                                        </ComboBox.SelectedItem>
+                                    </aronium:SearchableComboBox>
+
                                     <aronium:TextSeparator FontSize="18" FontFamily="Segoe UI Light" Content="Text separator" />
 
                                     <ProgressBar Value="40" Maximum="100" Margin="0,10" />

Aronium.Wpf.Toolkit.Demo/MainWindow.xaml.cs

@@ -26,17 +26,17 @@ public partial class MainWindow : Window, INotifyPropertyChanged
         private string _selectedTag;
         List<User> _users;
         private string _searchText;
-        List<string> countries = new List<string>(new[] { "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua & Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Myanmar/Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Democratic Republic of the Congo", "Denmark", "Djibouti", "Dominican Republic", "Dominica", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "French Guiana", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Great Britain", "Greece", "Grenada", "Guadeloupe", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Israel and the Occupied Territories", "Italy", "Ivory Coast (Cote d'Ivoire)", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kosovo", "Kuwait", "Kyrgyz Republic (Kyrgyzstan)", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Republic of Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Moldova, Republic of", "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique", "Namibia", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Korea, Democratic Republic of (North Korea)", "Norway", "Oman", "Pacific Islands", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russian Federation", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent's & Grenadines", "Samoa", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovak Republic (Slovakia)", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Korea, Republic of (South Korea)", "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Tajikistan", "Tanzania", "Thailand", "Timor Leste", "Togo", "Trinidad & Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks & Caicos Islands", "Uganda", "Ukraine", "United Arab Emirates", "United States of America (USA)", "Uruguay", "Uzbekistan", "Venezuela", "Vietnam", "Virgin Islands (UK)", "Virgin Islands (US)", "Yemen", "Zambia", "Zimbabwe" });
-
+        List<string> countries = new List<string>(new[] { "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua & Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Myanmar/Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Democratic Republic of the Congo", "Denmark", "Djibouti", "Dominican Republic", "Dominica", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "French Guiana", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Great Britain", "Greece", "Grenada", "Guadeloupe", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Israel and the Occupied Territories", "Italy", "Ivory Coast (Cote d'Ivoire)", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kosovo", "Kuwait", "Kyrgyz Republic (Kyrgyzstan)", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Republic of Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Moldova, Republic of", "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique", "Namibia", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Korea, Democratic Republic of (North Korea)", "Norway", "Oman", "Pacific Islands", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russian Federation", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent's & Grenadines", "Samoa", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovak Republic (Slovakia)", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Korea, Republic of (South Korea)", "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Tajikistan", "Tanzania", "Thailand", "Timor Leste", "Togo", "Trinidad & Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks & Caicos Islands", "Uganda", "Ukraine", "United Arab Emirates", "United States of America (USA)", "Uruguay", "Uzbekistan", "Venezuela", "Vietnam", "Virgin Islands (UK)", "Virgin Islands (US)", "Yemen", "Zambia", "Zimbabwe" });
+        private string countryComboBoxFilter;
+        private string selectedCountry = "United States of America (USA)";
+
         public MainWindow()
         {
             InitializeComponent();
 
             Themes = new List<string>(new[] { "Light", "Dark", "Dimmed", "HighContrast", "Gray" });
 
-            ThemeName = "Gray";
-
-            DataContext = this;
+            ThemeName = "Dark";
 
             IntegerProperty = new Random().Next(0, 1000);
 
@@ -222,12 +222,11 @@ public IEnumerable<string> SelectedCountries
             get
             {
                 if (!string.IsNullOrEmpty(SearchText))
-                {
-                    foreach (var country in Countries.Where(x => x.ToUpper().Contains(SearchText.ToUpper())))
-                    {
-                        yield return country;
-                    }
+                {
+                    return FindCountries(SearchText);
                 }
+
+                return Enumerable.Empty<string>();
             }
         }
 
@@ -275,7 +274,7 @@ private void CreateGuidedTour()
             };
         }
 
-        private void OnResetGuide(object sender, RoutedEventArgs e) 
+        private void OnResetGuide(object sender, RoutedEventArgs e)
         {
             guide.Reset();
         }
@@ -332,5 +331,50 @@ protected override void OnKeyDown(KeyEventArgs e)
 
         public ObservableCollection<NotificationItem> Notifications { get; set; } = new ObservableCollection<NotificationItem>();
 
+        public string SelectedCountry
+        {
+            get => selectedCountry;
+            set
+            {
+                selectedCountry = value;
+                OnPropertyChanged(nameof(SelectedCountry));
+            }
+        }
+
+        public string CountryComboBoxFilter
+        {
+            get => countryComboBoxFilter; 
+            set
+            {
+                countryComboBoxFilter = value;
+            }
+        }
+
+        public IEnumerable<string> FilteredCountries
+        {
+            get
+            {
+                return FindCountries(CountryComboBoxFilter);
+            }
+        }
+
+        private IEnumerable<string> FindCountries(string input)
+        {
+            input = input?.ToUpper();
+
+            foreach (var country in countries)
+            {
+                if (string.IsNullOrEmpty(input) || country.ToUpper().Contains(input))
+                {
+                    yield return country;
+                }
+            }
+        }
+
+        private void OnSearchChanged(object sender, SearchTextChangedEventArgs e)
+        {
+            countryComboBoxFilter = e.Value;
+            OnPropertyChanged(nameof(FilteredCountries));
+        }
     }
 }

Aronium.Wpf.Toolkit/Aronium.Wpf.Toolkit.csproj

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
   <PropertyGroup>
@@ -75,6 +75,7 @@
     <Compile Include="Controls\NotificationsControl.cs" />
     <Compile Include="Controls\NotificationItem.cs" />
     <Compile Include="Controls\Rating.cs" />
+    <Compile Include="Controls\SearchableComboBox.cs" />
     <Compile Include="Controls\TagItem.cs" />
     <Compile Include="Controls\TagControl.cs" />
     <Compile Include="Controls\ToggleSwitch.cs" />
@@ -103,6 +104,7 @@
       <DesignTimeSharedInput>True</DesignTimeSharedInput>
     </Compile>
     <Compile Include="Validators\EmptyValidationRule.cs" />
+    <Compile Include="Validators\NotNullValidation.cs" />
     <Compile Include="Validators\NumericValidationRule.cs" />
     <Compile Include="Helpers\VisualHelper.cs" />
     <EmbeddedResource Include="Properties\Resources.resx">
@@ -157,6 +159,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Themes\SearchableComboBoxStyle.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Themes\ComboBoxStyle.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

Aronium.Wpf.Toolkit/Controls/ButtonGroup.cs

@@ -1,8 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Windows;
+using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Controls.Primitives;
 

Aronium.Wpf.Toolkit/Controls/LiveSearchTextBox.cs

@@ -180,17 +180,6 @@ private void OnTextBoxPreviewKeyDown(object sender, KeyEventArgs e)
             }
         }
 
-        private void FocusSelectedListBoxItem()
-        {
-            var element = GetListBoxElementFromSelectedItem(listBox.SelectedItem);
-
-            if (element != null)
-            {
-                element.Focus();
-                Keyboard.Focus(element);
-            }
-        }
-
         private ListBoxItem GetListBoxElementFromSelectedItem(object item)
         {
             return listBox.ItemContainerGenerator.ContainerFromItem(item) as ListBoxItem;