我如何使TreeViewItem水平向右擴展？

Question

我試圖創建一個在水平方向擴展到右邊一個TreeView，使其擴展這樣的：

 Parent1 -> Child1

   Child2

   Child3

   Child4

   Child5

 Parent2 -> Child1

   Child2

   Child3

   Child4

   Child5

請幫助！ 謝謝！

Answer 1

你必須改變TreeViewItem的風格。

這是默認的風格：（我複製從微軟主頁粘貼此）

<!--================================================================= 
     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="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.ColumnSpan="2"/> 
     </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> 

看看這一部分：

 <Grid.ColumnDefinitions> 
     <ColumnDefinition MinWidth="19" 
        Width="Auto"/> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition/> 
     </Grid.RowDefinitions> 

的ItemsPresenter默認情況下，在Grid.Colum放置= 1和Grid.Row = 1。這就是你如何變成樹一樣的外觀。

如果你想ItemsPreseter接下來將要到頭layouted，只需設置ItemsPresenter在Grid.Column = 2和Grid.Row = 0

您不需要第二排anywys。

試試吧，讓我們知道你是否正確。

隨意標記爲投票的答案，如果你覺得這篇文章有幫助。