WPF: Show and persist ToolTip for a Textbox based

问题:

The purpose of this tooltip is to show, the format of the string which must be entered.

The features I would like to achieve are:

1. The tooltip should be shown when the user places the cursor in the textbox, i.e. when the user tabs into the control.
2. The tooltip should update based on user input into the textbox (this can be achieved by binding).
3. The tooltip must persist until the user tabs out of the control.

I wanted to know if the standard tooltip as provided has configuration settings, properties, that can be used to achieve this,... in my research thus far I haven't found any. If the existing tooltip is not up to the task, which is very likely, I'd like some pointers, sample code to achieve this...

Thanks

Hasanain

回答1:

Using a combination of event triggers, bindings, and minimal code-behind I managed to implement a behavior which would update the ToolTip while the user types into textbox; when the keyboard focus is lost the tooltip disappears.

Here is the xaml for the textbox:

<TextBox Grid.Column="0" x:Name="txtBxQckTkt" Margin="5,5,0,0" Width="250" ToolTipService.IsEnabled="True" 
                 Text="{Binding QuickTicketText}">
            <TextBox.Triggers>
                <EventTrigger RoutedEvent="TextBox.GotKeyboardFocus">
                    <BeginStoryboard>
                        <Storyboard>
                            <BooleanAnimationUsingKeyFrames
                                Storyboard.TargetName="txtBxQckTktToolTip"
                                Storyboard.TargetProperty="IsOpen">
                                <DiscreteBooleanKeyFrame KeyTime="0:0:0"  Value="False"/>
                                <DiscreteBooleanKeyFrame KeyTime="0:0:0.0001" Value="True" />
                            </BooleanAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtBxQckTktToolTip" 
                                                           Storyboard.TargetProperty="Placement">
                                <DiscreteObjectKeyFrame Value="{x:Static PlacementMode.Bottom}"/>
                            </ObjectAnimationUsingKeyFrames>                                
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="TextBox.LostKeyboardFocus">
                    <BeginStoryboard>
                        <Storyboard>
                            <BooleanAnimationUsingKeyFrames
                                Storyboard.TargetName="txtBxQckTktToolTip"
                                Storyboard.TargetProperty="IsOpen">
                                <DiscreteBooleanKeyFrame KeyTime="0:0:0"  Value="True"/>
                                <DiscreteBooleanKeyFrame KeyTime="0:0:0.0001" Value="False" />
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBox.Triggers>                    
            <TextBox.ToolTip>
                <ToolTip x:Name="txtBxQckTktToolTip" Placement="Bottom" Content="{Binding ToolTip}">                        
                </ToolTip>
            </TextBox.ToolTip>
        </TextBox>

Here is the code-behind:

txtBxQckTktToolTip.PlacementTarget = txtBxQckTkt;
        _handler = (s, e) =>
                      {
                          var viewModel = DataContext as SingleTradeEntryViewModel;
                          if (viewModel == null) return;

                          viewModel.OnKeyup.Execute(txtBxQckTkt.Text);                              
                      };

        txtBxQckTkt.KeyUp -= _handler;
        txtBxQckTkt.KeyUp += _handler; 

When the command (OnKeyup) executes, it raises a change notification for the ToolTip property bound as seen in the xaml.

Thanks

Hasanain

回答2:

You might have to implement your own using the Popup Control. Here is some sample XAML to get you started:

<Button Width="120" Height="30" Name="btn">    
        <Popup IsOpen="True" StaysOpen="True" PlacementTarget="{Binding ElementName=btn}" Placement="Bottom">
            <Button Width="120" Height="30" Content="Button In ToolTip"/>
        </Popup>
</Button>

And here is some example code to get you started: http://social.msdn.microsoft.com/forums/en-US/wpf/thread/845ffad0-4abf-4830-b206-03f7fe53f74b

回答3:

2. ToolTip="{Binding Text, ElementName=textBox1, UpdateSourceTrigger=PropertyChanged}"

Here textBox1 is your textbox name and I have changed UpdateSourceTrigger to PropertyChanged so it updates your tooltip as you type.

3. ToolTipService.ShowDuration="12000"

Give this property a random time which is long enough to suit your needs.

I don't fully understand your first point but I think you need the tooltip to show in your gotfocus eventhandler. This can be achieved by something like in the gotfocus event.

ToolTip toolTip = ToolTipService.GetToolTip(textBox1) as ToolTip;
toolTip.IsOpen = true;

回答4:

You could create a trigger that sets the ToolTip based on if the control has focus or not