2009-03-20 14 views
2

"Img"をTreeViewItem.Headerの最後に表示しようとしていますが(TreeViewコントロールの右側に近い)、ヘッダー幅を試しても何も表示されません。 TreeViewのサイズとofcourse "Img"は、コントロールの中央に表示されます。これはおそらく非常に新鮮な質問です。私はちょうどWPFを学び始めています。ツリービューのItemContainerStyleを使用してツリービューアイテム(これは、ツリービューのルートに任意のアイテムに適用されますスタイルです)のコントロールテンプレートを変更する必要があることを達成するためにTreeViewItem.Header inside inside

<TreeView Grid.Row="1" Grid.ColumnSpan="2" Margin="3,3,3,3" Name="treeView1" Width="300"> 
    <TreeViewItem HorizontalAlignment="Stretch"> 
     <TreeViewItem.Header> 
      <Grid HorizontalAlignment="Stretch"> 
       <Grid.RowDefinitions> 
        <RowDefinition /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition Width="30" /> 
       </Grid.ColumnDefinitions> 

       <Label Grid.Column="0" Grid.Row="0">General</Label> 
       <Label Grid.Column="1" Grid.Row="0">Img</Label> 
      </Grid> 
     </TreeViewItem.Header> 
    </TreeViewItem> 
</TreeView> 
+0

ПриветсЭресдеена:) – mlvljr

答えて

2

デフォルトのTreeViewItemは伸張されていないので、右端まで伸びていません。 ヘッダーを設定すると、そのヘッダーはTreeViewItem内にあるため、ヘッダーを超えて拡張することはできません。

スタイルが長すぎるため、スタイル全体を投稿しません。

Blendで行うことは次のとおりです。 TreeViewItemを選択し、右クリックして[Edit Control Parts/Edit a copy]を選択します。あなたが好きな場所にスタイルを保存します。

ここで、テンプレート内で項目を展開し、境界線である「Bd」要素を探します。 RowSpanプロパティを "2"に変更します。

最後に、アイテムの「Horizo​​ntalContentAlignment」プロパティを「ストレッチ」に設定します(複数のノードに適用する必要がある場合は、アイテムまたはスタイルを使用します)。

アイテムの幅が正しくなりました。 これは、選択したアイテムにのみ適用されます。これをツリービューに追加するアイテムに対して機能させたい場合は、ツリービューの "ItemContainerStyle"を新しく作成したスタイルに変更し、TreeViewItemに配置されたスタイルを削除する必要があります。

最後に、あなたのTreeViewItemのItemContainerStyleを同じスタイルに設定して、その子もすべて伸びるようにする必要があります。あなたの例と最初の項目の子ノードを持つ最後にそう

、:

<Grid x:Name="LayoutRoot"> 
<TreeView Margin="3,3,3,3" Name="treeView1" Width="300" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}"> 
<TreeViewItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}"> 
    <TreeViewItem.Header> 
     <Grid HorizontalAlignment="Stretch"> 
      <Grid.RowDefinitions> 
       <RowDefinition /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition Width="30" /> 
      </Grid.ColumnDefinitions> 

      <Label Grid.Column="0" Grid.Row="0">General</Label> 
      <Label Grid.Column="1" Grid.Row="0">Img</Label> 
     </Grid> 
    </TreeViewItem.Header> 
    <TreeViewItem> 
    <TreeViewItem.Header> 
     <Grid HorizontalAlignment="Stretch"> 
      <Grid.RowDefinitions> 
       <RowDefinition /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition Width="30" /> 
      </Grid.ColumnDefinitions> 

      <Label Grid.Column="0" Grid.Row="0">General</Label> 
      <Label Grid.Column="1" Grid.Row="0">Img</Label> 
     </Grid> 
    </TreeViewItem.Header> 
</TreeViewItem> 
</TreeViewItem> 

「TreeViewItemStyle1は、」あ​​なたのために作成したブレンドスタイルです。ブレンドによって生成され、修正され

EDIT

要求としては、ここでは完全なスタイルがあります。これは、基本的に小さな変更を加えたビルトインスタイルのコピーであるため、長いです。

<Style x:Key="TreeViewItemFocusVisual"> 
      <Setter Property="Control.Template"> 
       <Setter.Value> 
        <ControlTemplate> 
         <Rectangle/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/> 
     <Style x:Key="ExpandCollapseToggleStyle" 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 Width="16" Height="16" Background="Transparent" Padding="5,5,5,5"> 
          <Path Fill="Transparent" Stroke="#FF989898" x:Name="ExpandPath" Data="{StaticResource TreeArrow}"> 
           <Path.RenderTransform> 
            <RotateTransform Angle="135" CenterX="3" CenterY="3"/> 
           </Path.RenderTransform> 
          </Path> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/> 
           <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/> 
          </Trigger> 
          <Trigger Property="IsChecked" Value="True"> 
           <Setter Property="RenderTransform" TargetName="ExpandPath"> 
            <Setter.Value> 
             <RotateTransform Angle="180" CenterX="3" CenterY="3"/> 
            </Setter.Value> 
           </Setter> 
           <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/> 
           <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="TreeViewItemStyle1" 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}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/> 
          <Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.ColumnSpan="2"> 
           <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/> 
          </Border> 
          <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsExpanded" Value="false"> 
           <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/> 
          </Trigger> 
          <Trigger Property="HasItems" Value="false"> 
           <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/> 
          </Trigger> 
          <Trigger Property="IsSelected" Value="true"> 
           <Setter Property="Background" TargetName="Bd" 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 Property="Background" TargetName="Bd" 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> 
+0

あなたは、スタイル、または少なくともセッターを投稿できます。あなたが話しているBd要素が見つかりません –

2

2つのサンプルについては、この記事を参照してください。私はちょうどこれらを今日作成しました。

Highlight whole TreeViewItem line in WPF

+0

これも便利でしたが、Denisが最初でした –