How to make the selected item in the radtreeview to have a style applied (or) to highlight the radtreeview selected item when a radpane is used?

3 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Aug 2012

    Posted 28 Mar 2014 Link to this post

    Code:

    <UserControl.Resources>
    <ResourceDictionary>
    <ControlTemplate x:Key="RadTreeViewItemControlTemplate1" TargetType="{x:Type telerik:RadTreeViewItem}">
    <Grid x:Name="RootElement">
    <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}" SnapsToDevicePixels="True">
    <Border x:Name="SelectionUnfocusedVisual" BorderBrush="#FFDBDBDB" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
    <Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="0">
    <Border.Background>
    <LinearGradientBrush EndPoint="0,1">
    <GradientStop Color="#FFF8F6F9" Offset="0"/>
    <GradientStop Color="#FFF0F0F0" Offset="1"/>
    </LinearGradientBrush>
    </Border.Background>
    </Border>
    </Border>
    </Grid>
    </Grid>
    <ControlTemplate.Triggers>
    <MultiTrigger>
    <MultiTrigger.Conditions>
    <Condition Property="IsSelected" Value="True"/>
    <Condition Property="IsSelectionActive" Value="False"/>
    </MultiTrigger.Conditions>
    <Setter Property="Visibility" TargetName="SelectionUnfocusedVisual" Value="Visible"/>
    </MultiTrigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </ResourceDictionary>
    </UserControl.Resources>


    <DockPanel>
    <telerik:RadDocking x:Name="radDocking" Width="245" ConstraintAutoHideArea="False">
    <telerik:RadSplitContainer x:Name="radSplitContainer">
    <telerik:RadPaneGroup x:Name="radGroup">
    <telerik:RadPane x:Name="radPane1" Header="Test" ContextMenuTemplate="{x:Null}" CanUserClose="False" CanFloat="False" Cursor="Hand">
    <Grid>
    <DockPanel LastChildFill="True">
    <telerik:RadTreeView x:Name="radTreeView" DockPanel.Dock="Left" Background="#FF525152" VirtualizingPanel.IsVirtualizing="True">
    <telerik:RadTreeView.Resources>
    <Style TargetType="{x:Type telerik:RadTreeViewItem}">
    <Setter Property="Template" Value="{StaticResource RadTreeViewItemControlTemplate1}" />
    </Style>
    </telerik:RadTreeView.Resources>
    </telerik:RadTreeView>
    </DockPanel>
    </Grid>
    </telerik:RadPane>
    </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
    </telerik:RadDocking>
    </DockPanel>A

    After using the Radpane, the selected item is not having the style applied. If RadTreeView alone is used (without having radpane), the selected item in the radtreeview is having the style SelectionUnfocusedVisual which is working properly (i.e), Selected Item gets Highlighted. How to make the selected item in the radtreeview to have a style applied (or) to highlight the radtreeview selected item when a radpane is used?. Thanks.
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 01 Apr 2014 Link to this post

    Hi John,

    You may find attached a test project where your scenario works as expected. 
    Some changes that I did to your scenario for it to work:
    1. Added ContentControl to the RadTreeViewItemControlTemplate for the TreeView headers to be visualized.
    2. I extended the MinHeight to 20pixels in the RadTreeViewItem style for better visibility of the Border you want to see when Selecting and moving away the Focus from the TreeViewItems
    3. A sample TextBox control to grab the Focus from your control, so that you can observe the desired MultiTrigger change.

    Could you please clarify that this is what you intended? If not - please give us steps to reproduce the unwanted behavior in the same project.

    Regards,
    Evgenia
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. John
    John avatar
    3 posts
    Member since:
    Aug 2012

    Posted 04 Apr 2014 in reply to Evgenia Link to this post

    Hi Evegenia,

                First of all, I Thank You for your reply. 
                I found out the solution. That is we need to update the RadDocking layout once we selected the RadTreeViewItem.

                Solution:
         this.radDocking.UpdateLayout();

                 I updated the RadDocking layout by writing the above code in the MouseLeftButtonUp event of RadTreeView control.

    Regards,
    John
Back to Top