Styling the expander

[Trump]

I want to add the tooltip to the expander in the TreeListView.  The question is that I want the different tooltip when in expanded and collapsed status if I hover over the expander.

So I think that I have to apply the ControlTemplate triggers of the ToggleButton. Thanks for the code help.

[Dinko | Tech Support Engineer]

Hi Trump,

To add a ToolTip to the expand toggle button of the RadTreeListView you can extract and edit the default template of the RadTreeListViewRow. You can take a look at the Editing Control Templates help article which demonstrates how you can extract the template.

In the extracted template you can navigate to a ControlTemplate with x:Name="GridViewToggleButtonArrowTemplate" and specify ControlTemplates.Triggers. The triggers could target the IsChecked property. When it is true the row is expanded. To set a ToolTip you can use our RadToolTipService and set the telerik:RadToolTipService.ToolTipContent attached property.

Regards,
Dinko
Progress Telerik

[Trump]

Thank you, but I don't get it.

I clicked the  TreeListView control and followed the example, then the style is

<Style x:Key="RadTreeListViewStyle1" TargetType="{x:Type telerik:RadTreeListView}">
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="{x:Type telerik:RadTreeListView}">
                       <Grid>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition/>
                               <ColumnDefinition x:Name="ScrollBarColumn" MinWidth="0" Width="0"/>
                               <ColumnDefinition Width="Auto"/>
                           </Grid.ColumnDefinitions>
                           <Grid.RowDefinitions>
                               <RowDefinition Height="Auto"/>
                               <RowDefinition x:Name="PART_AttachedBehaviorRow" Height="Auto"/>
                               <RowDefinition/>
                               <RowDefinition x:Name="ScrollBarRow" Height="0" MinHeight="0"/>
                               <RowDefinition Height="Auto"/>
                           </Grid.RowDefinitions>
                           <VisualStateManager.VisualStateGroups>
                               <VisualStateGroup x:Name="GridViewActivity">
                                   <VisualState x:Name="Idle">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_GridViewLoadingIndicator">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="Busy">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_GridViewLoadingIndicator">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                               </VisualStateGroup>
                               <VisualStateGroup x:Name="ColumnHeadersVisibility">
                                   <VisualState x:Name="ColumnHeadersVisible">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_HeaderRow">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="ColumnHeadersCollapsed">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_HeaderRow">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                               </VisualStateGroup>
                               <VisualStateGroup x:Name="ColumnFootersVisibility">
                                   <VisualState x:Name="ColumnFootersVisible">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_FooterRow">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="ColumnFootersCollapsed">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_FooterRow">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                               </VisualStateGroup>
                               <VisualStateGroup x:Name="InsertRowVisibility">
                                   <VisualState x:Name="InsertRowVisible">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_AddNewRow">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="InsertRowCollapsed">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_AddNewRow">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                               </VisualStateGroup>
                               <VisualStateGroup x:Name="DisabledStates">
                                   <VisualState x:Name="Enabled"/>
                                   <VisualState x:Name="Disabled">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Background_Disabled">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                               </VisualStateGroup>
                           </VisualStateManager.VisualStateGroups>
                           <ItemsControl x:Name="PART_ControlPanelItemsControl" Grid.Column="2" HorizontalAlignment="Right" IsTabStop="False">
                               <ItemsControl.ItemsPanel>
                                   <ItemsPanelTemplate>
                                       <StackPanel IsItemsHost="True" Orientation="Horizontal"/>
                                   </ItemsPanelTemplate>
                               </ItemsControl.ItemsPanel>
                               <ItemsControl.ItemTemplate>
                                   <DataTemplate>
                                       <telerik:ControlPanelItemControl>
                                           <telerik:StyleManager.Theme>
                                               <telerik:Office_BlackTheme/>
                                           </telerik:StyleManager.Theme>
                                       </telerik:ControlPanelItemControl>
                                   </DataTemplate>
                               </ItemsControl.ItemTemplate>
                           </ItemsControl>
                           <Border x:Name="PART_MasterGridContainer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" Margin="0,-1,0,0" Padding="{TemplateBinding Padding}" Grid.Row="2" Grid.RowSpan="4"/>
                           <telerik:GridViewScrollViewer x:Name="PART_ItemsScrollViewer" Background="Transparent" CanContentScroll="True" Grid.ColumnSpan="3" Margin="1,0,1,1" Grid.Row="2" Grid.RowSpan="2">
                               <telerik:GridViewScrollViewer.FooterRow>
                                   <telerik:GridViewFooterRow x:Name="PART_FooterRow" IsTabStop="False" IndentLevel="{TemplateBinding GroupCount}">
                                       <telerik:StyleManager.Theme>
                                           <telerik:Office_BlackTheme/>
                                       </telerik:StyleManager.Theme>
                                   </telerik:GridViewFooterRow>
                               </telerik:GridViewScrollViewer.FooterRow>
                               <telerik:GridViewScrollViewer.HeaderRow>
                                   <telerik:GridViewHeaderRow x:Name="PART_HeaderRow" IsTabStop="False" IndentLevel="{TemplateBinding GroupCount}">
                                       <telerik:StyleManager.Theme>
                                           <telerik:Office_BlackTheme/>
                                       </telerik:StyleManager.Theme>
                                   </telerik:GridViewHeaderRow>
                               </telerik:GridViewScrollViewer.HeaderRow>
                               <telerik:GridViewScrollViewer.NewRow>
                                   <telerik:GridViewNewRow x:Name="PART_AddNewRow" IsTabStop="False" IndentLevel="{TemplateBinding GroupCount}" Visibility="Collapsed">
                                       <telerik:StyleManager.Theme>
                                           <telerik:Office_BlackTheme/>
                                       </telerik:StyleManager.Theme>
                                   </telerik:GridViewNewRow>
                               </telerik:GridViewScrollViewer.NewRow>
                               <telerik:StyleManager.Theme>
                                   <telerik:Office_BlackTheme/>
                               </telerik:StyleManager.Theme>
                               <telerik:TreeListViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel" CanHorizontallyScroll="True" CanVerticallyScroll="True"/>
                           </telerik:GridViewScrollViewer>
                           <telerik:ScrollPositionIndicator x:Name="PART_ScrollPositionIndicator" Grid.ColumnSpan="3" ContentTemplate="{TemplateBinding ScrollPositionIndicatorTemplate}" HorizontalAlignment="Right" IsHitTestVisible="False" IsTabStop="False" Margin="0,0,28,0" Grid.Row="2">
                               <telerik:StyleManager.Theme>
                                   <telerik:Office_BlackTheme/>
                               </telerik:StyleManager.Theme>
                               <telerik:ScrollPositionIndicator.Visibility>
                                   <Binding Mode="TwoWay" Path="IsScrolling" RelativeSource="{RelativeSource TemplatedParent}">
                                       <Binding.Converter>
                                           <telerik:BooleanToVisibilityConverter/>
                                       </Binding.Converter>
                                   </Binding>
                               </telerik:ScrollPositionIndicator.Visibility>
                           </telerik:ScrollPositionIndicator>
                           <Border x:Name="PART_FrozenColumnsPreview" Background="#33000000" HorizontalAlignment="Left" Grid.Row="1" Grid.RowSpan="4" Visibility="Collapsed" VerticalAlignment="Stretch" Width="6"/>
                           <telerik:GridViewLoadingIndicator x:Name="PART_GridViewLoadingIndicator" Grid.ColumnSpan="3" IsTabStop="False" IsBusy="{Binding IsBusy, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Grid.RowSpan="4" Visibility="Collapsed">
                               <telerik:StyleManager.Theme>
                                   <telerik:Office_BlackTheme/>
                               </telerik:StyleManager.Theme>
                           </telerik:GridViewLoadingIndicator>
                           <Grid x:Name="DragBetweenItemsFeedback" HorizontalAlignment="Left" Height="8" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Grid.Row="2" Visibility="Collapsed" VerticalAlignment="Top">
                               <Grid.ColumnDefinitions>
                                   <ColumnDefinition Width="8"/>
                                   <ColumnDefinition/>
                               </Grid.ColumnDefinitions>
                               <Ellipse HorizontalAlignment="Left" Height="8" Stroke="#FFFFC92B" StrokeThickness="2" VerticalAlignment="Center" Width="8"/>
                               <Rectangle Grid.Column="1" Fill="#FFFFC92B" Height="2" Margin="-2,3,0,0" RadiusY="2" RadiusX="2" VerticalAlignment="Top"/>
                           </Grid>
                           <Rectangle x:Name="Background_Disabled" IsHitTestVisible="False" Grid.RowSpan="5" Visibility="Collapsed">
                               <Rectangle.Fill>
                                   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                       <GradientStop Color="#E5000000"/>
                                       <GradientStop Color="#E5000000" Offset="1"/>
                                       <GradientStop Color="#4C000000" Offset="0.5"/>
                                   </LinearGradientBrush>
                               </Rectangle.Fill>
                           </Rectangle>
                       </Grid>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
           <Setter Property="Background" Value="White"/>
           <Setter Property="BorderBrush" Value="#FF848484"/>
           <Setter Property="Foreground" Value="Black"/>
           <Setter Property="BorderThickness" Value="1"/>
           <Setter Property="AlternateRowBackground" Value="#FFF4F4F4"/>
           <Setter Property="VerticalGridLinesBrush" Value="#FFCBCBCB"/>
           <Setter Property="HorizontalGridLinesBrush" Value="#FFCBCBCB"/>
           <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
           <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
           <Setter Property="VerticalAlignment" Value="Stretch"/>
           <Setter Property="HorizontalAlignment" Value="Stretch"/>
           <Setter Property="TreeLinesBrush" Value="Black"/>
           <Setter Property="TreeLinesStrokeThickness" Value="0.2"/>
           <Setter Property="Tag" Value="OfficeBlack"/>
           <Setter Property="SnapsToDevicePixels" Value="True"/>
       </Style>

 

There is no the ControlTemplate with x:Name="GridViewToggleButtonArrowTemplate". What I am  missing?

[Dinko | Tech Support Engineer]

Hello Trump,

Looking at the provided code snippet the extracted style is for the RadTreeListView. To add a tooltip to the toggle button you need to modify the RadTreeListViewRow template. For your convenience, I have extracted the template in a sample project which can be found attached to this reply. When you hover the toggle button a tooltip will appear. You can additionally modify to fit in your main application.

Regards,
Dinko
Progress Telerik