Biggle's Blog

Web- und Software Development

WPF Tabbing GUI

WPF Tabbing GUI ist ein kleiner Applikationsrahmen, der es einem WPF Entwickler ermöglicht eine GUI um seinen Code zu wrappen.

Für ein schnelles Ändern der Menüicons (Bild & Position) und das Verknüpfen der entsprechenden Seiten (Views), steht einem die Konfigurationsdatei SetTabbingGui.xml zur Verfügung.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8" ?>
<tabbinggui>
  <config>
    <!-- set the orientation of the menu-->
    <tabstripplacementkey key="Left" />
 
    <!-- set the applicationsize-->
    <application width="800" height="600" />
  </config>
 
  <!-- add and configure here the pages as TabItems, with icon and content-view-->
  <tabitems>
    <tabitem iconwidth="100" iconheight="100" icon="Icons\administrator-icon.png" filename="Pages\UserControl1.xaml" name="UserControl1" />
    <tabitem iconwidth="100" iconheight="100" icon="Icons\games-icon.png" filename="Pages\UserControl2.xaml" name="UserControl2" />
    <tabitem iconwidth="100" iconheight="100" icon="Icons\printer-icon.png" filename="Pages\UserControl3.xaml" name="UserControl3" />
    <tabitem iconwidth="100" iconheight="100" icon="Icons\webcam-icon.png" filename="Pages\UserControl4.xaml" name="UserControl4" />
  </tabitems>
</tabbinggui>

TabStripPlacementKey: Legt fest, an welcher Seite das Menü erscheinen soll, Left, Right, Top, Bottom.

Application: Height und Width legen die Größe des Applikationscontainer fest.

TabItems: Unter diesem Knoten definiert man den Namen, die einzelnen Pages mit der Angabe einer View (xaml), das Icon  und die Größe des Icons (IconHeight, IconWidth).

In der app.config werden die Pfade zum Ordner festgelegt in denen sich die Ordner "Icons" und "Pages" befinden, sowie die Pfadangabe zur SetTabbingGui.xml.

1
2
3
4
5
6
7
8
9
10
&lt;?xml version=&quot;1.0&quot;?&gt;
<configuration>
  <startup>
    <supportedruntime version="v2.0.50727" />
  </startup>
  <appsettings>
    <add value="..\..\" key="ROOTDIR" />
    <add value="..\..\SetTabbingGui.xml" key="CONFIGPATH" />
  </appsettings>
</configuration>

Nun kann man sich ausschließlich um das Implementieren der Logik kümmern. Hier sollte der Entwickler das MVVM Pattern verwenden. Unter Common steht eine Basisklasse ViewModelBase für die ViewModel-Klassen bereit. Diese implementiert das  INotifyPropertyChanged Interface. Ich habe hier ein Version von jp.hamilton (Update: 15.01.2012 – leider nicht mehr verfügbar) gewählt. Deshalb gewählt, weil hier die Methode OnPropertyChanged (hier RaisePropertyChanged) mit einem typsicheren Property gefeuert wird.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/// <summary>
/// the viewmodelbase implemented INotifyPropertyChanged
/// with type-save INotifyProperty
/// idea from jp.hamilton: http://www.jphamilton.net/blog/post/MVVM-with-Type-Safe-INotifyPropertyChanged.aspx
/// </summary>
/// <typeparam name="T"></typeparam>
public class ViewModelBase<t> : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
 
    protected void RaisePropertyChanged<r>(Expression<func><t  , R>&gt; x)
    {
        var body = x.Body as MemberExpression;
        if (body == null)
            throw new ArgumentException(&quot;'x' should be a member expression&quot;);
 
        string propertyName = body.Member.Name;
 
        PropertyChangedEventHandler handler = this.PropertyChanged;
 
        if (handler != null)
        {
            var e = new PropertyChangedEventArgs(propertyName);
            handler(this, e);
        }
    }
}

Beispiel ViewModelProperty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#region ViewModelProperty ApplicationWidth
private double _applicationWidth;
public double ApplicationWidth
{
    get
    {
        return _applicationWidth;
    }
    set
    {
        _applicationWidth = value;
        RaisePropertyChanged(m =&gt; m.ApplicationWidth);
    }
}
#endregion

 

So ich würde sagen, einfach mal ausprobieren und her mit den Anregungen. Ich denke ich werde Zeit für Zeit da immer mal wieder noch was ergänzen.

Bis dahin. Viel Spaß beim entwickeln : )

  • Pingback: WPF Tabbing GUI | Biggle's Blog

  • http://www.biggle.de Mario

    Hier ergänzend noch die [url=http://www.biggle.de/blog/wp-content/uploads/2010/08/WPFTabbingGUITemplate.zip]Templatevorlage[/url]. Zu kopieren nach
    %Userprofile%Eigene DateienVisual Studio 2010My Exported Templates

  • Uwe

    Hi Mario,
    das ist echt gut – selbst der Anfänger kommt sofort damit zurecht.
    Frage: Gibts das auch als SL – Version.

    cheers
    Uwe

  • http://www.biggle.de Mario

    Ich hatte mich bereits an einer Portierung versucht, aber ich hab noch Probleme mit den Zugriffsrechten. Aber wenn ich etwas fitter in Silverlight bin, gibt es sicher dafür auch ne Version : )

  • http://www.biggle.de Mario Priebe

    Project auf GitHub [url=https://github.com/MarioPriebe/WPFTabbingGUI]verschoben[/url]