locked
tree view item highlights RRS feed

  • Question

  • How can i get rid of or change the blue highlight that happens when you click on a tree view item or the controls under it? 
    Friday, May 1, 2009 6:30 PM

Answers

  • You need to create a custom style/ControlTemplate for TreeViewItem.  You'll want to  use a trigger to check the IsSelected property.

     If you grab a copy of XamlPad, there is a button on there to view all the templates and styles for the built in controls.  Take a look at the xaml for TreeViewItem and you should see what you would need to modify or you could use it as a base for a new template.



     
    • Proposed as answer by Frankenspank Friday, May 1, 2009 8:45 PM
    • Marked as answer by Tao Liang Tuesday, May 5, 2009 2:03 AM
    Friday, May 1, 2009 8:20 PM
  • Here is an example of what such a control template might look like:

       <ControlTemplate x:Key="AppTreeViewItemTemplate" TargetType="{x:Type TreeViewItem}">
          <Grid Margin="4,1,1,1">
             <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
             </Grid.RowDefinitions>
             <ToggleButton Background="Green"
                x:Name="Expander"
                Style="{StaticResource ExpandCollapseToggleStyle}"
                IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                ClickMode="Press"/>
             <Border
                   x:Name="Bd1"
                   Grid.Column="1"
                   CornerRadius="2"
                   BorderThickness="1"
                   Background="Transparent"
                   BorderBrush="Transparent">
                <Border
                   x:Name="Bd2"
                   Grid.Column="1"
                   CornerRadius="2"
                   BorderThickness="1"
                   Background="Transparent"
                   BorderBrush="Transparent"
                   Padding="1,0,4,0">
                   <ContentPresenter 
                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         Margin="0,-1,0,-1"
                         x:Name="PART_Header"
                         ContentSource="Header"/>
                </Border>
             </Border>
             <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
          </Grid>
          <ControlTemplate.Triggers>
             <Trigger Property="IsExpanded" Value="False">
                <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
             </Trigger>
             <Trigger Property="HasItems" Value="False">
                <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
             </Trigger>
             <Trigger Property="IsSelected" Value="True">
                <Setter Property="BorderBrush" TargetName="Bd1" Value="{StaticResource TreeViewItemSelectedBd1Brush}"/>
                <Setter Property="BorderBrush" TargetName="Bd2" Value="{StaticResource TreeViewItemSelectedBd2Brush}"/>
                <Setter Property="Background" TargetName="Bd2" Value="{StaticResource TreeViewItemSelectedBd2BackgroundBrush}"/>
             </Trigger>
             <Trigger Property="IsMouseOver" Value="True" SourceName="PART_Header">
                <Setter Property="BorderBrush" TargetName="Bd1" Value="{StaticResource TreeViewItemMouseOverBd1Brush}"/>
                <Setter Property="BorderBrush" TargetName="Bd2" Value="{StaticResource TreeViewItemMouseOverBd2Brush}"/>
                <Setter Property="Background" TargetName="Bd2" Value="{StaticResource TreeViewItemMouseOverBd2BackgroundBrush}"/>
             </Trigger>
             <MultiTrigger>
                <MultiTrigger.Conditions>
                   <Condition Property="IsSelected" Value="True"/>
                   <Condition Property="IsSelectionActive" Value="False"/>
                </MultiTrigger.Conditions>
                <Setter Property="BorderBrush" TargetName="Bd1" Value="{StaticResource TreeViewItemLostFocusBd1Brush}"/>
                <Setter Property="BorderBrush" TargetName="Bd2" Value="{StaticResource TreeViewItemLostFocusBd2Brush}"/>
                <Setter Property="Background" TargetName="Bd2" Value="{StaticResource TreeViewItemLostFocusBd2BackgroundBrush}"/>
             </MultiTrigger>
          </ControlTemplate.Triggers>
       </ControlTemplate>

    • Marked as answer by Tao Liang Tuesday, May 5, 2009 2:03 AM
    Monday, May 4, 2009 2:57 PM

All replies

  • You need to create a custom style/ControlTemplate for TreeViewItem.  You'll want to  use a trigger to check the IsSelected property.

     If you grab a copy of XamlPad, there is a button on there to view all the templates and styles for the built in controls.  Take a look at the xaml for TreeViewItem and you should see what you would need to modify or you could use it as a base for a new template.



     
    • Proposed as answer by Frankenspank Friday, May 1, 2009 8:45 PM
    • Marked as answer by Tao Liang Tuesday, May 5, 2009 2:03 AM
    Friday, May 1, 2009 8:20 PM
  • Here is an example of what such a control template might look like:

       <ControlTemplate x:Key="AppTreeViewItemTemplate" TargetType="{x:Type TreeViewItem}">
          <Grid Margin="4,1,1,1">
             <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
             </Grid.RowDefinitions>
             <ToggleButton Background="Green"
                x:Name="Expander"
                Style="{StaticResource ExpandCollapseToggleStyle}"
                IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                ClickMode="Press"/>
             <Border
                   x:Name="Bd1"
                   Grid.Column="1"
                   CornerRadius="2"
                   BorderThickness="1"
                   Background="Transparent"
                   BorderBrush="Transparent">
                <Border
                   x:Name="Bd2"
                   Grid.Column="1"
                   CornerRadius="2"
                   BorderThickness="1"
                   Background="Transparent"
                   BorderBrush="Transparent"
                   Padding="1,0,4,0">
                   <ContentPresenter 
                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         Margin="0,-1,0,-1"
                         x:Name="PART_Header"
                         ContentSource="Header"/>
                </Border>
             </Border>
             <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
          </Grid>
          <ControlTemplate.Triggers>
             <Trigger Property="IsExpanded" Value="False">
                <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
             </Trigger>
             <Trigger Property="HasItems" Value="False">
                <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
             </Trigger>
             <Trigger Property="IsSelected" Value="True">
                <Setter Property="BorderBrush" TargetName="Bd1" Value="{StaticResource TreeViewItemSelectedBd1Brush}"/>
                <Setter Property="BorderBrush" TargetName="Bd2" Value="{StaticResource TreeViewItemSelectedBd2Brush}"/>
                <Setter Property="Background" TargetName="Bd2" Value="{StaticResource TreeViewItemSelectedBd2BackgroundBrush}"/>
             </Trigger>
             <Trigger Property="IsMouseOver" Value="True" SourceName="PART_Header">
                <Setter Property="BorderBrush" TargetName="Bd1" Value="{StaticResource TreeViewItemMouseOverBd1Brush}"/>
                <Setter Property="BorderBrush" TargetName="Bd2" Value="{StaticResource TreeViewItemMouseOverBd2Brush}"/>
                <Setter Property="Background" TargetName="Bd2" Value="{StaticResource TreeViewItemMouseOverBd2BackgroundBrush}"/>
             </Trigger>
             <MultiTrigger>
                <MultiTrigger.Conditions>
                   <Condition Property="IsSelected" Value="True"/>
                   <Condition Property="IsSelectionActive" Value="False"/>
                </MultiTrigger.Conditions>
                <Setter Property="BorderBrush" TargetName="Bd1" Value="{StaticResource TreeViewItemLostFocusBd1Brush}"/>
                <Setter Property="BorderBrush" TargetName="Bd2" Value="{StaticResource TreeViewItemLostFocusBd2Brush}"/>
                <Setter Property="Background" TargetName="Bd2" Value="{StaticResource TreeViewItemLostFocusBd2BackgroundBrush}"/>
             </MultiTrigger>
          </ControlTemplate.Triggers>
       </ControlTemplate>

    • Marked as answer by Tao Liang Tuesday, May 5, 2009 2:03 AM
    Monday, May 4, 2009 2:57 PM