Mettez en surbrillance toute la ligne TreeViewItem dans WPF

Question

Si je configure TreeViewItem Background, seul l'en-tête est mis en surbrillance. Comment puis-je surligner toute la ligne? 

J'ai trouvé un article qui résolvait presque un problème http://social.msdn.Microsoft.com/Forums/en-US/wpf/thread/b04f73e2-0b10-4d97-a6da-64df2e30c21d/

Mais il y a quelques problèmes: 1. Il ne met pas en évidence toute la ligne 2. L'arbre a XP style sur Vista. Je voudrais qu'il ressemble à Vista de la même façon, mais si l'utilisateur modifiait le thème en XP - il devrait être XP way . Tant de XAML ...

Des idées, ce que je devrais chercher?

Answer 1

C'est parti pour la troisième fois, un charme. Si vous voulez quelque chose qui ressemble à ceci.

 

Celui-ci prend un peu plus de travail. Je suis sûr qu'il y a plusieurs façons de procéder, mais cette méthode utilise un convertisseur de longueur et une méthode d'extension TreeViewItem pour obtenir la profondeur. Ces deux éléments sont étroitement associés à l'arborescence visuelle TreeViewItem. Par conséquent, si vous commencez à manipuler les modèles, vous risquez d'avoir des problèmes. Encore une fois, voici la partie importante, et ci-dessous le code complet.

<ControlTemplate TargetType="{x:Type TreeViewItem}">
  <ControlTemplate.Resources>
      <local:LeftMarginMultiplierConverter Length="19" x:Key="lengthConverter" />
  </ControlTemplate.Resources>
  <StackPanel>
        <Border Name="Bd"
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          Padding="{TemplateBinding Padding}">
            <Grid Margin="{Binding Converter={StaticResource lengthConverter},
                    RelativeSource={RelativeSource TemplatedParent}}">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="19" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <ToggleButton x:Name="Expander"
                    Style="{StaticResource ExpandCollapseToggleStyle}"
                    IsChecked="{Binding Path=IsExpanded,
                    RelativeSource={RelativeSource TemplatedParent}}"
                    ClickMode="Press"/>

                <ContentPresenter x:Name="PART_Header"
                    Grid.Column="1"
                    ContentSource="Header"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
            </Grid>
      </Border>
      <ItemsPresenter x:Name="ItemsHost" />
    </StackPanel>
    <!-- Triggers -->
</ControlTemplate>

Extension TreeViewDepth

public static class TreeViewItemExtensions
{
    public static int GetDepth(this TreeViewItem item)
    {
        TreeViewItem parent;
        while ((parent = GetParent(item)) != null)
        {
            return GetDepth(parent) + 1;
        }
        return 0;
    }

    private static TreeViewItem GetParent(TreeViewItem item)
    {
        var parent = VisualTreeHelper.GetParent(item);
        while (!(parent is TreeViewItem || parent is TreeView))
        {
            parent = VisualTreeHelper.GetParent(parent);
        }
        return parent as TreeViewItem;
    }
}

LeftMarginMultiplierConverter

public class LeftMarginMultiplierConverter : IValueConverter
{
    public double Length { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var item = value as TreeViewItem;
        if (item == null)
            return new Thickness(0);

        return new Thickness(Length * item.GetDepth(), 0, 0, 0);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new System.NotImplementedException();
    }
}

Contrôle

<TreeView Margin="50" HorizontalContentAlignment="Stretch">
    <TreeViewItem Header="test2"/>
    <TreeViewItem Header="test2">
        <TreeViewItem Header="sub test">
            <TreeViewItem Header="sub test1-1"/>
            <TreeViewItem Header="sub test1-2"/>
        </TreeViewItem>
        <TreeViewItem Header="sub test2"/>
    </TreeViewItem>
    <TreeViewItem Header="test3"/>
</TreeView>

Style complet de TreeViewItem

<SolidColorBrush x:Key="GlyphBrush" Color="#444" />

<!--=================================================================
     TreeViewItem
  ==================================================================-->
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
  <Setter Property="Focusable" Value="False"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ToggleButton">
        <Grid
          Width="15"
          Height="13"
          Background="Transparent">
          <Path x:Name="ExpandPath"
            HorizontalAlignment="Left" 
            VerticalAlignment="Center" 
            Margin="1,1,1,1"
            Fill="{StaticResource GlyphBrush}"
            Data="M 4 0 L 8 4 L 4 8 Z"/>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked"
               Value="True">
            <Setter Property="Data"
                TargetName="ExpandPath"
                Value="M 0 4 L 8 4 L 4 8 Z"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Border>
          <Rectangle Margin="0,0,0,0"
                 StrokeThickness="5"
                 Stroke="Black"
                 StrokeDashArray="1 2"
                 Opacity="0"/>
        </Border>
      </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 Path=HorizontalContentAlignment,
              RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
  <Setter Property="VerticalContentAlignment"
      Value="{Binding Path=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}">
        <ControlTemplate.Resources>
            <local:LeftMarginMultiplierConverter Length="19" x:Key="lengthConverter" />
        </ControlTemplate.Resources>
        <StackPanel>
        <Border Name="Bd"
              Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              Padding="{TemplateBinding Padding}">
            <Grid Margin="{Binding Converter={StaticResource lengthConverter},
                              RelativeSource={RelativeSource TemplatedParent}}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="19" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
          <ToggleButton x:Name="Expander"
                  Style="{StaticResource ExpandCollapseToggleStyle}"
                  IsChecked="{Binding Path=IsExpanded,
                              RelativeSource={RelativeSource TemplatedParent}}"
                  ClickMode="Press"/>

            <ContentPresenter x:Name="PART_Header"
            Grid.Column="1"
                      ContentSource="Header"
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
            </Grid>
          </Border>
          <ItemsPresenter x:Name="ItemsHost" />
        </StackPanel>
        <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="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
            <Setter Property="Foreground"
                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>

Answer 2

_ {L'en-tête TreeViewItem ne s'étire pas?

Ce problème se produit car le modèle par défaut de WPF pour TreeViewItem est configuré en tant que 3 colonnes sur 2 lignes Grid. La première ligne est pour "l'en-tête" (en fait une Border), et la deuxième ligne est pour la ItemsPresenter. Les deux lignes sont rendues visibles ou masquées selon les besoins, afin de développer l’arborescence lorsque vous cliquez sur le petit triangle - qui occupe la colonne zéro de la Grid.

Les deux lignes n'ont vraiment besoin que d'une colonne supplémentaire. Par exemple, dans la deuxième ligne, rien ne doit figurer à la colonne 0, à la ligne 1, car cette partie vide doit être mise en retrait lorsque IsExpanded est vrai. Mais le mystère commence lorsque nous notons que la ItemsPresenter, basée sur la rangée 1 de la colonne 1, spécifie Grid.ColumnSpan=2.

Malheureusement, dans la ligne du haut, la variable Border qui contient l'en-tête est définie sur Grid.Column=1... mais pas ColumnSpan. Comme la colonne 2 de la Grid a Width=*, cela signifie que l'en-tête/la bordure ne s'étire pas horizontalement.

En d'autres termes, il me semble que la conception de la grille à 3 colonnes n'a d'autre objectif que d'empêcher spécifiquement l'étirement de l'en-tête. Autant que je sache, un simple arrangement 2x2 serait plus flexible [edit: voir note de bas de page n ° 2], et prendrait en charge soit l'extension complète ou l'en-tête 'déchiqueté' sans extension, via la variable normale WPF mécanismes d'alignement.

Idéalement, nous changerions la Grid pour ne plus avoir que 2 colonnes au lieu de 3. Comme ce n’est pas si facile, nous allons plutôt faire que l’en-tête s’étende sur 2 colonnes, exactement comme le fait ItemsPresenter. 

Ok, voici un petit programme complet, complet et autonome (réservé au XAML)} qui montre et corrige le problème:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.Microsoft.com/netfx/2007/xaml/presentation"
    xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
    xmlns:r="clr-namespace:System.Reflection;Assembly=mscorlib"
    xmlns:sys="clr-namespace:System;Assembly=mscorlib"
    Width="800" SizeToContent="Manual">

  <TreeView ItemsSource="{Binding Source={StaticResource data}}"
            VirtualizingStackPanel.VirtualizationMode="Recycling"
            VirtualizingStackPanel.IsVirtualizing="True"
            VirtualizingPanel.ScrollUnit="Item">

    <TreeView.Resources>
        <ObjectDataProvider x:Key="data" ObjectInstance="{x:Static sys:AppDomain.CurrentDomain}" MethodName="GetAssemblies" />

        <HierarchicalDataTemplate DataType="{x:Type r:Assembly}" ItemsSource="{Binding Path=DefinedTypes}" >
            <TextBlock Text="{Binding Path=Location}" />
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate DataType="{x:Type sys:Type}" ItemsSource="{Binding Path=CustomAttributes}">
            <TextBlock Text="{Binding Path=Name}" />
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate DataType="{x:Type r:CustomAttributeData}" ItemsSource="{Binding Path=ConstructorArguments}">
            <TextBlock Text="{Binding Path=AttributeType.Name}" />
        </HierarchicalDataTemplate>
    </TreeView.Resources>

    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">

            <!-- == == BEGIN HERE == == -->
            <Style.Resources>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="Grid.ColumnSpan" Value="2" />
                </Style>
            </Style.Resources>
            <!-- == == == END == == == -->

            <Setter Property="Background" Value="LightBlue" />

        </Style>
    </TreeView.ItemContainerStyle>
  </TreeView>
</Window>

Si vous exécutez ce programme comme indiqué, vous verrez quelque chose comme ceci. C'est le comportement corrigé qui vous permet de reprendre le contrôle total du comportement d'étirement de l'en-tête TreeViewItem:

Notez la partie BEGIN/END avec les lignes en pointillé dans la source XAML. Fondamentalement, je viens de définir Grid.ColumnSpan=2 sur la Border incriminée, de sorte qu'elle remplisse la largeur étirée de la Grid. Cet élément est émis par le modèle TreeViewItem. J'ai donc trouvé un moyen efficace de modifier ses propriétés via un ciblage Style dans le dictionnaire resource du TreeViewItem 's Style. Oui, déroutant. Cette Style est accessible via TreeViewItem.ItemContainerStyle. 

Pour voir le comportement interrompu (existant), vous pouvez commenter la partie située entre les lignes en pointillé:

Vous pouvez également définir ces styles dans un dictionnaire de ressources plutôt que d'utiliser la propriété ItemContainerStyle comme je l'ai fait ici. Je l'ai fait de cette façon, car cela minimise l'étendue du correctif, de sorte que les contrôles Border non liés ne soient pas affectés. Si vous avez besoin d'une méthode plus discriminante pour cibler uniquement ce contrôle, vous pourrez peut-être tirer parti du fait qu'il possède Name='Bd'.

---

[edit:] Cette solution ne pas utilise la réflexion! Ne soyez pas effrayé par les données démodées sans signification - cela n’a rien à voir avec ce problème; c'était simplement le moyen le plus simple de saisir des données hiérarchiques à des fins de démonstration, tout en gardant un programme minuscule.

---

[edit # 2:] Je viens de me rendre compte que ce que les concepteurs essayaient d'éviter avec l'agencement de grille 3x2 était l'effet inesthétique suivant (exagéré ici par une capture d'écran agrandie). Donc, si vous adoptez l’une des solutions de cette page, sachez que vous ne voudrez peut-être pas cela:

Answer 3

Si vous voulez dire quelque chose comme cette capture d'écran

TreeViewItem pleine largeur http://www.bendewey.com/code/treeViewFullWidth2.png

Update Comme indiqué, cet exemple présente le défaut d'être mis en retrait sur les sous-éléments

TreeViewItem pleine largeur http://www.bendewey.com/code/treeViewFullWidth2a.png

Alors cela devrait vous aider. Il est également basé sur http://msdn.Microsoft.com/en-us/library/ms788727.aspx vous pouvez modifier le modèle de TreeViewItem en StackPanel et définir la marge de gauche de ItemsPanel sur 19. Ensuite, dans TreeView Définissez HorizontalContentAlignment = "Stretch". Je joins la ressource complète ci-dessous, mais voici la partie importante.

<ControlTemplate TargetType="{x:Type TreeViewItem}">
<StackPanel>
    <Border Name="Bd"
      Background="{TemplateBinding Background}"
      BorderBrush="{TemplateBinding BorderBrush}"
      BorderThickness="{TemplateBinding BorderThickness}"
      Padding="{TemplateBinding Padding}">
        <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="19" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
              <ToggleButton x:Name="Expander"
                      Style="{StaticResource ExpandCollapseToggleStyle}"
                      IsChecked="{Binding Path=IsExpanded,
                                  RelativeSource={RelativeSource TemplatedParent}}"
                      ClickMode="Press"/>
              <ContentPresenter x:Name="PART_Header"
                    Grid.Column="1"
                        ContentSource="Header"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
        </Grid>
  </Border>
  <ItemsPresenter x:Name="ItemsHost" Margin="19,0,0,0" />
</StackPanel>
<!-- Triggers -->
</ControlTemplate>

Contrôle

<TreeView Margin="50" HorizontalContentAlignment="Stretch">
    <TreeViewItem Header="test2"/>
    <TreeViewItem Header="test2">
        <TreeViewItem Header="sub test"/>
        <TreeViewItem Header="sub test2"/>
    </TreeViewItem>
    <TreeViewItem Header="test3"/>
</TreeView>

Ressources

<SolidColorBrush x:Key="GlyphBrush" Color="#444" />

<!--=================================================================
      TreeViewItem
  ==================================================================-->
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
  <Setter Property="Focusable" Value="False"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ToggleButton">
        <Grid
          Width="15"
          Height="13"
          Background="Transparent">
          <Path x:Name="ExpandPath"
            HorizontalAlignment="Left" 
            VerticalAlignment="Center" 
            Margin="1,1,1,1"
            Fill="{StaticResource GlyphBrush}"
            Data="M 4 0 L 8 4 L 4 8 Z"/>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked"
               Value="True">
            <Setter Property="Data"
                TargetName="ExpandPath"
                Value="M 0 4 L 8 4 L 4 8 Z"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Border>
          <Rectangle Margin="0,0,0,0"
                 StrokeThickness="5"
                 Stroke="Black"
                 StrokeDashArray="1 2"
                 Opacity="0"/>
        </Border>
      </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 Path=HorizontalContentAlignment,
              RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
  <Setter Property="VerticalContentAlignment"
      Value="{Binding Path=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}">
        <StackPanel>
            <Border Name="Bd"
              Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              Padding="{TemplateBinding Padding}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="19" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                  <ToggleButton x:Name="Expander"
                          Style="{StaticResource ExpandCollapseToggleStyle}"
                          IsChecked="{Binding Path=IsExpanded,
                                      RelativeSource={RelativeSource TemplatedParent}}"
                          ClickMode="Press"/>
                <ContentPresenter x:Name="PART_Header"
                            Grid.Column="1"
                          ContentSource="Header"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
            </Grid>
          </Border>
          <ItemsPresenter x:Name="ItemsHost" Margin="19,0,0,0" />
        </StackPanel>
        <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="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
            <Setter Property="Foreground"
                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>

Answer 4

C'est de loin la solution la plus simple. Créez simplement un rectangle, appelez-le Hb et définissez sa marge à -100 pixels et non visible. Ne le définissez sur Visible que lorsque vous l'avez sélectionné ou que vous passez la souris dessus. C'est un hack, mais vous pouvez utiliser jusqu'à 5 niveaux de TreeViewItems imbriqués (100> 19 * 5)

     <ControlTemplate TargetType="{x:Type TreeViewItem}">
  <Grid>
   <Grid.ColumnDefinitions>
    <ColumnDefinition MinWidth="19" Width="Auto"/>
    <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition/>
   </Grid.RowDefinitions>
                        <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" VerticalAlignment="Top" Panel.ZIndex="1"/>
   <Rectangle x:Name="Hb" Width="Auto" Height="Auto" Grid.ColumnSpan="2" Margin="-100,0,0,0" Panel.ZIndex="-1" Visibility="Hidden" />
                        <Border x:Name="Bd" SnapsToDevicePixels="true" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Column="1" Panel.ZIndex="0">
    <ContentPresenter x:Name="PART_Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" HorizontalAlignment="Stretch"/>
   </Border>
   <ItemsPresenter x:Name="ItemsHost" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="19,0,0,0"/>
  </Grid>

Answer 5

Si vous voulez dire quelque chose comme cette capture d'écran

LineItem Mise en surbrillance dans une TreeView http://www.bendewey.com/code/treeViewFullWidth.png

Alors cela devrait vous aider. Son basé sur http://msdn.Microsoft.com/en-us/library/ms788727.aspx vous pouvez apporter quelques modifications à la présentation de la grille de TreeViewItem. Fondamentalement, vous supprimez la troisième colonne. Ensuite, dans TreeView, définissez HorizontalContentAlignment = "Stretch". Je joins la ressource complète ci-dessous, mais voici la partie importante.

<!-- ... -->
<ControlTemplate TargetType="{x:Type TreeViewItem}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition MinWidth="19"
                Width="Auto"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <!-- ... -->

Contrôle

<TreeView Margin="50" HorizontalContentAlignment="Stretch">
    <TreeViewItem Header="test2"/>
    <TreeViewItem Header="test2">
        <TreeViewItem Header="sub test"/>
        <TreeViewItem Header="sub test2"/>
    </TreeViewItem>
    <TreeViewItem Header="test3"/>
</TreeView>

Ressources

<SolidColorBrush x:Key="GlyphBrush" Color="#444" />

<!--=================================================================
   TreeViewItem
==================================================================-->
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
  <Setter Property="Focusable" Value="False"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ToggleButton">
        <Grid
          Width="15"
          Height="13"
          Background="Transparent">
          <Path x:Name="ExpandPath"
            HorizontalAlignment="Left" 
            VerticalAlignment="Center" 
            Margin="1,1,1,1"
            Fill="{StaticResource GlyphBrush}"
            Data="M 4 0 L 8 4 L 4 8 Z"/>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked"
               Value="True">
            <Setter Property="Data"
                TargetName="ExpandPath"
                Value="M 0 4 L 8 4 L 4 8 Z"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Border>
          <Rectangle Margin="0,0,0,0"
                 StrokeThickness="5"
                 Stroke="Black"
                 StrokeDashArray="1 2"
                 Opacity="0"/>
        </Border>
      </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 Path=HorizontalContentAlignment,
              RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
  <Setter Property="VerticalContentAlignment"
      Value="{Binding Path=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 MinWidth="19"
                      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>
        <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="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
            <Setter Property="Foreground" 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>

Answer 6

Utilisé quelque chose comme Theseven7 pour faciliter l'utilisation du code de Bendewey avec des TreeViewItems basés sur des modèles ...

    public static int GetDepth(this TreeViewItem item)
    {
        FrameworkElement elem = item;
        var parent = VisualTreeHelper.GetParent(item);
        var count = 0;
        while (parent != null && !(parent is TreeView))
        {
            var tvi = parent as TreeViewItem;
            if (parent is TreeViewItem)
                count++;
            parent = VisualTreeHelper.GetParent(parent);
        }
        return count;
    }

Answer 7

La source du problème lorsque TreeView avec ItemsSource est référencé depuis link text , j'ai modifié certains codes de la classe TreeViewItemExtensions:

public static class TreeViewItemExtensions
{
    public static int GetDepth(this TreeViewItem item)
    {
        while (GetSelectedTreeViewItemParent(item) != null)
        {
            var parent = GetSelectedTreeViewItemParent(item);
            if (parent != null)
                return parent.GetDepth() + 1;

            item = parent;
        }
        return 0;
 }

 public static TreeViewItem GetSelectedTreeViewItemParent(this TreeViewItem item)
 {
        DependencyObject parent = VisualTreeHelper.GetParent(item);
        while (!(parent is TreeViewItem || parent is TreeView))
        {
            parent = VisualTreeHelper.GetParent(parent);
        }

        return parent as TreeViewItem;
  }
}

Answer 8

Pour une approche XAML uniquement, j'ai choisi l'une des solutions de Bendewey et l'ai divisée un peu en une solution plus basique:

Le style ci-dessous devrait permettre aux éléments de Treeview de s'étendre sur:

<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="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <ToggleButton x:Name="Expander"
              Content="..." 
              IsChecked="{Binding Path=IsExpanded,
                          RelativeSource={RelativeSource TemplatedParent}}"
              ClickMode="Press"/>
                    <Border Name="Bd" Grid.Column="1" Background="Red" Padding="3">
                        <ContentPresenter x:Name="PART_Header"   ContentSource="Header"
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                    </Border>
                    <ItemsPresenter x:Name="ItemsHost"  Grid.Row="1"   Grid.Column="1"/>
                </Grid>  
      <!-- ADD TRIGGERS HERE -->                                  
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Afin de le faire fonctionner et s’effondrer comme un bon Treeview, les déclencheurs ci-dessous devraient permettre ceci:

<ControlTemplate.Triggers>                                          
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="HasHeader" Value="false"/>
                            <Condition Property="Width" Value="Auto"/>
                        </MultiTrigger.Conditions>                            
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="HasHeader" Value="false"/>
                            <Condition Property="Height" Value="Auto"/>
                        </MultiTrigger.Conditions>                          
                    </MultiTrigger>                        
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="IsSelectionActive" Value="false"/>
                        </MultiTrigger.Conditions>                                             
                    </MultiTrigger>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter TargetName="Bd" Property="Background" Value="Blue"/>                           
                    </Trigger>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="IsExpanded"   Value="false">
                        <Setter TargetName="ItemsHost"
                                Property="Visibility"
                                Value="Collapsed"/>
                    </Trigger>
</ControlTemplate.Triggers> 

Emboîtez simplement les déclencheurs dans le modèle de contrôle. Les couleurs, le rembourrage et le design devront être ajustés pour répondre à vos propres besoins, mais l’idée ci-dessus devrait constituer une idée de base sur une base XAML uniquement.