Dela via

Trädvy – översikt

Kontrollen TreeView ger ett sätt att visa information i en hierarkisk struktur med hjälp av komprimerbara noder. Det här avsnittet beskriver TreeView kontrollerna och TreeViewItem och innehåller enkla exempel på hur de används.

Vad är en TreeView?

TreeView är en ItemsControl som kapslar objekten med hjälp av TreeViewItem-kontroller. I följande exempel skapas en TreeView.

<TreeView Name="myTreeViewEvent" >
  <TreeViewItem Header="Employee1" IsSelected="True">
    <TreeViewItem Header="Jesper Aaberg"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="12345"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Monday"/>
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Thursday"/>
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem Header="Employee2">
    <TreeViewItem Header="Dominik Paiha"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="98765"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Wednesday"/>
      <TreeViewItem Header="Friday"/>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

Skapa en TreeView

Kontrollen TreeView innehåller en hierarki med TreeViewItem kontroller. En TreeViewItem kontroll är en HeaderedItemsControl som har en Header och en Items samling.

Om du definierar en TreeView med XAML (Extensible Application Markup Language) kan du uttryckligen definiera innehållet i Header en TreeViewItem kontroll och de objekt som utgör dess samling. Föregående bild visar den här metoden.

Du kan också ange en ItemsSource som en datakälla och sedan ange en HeaderTemplate och ItemTemplate för att definiera TreeViewItem innehållet.

Om du vill definiera layouten för en TreeViewItem kontroll kan du också använda HierarchicalDataTemplate objekt. För mer information och ett exempel, se "Use SelectedValue, SelectedValuePath, and SelectedItem".

Om ett objekt inte är en TreeViewItem kontroll omges det automatiskt av en TreeViewItem kontroll när TreeView kontrollen visas.

Expandera och komprimera en TreeViewItem

Om användaren expanderar en TreeViewItem, ställs egenskapen IsExpanded in till true. Du kan också expandera eller komprimera en TreeViewItem utan någon direkt användaråtgärd genom att ange IsExpanded egenskapen till true (expandera) eller false (komprimera). När den här egenskapen ändras inträffar en Expanded eller Collapsed händelse.

När BringIntoView metoden anropas för en TreeViewItem kontroll expanderar TreeViewItem och dess överordnade TreeViewItem kontroller. Om en TreeViewItem inte är synlig eller delvis synlig, rullar TreeView för att göra TreeViewItem synlig.

TreeViewItem-val

När en användare klickar på en TreeViewItem-kontroll inträffar Selected-händelsen, och dess IsSelected-egenskap ställs in på true. TreeViewItem blir också SelectedItem för TreeView-kontrollen. När markeringen däremot ändras från en TreeViewItem kontroll inträffar dess Unselected händelse och dess IsSelected egenskap är inställd på false.

Egenskapen SelectedItem på TreeView kontrollen är en skrivskyddad egenskap. Därför kan du inte uttryckligen ange den. Egenskapen SelectedItem anges om användaren klickar på en TreeViewItem kontroll eller när egenskapen IsSelected är inställd true på på kontrollen TreeViewItem .

Använd SelectedValuePath-egenskapen för att specificera SelectedValue för en SelectedItem. Mer information finns i Använda SelectedValue, SelectedValuePath och SelectedItem.

Du kan registrera en händelsehanterare för händelsen SelectedItemChanged för att avgöra när en vald TreeViewItem ändras. Det RoutedPropertyChangedEventArgs<T> som tillhandahålls till händelsehanteraren anger OldValue, vilket är det tidigare valet, och , NewValuesom är den aktuella markeringen. Antingen kan värdet vara null om programmet eller användaren inte har gjort ett tidigare eller aktuellt val.

TreeView-stil

Standardformatet för en TreeView kontroll placerar den i ett StackPanel objekt som innehåller en ScrollViewer kontroll. När du anger Width egenskaperna och Height för en TreeViewanvänds dessa värden för att ändra storleken på objektet StackPanel som visar TreeView. Om innehållet som ska visas är större än visningsområdet visas automatiskt ScrollViewer så att användaren kan bläddra igenom TreeView innehållet.

Om du vill anpassa utseendet på en TreeViewItem kontroll anger du Style egenskapen till en anpassad Style.

I följande exempel visas hur du anger egenskapsvärdena Foreground och FontSize för en TreeViewItem kontroll med hjälp av en Style.

<Style TargetType="{x:Type TreeViewItem}">
  <Setter Property="Foreground" Value="Blue"/>
  <Setter Property="FontSize" Value="12"/>
</Style>

Lägga till bilder och annat innehåll i TreeView-objekt

Du kan inkludera fler än ett objekt i innehållet i Header en TreeViewItem. Om du vill inkludera flera objekt i Header innehållet omsluter du objekten i en layoutkontroll, till exempel en Panel eller StackPanel.

Följande exempel visar hur du definierar Header av en TreeViewItem som en CheckBox och TextBlock som båda omges av en DockPanel-kontroll.

<TreeViewItem>
  <TreeViewItem.Header>
    <DockPanel>
      <CheckBox/>
      <TextBlock>
        TreeViewItem Text
      </TextBlock>
    </DockPanel>
  </TreeViewItem.Header>
</TreeViewItem>

I följande exempel visas hur du definierar en DataTemplate som innehåller en Image och en TextBlock som omges av en DockPanel kontroll. Du kan använda en DataTemplate för att ange HeaderTemplate eller ItemTemplate för en TreeViewItem.

<DataTemplate x:Key="NewspaperTVItem">
  <DockPanel>
    <Image Source="images\icon.jpg"/>
    <TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
  </DockPanel>
</DataTemplate>

Se även

  • Last updated on