Kontrolki list - Programowanie w technologii .NET wykład 8

Własności klasy ItemsControl:

• ItemsSource – źródło danych (kolekcja lub DataView)

• DisplayMemberPath – wskazuje, którą własność elementu wyświetlić

• ItemTemplate – szablon elementu

• ItemTemplateSelector – klasa dokonująca wyboru szablonu elementu

• ItemContainerStyle – styl kontenera otaczającego pojedynczy element

• ItemContainerStyleSelector

• ItemsPanel – panel, który przechowuje wszystkie elementy listy (zazwyczaj:

pionowy StackPanel)

• GroupStyle – styl formatowania grupy

• GroupStyleSelector

• Klasa Selector

◦ dodaje możliwość wybierania elementu (ToolBar czy Menu tego nie mają)

◦ własności: SelectedItem, SelectedIndex, SelectedValue (własność Value wybranego obiektu danych, zgodnie z SelectedValuePath)

◦ selector nie daje obsługi wielokrotnego wyboru – to jest dodane w ListBox, przez SelectionMode i SelectedItems

◦ zdarzenie SelectionChanged

• TreeView też pozwala wybierać elementy, ale (z powodu hierarchicznej struktury) działa to inaczej, choć własności nazywają się tak samo: SelectedItem,

SelectedValue, SelectedValue path properties. Do tego zdarzenie SelectedItemChanged.

ComboBox

• Składa się z dwóch części: okna wyboru (ukazuje aktualny wybór) i listy rozwijalnej (wszystkie możliwe wybory).

• Ustawienie IsEditable na true zmienia działanie:

◦ w okienku wyboru wyświetlany jest jedynie tekst zwrócony przez ToString

◦ użytkownik może wpisać tu jakąś wartość

◦ autouzupełnianie

ListView

• Umożliwia wyświetlanie różnych widoków do tych samych danych.

• Zwłaszcza przydaje się do tworzenia widoku wielokolumnowego.

• Dziedziczy z ListBox, dodając jedną własność: View.

• Widok to obiekt dziedziczący z ViewBase – klasy przechowującej wskazanie na style: styl kontrolki listy (DefaultStyleKey) i styl elementu listy

(ItemContainerDefaultStyleKey).

• Wydzielenie informacji o widoku daje lepszą organizację, pozwala np.

wykorzystywać ten sam widok w różnych listach lub używać zamienni kilku widoków w jednej liście.

• WPF dostarcza jeden gotowy widok: GridView. Mamy też możliwość tworzenia własnych.

• Dodawanie kolumn: kolekcja GridView.Columns. Header to nagłówek kolumny, a DisplayMemberBinding – wiązanie obiektem danych.

<ListView.View>

</ListView.View>

</ListView>

• Oczywiście wszystkie rzeczy, które działały dla list (konwertery, szablony) mogą być tu stosowane.

• Użytkownik ma możliwość zmiany kolejności kolumn i zmiany ich rozmiaru (domyślnie rozmiar jest ustalany na podstawie zawartości, o ile nie określimy ręcznie własności Width).

Szablony komórek

• Podobnie jak szablony danych dla ListBoxa, ale działa tylko dla jednej kolumny.

<GridViewColumn.CellTemplate>

<TextBlock Text="{Binding Path=Title}"

TextWrapping="Wrap"></TextBlock>

</DataTemplate>

</GridViewColumn.CellTemplate>

</GridViewColumn>

• W ten sam sposób możemy umieścić w kolumnach dowolne elementy, np. obrazek z poprzedniego wykładu (ImagePathConverter).

• Ponieważ szablony kolumn nie mogą być używane w innym miejscu, przeważnie definiuje się je inline.

• GridViewColumn.CellTemplateSelector pozwala na ustawienie selectora szablonu.

• GridViewColumn.Header pozwala na zdefiniowanie wyglądu nagłówka;

GridViewColumn.HeaderTemplate pozwala na wybór szablonu dla nagłówka lub GridView.ColumnHeaderTemplate na wybór jednego szablonu dla wszystkich.

DataGrid

• Oferuje wielokolumnowy widok z edycją.

• Przeznaczony do wyświetlania całych tabel danych.

• Podstawowe wykorzystanie jest bardzo proste:

• I w kodzie:

data.ItemsSource = books;

• RowDetailsTemplate pozwala na prezentację dodatkowych informacji w wierszu:

<DataGrid.RowDetailsTemplate>

<TextBlock Margin="10" FontWeight="Bold"

Text="{Binding Price}"/>

</DataTemplate>

</DataGrid.RowDetailsTemplate>

</DataGrid>

• Wypełnienie kolekcji DataGrid.Columns pozwala na własne definicje kolumn:

<DataGrid Name="data" SelectionMode="Single"

AutoGenerateColumns="False">

<DataGrid.Columns>

<DataGridTextColumn Header="Title"

Binding="{Binding Title}"/>

<DataGridTextColumn Header="Author"

Binding="{Binding Author}"/>

</DataGrid.Columns>

</DataGrid>

TreeView

• Wspiera wiązanie danych.

• TreeView to specjalizowana kontrolka listy, która zawiera elementy TreeViewItem.

• TreeViewItem to nie kontrolka zawartości, ale kolejna kontrolka listy, która może zawierać kolejne elementy TreeViewItem.

• TreeViewItem dziedziczy z HeaderedItemsControl, która dodaje własność Header.

• Prosty przykład ręcznej definicji drzewa:

</TreeViewItem>

</TreeViewItem>

</TreeView>

• Podobnie, jak w wypadku ListBox, nie musimy budować drzewa z elementów TreeViewItem. Jednak przeważnie najlepiej jest opakowywać swoje obiekty w TreeViewItem, a zawartość do wyświetlenia udostępniać przez

TreeViewItem.Header.

TreeView i wiązanie danych

• Podobnie, jak wypadku pozostałych kontrolek listy, wystarczy ustawić własność ItemsSource.

• Wypełnia to jednak tylko pierwszy poziom drzewa:

public class Category {

public string Name { get; set; } public Category(string name) {

Name = name;

} }

<Grid>

</Grid>

private void Window_Loaded(object sender, RoutedEventArgs e) {

List<Category> lst = new List<Category>();

lst.Add(new Category("Fantasy"));

lst.Add(new Category("Science fiction"));

lst.Add(new Category("Horror"));

drzewo.ItemsSource = lst;

}

• Dodajmy książki do kategorii:

public class Category {

public string Name { get; set; } public Category(string name) {

Name = name;

books = new List<Book>();

}

private List<Book> books;

public List<Book> Books {

get { return books; } }

}

private void Window_Loaded(object sender, RoutedEventArgs e) {

...

lst[0].Books.Add(new Book("Gra o tron",

"George R.R. Martin", 45M));

lst[0].Books.Add(new Book("Straż nocna",

"Terry Pratchett", 27.5M));

lst[0].Books.Add(new Book("Czarnoksiężnik z Archipelagu", "Ursula K. Le Guin", 19.9M));

...

}

• Aby wyświetlić zawartość kategorii, potrzebny jest szablon, który może obsłużyć dane hierarchiczne:

<TreeView.ItemTemplate>

<TextBlock Text="{Binding Path=Name}" />

</HierarchicalDataTemplate>

</TreeView.ItemTemplate>

</TreeView>

• To wyświetli tylko nazwę kategorii.

• HierarchicalDataTemplate może zawierać kolejny szablon – a kolekcja elementów z pierwszego poziomu może być przekazana do kolejnego poziomu.

• Własność ItemsSource określa własność, która zawiera elementy dzieci.

<TreeView.ItemTemplate>

<HierarchicalDataTemplate

ItemsSource="{Binding Path=Books}">

<HierarchicalDataTemplate.ItemTemplate >

<DataTemplate>

<TextBlock Text="{Binding Path=Title}" />

</DataTemplate>

</HierarchicalDataTemplate.ItemTemplate>

</HierarchicalDataTemplate>

</TreeView.ItemTemplate>

</TreeView>

• Drzewo posługuje się teraz dwoma osobnymi szablonami dla pierwszego i drugiego poziomu.

• Drugi szablon wykorzystuje wybrany element pierwszego, jako źródło danych.

• Szablony możemy też przenieść do zasobów i wybierać na podstawie typów, a nie zagnieżdżenia:

<Window.Resources>

<HierarchicalDataTemplate

DataType="{x:Type local:Category}"

ItemsSource="{Binding Path=Books}">

</HierarchicalDataTemplate>

<HierarchicalDataTemplate

DataType="{x:Type local:Book}">

</HierarchicalDataTemplate>

</Window.Resources>

<Grid>

</Grid>

• Pozwala to również na kolejne zagnieżdżenia elementów w drzewie. Np. tak:

public class Category {

public string Name { get; set; } public Category(string name) {

Name = name;

books = new List<object>();

}

private List<object> books;

public List<object> Books {

get { return books; } }

}

...

lst[1].Books.Add(new Category("podkategoria"));

((Category)lst[1].Books[3]).Books.Add(new Book(...));

• Tworzenie gałęzi na żądanie:

◦ Jeśli drzewo zawiera dużą ilość danych, możemy nie wypełniać od razu wszystkich podkategorii, a odwlec to do czasu rozwinięcia gałezi przez użytkownika.

◦ TreeViewItem odpala zdarzenia Expanded i Collapsed, które na o tym informują. Można to wykorzystać, by wypełnić listę danymi.

◦ Początkowo, każda kategoria powinna zawierać jakiś wypełniacz, aby wyświetlony został plus, który umożliwi jej rozwinięcie.

◦ W obsłudze zdarzenia Expanded możemy wczytać potrzebne dane i wypełnić