Tooltips für Steuerelemente

Tooltips, Infotips oder Hinweise - unterschiedliche Namen für das gleiche Konzept: Weitere Informationen über ein bestimmtes Element oder Link erhalten, indem man mit dem Mauszeiger darüber bleibt. WPF unterstützt dieses Konzept natürlich auch. Dazu wird die Eigenschaft ToolTip verwendet, die in der Klasse FrameworkElement deklariert ist, von der fast jedes WPF-Steuerelement erbt.

Ein Tooltip kann sehr einfach für ein Steuerelement angegeben werden, wie dieses erste Beispiel zeigt:

<Window x:Class="WpfTutorialSamples.Control_concepts.ToolTipsSimpleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolTipsSimpleSample" Height="150" Width="400">
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">

        <Button ToolTip="Click here and something will happen!">Click here!</Button>

    </Grid>
</Window>

Wie Sie in dem Screenshot sehen, erzeugt dies einen schwebenden Rahmen mit dem angegebenen String, sobald die Maus über dem Knopf bleibt. Das ist, was die meisten Benutzerschnittstellen bereitstellen: Die Möglichkeit, einen String anzuzeigen und nicht mehr.

In WPF ist die Eigenschaft ToolTip aber nicht vom Typ String, sondern vom Typ object, so dass wir alles, was wir wollen, dort angeben können. Das bietet einige coole Möglichkeiten, dem Benutzer hilfreichere Tooltips zu bieten:

<Window x:Class="WpfTutorialSamples.Control_concepts.ToolTipsAdvancedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolTipsAdvancedSample" Height="200" Width="400" UseLayoutRounding="True">
    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
            <Button ToolTip="Create a new file">
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/page_white.png" Width="16" Height="16" />
                </Button.Content>
            </Button>
            <Button>
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/folder.png" Width="16" Height="16" />
                </Button.Content>
                <Button.ToolTip>
                    <StackPanel>
                        <TextBlock FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Open file</TextBlock>
                        <TextBlock>
                        Search your computer or local network
                        <LineBreak />
                        for a file and open it for editing.
                        </TextBlock>
                        <Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
                        <WrapPanel>
                            <Image Source="/WpfTutorialSamples;component/Images/help.png" Margin="0,0,5,0" />
                            <TextBlock FontStyle="Italic">Press F1 for more help</TextBlock>
                        </WrapPanel>
                    </StackPanel>
                </Button.ToolTip>
            </Button>
        </ToolBar>

        <TextBox>
            Editor area...
        </TextBox>
    </DockPanel>
</Window>

Beachten Sie, dass dieses Beispiel einen einfachen String als Tooltip für den ersten Knopf benutzt, aber einen deutlich komplexeren Tooltip für den zweiten Knopf. Im komplexeren Fall verwenden wir ein Panel als Wurzelobjekt und können diesem beliebige Steuerelemente hinzufügen. Das Ergebnis ist ziemlich cool: Eine Überschrift, eine Beschreibung und der Hinweis, dass F1 weitere Hilfe anzeigt, inklusive einem Hilfeicon.

Erweiterte Optionen

Die Klasse ToolTipService besitzt einige interessante Eigenschaften, die das Verhalten der Tooltips beeinflussen. Diese werden direkt auf dem Steuerelement gesetzt, das den Tooltip besitzt. Zum Beispiel wird die Dauer, die ein Tooltip anzeigt wird, über die Eigenschaft ShowDuration gesetzt (im Beispiel wird sie auf 5000ms oder 5 Sekunden gesetzt):

<Button ToolTip="Create a new file" ToolTipService.ShowDuration="5000" Content="Open" />

Sie können mit Hilfe der Eigenschaft HasDropShadow bestimmen, ob der Tooltip einen Schatten haben soll und über die Eigenschaft ShowOnDisabled festlegen, ob Tooltips auch für deaktiviere Steuerelemente angezeigt werden sollen. Es gibt viele weitere nützliche Eigenschaften. Die Dokumentation enthält eine vollständige Liste: http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice.aspx

Fazit

Tooltips können eine große Hilfe für den Benutzer sein und sind in WPF sowohl einfach zu benutzen als auch sehr flexibel. Neben der vollständigen Kontrolle über Aussehen und Inhalt des Tooltips können auch Eigenschaften der Klasse ToolTipService verwendet werden, um eine nach benutzerfreundlichere Anwendung zu erstellen.