Control ToolTips

Tooltips, infotips of hints - verschillende namen, maar het concept blijft hetzelfde: de mogelijkheid om extra informatie in te winnen omtrent een specifieke control of link door de muis erover te bewegen. WPF ondersteunt vanzelfsprekend dit concept eveneens, en door de ToolTip property te gebruiken, te vinden op de FrameworkElement klasse, waarvan bijna elke WPF control afstamt.

Een tooltip beschrijven voor een control is zeer gemakkelijk, zoals u zult merken in het eerste en zeer basic voorbeeld:

<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>

Zoals u kunt zien op de schermafbeeldingen, resulteert dit in een zwevende box met de beschreven string zodra de muis over de knop beweegt. Dit is wat de meeste UI frameworks aanbieden - het tonen van een tekst string en verder niets.

Niettemin, in WPF is de ToolTip property eigenlijk geen string type, maar wel een object type, wat betekent dat we er om het even wat kunnen insteken. Dit biedt enkele leuke mogelijkheden, die de gebruiker van veel meer en nuttigere tooltips voorzien. Bekijk het voorbeeld hieronder en vergelijk dit met het eerste voorbeeld:

<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>

Merk op hoe dit voorbeeld een eenvoudige string tooltip gebruikt voor de eerste knop en daarna een veel complexere voor de tweede knop. In het geavanceerde geval gebruiken we een panel als root control, waarna we vrij zijn om er controls aan toe te voegen naar believen. Het resultaat is best leuk, met een header, een beschrijvende tekst en een hint die zegt dat je F1 kan indrukken voor meer hulp, samen met een help icoon.

Geavanceerde opties

De ToolTipService klasse heeft een pakket aan interessante properties die het gedrag van uw tooltips kunnen beïnvloeden. Je plaatst ze direct op de control die de tooltip bevat, bijvoorbeeld zoals hier, waar we de tijd dat de tooltip getoond wordt verhoogd hebben door gebruik te maken van de ShowDuration property (we hebben de tijd ingesteld op 5.000 milliseconden of 5 seconden):

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

U kunt ook bepalen of de popup al dan niet een schaduw moet krijgen met de HasDropShadow property, of indien tooltips ook moeten getoond worden voor uitgeschakelde controls met de ShowOnDisabled property. Er zijn vele andere interessante properties, voor een complete lijst, raadpleeg de documentatie: http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice.aspx

Samenvatting

Tooltips kunnen een grote hulp zijn voor de gebruiker, en in WPF zijn ze zowel eenvoudig in gebruik als flexibel. Combineer het feit dat je volledige controle hebt over het uitzicht en inhoud van de tooltip, met properties van de ToolTipService klasse, om meer gebruiksvriendelijke hulp in uw applicatie in te bouwen.