Click here to Skip to main content
15,891,943 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a treeview, for which I wrote the style template of treeview in App.xaml, as I need to apply the style in two or three treeviews in my application. Now my problem is that the togglebutton style works for parent and not for child nodes.
Here for the togglebutton collapse and expand, i added two images(
Resources/Images/arrowexpand.png
and
Resources/Images/arrowcollapse.png
It is working perfectly with parent nodes, but not with child and subchild nodes.
For the child and subchild nodes, the default triangle button comes.
I didn't use MVVM. I don't know where I am going wrong

What I have tried:

Here is my style statements in App.xaml
HTML
<pre><Style TargetType="TreeView">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeView">
                        <Border Name="Border" CornerRadius="5" BorderThickness="2">
                            <Border.BorderBrush>
                                <SolidColorBrush Color="DarkGreen"/>
                            </Border.BorderBrush>
                            <ItemsPresenter/>
                        </Border>


                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Image x:Name="image" Source="Resources/Images/arrowcollapse.png" />
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter TargetName="image" Property="Source" Value="Resources/Images/arrowexpand.png" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style  x:Key="ms" TargetType="TreeViewItem" >
            <Setter Property="IsExpanded" Value="True"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Padding" Value="1,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeViewItem">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MinWidth="19" Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                        <!--     Connecting Lines -->
                           <Rectangle x:Name="HorLn" Margin="9,1,0,0" Height="1" Stroke="#DCDCDC" SnapsToDevicePixels="True"/>
                            <Rectangle x:Name="VerLn" Width="1" Stroke="#DCDCDC" Margin="0,0,1,0" Grid.RowSpan="2" SnapsToDevicePixels="true" Fill="White"/>
                            <ToggleButton Margin="-1,0,0,0" x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
                            <ToggleButton Margin="-1,0,0,0" x:Name="Collapsed" 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}" SnapsToDevicePixels="True">
                                <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" MinWidth="20"/>
                            </Border>
                            <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
                        </Grid>
      
                        <!-- This trigger changes the connecting lines if the item is the last in the list -->
                       
                       <ControlTemplate.Triggers>
                            <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>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bd" Property="Background" Value="Green"/>
                                <Setter Property="Foreground" Value="White"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


In the treeview
HTML
<pre> <TreeView x:Name="myTreeview" ItemContainerStyle="{StaticResource ms}"/>
Posted
Comments
[no name] 21-Mar-19 12:01pm    
A little code-behind and some user controls, is worth a pile of (treeview) template code.
Priya Karthish 21-Mar-19 13:24pm    
My understanding is that when you bind to the style with the ItemContainerstyle,i t should work for all the items in the treeview. My treeview is loaded from the database.I couldn't use MVVM, as we r not following that in our workplace as of now.
Priya Karthish 21-Mar-19 15:43pm    
My understanding is that when you bind the ItemContainerStyle property to the Style template, the style should be binded. My question is when the style get it to the parent node, why not to the child nodes. Please clarify....
Priya Karthish 27-Mar-19 8:52am    
Could someone help me with this issue?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900