Styling Non-RadPanelBarItem inside RadPanelBarItem

2 posts, 0 answers
  1. dhany
    dhany avatar
    2 posts
    Member since:
    Mar 2011

    Posted 08 Mar 2011 Link to this post

    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
  2. dhany
    dhany avatar
    2 posts
    Member since:
    Mar 2011

    Posted 08 Mar 2011 Link to this post

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

    thanks anyway.
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top