MVVM ile WPF Öneri metin kutusu

WPF'de bir dizi diziye göre otomatik olarak öneren bir metin kutum var. Ancak, bunu arkasındaki kodda buldum ve her şeyi test etmek için bir kabusa dönüştüğü için MVVM'yi ihlal etmeden her şeyi yeniden yazmaya çalışıyorum. Bu konuda gitmenin en iyi yolu nedir? Bir metin kutusuna ekli bir davranış tek yol mu?

Şu anda aşağıda sahip olduğum koda bakın

XAML

<Window x:Class="Solutions.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"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid>
    <TextBox VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="SuggestionBox" Width="200"
             />
</Grid>

MainWindow.xaml.cs

using System.Linq;
using System.Windows;
using System.Windows.Controls;

namespace Solutions
{
    public partial class MainWindow : Window
    {
        private static readonly string[] SuggestionValues = {
            "England",
            "USA",
            "France",
            "Estonia"
        };

        public MainWindow()
        {
            InitializeComponent();
            SuggestionBox.TextChanged += SuggestionBoxOnTextChanged;
        }

        private string _currentInput = "";
        private string _currentSuggestion = "";
        private string _currentText = "";

        private int _selectionStart;
        private int _selectionLength;
        private void SuggestionBoxOnTextChanged(object sender, TextChangedEventArgs e)
        {
            var input = SuggestionBox.Text;
            if (input.Length > _currentInput.Length && input != _currentSuggestion)
            {
                _currentSuggestion = SuggestionValues.FirstOrDefault(x => x.StartsWith(input));
                if (_currentSuggestion != null)
                {
                    _currentText = _currentSuggestion;
                    _selectionStart = input.Length;
                    _selectionLength = _currentSuggestion.Length - input.Length;

                    SuggestionBox.Text = _currentText;
                    SuggestionBox.Select(_selectionStart, _selectionLength);
                }
            }
            _currentInput = input;
        }
    }
}

3 seçeneğiniz var:

• ekli mülk (ki bu harika, ama bence bu onun için biraz karmaşık)
• SuggestionTextBox : TextBoxönerileri getirecek bir işlev için bağımlılık özelliğine sahip yeni bir sınıf oluşturun
• neredeyse kutudan çıkar çıkmaz çalışacak düzenlenebilir ComboBox ile gidin, ancak yine de SuggestionBoxsınıf oluşturmanız gerekir.

Yeni sınıf oluşturmak size yeniden kullanılabilirlik ve tam kontrol sağlar. ReactiveUI'yi , size güçlü bir şekilde zaman uyumsuz komutlar veren MVVM çerçevem ​​olarak kullanıyorum .

Yani, kodun genel görünümü şöyle olacaktır:

public class SuggestionBox : TextBox // you can easily go with ComboBox here, and even have xaml file if you want fancier UI
{
   public ReactiveCommand<string, string[]> FetchSuggestionsCommand {get;set;} // this should dependency property, left out for brevity

   public ObservableColection<string> Suggestions {get;} // also dependency property


   public SuggestionBox()
   {
       this.WhenAnyValue(x => x.Text).InvokeCommand(FetchSuggestionsCommand); // this is strongly typed so you get compilation error if types don't match
       
       FetchSuggestionsCommand.Subscribe(suggestions => 
                {
                    Suggestions.Clear();
                    Suggestions.AddRange(suggestions);
                }); // a little more subscribtion management magic required, but I just want to show the idea
    // rest of your logic for displaying suggestions
    }
}

Sonra başka bir XAML'de:

<SuggestionBox FetchSuggestionsCommand="{Binding ViewModel.FetchSuggestionsFromWeb}"/>

Şimdi alma mantığı (başka bir ViewModel'de yaşıyor, ReactiveUI'de oradaki hataları bile halledebilirsiniz) ve görünüm (yalnızca SuggestionBoxsınıfta yaşıyor ve önerilerin nasıl alınacağı mantığı umursamıyor) arasında güzel bir ayrıştırma yaptınız.

Sonunda bir açıklama: xaml.cs'de kod olması MVVM ihlali değildir. Gerçekten, orada harika şeyler yapabilirsiniz (bir şey olursa odağı bir öğeye ayarlamak gibi, buna ViewModel'de sahip olmak yanlıştır). MVVM çok havalı bir kalıptır, fikri bir kez kavradığınızda o kadar da kısıtlayıcı değildir.

Ne yaptığınız tamamen Görünüme bağlıdır. MVVM'de - bu etkilenmez. Sadece bir kelime listesi ise, Modelden alacaksınız.

Bunu, içine bir sözcük koleksiyonunun aktarıldığı ayrı bir Ek Özelliğine alırdım. Ancak bu, MVVM'nin uygunluğundan çok bir kolaylık, alışkanlık meselesidir.