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

Styling Non-RadPanelBarItem inside RadPanelBarItem

1 Answer 123 Views

PanelBar

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

dhany asked on 08 Mar 2011, 06:52 AM

Hello All,

In WPF, how can I put a RadTreeView directly inside a RadPanelBarItem without highlighting effect?

this is what I've tried:

<telerik:RadPanelBar Orientation="Vertical" Background="Gray" ExpandMode="Multiple" >

<telerik:RadPanelBarItem IsExpanded="True" Header="Locations" Style="{DynamicResource sidePanelRadPanelBarItemStyle}"

>

	    <

telerik:RadTreeView>

<telerik:RadTreeViewItem Header="Person A" >

<telerik:RadTreeViewItem Header="Child 01"/>

<telerik:RadTreeViewItem Header="Child 02"/>

<telerik:RadTreeViewItem Header="Child 03"/>

<telerik:RadTreeViewItem Header="Child 04"/>

</telerik:RadTreeViewItem>

<telerik:RadTreeViewItem Header="Person Two" >

<telerik:RadTreeViewItem Header="Child 01"/>

<telerik:RadTreeViewItem Header="Child 02"/>

<telerik:RadTreeViewItem Header="Child 03"/>

<telerik:RadTreeViewItem Header="Child 04"/>

<telerik:RadTreeViewItem Header="Child 05"/>

<telerik:RadTreeViewItem Header="Child 06"/>

</telerik:RadTreeViewItem>

</telerik:RadTreeView>

</telerik:RadPanelBarItem>

</telerik:RadPanelBar>

and this is the style i use:

<Style x:Key="sidePanelRadPanelBarItemStyle" TargetType="{x:Type telerik:RadPanelBarItem}">

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="Gainsboro" Offset="-0.5"/>

<GradientStop Color="Black" Offset="0.2"/>

<GradientStop Color="Black" Offset="1"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="BorderBrush" Value="#FF848484"/>

<Setter Property="BorderThickness" Value="0"/>

<Setter Property="Foreground" Value="White"/>

<Setter Property="Padding" Value="5"/>

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

<Setter Property="VerticalContentAlignment" Value="Stretch"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">

<Grid x:Name="RootElement">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid x:Name="HeaderRow" Background="Transparent">

<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>

</Grid>

<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed" VerticalAlignment="Top" >

<ItemsPresenter/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsFocused" Value="True">

<Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>

</Trigger>

<Trigger Property="IsExpanded" Value="True">

<Setter Property="Visibility" TargetName="ItemsContainer" Value="Visible"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<telerik:PanelBarPanel IsItemsHost="True"/>

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="Level" Value="1">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">

<Grid x:Name="RootElement" SnapsToDevicePixels="True">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid x:Name="HeaderRow">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="5">

<Border BorderBrush="White" BorderThickness="0.2" Background="{TemplateBinding Background}"/>

</Border>

<ContentControl x:Name="Header" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>

<Rectangle x:Name="rect1" Grid.Column="3" HorizontalAlignment="Right" Margin="0,0,7.75,4.5" Stroke="{x:Null}" StrokeThickness="2" Width="13.5" Fill="#FF7C7C7C" Height="3.25" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5"/>

<Rectangle x:Name="rect2" Grid.Column="3" HorizontalAlignment="Right" Margin="0,5.277,7.75,0" Stroke="{x:Null}" StrokeThickness="2" Width="13.5" Fill="#FF7C7C7C" Height="3.25" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5"/>

<Rectangle x:Name="rect3" Grid.Column="3" HorizontalAlignment="Right" Margin="0,10.527,7.75,9.5" Stroke="{x:Null}" StrokeThickness="2" Width="13.5" Fill="#FF7C7C7C" Height="Auto" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5"/>

</Grid>

<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed" Background="Gray" >

<telerik:LayoutTransformControl x:Name="transformationRoot" IsTabStop="False">

<ItemsPresenter/>

</telerik:LayoutTransformControl>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsSelected" Value="True">

<Setter Property="Fill" TargetName="rect1" Value="White"/>

<Setter Property="Fill" TargetName="rect2" Value="White"/>

<Setter Property="Fill" TargetName="rect3" Value="White"/>

</Trigger>

<Trigger Property="IsFocused" Value="True">

<Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>

</Trigger>

<Trigger Property="IsExpanded" Value="True">

</Trigger.ExitActions>-->

<Setter Property="Fill" TargetName="rect1" Value="White"/>

<Setter Property="Fill" TargetName="rect2" Value="White"/>

<Setter Property="Fill" TargetName="rect3" Value="White"/>

<Setter Property="Visibility" TargetName="ItemsContainer" Value="Visible"/>

</Trigger>

<Trigger Property="IsEnabled" Value="False">

<Setter Property="Foreground" TargetName="Header" Value="Gray"/>

</Trigger>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="Fill" TargetName="rect1" Value="SteelBlue"/>

<Setter Property="Fill" TargetName="rect2" Value="SteelBlue"/>

<Setter Property="Fill" TargetName="rect3" Value="SteelBlue"/>

<Setter Property="Foreground" TargetName="Header" Value="SteelBlue"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Trigger>

</Style.Triggers>

</Style>

In this style I basically retemplate the header visual. now with this style applied when i tried to hover the radtreeview, it is highlighted, how can i remove the highlight?
I've tried to add RadPanelBarItem inside the RadPanelBarItem and yeah the highlight there is removed, but how can I do that if the RadPanelBarItem's child is RadTreeView?

Thanks,
Dhany

Styling Non-RadPanelBarItem inside RadPanelBarItem

1 Answer, 1 is accepted