Styling Non-RadPanelBarItem inside RadPanelBarItem

[dhany]

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"/>
                        <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>
                </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"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid x:Name="HeaderRow">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <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>
                        </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

[dhany]

nevermind my question, just got an insight from other thread and realized that I need to restyle the ItemContainerStyle too >_>

thanks anyway.