This is a migrated thread and some comments may be shown as answers.

Styling the expander

3 Answers 476 Views

TreeListView

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 30 Jul 2018, 12:16 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 30 Jul 2018, 11:13 PM

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?

answered on 01 Aug 2018, 11:38 AM

Expander-Tooltip.zip

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.