Goffo.WpfAutoCompleteTextbox 1.0.0

README

What is this repository for?

• Resuable Autocomplete TextBox for WPF Applications
• Version 1.0.0
• Learn Markdown

How do I get set up?

• XAML Example

<Window x:Class="AutoCompleteTextBox.WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AutoCompleteTextBox.WPF"
        xmlns:custom="clr-namespace:WPFAutoCompleteTextBox.CustomControl;assembly=WPFAutoCompleteTextBox.CustomControl"
        mc:Ignorable="d"
        x:Name="thisWindow"
        Title="AutoComplete" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="TextBox" x:Key="AutoCompleteTB">
            <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
            <Setter Property="Width" Value="Auto"></Setter>
            <Setter Property="Height" Value="Auto"></Setter>
            <Setter Property="MaxWidth" Value="200"></Setter>
            <Setter Property="MaxHeight" Value="25"></Setter>
            <Setter Property="MinWidth" Value="100"></Setter>
            <Setter Property="BorderBrush" Value="Black"></Setter>
            <Setter Property="BorderThickness" Value="1.5"></Setter>
            <Style.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="3"></Setter>
                </Style>
            </Style.Resources>
            
        </Style>

        <Style TargetType="ListBox" x:Key="AutoCompleteLB">
            <Setter Property="Height" Value="Auto"></Setter>
            <Setter Property="Width" Value="Auto"></Setter>
            <Setter Property="MaxHeight" Value="100"></Setter>
            <Setter Property="Background" Value="LightGray"></Setter>
            <Setter Property="FontWeight" Value="SemiBold"></Setter>
            <Style.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="3"></Setter>
                </Style>
            </Style.Resources>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <custom:AutoCompleteTextBox
            Grid.Row="0"
            AutoCompleteMargin="10"
            AutoCompeleteVeritcalAlignment="Top"
            AutoCompleteHorizontalAlignment="Center"
            AutoCompleteOrientation="Vertical"
            TextBoxStyle="{StaticResource AutoCompleteTB}"
            SearchText="{Binding Search}"
            SearchTextIsReadOnly="{Binding SearchIsReadOnly}"
            ListBoxStyle="{StaticResource AutoCompleteLB}"
            SearchItems="{Binding Products}"
            DisplayMemberPath="ProductID"
            SelectedSearchItem="{Binding SelectedProduct}"
            IsSearchItemsVisible="{Binding IsSearchItemsVisible}">
        </custom:AutoCompleteTextBox>
    </Grid>
</Window>

• ViewModel Example - Don't forget to set the DataContext of the Window to the ViewModel

using AutoCompleteTextBox.WPF.Data;
using AutoCompleteTextBox.WPF.Models;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Windows;

namespace AutoCompleteTextBox.WPF.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private readonly DataAccess _dataAccess;

        public MainViewModel(DataAccess dataAccess)
        {
            _dataAccess = dataAccess;
        }

        public event PropertyChangedEventHandler? PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private void setProductsAsync(string searchText)
        {
            SearchIsReadOnly = true;

            if(string.IsNullOrWhiteSpace(searchText))
            {
                Products.Clear();
                IsSearchItemsVisible = false;
            }
            else
            {
                toggleLoadingProducts();

                var data = _dataAccess.GetProductsAsync(searchText)
                    .ContinueWith(t =>
                    {
                        if (t.Exception is null)
                        {
                            Products = t.Result.ToList();
                        }
                        else
                        {
                            MessageBox.Show(t.Exception.Message, "ERROR", MessageBoxButton.OK, MessageBoxImage.Error);
                        }
                    });

                toggleLoadingProducts();
            }

            SearchIsReadOnly = false;
        }

        private bool _isLoadingProducts = false;
        private void toggleLoadingProducts()
        {
            _isLoadingProducts = !_isLoadingProducts;

            if (_isLoadingProducts)
            {
                Products = new List<ProductModel> { new ProductModel { ProductID = "LOADING..." } };
                IsSearchItemsVisible = true;
            }
        }

        private string _search = string.Empty;

        public string Search
        {
            get => _search;

            set
            {
                if(_search == value || SearchIsReadOnly)
                {
                    return;
                }

                _search = value;
                OnPropertyChanged(nameof(Search));
                setProductsAsync(value);
            }
        }

        private List<ProductModel> _products;

        public List<ProductModel> Products
        {
            get => _products;

            set
            {
                _products = value;
                OnPropertyChanged(nameof(Products));
            }
        }

        private bool _searchIsReadOnly = false;

        public bool SearchIsReadOnly
        {
            get => _searchIsReadOnly;

            set
            {
                _searchIsReadOnly = value;
                OnPropertyChanged(nameof(SearchIsReadOnly));
            }
        }

        private ProductModel _selectedProduct = new ProductModel();

        public ProductModel SelectedProduct
        {
            get => _selectedProduct;

            set
            {
                if (_selectedProduct == value || value is null)
                {
                    return;
                }

                _selectedProduct = value;
                OnPropertyChanged(nameof(SelectedProduct));

                Search = value.ProductID;
                IsSearchItemsVisible = false;
            }
        }

        private bool _isSearchItemsVisible = false;

        public bool IsSearchItemsVisible
        {
            get => _isSearchItemsVisible;

            set
            {
                _isSearchItemsVisible = value;
                OnPropertyChanged(nameof(IsSearchItemsVisible));
            }
        }
    }
}

Contribution guidelines

• Contact Repo Owner

Who do I talk to?

• Repo owner or admin
• Other community or team contact