WPF personnalisé de style TreeViewItem se comporte de manière incorrecte lorsque databound

Question

Je l'ai adapté un TreeViewItemStyle à mes besoins et il fonctionne très bien quand je l'ai hardcoded mes TreeViewItems comme ceci:

<TreeView Grid.Column="0" 
              HorizontalAlignment="Stretch" 
              Name="treeView1" 
              VerticalAlignment="Stretch" >
        <TreeView.Items>
            <TreeViewItem Header="McDonalds" IsExpanded="True">
                <TreeViewItem.Items>
                    <TreeViewItem Header="Burger" IsExpanded="True" IsSelected="True">
                        <TreeViewItem.Items>
                            <TreeViewItem Header="Meat" />
                        </TreeViewItem.Items>
                    </TreeViewItem>
                </TreeViewItem.Items>
            </TreeViewItem>
            <TreeViewItem Header="KFC" >
                <TreeViewItem.Items>
                    <TreeViewItem Header="Chicken"/>
                </TreeViewItem.Items>
            </TreeViewItem>
            <TreeViewItem Header="Hungry Jacks">
                <TreeViewItem.Items>
                    <TreeViewItem Header="Onion Rings" />
                </TreeViewItem.Items>
            </TreeViewItem>
        </TreeView.Items>
    </TreeView>

(je ne peux pas les images post, donc je dois créer un lien vers eux)

Images des différences

Première image est parfaite, mais le second est créé lorsque je tente de DataBind mon TreeView. Le code ci-dessous fonctionne très bien jusqu'à hierarchiques va données, mais il affiche différemment que je veux.

<TreeView DataContext="{Binding TopLevelCategories}">
<TreeView.Resources>
    <HierarchicalDataTemplate DataType="{x:Type model:Category}" ItemsSource="{Binding Path=Category1}">
        <TreeViewItem Header="{Binding Path=Name}" Tag="{Binding}" />
    </HierarchicalDataTemplate>
</TreeView.Resources>

Vous pouvez voir l'effet dégueu qu'il crée.

Qu'est-ce qui ne va pas?

Mon style est ci-dessous (quelques brosses et animations retirées pour faciliter la lecture):

    <Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
    <Setter Property="Foreground" Value="#FFD0EBFF" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                <Border x:Name="border1" Padding="1,1,0,0">
                    <Grid Width="Auto" Height="Auto">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="19" Width="Auto" />
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.5*"/>
                            <RowDefinition Height="0.5*"/>
                            <RowDefinition Height="0.5*" />
                        </Grid.RowDefinitions>
                        <ToggleButton x:Name="Expander"
                                      Style="{StaticResource ExpandCollapseToggleStyle}"
                                      IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                      ClickMode="Press"
                                      Grid.RowSpan="2"/>
                        <Border Grid.Column="1" Grid.RowSpan="2" Background="#FF062B63" CornerRadius="0,0,0,0" x:Name="border1_0" Padding="1" ></Border>
                        <Border Width="Auto" Height="Auto" Grid.Column="1" Grid.RowSpan="2" Margin="1" CornerRadius="0,0,0,0" x:Name="border1_1" Background="{DynamicResource headerNormalGradient}">
                        </Border>
                        <Border SnapsToDevicePixels="True" Grid.Column="1" Grid.Row="0" Margin="1" CornerRadius="0,0,0,0" x:Name="border1_2" Background="{DynamicResource headerNormalGlare}">
                        </Border>
                        <Rectangle x:Name="leftGlare" HorizontalAlignment="Left" Margin="1" Width="1" Stroke="{x:Null}" StrokeThickness="0" Grid.Column="1" Grid.RowSpan="2">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                                    <GradientStop Color="#00C0DAFB" Offset="0"/>
                                    <GradientStop Color="#57CDE2FF" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Border Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <ContentPresenter Margin="4,3,4,5" ContentSource="Header"/>
                        </Border>
                        <Rectangle x:Name="WhiteRectangle"
                                   HorizontalAlignment="Stretch" 
                                   VerticalAlignment="Stretch" 
                                   Grid.RowSpan="2"
                                   Grid.Column="1" 
                                   Fill="{StaticResource Arrow58}"
                                   Margin="0,0,-1,0" 
                                   Visibility="Hidden"/>
                        <Rectangle x:Name="BlackRectangle" 
                                   HorizontalAlignment="Stretch" 
                                   VerticalAlignment="Stretch" 
                                   Grid.RowSpan="2"
                                   Grid.Column="1" 
                                   Fill="{StaticResource Arrow57}"
                                   Margin="0,0,0,0"
                                   Visibility="Hidden"/>
                        <ItemsPresenter x:Name="ChildItems" Grid.Column="1" Grid.Row="2"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded"
                                 Value="false">
                        <Setter TargetName="ChildItems"
                                    Property="Visibility"
                                    Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="HasItems"
                                 Value="false">
                        <Setter TargetName="Expander"
                                    Property="Visibility"
                                    Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="IsSelected"
                                 Value="true">
                        <Setter TargetName="WhiteRectangle"
                                    Property="Visibility"
                                    Value="Visible" />
                        <Setter TargetName="BlackRectangle"
                                    Property="Visibility"
                                    Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

De l'apparence de l'image que cela pourrait être un problème avec le conteneur de l'élément. Lorsque vous liez une collection à certains ItemsControl vous ne devriez pas mettre l'élément de récipient à l'intérieur du DataTemplate, ItemsControl va envelopper votre DataTemplate dans un récipient approprié lui-même (dans ce cas un TreeViewItem).
Ainsi, depuis votre DataTemplate a un autre récipient, il vous finissez avec deux,