Benutzerdefinierte WPF TreeViewItem Stil verhält falsch, wenn Databound

Question

ich eine TreeViewItemStyle auf mein Bedürfnis angepasst haben und es funktioniert super, wenn ich meine TreeViewItems wie so fest einprogrammiert haben:

<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> 

(ich kann keine Bilder veröffentlichen, also muss ich verlinken ihnen)

Images of Differences

Erstes Bild ist perfekt, aber der zweite wird erstellt, wenn ich versuche, meine TreeView Databind. Der folgende Code funktioniert so gut wie Hierarchical Data, aber es zeigt anders als ich es möchte.

<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> 

können Sie den ekligen Effekt sehen, die es erstellt.

Was läuft falsch?

Mein Stil ist unter (einige Bürsten und Animationen für das Lesen leicht entfernt):

<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

Vom Aussehen des Bildes könnte dies ein Problem mit dem Elementcontainer sein. Wenn Sie eine Auflistung an ein ItemsControl binden, sollten Sie das Containerelement nicht in das DataTemplate einfügen. Das ItemsControl wickelt das DataTemplate in einem entsprechenden Container (in diesem Fall ein TreeViewItem).
Da Ihre DataTemplate einen anderen Container enthält, erhalten Sie zwei,