telerik:ComboBoxToolTipHelper.ShowToolTipOnTrimmedText="True" that works on the RadListBox?

0 Answers 57 Views
ListBox ToolTip
Paul Schwartzberg
Top achievements
Rank 1
Paul Schwartzberg asked on 29 Aug 2022, 09:47 AM

Is there a 

telerik:ComboBoxToolTipHelper.ShowToolTipOnTrimmedText="True" that works on the RadListBox (not only the RadComboBox)?

So a :ComboBoxToolTipHelper.ShowToolTipOnTrimmedText that works on the RadListBox?

Or another way of achieving it on the RadListBox?

Background:

I tried with a behavior on the row data template but it conflicts with the drag and drop by causing exceptions during the drag and drop (but that would incur another question thread).  I am just writing this to say i tried this avenue.

Right now my RadLitBox looks as follows:

<telerik:RadListBox x:Name="RLB_Source"   
                                        VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                                        ItemsSource="{Binding SourceSplitList, Mode=TwoWay}" 
                                        SelectionMode="Multiple"  
                                        telerik:ListBoxSelectedItemsBehavior.SelectedItemsSource="{Binding SelectedSourceItems}"
                                        DisplayMemberPath="Name" 
                                        AllowDrop="True" 
                                        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                        ScrollViewer.VerticalScrollBarVisibility="Visible"  
                                        Style="{StaticResource RadListBoxStyle}" 
                                        telerik:ComboBoxToolTipHelper.ShowToolTipOnTrimmedText="True"
                                        ToolTipService.ToolTip="{Binding Text, RelativeSource={RelativeSource Self}}" 
                                        >

Because of the lines:

                                        telerik:ComboBoxToolTipHelper.ShowToolTipOnTrimmedText="True"
                                        ToolTipService.ToolTip="{Binding Text, RelativeSource={RelativeSource Self}}" 

There is a tool tip showing the text of every RadListBox row - and not only where the text is trimmed.

How is the text trimmed? Short answer: i have a telerik:RadListBoxItem style template where text trimming is set as below:  

         <Setter Property="TextTrimming" Value="CharacterEllipsis"></Setter>

Here is the entire control template:

 <ControlTemplate TargetType="{x:Type telerik:RadListBoxItem}">
                    <Border
                                x:Name="Bd"
                                Padding="{TemplateBinding Padding}"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                SnapsToDevicePixels="true">
                        <ContentPresenter 
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                   >

                            <ContentPresenter.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="TextTrimming" Value="CharacterEllipsis"></Setter>
                                    <Setter Property="TextWrapping" Value="NoWrap" />
                                    <Setter Property="Text" Value="{Binding Name}" />
                                    <Setter Property="ToolTipService.ToolTip" Value="{Binding Name}" />
                                </Style>
                            </ContentPresenter.Resources>
                        </ContentPresenter> 
                    </Border>  

</ControlTemplate>

Trimming is set on the TextBlock that appears (implicitly by Telerik) in the Contentpresenter.

 

The whole styling is below if relevant for answering the question:

My RadListBox has this style:

 <Style x:Key="RadListBoxStyle" TargetType="{x:Type telerik:RadListBox}">
        <Setter Property="AlternationCount" Value="2" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
        <Setter Property="VirtualizingPanel.ScrollUnit" Value="Pixel" />
        <Setter Property="VirtualizingPanel.VirtualizationMode" Value="Recycling" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{StaticResource Gray}" />
        <Setter Property="Background" Value="{DynamicResource White}" />
        <Setter Property="SelectionMode" Value="Multiple" />
        <Setter Property="FontSize" Value="12pt" />
        <Setter Property="FontFamily" Value="{StaticResource SourceSansPro-Regular}" />
        <Setter Property="Foreground" Value="{StaticResource Brand Default}" />
        <Setter Property="Margin" Value="0,2,0,0" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="ItemContainerStyle" Value="{StaticResource DefaultDragDropRadListBoxItemStyle}" /> 
    </Style> 

 

In the the above style there is an ItemContainerStyle.  Here it goes:

        

  <Style x:Key="DefaultDragDropRadListBoxItemStyle" TargetType="telerik:RadListBoxItem">
        <Setter Property="BorderBrush" Value="{StaticResource 'Gray Light'}" />
        <Setter Property="BorderThickness" Value="0,0,0,1" />
        <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" /> 

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadListBoxItem}">
                    <Border
                                x:Name="Bd"
                                Padding="{TemplateBinding Padding}"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                SnapsToDevicePixels="true">
                        <ContentPresenter 
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                   >

                            <ContentPresenter.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="TextTrimming" Value="CharacterEllipsis"></Setter>
                                    <Setter Property="TextWrapping" Value="NoWrap" />
                                    <Setter Property="Text" Value="{Binding Name}" />
                                    <Setter Property="ToolTipService.ToolTip" Value="{Binding Name}" />
                                </Style>
                            </ContentPresenter.Resources>
                        </ContentPresenter> 
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Bd" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                            <Setter Property="Background" Value="White"></Setter>
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                            <Setter Property="Background" Value="{StaticResource 'Gray Lighter'}"></Setter>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="False" />
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsKeyboardFocused" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brand Light}" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="False" />
                                <Condition Property="IsMouseOver" Value="False" />
                                <Condition Property="IsKeyboardFocused" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brand Secondary}" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True" />
                                <Condition Property="IsMouseOver" Value="False" />
                                <Condition Property="IsKeyboardFocused" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brand Secondary}" />
                            <Setter Property="Foreground" Value="White" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brand Secondary}" />
                            <Setter Property="Foreground" Value="White" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True" />
                                <Condition Property="IsMouseOver" Value="False" />
                                <Condition Property="IsKeyboardFocused" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brand Secondary}" />
                            <Setter Property="Foreground" Value="White" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="False" />
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsKeyboardFocused" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Brand Secondary}" />
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter> 
    </Style>

 

No answers yet. Maybe you can help?

Tags
ListBox ToolTip
Asked by
Paul Schwartzberg
Top achievements
Rank 1
Share this question
or