2017-03-17 2 views
2

Je souhaite créer un TreeView WPF qui contient TreeViewItems qui s'étend pour remplir l'espace disponible. J'ai modifié le modèle TreeViewItem en l'utilisant comme guide: https://social.msdn.microsoft.com/Forums/vstudio/en-US/cabcb3ba-80c0-4367-85b7-9b55adc81e65/stretch-treeview-items?forum=wpf et cela fonctionne bien car je veux que les composants de la grille d'un caractère sur le côté droit soient alignés à droite et que le TextBlock long occupe l'espace disponible - voir le code ci-dessous En-tête pour l'un de mes TreeViewItems est une grille.TreeViewItem avec Stretch

Cependant, quand je redimensionne la fenêtre en faisant glisser sur le côté droit vers la gauche, quand il n'y a pas assez d'espace pour tous les composants de la grille, je m'attendais au TextBlock long avec le contenu "Un long, long , ... "pour commencer à rétrécir en largeur, mais à la place les TextBlocks sur le côté droit sont coupés par le bord de la fenêtre de droite. Si je crée un exemple complètement nouveau comportant une grille et mets la grille mentionnée ci-dessus dans une des cellules de la grille (émulant essentiellement la grille qui est utilisée dans le modèle TreeView) alors il redimensionne comme je l'espère: le TextBlock se rétrécit largeur que je redimensionne.

Des idées quelles modifications je peux apporter au modèle TreeViewItem ou l'en-tête que j'ai spécifié pour obtenir le comportement de redimensionnement que je veux?

<Window x:Class="TreeViewSimple3.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:TreeViewSimple3" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525"> 

<Window.Resources> 
    <ControlTemplate x:Key="TreeViewItemStretchControlTemplate" TargetType="{x:Type TreeViewItem}"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition MinWidth="19" Width="Auto"/> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition/> 
      </Grid.RowDefinitions> 
      <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"> 
       <ToggleButton.Style> 
        <Style TargetType="{x:Type ToggleButton}"> 
         <Setter Property="Focusable" Value="False"/> 
         <Setter Property="Width" Value="16"/> 
         <Setter Property="Height" Value="16"/> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate TargetType="{x:Type ToggleButton}"> 
            <Border Background="Transparent" Height="16" Padding="5" Width="16"> 
             <Path x:Name="ExpandPath" Data="M0,0 L0,6 L6,0 z" Fill="Transparent" Stroke="#FF989898"> 
              <Path.RenderTransform> 
               <RotateTransform Angle="135" CenterY="3" CenterX="3"/> 
              </Path.RenderTransform> 
             </Path> 
            </Border> 
            <ControlTemplate.Triggers> 
             <Trigger Property="IsChecked" Value="True"> 
              <Setter Property="RenderTransform" TargetName="ExpandPath"> 
               <Setter.Value> 
                <RotateTransform Angle="180" CenterY="3" CenterX="3"/> 
               </Setter.Value> 
              </Setter> 
              <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/> 
              <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/> 
             </Trigger> 
             <Trigger Property="IsMouseOver" Value="True"> 
              <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/> 
              <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/> 
             </Trigger> 
             <MultiTrigger> 
              <MultiTrigger.Conditions> 
               <Condition Property="IsMouseOver" Value="True"/> 
               <Condition Property="IsChecked" Value="True"/> 
              </MultiTrigger.Conditions> 
              <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/> 
              <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/> 
             </MultiTrigger> 
            </ControlTemplate.Triggers> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </ToggleButton.Style> 
      </ToggleButton> 
      <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Grid.ColumnSpan="2" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True"> 
       <ContentPresenter x:Name="PART_Header" ContentSource="Header" 
       HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" 
       SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/> 

      </Border> 
      <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="TreeViewItem.IsExpanded" Value="false"> 
       <Setter TargetName="ItemsHost" Property="UIElement.Visibility" Value="Collapsed"/> 
      </Trigger> 
      <Trigger Property="ItemsControl.HasItems" Value="false"> 
       <Setter TargetName="Expander" Property="UIElement.Visibility" Value="Hidden"/> 
      </Trigger> 
      <Trigger Property="TreeViewItem.IsSelected" Value="true"> 
       <Setter TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 
        Property="Border.Background"/> 
       <Setter Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" 
        Property="Control.Foreground"/> 
      </Trigger> 
      <MultiTrigger> 
       <MultiTrigger.Conditions> 
        <Condition Property="TreeViewItem.IsSelected" Value="true"/> 
        <Condition Property="TreeViewItem.IsSelectionActive" Value="false"/> 
       </MultiTrigger.Conditions> 
       <Setter TargetName="Bd" 
        Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}" 
        Property="Border.Background"/> 
       <Setter Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}" 
        Property="Control.Foreground"/> 
      </MultiTrigger> 
      <Trigger Property="UIElement.IsEnabled" Value="false"> 
       <Setter Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" Property="Control.Foreground"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
</Window.Resources> 

<TreeView> 
    <TreeViewItem Header="Parent" Template="{StaticResource TreeViewItemStretchControlTemplate}" HorizontalContentAlignment="Stretch"> 
     <TreeViewItem Template="{StaticResource TreeViewItemStretchControlTemplate}" HorizontalContentAlignment="Stretch"> 
      <TreeViewItem.Header> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*"/> 
         <ColumnDefinition Width="Auto"/> 
        </Grid.ColumnDefinitions> 
        <TextBlock Grid.Column="0" Text="A long, long, long, long, long, long, long label."/> 
        <StackPanel Grid.Column="1" Orientation="Horizontal"> 
         <TextBlock Text="A"/> 
         <TextBlock Text="B"/> 
         <TextBlock Text="C"/> 
         <TextBlock Text="D"/> 
        </StackPanel> 
       </Grid> 
      </TreeViewItem.Header> 
     </TreeViewItem> 
    </TreeViewItem> 
</TreeView> 

+0

Lorsque j'essaie d'échantillonner du code et de réduire la taille de la fenêtre, TreeView affiche une barre de défilement horizontale. J'ai donc ajouté les attributs suivants: '' pour désactiver scroll et '' pour activer le retour à la ligne. Est-ce l'effet que vous visez? – ASh

+0

Parfait - exactement ce que je vise. Merci. – randusr836

Répondre

3

Lorsque je tente exemple de code et de réduire la taille de la fenêtre, TreeView montre la barre de défilement horizontal (car il a non seulement la grille mais aussi ScrollViewer dans son modèle)

essayer les paramètres suivants:

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 

pour désactiver défilement

<TextBlock TextWrapping="Wrap" Grid.Column="0" ...> 

pour activer le retour à la ligne.