Evidenziare tutto il TreeViewItem linea in WPF

Se ho impostato TreeViewItem Sfondo evidenzia solo l’intestazione. Come è possibile evidenziare l’intera riga?

Ho trovato un post quasi soluzione di un problema http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/b04f73e2-0b10-4d97-a6da-64df2e30c21d/

Ma ci sono alcuni problemi:
1. Non evidenziare l’intera riga
2. L’albero ha lo stile XP, su Vista. Mi deve piacere che appare allo stesso modo su Vista, come è stato, ma se l’utente ha cambiato il tema di XP dovrebbe essere XP modo.
3. Tanti XAML…

Tutte le idee, cosa dovrei cercare?

InformationsquelleAutor alex2k8 | 2009-03-20

 

9 Replies
  1. 103

    Ecco, ci siamo, la terza volte che è un incanto. Se volete qualcosa di questo aspetto.

    Evidenziare tutto il TreeViewItem linea in WPF

    Questo prende un po ‘ più di lavoro. Sono sicuro che ci sono molti modi per farlo, ma questo metodo utilizza una Lunghezza Converter e un TreeViewItem metodo di estensione per ottenere la Profondità. Entrambi questi sono strettamente accoppiati alle TreeViewItem struttura ad albero visuale, quindi se si inizia a fare scherzi con i Modelli poi si possono avere problemi. Di nuovo, qui è la parte importante, e di seguito è il codice completo.

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

    TreeViewDepth Estensione

    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();
        }
    }

    Controllo

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

    Pieno TreeViewItem Stile

    <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>
    • Ecco!!! La ringrazio MOLTO per tutti i tuoi post!
    • Grande Risposta. +1 Grazie mille.
    • Fantastico!!! Tuttavia, ho fatto notare un problema dove la profondità è stato calcolato in modo non corretto se la vista ad albero è stato creato utilizzando gerarchica modelli in cui il Parent proprietà non è impostata sulla TreeViewItem. Ho modificato la risposta, invece di utilizzare la struttura ad albero visuale per lavorare il genitore che risolve il problema (almeno per me), sentitevi liberi di rollback, se avete obiezioni, però.
    • Come si fa a modificare il margine?
    • Per qualsiasi motivo la mia modifica è stata respinta, ma In GetParent metodo, è anche necessario verificare se il padre == null perché TreeViewItem padre a volte può essere nullo in un corretto controllo TreeView, quando non è visibile fuori dalla finestra limiti, quindi questa modifica impedisce ArgumentNullException: … while (!(padre == null || padre è TreeViewItem || genitore è TreeView)) …
    • Bella risposta.. e ‘ una vergogna che richiede tanto di codice per fare una tale cosa da poco. Vorrei che fosse reso possibile con HorizontalContentAlignment.

  2. 17

    TreeViewItem Intestazione non allungare?

    Questo problema si verifica a causa di WPF modello predefinito per TreeViewItem è impostato come un 3-colonna 2-fila Grid. La prima riga è per il “colpo di testa” (in realtà un Border), e la seconda fila è per il ItemsPresenter. Le due righe sono resi visibili o nascosti, come necessario, per realizzare l’albero di espansione quando si fa clic sul piccolo triangolo–che occupa colonna zero della Grid.

    Entrambe le righe davvero solo bisogno di una colonna aggiuntiva. Per esempio, in seconda fila, dobbiamo avere nulla a col-0, riga 1, perché che parte vuota deve essere rientrato quando IsExpanded è vero. Ma il mistero comincia quando si nota che il ItemsPresenter, in base a col-1, riga 1, specifica Grid.ColumnSpan=2.

    Purtroppo nella riga in alto, il Border che contiene l’intestazione è impostato per Grid.Column=1… ma non ColumnSpan. Dal col-2 del Grid ha Width=* questo significa che l’intestazione e/o di confine non allunga orizzontalmente.

    In altre parole, mi sembra che il 3-griglia di colonne design non ha scopo diverso soprattutto per evitare l’intestazione da stretching. Per quanto posso dire, un semplice 2×2 disposizione sarebbe più flessibile [edit: vedi nota #2], e il supporto completo di stretching o il ‘frastagliato’ intestazione non stretching, attraverso la regolare WPF allineamento meccanismi.

    Idealmente, ci piacerebbe cambiare il Grid di avere solo 2 colonne invece di 3. Dal momento che non è così facile, invece ti rendere l’intestazione span 2 colonne, proprio come il ItemsPresenter fa.

    Ok, qui è un piccolo, completo e autonomo di XAML (solo per il programma di lavoro che dimostra–e correzioni–il problema:

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

    Se si esegue questo programma, come mostrato vedrete qualcosa di simile a questo. Questo è il comportamento fisso, che permette di riprendere il pieno controllo su di stretching comportamento del TreeViewItem intestazione:

    Evidenziare tutto il TreeViewItem linea in WPF

    Avviso di inizio/FINE parte con le linee tratteggiate in XAML di origine. Fondamentalmente, ho appena impostato Grid.ColumnSpan=2 sul offendere Border, in modo che riempirà allungato larghezza del Grid. Tale elemento viene emessa dalla TreeViewItem modello, così ho scoperto che un modo efficace per alterare le sue proprietà è tramite un targeting Style in dizionario risorse del TreeViewItem‘s Style. Sì, confusione. Che Style si accede tramite TreeViewItem.ItemContainerStyle.

    Per vedere l’ (esistente) comportamento scorretto, si può commentare la parte tra le linee tratteggiate:

    Evidenziare tutto il TreeViewItem linea in WPF

    È anche possibile impostare questi stili in alcuni dizionario risorse, piuttosto che utilizzando il ItemContainerStyle proprietà come ho fatto qui. Ho fatto in questo modo perché riduce al minimo la portata della correzione, in modo che estranei Border controlli non saranno interessati. Se avete bisogno di un più discriminatorio modo per destinatari di questo controllo, si potrebbe essere in grado di approfittare del fatto che ha Name='Bd'.


    [edit:] Questa soluzione non non utilizzare la reflection! Non abbiate paura e dal senso i dati demo-non ha nulla a che fare con questo problema; era solo il modo più semplice per prendere un po ‘ di dati gerarchici, a scopo dimostrativo, mantenendo l’intero programma piccolo.


    [edit #2:] ho appena realizzato che ciò che i progettisti stavano cercando di evitare con l’3×2 griglia è stata la seguente sgradevole effetto (esagerato qui da un fuori ingrandita l’immagine). Quindi, se si adotta una delle soluzioni da questa pagina, sappiate che si potrebbe non vuole questo:

    Evidenziare tutto il TreeViewItem linea in WPF

    • Se non avete bisogno di selezione per estendere al margine sinistro, questa è una buona soluzione leggera.
    • grande risposta. hai salvato il mio tempo.
  3. 6

    Se vuoi dire qualcosa di simile a questa immagine

    Evidenziare tutto il TreeViewItem linea in WPF

    (fonte: bendewey.com)

    Aggiornamento
    Come notato in questo esempio, la caduta di essere rientrato su elementi

    Evidenziare tutto il TreeViewItem linea in WPF

    (fonte: bendewey.com)

    Quindi questo dovrebbe aiutare. Il suo basa anche su http://msdn.microsoft.com/en-us/library/ms788727.aspx è possibile modificare il TreeViewItem Modello per un StackPanel e impostare il ItemsPanel Margine sinistro a 19. Poi nel TreeView si imposta il HorizontalContentAlignment=”Stretch”. Vi allego l’intera risorsa sotto, ma qui è la parte 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>

    Controllo

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

    Risorse

    <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>
    • Grazie! Ma se si va a nodi figlio, si noterà lo spazio bianco a sinistra del toggle. Selezionare l’intera riga. Pseudo soluzione è: ItemsPresenter.margine=”0″ e ColumnDefinition Width=”19 * Livello”. Ho provato a utilizzare MarkupExension per calcolare il Livello – nessuna fortuna. Tutte le idee?
  4. 4

    Questo è di gran lunga la soluzione più semplice. Basta creare un rettangolo, chiamare Hb, e impostare il suo margine di 100px e non visibile. Solo impostare Visibile quando hai selezionato o il mouse. Si tratta di un hack, ma sei su un massimo di 5 livelli di nidificazione TreeViewItems (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>
  5. 4

    Se vuoi dire qualcosa di simile a questa immagine

    Evidenziare tutto il TreeViewItem linea in WPF

    (fonte: bendewey.com)

    Quindi questo dovrebbe aiutare. Basato su http://msdn.microsoft.com/en-us/library/ms788727.aspx è possibile apportare alcune modifiche al TreeViewItem Griglia di layout. Fondamentalmente si rimuove la terza colonna. Poi nel TreeView si imposta il HorizontalContentAlignment=”Stretch”. Vi allego l’intera risorsa sotto, ma qui è la parte 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>
        <!-- ... -->

    Controllo

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

    Risorse

    <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>
    • Grazie, Bendewey. Ma la tua soluzione in sintesi, dopo il toggle. Mi deve come per evidenziare l’intera riga. Sembra la Griglia del modello non permettere che questo, non lo conoscete altre soluzioni?
    • La sua sicuramente possibile. Posso riscrivere qualcosa per voi più tardi stasera. ma in pratica si può decidere di cambiare la sua da una griglia, magari per un stackpanel e poi mettere l’espansore icona all’interno del bordo. Potrete anche modificare il trigger.
    • Sarebbe fantastico! Come non è chiaro per me, come possiamo trattino i nodi senza c#, se qualche cosa come StackPanel utilizzato.
    • Per il rientro di nodi utilizzando la stackpanel vorrei utilizzare Margine sinistro
  6. 1

    Origine del problema, quando uso TreeView con ItemsSource è , riferito da testo del link, ho cambiato il codice di TreeViewItemExtensions classe:

    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;
      }
    }
  7. 1

    Usato qualcosa di simile theseven7 per facilitare l’uso di bendewey del codice basato su modelli TreeViewItems…

        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;
        }
  8. 0

    Per XAML solo approccio ho preso uno dei Bendewey le soluzioni e rotto un po ‘ in una soluzione di base:

    Lo stile di sotto dovrebbe consentire Treeview elementi di span:

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

    In ordine per farlo funzionare e crollo come una vera e propria Treeview il seguente trigger dovrebbe permettere questo:

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

    Solo nido il trigger all’interno del Modello di Controllo. Colori/padding/progettazione dovrà essere modificato per soddisfare le vostre esigenze, ma sopra dovrebbe essere una idea di base su XAML solo foundation.

  9. -1

    Ho gestito questo copiando il ItemContainerStyle utilizzando miscela, dando un nome alla rete che l’elemento è inserito, e quindi impostare lo sfondo della griglia.

    • Mark, si può fornire un esempio? Che sarebbe super disponibile. Queste altre risposte look eccessivamente complesso.
    • Questo non estendere la griglia sul lato sinistro del controllo TreeView come l’OP ha chiesto.

Lascia un commento