TreeView

A TreeView vezérlő összecsukható csomópontok használatával hierarchikus struktúrában jeleníti meg az információkat. Ez a cikk bemutatja a TreeView és TreeViewItem vezérlőket, és példákat tartalmaz azok használatára.

Az alábbi ábrán egy olyan TreeView vezérlőelem látható, amely beágyazott TreeViewItem vezérlőkkel rendelkezik:

Mi az a TreeView?

TreeView egy olyan ItemsControl, amely TreeViewItem vezérlők használatával ágyazza be az elemeket. Az alábbi példa létrehoz egy 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>

TreeView létrehozása

A TreeView vezérlő hierarchiát tartalmaz, amely TreeViewItem vezérlőkből áll. A TreeViewItem vezérlőnek van egy HeaderedItemsControl és egy Header gyűjteménye.

Ha az Extensible Application Markup Language (XAML) TreeView-ot használja egy Header vezérlő és annak tartalma, valamint a gyűjteményét alkotó elemek explicit meghatározásához, akkor... Az előző ábrán ez a módszer látható.

Adatforrásként is megadhat egy ItemsSource értéket, majd megadhat egy HeaderTemplate és ItemTemplate a TreeViewItem tartalmat.

A TreeViewItem vezérlőelem elrendezésének meghatározásához a HierarchicalDataTemplate objektumokat is használhatja. További információ és példa: A SelectedValue, a SelectedValuePath és a SelectedItem használata.

Ha egy elem nem TreeViewItem vezérlőelem, akkor automatikusan körbezárja egy TreeViewItem vezérlőelem, amikor megjelenik a TreeView vezérlőelem.

TreeViewItem kibontása és összecsukása

Ha a felhasználó kibont egy TreeViewItem elemet, a IsExpanded tulajdonság értéke true lesz. A TreeViewItem elemet közvetlen felhasználói művelet nélkül is kibonthatja vagy összecsukhatja, ha a IsExpanded tulajdonságot true (kibontás) vagy false (összecsukás) értékre állítja. Amikor ez a tulajdonság megváltozik, egy Expanded vagy Collapsed esemény következik be.

Amikor a BringIntoView metódust egy TreeViewItem vezérlőre hívja meg, a TreeViewItem és annak szülő TreeViewItem vezérlői kibővülnek. Ha egy TreeViewItem nem látható vagy részlegesen látható, a TreeView görgetéssel láthatóvá teszi.

Jelöljön ki egy TreeViewItem elemet

Amikor egy felhasználó rákattint egy TreeViewItem vezérlőre, hogy kijelölje azt, a Selected esemény bekövetkezik, és annak IsSelected tulajdonsága true-ra van állítva. A TreeViewItem vezérlő is az SelectedItem leszTreeView. Ezzel szemben ha a kijelölés egy TreeViewItem vezérlőelemről változik, az Unselected esemény bekövetkezik, és a IsSelected tulajdonsága false értékre van állítva.

A SelectedItem vezérlőelem tulajdonsága TreeView írásvédett tulajdonság, ezért nem állítható be explicit módon. A SelectedItem tulajdonság akkor van beállítva, ha a felhasználó egy TreeViewItem vezérlőre kattint, vagy ha a IsSelected tulajdonság a true vezérlőre TreeViewItem van állítva.

SelectedValuePath A tulajdonság használatával adjon meg egy SelectedValueSelectedItem. További információért lásd: SelectedValue, SelectedValuePath és SelectedItem használata.

Regisztrálhat egy eseménykezelőt az SelectedItemChanged eseményhez, hogy megállapíthassa, mikor változik a kijelölt TreeViewItem. Az RoutedPropertyChangedEventArgs<T> eseménykezelőnek megadott érték határozza meg az OldValueelőző kijelölést és az NewValueaktuális kijelölést. Bármelyik érték lehet null , ha az alkalmazás vagy a felhasználó nem adott meg korábbi vagy aktuális kijelölést.

TreeView formázása

Az alapértelmezett stílus, amellyel egy TreeView vezérlőelemet helyezünk el, egy olyan StackPanel objektumba kerül, amely egy ScrollViewer vezérlőelemet tartalmaz. Amikor beállítja a Width és a Height tulajdonságokat egy TreeView esetén, ezek az értékek a StackPanel objektum méretezésére szolgálnak, amely a TreeView-t jeleníti meg. Ha a megjelenítendő tartalom nagyobb, mint a megjelenítési terület, automatikusan megjelenik, ScrollViewer hogy a felhasználó végiggörgethesse a TreeView tartalmat.

A vezérlőelemek megjelenésének TreeViewItem testreszabásához állítsa be a Style tulajdonságot egyénire Style.

Az alábbi példa bemutatja, hogyan állíthatja be a Foreground és FontSize tulajdonságértékeket egy TreeViewItem vezérlőelem számára egy Style használatával.

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

Képek és egyéb tartalmak hozzáadása TreeView-elemekhez

Több objektumot is belefoglalhatsz a Header tartalmába egy TreeViewItem-ben. Ha több objektumot szeretne belefoglalni a tartalomba Header , csatolja az objektumokat egy elrendezésvezérlőbe, például egy Panel vagy StackPanel.

Az alábbi példa bemutatja, hogyan definiálhatunk egy HeaderTreeViewItem-t mint CheckBox vezérlőelemen belül levő TextBlock és DockPanel elemeket.

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

Az alábbi példa bemutatja, hogyan határozható meg egy DataTemplate, amely tartalmaz egy Image-t és egy TextBlock-t, ezek pedig egy DockPanel vezérlőben vannak elhelyezve. Használhat egy DataTemplate a HeaderTemplate vagy a ItemTemplate beállításához egy TreeViewItem esetén.

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

Gyakori feladatok

Az alábbi táblázat a TreeView vezérlőelem használatának gyakori feladatait sorolja fel:

Cím	Description
Egyszerű vagy összetett TreeViews létrehozása	Megtudhatja, hogyan hozhat létre Különböző struktúrákkal rendelkező TreeView-vezérlőket.
SelectedValue, SelectedValuePath és SelectedItem használata	Megtudhatja, hogyan használható a kijelölési tulajdonságok a TreeView-ban.
TreeView kötése meghatározhatatlan mélységű adatokhoz	Megtudhatja, hogyan köthet egy TreeView-t ismeretlen mélységű hierarchikus adatokhoz.
A TreeView teljesítményének javítása	Megtudhatja, hogyan optimalizálhatja a TreeView teljesítményét.
TreeViewItem keresése a TreeView-ban	Megtudhatja, hogyan kereshet meg egy adott TreeViewItemet egy TreeView-on belül.

Kapcsolódó szakaszok

adatkötés áttekintése

Adatsablonok áttekintése

Referenciák

TreeView TreeViewItem

Stílusok és sablonok

Módosíthatja az alapértelmezett beállítást ControlTemplate , hogy egyedi megjelenést adjon a TreeView vezérlőnek. További információ: Mik azok a stílusok és sablonok? és hogyan hozhat létre sablonokat vezérlőkhöz.

Részek

A TreeView vezérlő nem rendelkezik elnevezett részekkel.

Amikor létrehoz egy ControlTemplate egy TreeView számára, előfordulhat, hogy sablonja tartalmaz egy ItemsPresenter egy ScrollViewer-ben. (A ItemsPresenter program megjeleníti az egyes elemeket a TreeViewvezérlőben, és lehetővé teszi a ScrollViewer görgetést a vezérlőn belül). Ha a ItemsPresenter nem közvetlenül a ScrollViewer gyermeke, meg kell adnia a ItemsPresenter számára a nevet: ItemsPresenter.

Vizualizációs állapotok

Az alábbi táblázat a vezérlőelem vizualizációs állapotát sorolja fel TreeView .

VisualState név	VisualStateGroup neve	Description
Érvényes	ÉrvényesítésiÁllapotok	A vezérlő az osztályt Validation használja, a Validation.HasError csatolt tulajdonság pedig az false.
InvalidFocused (ÉrvénytelenFókuszálás)	ÉrvényesítésiÁllapotok	A Validation.HasError csatolt tulajdonság aktív, és a true vezérlő fókuszban van.
ÉrvénytelenFókuszNélküli	ÉrvényesítésiÁllapotok	A Validation.HasError csatolt tulajdonság true van, és nincs fókuszban a vezérlő.

TreeViewItem elemei

Az alábbi táblázat a vezérlőelem elnevezett részeit sorolja fel TreeViewItem .

Rész	Típus	Description
PART_Header	FrameworkElement	A TreeView vezérlő fejléctartalmát tartalmazó vizuális elem.

TreeViewItem állapotok

Az alábbi táblázat a TreeViewItem vezérlő vizuális állapotait sorolja fel.

VisualState név	VisualStateGroup neve	Description
Normal	CommonStates	Az alapértelmezett állapot.
Egér fölé húzás	CommonStates	Az egérmutató a TreeViewItem fölött van.
Disabled	CommonStates	Ez TreeViewItem le van tiltva.
Focused	FocusStates	A TreeViewItem van fókuszban.
Fókuszálatlan	FocusStates	A TreeViewItem nincs fókuszban.
Expanded	TerjeszkedésiÁllapotok	A TreeViewItem vezérlő ki van bontva.
Összeomlott	TerjeszkedésiÁllapotok	A TreeViewItem vezérlő össze van csukva.
HasItems	HasItemsStates	Az TreeViewItem elemeket tartalmazza.
Nincsenek elemek	HasItemsStates	A TreeViewItem nem tartalmaz elemeket.
Kiválasztott	Kiválasztási Állapotok	A TreeViewItem kijelölésre került.
KiválasztvaInaktív	Kiválasztási Állapotok	A TreeViewItem ki van jelölve, de nem aktív.
Nincs kiválasztva	Kiválasztási Állapotok	A TreeViewItem nincs kiválasztva.
Érvényes	ÉrvényesítésiÁllapotok	A vezérlő az osztályt Validation használja, a Validation.HasError csatolt tulajdonság pedig az false.
InvalidFocused (ÉrvénytelenFókuszálás)	ÉrvényesítésiÁllapotok	A Validation.HasError csatolt tulajdonság jelzi, hogy a true vezérlő fókuszban van-e.
ÉrvénytelenFókuszNélküli	ÉrvényesítésiÁllapotok	A Validation.HasError csatolt tulajdonság true akkor érvényes, ha a vezérlő nincs fókuszban.

Kapcsolódó szakaszok

Adatkötés áttekintéseAdatsablonok áttekintése