Home / Community & Support / Developer Productivity Tools Forums / WPF > PanelBar > Styling Non-RadPanelBarItem inside RadPanelBarItem

• dhany

  Posted on Mar 8, 2011 (permalink)

  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

  Reply

• dhany

  Posted on Mar 8, 2011 (permalink)

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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > PanelBar > Styling Non-RadPanelBarItem inside RadPanelBarItem