Question

I have a project in which i would like to be able to have a tooltip on some control that would incoporate some controls like textbox and datepicker. The idea would be to have some sort of a popup window with limited graphic but some control wo interact.

I know how to add a ‘normal’ tooltip to a control, but when you move, the tooltip disapear so I can’t interact with it.

is this possible? If so how and if not, is there any alternative to this ?

Thanks

Answer 1

You should use a Popup instead of a ToolTip

Example. A Popup is opened when the mouse moves over the TextBox and stays open as long as the mouse is over the TextBox or the Popup

<TextBox Name="textBox"
         Text="Popup On Mouse Over"
         HorizontalAlignment="Left"/>
<Popup PlacementTarget="{Binding ElementName=textBox}"
       Placement="Bottom">
    <Popup.IsOpen>
        <MultiBinding Mode="OneWay" Converter="{StaticResource BooleanOrConverter}">
            <Binding Mode="OneWay" ElementName="textBox" Path="IsMouseOver"/>
            <Binding RelativeSource="{RelativeSource Self}" Path="IsMouseOver" />
        </MultiBinding>
    </Popup.IsOpen>
    <StackPanel>
        <TextBox Text="Some Text.."/>
        <DatePicker/>
    </StackPanel>
</Popup>

Is uses a BooleanOrConverter

public class BooleanOrConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        foreach (object booleanValue in values)
        {
            if (booleanValue is bool == false)
            {
                throw new ApplicationException("BooleanOrConverter only accepts boolean as datatype");
            }
            if ((bool)booleanValue == true)
            {
                return true;
            }
        }
        return false;
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

Update
To do this for a cell in DataGrid you have a few options. Two of them are to add a Popup inside the DataTemplates for DataGridTemplateColumn, or you can add it to the DataGridCell Template. Here is an example of the later. It will require you to set SelectionMode=”Single” and SelectionUnit=”Cell” on the DataGrid

<DataGrid SelectionMode="Single"
          SelectionUnit="Cell"
          ...>
    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Grid>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <Popup PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                   Placement="Right"
                                   IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}">
                                <StackPanel>
                                    <TextBox Text="Some Text.."/>
                                    <DatePicker/>
                                </StackPanel>
                            </Popup>
                        </Grid>                                
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>    
    </DataGrid.CellStyle>
    <!--...-->
</DataGrid>