TreeViewItem - Use ControlTemplate and HierarchicalDataTemplate together

Posted by CrownJ on Stack Overflow See other posts from Stack Overflow or by CrownJ
Published on 2010-05-18T17:45:32Z Indexed on 2010/05/18 17:50 UTC
Read the original article Hit count: 748

Filed under:
|
|

I'm using HierarchicalDataTemplate in my TreeView, and I wanted to also overwrite the default template for the TreeViewItem so that when an item is selected, it only highlights the text, not including the icon next to it.

<TreeView.ItemTemplate>
     <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                        <TreeViewItem Style="{StaticResource TreeViewItemStyle}" Header="{Binding DisplayText}" />

      </HierarchicalDataTemplate>
</TreeView.ItemTemplate>


            <TreeView.Resources>
                <Style x:Key="TreeViewItemFocusVisual">
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="Width" Value="19"/>
                    <Setter Property="Height" Value="13"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Border Width="19" Height="13" Background="Transparent">
                                    <Border Width="9" Height="9" SnapsToDevicePixels="true" BorderBrush="#FF7898B5" BorderThickness="1" CornerRadius="1">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
                                                <GradientStop Color="White" Offset=".2"/>
                                                <GradientStop Color="#FFC0B7A6" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Path x:Name="ExpandPath" Fill="Black" Margin="1,1,1,1" Data="M 0 2 L 0 3 L 2 3 L 2 5 L 3 5 L 3 3 L 5 3 L 5 2 L 3 2 L 3 0 L 2 0 L 2 2 Z"/>
                                    </Border>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked" Value="True">
                                        <Setter Property="Data" TargetName="ExpandPath" Value="M 0 2 L 0 3 L 5 3 L 5 2 Z"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    <Setter Property="Padding" Value="1,0,0,0"/>
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
                                    <StackPanel Orientation="Horizontal" Grid.Column="1" >
                                        <Image Width="16" Height="16" Margin="3,0" Source="{Binding Path=ImageSource}" />
                                        <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="0" Padding="0">
                                            <ContentPresenter x:Name="PART_Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/>
                                        </Border>
                                    </StackPanel>
                                    <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="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                        <Setter Property="Control.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected" Value="true"/>
                                            <Condition Property="IsSelectionActive" Value="false"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                                        <Setter Property="Control.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                                    </MultiTrigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="VirtualizingStackPanel.IsVirtualizing" Value="true">
                            <Setter Property="ItemsPanel">
                                <Setter.Value>
                                    <ItemsPanelTemplate>
                                        <VirtualizingStackPanel/>
                                    </ItemsPanelTemplate>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TreeView.Resources>

I couldn't find a way to use both the HierarchicalDataTemplate and ControlTemplate together so I can specify the ItemsSource and also change parts of the control's behavior. When I do the above code, it won't select the treeviewitem at all.

© Stack Overflow or respective owner

Related posts about treeview

Related posts about wpf