First Floor - modern Ui

[Johannes (Gast)]

Hallo,
ich möchte mir mit C# ein Tool erstellen. Dazu habe ich mir von 
FirstFloor die Modern UI besorgt. Sieht ja auch ganz nett aus. Ein 
großer Nachteil (für mich) ist, dass sich die Buttons zu den 
verschiedenen Menüs an der oberen Seite befinden. Ist es irgendwie 
möglich, diese an der Seite (untereinander) zu bekommen, oder wenigstens 
kein Untermenü mehr machen zu müssen? Oder kennt jemand eine andere 
Vorlage, wo das so ist?

Gruß

Johannes

[Johannes (Gast)]

https://github.com/firstfloorsoftware/mui
Mit Menu und Untermenu meinte ich z.B. Welcome (Menu) Introduction 
(Untermenu)

[Rene K. (xdraconix)]

Ich wundere mich ja, aber warum machst du dir da nicht einfach ein 
Label, feste Höhe und Breite, Schrift einstellen, dann "klickable" und 
Wertest es damit aus?

[Bernd K. (prof7bit)]

Ich hasse es wenn Anwendungen nicht das native Look & Feel der 
Desktopoberfläche verwenden sondern versuchen das Rad neu (und 
unvollständig) zu erfinden. Sie verhalten sich subtil anders, sie 
verwenden die falschen Farben, sie wirken wie ein Fremdkörper und 
verursachen nur Probleme.

[Mareike (Gast)]

Hallo Johannes und alle anderen.
Bei mir auf der Arbeit hat auch jemand eine Software mit modern ui in 
wpf erstellt. Das sah sehr gut aus und daher wollte ich mir jetzt zu 
hause auch eine software erstellen.
Jeder Teil der Software ist ja in drei Bereiche unterteil (Model, 
Viewmodel und View). Wozu die da sind ist mir klar
Model ist der eigentliche Code, Viewmodel ist die Verbindung vom Model 
und der Gui und in View ist die Gui enthalten. Aber ich begreiffe nicht, 
wie das funktioniert. Hast du zufällig ein einfaches Beispiel, wo man 
den Signalverlauf noch einmal genau sehen kann und vor allem, was ich 
machen muss?

Zunächst habe ich eine einfache View erstellt, wo man seinen NAmen und 
Geburtsdatum eingeben kann. Beim speichern auf einen Button, soll der 
Name und das Geburtsdatum dann in eine XML geschrieben werden (das wird 
dann ja im Model gemacht). Aber wie bekomme ich jetzt, dass wenn ich den 
Button drücke, sich das Speicherfenster öffnet?

Hoffe, mir kann einer Helfen. Habe schon den ganzen NAchmittag nach 
Tutorials gesucht, wo dieser Ablauf einmal komplett gemacht wird, aber 
leider nichts brauchbares (also das ich das verstanden habe) gefunden.

liebe grüße

Mareike

[Johannes (Gast)]

Da gibt es eigentlich viele youtube-videos. Aber da es bei mir auch noch 
nicht funktioniert, kann ich auch leider kein beispiel geben.

Daher die Frage an alle anderen.
In meiner View habe ich einen Button mit

        <Label Grid.Row="1" Grid.Column="1" FontWeight="SemiBold" Content="Name" HorizontalAlignment="Left" VerticalAlignment="Top" />
        <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding InputUserName}" />

        <Label Grid.Row="3" Grid.Column="1" />

        <Label Grid.Row="4" Grid.Column="1" FontWeight="SemiBold" Content="Geburtstag" HorizontalAlignment="Left" VerticalAlignment="Top" />
        <TextBox Grid.Row="5" Grid.Column="1" Text="{Binding InputUserBirthday}" />

        <Label Grid.Row="6" Grid.Column="1" />
        <Button Grid.Row="9" Grid.Column="1" Content="Benutzer speichern" Command="{Binding SaveUserDataCmd}"/>

mein ViewModel sieht wie folgt aus

using System.Windows;

using MySport.Helpers;
using MySport.Pages.Home.NewUser.Models;

namespace MySport.Pages.Home.NewUser.ViewModels
{
    public class NewUserViewModel : ViewModelBase
    {
        private NewUserModel _newUserModel;
        public RelayCommand SaveUserDataCmd { get; private set; }

        public NewUserViewModel()
        {
            _newUserModel = new NewUserModel();
            SaveUserDataCmd = new RelayCommand(SaveUserData);
        }


        private void SaveUserData(object obj)
        {
            MessageBox.Show("test");
            _newUserModel.SaveUser();
        }
    }
}

Für das ViewModelBase habe ich eine Helpers

namespace MySport.Helpers
{
    public class BaseViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
        {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

und mein Model:

using System.Xml;

namespace MySport.Pages.Home.NewUser.Models
{
    public class NewUserModel
    {

        string _userName;
        string _userBirthday;


        public NewUserModel()
        {

        }

        public void SaveUser()
        {
            using (XmlWriter writer = XmlWriter.Create("MySportUsers.xml"))
            {
                writer.WriteStartDocument();
                writer.WriteStartElement("Users");

                writer.WriteStartElement("User");
                writer.WriteElementString("Name", UserName);
                writer.WriteElementString("Birthday", UserBirthday);

                writer.WriteEndElement();
                writer.WriteEndDocument();
            }

        }

        public string UserName
        {
            get { return _userName; }
            set { _userName = value; }
        }

        public string UserBirthday
        {
            get { return _userBirthday; }
            set { _userBirthday = value; }
        }

    }
}

eigentlich sollte beim drücken des Buttons ein fenster geöffnet werden 
(nur da das eintragen in die xml nicht unbedingt funktionieren muss) und 
ein Eintrag in eine xml angelegt werden. Aber nichts passiert.
Selbst wenn ich in der Funktion SaveUserData einen Brakepoint setze, 
sehe ich, dass diese Funktion erst gar nicht aufgerufen wird.


Kann mir da jemand helfen?

Johannes

[Bärbeiß (Gast)]

Johannes schrieb:
> Selbst wenn ich in der Funktion SaveUserData einen Brakepoint setze,
> sehe ich, dass diese Funktion erst gar nicht aufgerufen wird.

Ich sehe nirgendwo die Erzeugung einer Instanz des ViewModels und die 
DataContext-Zuweisung.

Falls du das übersehen hast (der View-Code steht oben ja nicht), 
schreibe mal

DataContext = new NewUserViewModel();

in den Konstruktor der View.
http://paulstovell.com/blog/mvvm-instantiation-approaches

>> MessageBox.Show("test");

Eigentlich sollte im View-Model nichts stehen, was direkt auf 
UI-Komponenten zugreift (u.a., weil sich das VM dann nicht mehr so 
einfach testen lässt). Man kann stattdessen z.B. eine eigene 
Service-Klasse für Messageboxen, Open/Save-Dialoge etc. schreiben und 
dann im VM mit einem Interface arbeiten.
Andererseits würde ich es bei einem kleinen Programm mit der "Strenge" 
nicht übertreiben. Bei einem wirklich kleinen Tool (im Sinne der 
Komplexität) würde ich vermutlich nicht einmal das MVVM-Pattern 
einsetzen, sondern ganz einfach und altmodisch Messagehandler (die 
eigentliche Funktionalität aber immer in eigenen Klassen oder Assemblys 
implementieren, nie in GUI-Klassen).

Was mir gerade noch auffällt:
Da steht zwar

>> public RelayCommand SaveUserDataCmd { get; private set; }

aber das tut ja nichts weiter.
Du musst die Verbindung zwischen Command und Methode selbst herstellen. 
So in der Art (es kommt natürlich auf die RelayCommand-Implementierung 
an, die du benutzt):

// VM

public bool CanSave => true; // Zum Ausprobieren

private RelayCommand _saveCommand;
public ICommand SaveCommand
{
  get
  {
    if (_saveCommand == null)
    {
      _saveCommand = new RelayCommand(param => this.SaveUserData(),
        param => this.CanSave);
    }
    return _saveCommand;
  }
}

private void SaveUserData()
{
  MessageBox.Show("test");
  _newUserModel.SaveUser();
}

<Button Grid.Row="9" Grid.Column="1" Content="Benutzer speichern" Command="{Binding SaveCommand}"/>