CodeBehind als ViewModel an Xaml-Datei binden

Veröffentlicht von

Wie kann ich eine CodeBehind-Datei direkt als ViewModel verwenden?

Ich habe nach einer Möglichkeit gesucht die CodeBehind-Datei direkt als ViewModel bzw. DataContext zu verwenden. Das ist natürlich keine empfohlene Vorgehensweise und ein extra ViewModel zur bevorzugen, aber ab und zu ist es halt pragmatischer.

Beispiel Code

Unsere Beispiel-Anwendung sieht so aus:

Soweit so unbeeindruckend. Wir binden zwei Textboxen und wollen beim Button-Click etwas machen. Der Code der CodeBehind-Datei:

public partial class MainWindow : INotifyPropertyChanged
    {
        public MainWindow()
        {
            ChangeTextCommand = new RelayCommand(() =>
            {
                Text1 = "Hallo";
                Text2 = "Welt";
            });

            Text1 = "Hello";
            Text2 = "World";
            InitializeComponent();
        }

        public ICommand ChangeTextCommand { get; }
        private string _text1;
        private string _text2;
        public event PropertyChangedEventHandler PropertyChanged;

        public string Text1
        {
            get => _text1;
            set
            {
                _text1 = value;
                OnPropertyChanged();
            } 
        }

        public string Text2
        {
            get => _text2;
            set
            {
                _text2 = value;
                OnPropertyChanged();
            } 
        }

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

Auch hier nichts besonderes, wir haben einen Command, zwei Properties und implementieren “INotifyPropertyChanged”. Im Konstruktor fällt auf, dass “InitializeComponent();” die letzte Anweisung ist, was wichtig für ein Funktionieren ist.

DataContext mittels Code setzen

Die erste und einfachste Möglichkeit ist den DataContext über den Code zu setzen. Das können wir z.B. im Konstruktor machen:

DataContext = this;

Dies funktioniert auch ohne Probleme, hat aber einen entscheidenen Nachteil:

Die Codevervollständigung im Xaml-Editor funktioniert nicht mehr, da der Editor nichts vom DataContext weiß.

DataContext im Xaml setzen

Damit der Xaml-Editor das ViewModel kennt, können wir auch direkt im Xaml-Code den DataContext setzen.

DataContext="{Binding RelativeSource={RelativeSource Self}}"

Anschließend kennt der Xaml-Editor auch unser “ViewModel” und bietet auch wieder Codevervollständigung an.

Fazit

Nicht ganz sauber, da hier keine Trennung zwischen Anzeige und Logic mehr vorhanden ist, dafür lassen sich gerade in kleinen Projekten mal schnell die Vorteile von CodeBehind und ViewModel gemeinsam nutzen.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert