locked
Changing the Style of selected treeviewitem. RRS feed

  • Question

  • Hi,

    I have a treeview that I wish to change the style of the currently selected treeviewitem node to make it more VISTA like. Currently the selected node is the default solid blue rectangle. I would like it to be a rounded rectangle filled light blue if the treeview is in focus otherwise a rounded rectange filled light grey if not in focus. Any pointers on how to achieve this would be appreciated.

    The definition of my treeview is :-

    <TreeView x:Name="taskTree"  Grid.Column="0" BorderThickness="1">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:TaskFunction}" 
                                      ItemsSource="{Binding Path=TaskList}">
                <StackPanel Orientation="Horizontal">
                    <Image Name="img" 
                           Width="16" 
                           Height="16" 
                           Stretch="Fill"                                               
                           Source="Images/ZoomHS.png"/>
                    <TextBlock Text="{Binding Path=TaskName}" Margin="5,3,0,3"/>
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.Resources>
    </TreeView>

    Thanks

    Richard

    Thursday, December 3, 2009 3:53 PM

Answers

  • Hi Richard,

    You can give a custom template for the TreeViewItems, and use a trigger to modify the highlightten visual style when the item is selected. The sample below demonstrates how to do this, please put attention to the cold in bold.

     <Window.Resources>
            <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
                <Setter Property="Focusable" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border Width="19"
                                          Height="13"
                                          Background="#00FFFFFF"
                                          x:Name="Border">
                                <Border Width="9"
                                            Height="9"
                                            Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                                            x:Name="Border1"
                                            SnapsToDevicePixels="True"
                                            BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"
                                            BorderThickness="1,1,1,1">
                                    <Path Fill="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"
                                          Margin="1,1,1,1"
                                          x:Name="ExpandPath"
                                          Data="M0,2L0,3 2,3 2,5 3,5 3,3 5,3 5,2 3,2 3,0 2,0 2,2z"/>
                                </Border>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Data" Value="M0,2L0,3 5,3 5,2z" TargetName="ExpandPath"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TreeViewItem}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MinWidth="19" Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <ToggleButton x:Name="Expander"
                                              Style="{StaticResource ExpandCollapseToggleStyle}"
                                              IsChecked="{Binding Path=IsExpanded,
                                                          RelativeSource={RelativeSource TemplatedParent}}"
                                              ClickMode="Press"/>
                                <Border Name="Bd"
                                              Grid.Column="1"
                                              Background="{TemplateBinding Background}"
                                              BorderBrush="{TemplateBinding BorderBrush}"
                                              BorderThickness="{TemplateBinding BorderThickness}"
                                              Padding="{TemplateBinding Padding}">
                                    <ContentPresenter x:Name="PART_Header" ContentSource="Header"
                                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                                </Border>
                                <ItemsPresenter x:Name="ItemsHost" Grid.Row="1"  Grid.Column="1" Grid.ColumnSpan="2"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter TargetName="Bd" Property="Background" Value="LightBlue"/>
                                    <Setter TargetName="Bd" Property="CornerRadius" Value="4,4,4,4"/>
                                </Trigger>

                                <Trigger Property="IsExpanded"  Value="false">
                                    <Setter TargetName="ItemsHost"  Property="Visibility" Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="HasItems" Value="false">
                                    <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="HasHeader" Value="false"/>
                                        <Condition Property="Width" Value="Auto"/>
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="PART_Header"  Property="MinWidth"  Value="75"/>
                                </MultiTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="HasHeader"  Value="false"/>
                                        <Condition Property="Height"  Value="Auto"/>
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="PART_Header"   Property="MinHeight"  Value="19"/>
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Style>
        </Window.Resources>
        <Grid>
            <TreeView Margin="21,12,12,21" Name="treeView1" >
                <TreeView.Resources>
                  
                </TreeView.Resources>
                <TreeViewItem Header="aaaa" IsExpanded="True" >
                    <TreeViewItem Header="a11" IsExpanded="True">
                        <TreeViewItem Header="a111" />
                        <TreeViewItem Header="a112" />
                        <TreeViewItem Header="a113" />
                    </TreeViewItem>
                    <TreeViewItem Header="a12" />
                    <TreeViewItem Header="a13" />
                    <TreeViewItem Header="a14" />
                </TreeViewItem>
                <TreeViewItem Header="a5" />
                <TreeViewItem Header="a2" />
                <TreeViewItem Header="a3" />
                <TreeViewItem Header="a4" />
            </TreeView>
        </Grid>


    If anything is unclear, please feel free to let me know.

    Best Regards,
    Zhi-Xin Ye
    MSDN Subscriber Support in Forum
    If you have any feedback on our support, please contact msdnmg@microsoft.com



    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework!
    • Marked as answer by r.gordon Friday, December 4, 2009 4:18 PM
    Friday, December 4, 2009 7:04 AM

All replies

  • You'd have to include a border or something of the sort to change the color of and you'd just use a trigger to detect the IsSelected property and change the color to whatever you wanted.

    If you've never used triggers or aren't familiar with wpf it looks something like this:

    <Trigger Property="IsSelected" Value="True">
         <Setter TargetName="BackgroundBorder" Property="Background" Value="LightBlue"/>
    </Trigger>

    Of course you can change the color, name, etc.

    Thursday, December 3, 2009 8:46 PM
  • Hi Richard,

    You can give a custom template for the TreeViewItems, and use a trigger to modify the highlightten visual style when the item is selected. The sample below demonstrates how to do this, please put attention to the cold in bold.

     <Window.Resources>
            <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
                <Setter Property="Focusable" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border Width="19"
                                          Height="13"
                                          Background="#00FFFFFF"
                                          x:Name="Border">
                                <Border Width="9"
                                            Height="9"
                                            Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                                            x:Name="Border1"
                                            SnapsToDevicePixels="True"
                                            BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"
                                            BorderThickness="1,1,1,1">
                                    <Path Fill="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"
                                          Margin="1,1,1,1"
                                          x:Name="ExpandPath"
                                          Data="M0,2L0,3 2,3 2,5 3,5 3,3 5,3 5,2 3,2 3,0 2,0 2,2z"/>
                                </Border>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Data" Value="M0,2L0,3 5,3 5,2z" TargetName="ExpandPath"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TreeViewItem}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MinWidth="19" Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <ToggleButton x:Name="Expander"
                                              Style="{StaticResource ExpandCollapseToggleStyle}"
                                              IsChecked="{Binding Path=IsExpanded,
                                                          RelativeSource={RelativeSource TemplatedParent}}"
                                              ClickMode="Press"/>
                                <Border Name="Bd"
                                              Grid.Column="1"
                                              Background="{TemplateBinding Background}"
                                              BorderBrush="{TemplateBinding BorderBrush}"
                                              BorderThickness="{TemplateBinding BorderThickness}"
                                              Padding="{TemplateBinding Padding}">
                                    <ContentPresenter x:Name="PART_Header" ContentSource="Header"
                                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                                </Border>
                                <ItemsPresenter x:Name="ItemsHost" Grid.Row="1"  Grid.Column="1" Grid.ColumnSpan="2"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter TargetName="Bd" Property="Background" Value="LightBlue"/>
                                    <Setter TargetName="Bd" Property="CornerRadius" Value="4,4,4,4"/>
                                </Trigger>

                                <Trigger Property="IsExpanded"  Value="false">
                                    <Setter TargetName="ItemsHost"  Property="Visibility" Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="HasItems" Value="false">
                                    <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="HasHeader" Value="false"/>
                                        <Condition Property="Width" Value="Auto"/>
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="PART_Header"  Property="MinWidth"  Value="75"/>
                                </MultiTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="HasHeader"  Value="false"/>
                                        <Condition Property="Height"  Value="Auto"/>
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="PART_Header"   Property="MinHeight"  Value="19"/>
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Style>
        </Window.Resources>
        <Grid>
            <TreeView Margin="21,12,12,21" Name="treeView1" >
                <TreeView.Resources>
                  
                </TreeView.Resources>
                <TreeViewItem Header="aaaa" IsExpanded="True" >
                    <TreeViewItem Header="a11" IsExpanded="True">
                        <TreeViewItem Header="a111" />
                        <TreeViewItem Header="a112" />
                        <TreeViewItem Header="a113" />
                    </TreeViewItem>
                    <TreeViewItem Header="a12" />
                    <TreeViewItem Header="a13" />
                    <TreeViewItem Header="a14" />
                </TreeViewItem>
                <TreeViewItem Header="a5" />
                <TreeViewItem Header="a2" />
                <TreeViewItem Header="a3" />
                <TreeViewItem Header="a4" />
            </TreeView>
        </Grid>


    If anything is unclear, please feel free to let me know.

    Best Regards,
    Zhi-Xin Ye
    MSDN Subscriber Support in Forum
    If you have any feedback on our support, please contact msdnmg@microsoft.com



    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework!
    • Marked as answer by r.gordon Friday, December 4, 2009 4:18 PM
    Friday, December 4, 2009 7:04 AM
  • Thank you for your answers, I understand how it fits together now.
    Friday, December 4, 2009 4:18 PM