2009-03-20 4 views
2

Je suis en train de faire apparaître "Img" à la fin de TreeViewItem.Header (aussi proche du côté droit du contrôle TreeView), mais aucun mater ce que j'essaye en-tête large est toujours inférieur à La taille de TreeView et ofcourse "Img" apparaissent quelque part au milieu du contrôle. C'est probablement une question très neuve; Je commence juste à apprendre WPF.TreeViewItem.Header avec grille à l'intérieur

<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

Répondre

2

Pour ce faire, vous devez modifier le modèle de contrôle de l'TreeViewItem en utilisant la ItemContainerStyle du TreeView (ce qui est le style qui obtient appliqué à tout élément à la racine de l'arborescence). Le TreeViewItem par défaut n'est pas étiré, il ne s'étend donc pas complètement vers la droite. Lorsque vous définissez l'en-tête, il se trouve dans TreeViewItem et ne peut donc pas le dépasser.

Je ne posterai pas tout le style parce que ce serait trop long.

Voici ce qu'il faut faire dans le mélange: sélectionnez votre TreeViewItem, faites un clic droit et choisissez "Modifier les pièces de contrôle/Modifier une copie". Enregistrez le style où vous voulez.

Maintenant, dans le modèle, développez la substance et recherchez l'élément "Bd", qui est une bordure. Modifier sa propriété RowSpan à "2". Enfin, définissez la propriété "HorizontalContentAlignment" de votre élément sur "Stretch" (soit sur l'élément, soit via le style si vous devez l'appliquer à plusieurs nœuds).

Votre article doit maintenant avoir la bonne largeur. Maintenant, cela ne s'applique qu'à l'élément que vous avez sélectionné. Si vous voulez que cela fonctionne pour n'importe quel élément que vous ajoutez à l'arborescence, vous devez changer le "ItemContainerStyle" de l'arborescence au style nouvellement créé, et supprimer le style que Blend a placé sur le TreeViewItem. Last but not least, vous devez définir le ItemContainerStyle de votre TreeViewItem avec le même style afin que ses enfants s'étendent jusqu'au bout, et ainsi de suite.

Donc à la fin, avec votre exemple et un nœud enfant sur le premier élément:

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

Le « TreeViewItemStyle1 » est le style qui mélange créé pour vous.

EDIT

comme l'a demandé, voici le style complet tel qu'il est généré par mélange et modifié. C'est long parce que c'est fondamentalement une copie du style intégré avec des modifications mineures.

<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

Pourriez-vous poster le style, ou au moins un poseur. Je ne trouve pas l'élément Bd dont vous parlez –

Questions connexes