Kolumne XAML Expertise: WPF und Windows-Apps

XAML-Tipp: WPF – Das Top-Tabsteuerelement Dragablz
Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „WPF: Das Top-Tabsteuerelement Dragablz“.

Das Standard-Tabsteuerelement aus WPF bietet nicht gerade viel an Funktionalität. Als guter Vergleich dienen die Tabs moderner Webbrowser. So kann ein Tab nicht via Drag and Drop zu einem eigenen Fenster gezogen werden, auch das Verschieben der Tabs innerhalb des Hauptfensters funktioniert nicht. Das Open-Source-Projekt Dragablz löst dieses Problem und bietet ein kostenloses Tabsteuerelement mit allen soeben erwähnten Features sowie vielen weiteren. Eine zusätzliche Besonderheit ist die einfache Integration vorhandener UI-Frameworks, die bereits bei XAML Expertise vorgestellt wurden. Dazu zählen beispielsweise MahApps.Metro oder Material Design in XAML Toolkit.

Die Installation findet wie üblich über NuGet statt. Zu finden ist das kostenlose Tabsteuerelement unter „Dragablz“. Der Einstieg und der Einsatz sind auch spielend einfach: So baut Dragablz auf das Standard-TabControl auf und erweitert es nur um die fehlenden Features. Es kann daher so implementiert werden, wie man es bereits gewohnt ist. Der einzige Unterschied ist der Name TabablzControl und ein zusätzlicher InterTabController. Listing 1 zeigt mit nur wenigen Zeilen Code, wie ein Tabsteuerelement mit webbrowserähnlicher Tabfunktionalität bereitgestellt wird. Abbildung 1 veranschaulicht, wie aus zwei Tabs ein eigenes Fenster gezogen wurde.

<Window x:Class="DragablzSample.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:dragablz="http://dragablz.net/winfx/xaml/dragablz"
  mc:Ignorable="d"
  Title="Dragablz Sample" Height="350" Width="525">
    <Grid>
      <dragablz:TabablzControl Margin="8">
        <dragablz:TabablzControl.InterTabController>
          <dragablz:InterTabController />
        </dragablz:TabablzControl.InterTabController>
        <TabItem Header="Tab No. 1" IsSelected="True">
          <TextBlock>Hello World</TextBlock>
        </TabItem>
        <TabItem Header="Tab No. 2">
          <TextBlock>We Have Tearable Tabs!</TextBlock>
        </TabItem>
      </dragablz:TabablzControl>
    </Grid>
</Window>
Abb. 2: Aus einem Tab ein eigenes Fenster ziehen

Abb. 1: Aus einem Tab ein eigenes Fenster ziehen

 

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -