Programowanie w technologii .NET wykład 8 – Style, listy, drzewa, toolbary, menu

(1)

Programowanie w technologii .NET

wykład 8 – Style, listy, drzewa, toolbary, menu

Podstawy

• Chcąc wielokrotnie wykorzystać pewne ustawienia stylu, może zdefiniować je w zasobach:

<Window.Resources>

Bold

</FontWeight>

Orange

</SolidColorBrush>

</Window.Resources>

(2)

• A następnie z nich skorzystać, ustawiając własności elementów:

<Button Background="{StaticResource ButtonBackground}"

FontWeight="{StaticResource ButtonFontWeight}">

OK

</Button>

<Button Background="{StaticResource ButtonBackground}"

FontWeight="{StaticResource ButtonFontWeight}">

Anuluj

</Button>

• Problemy:

◦ Nic (poza nazwą) nie wskazuje, że te zasoby są powiązane i że powinniśmy używać ich łącznie.

◦ Korzystanie z takich zasobów wymaga dodatkowego kodu XAMLa, przez co staje się nieczytelne.

◦ Lepsze rozwiązanie, to zdefiniowanie Stylu – pojedynczy Style będzie zawierał

(3)

<Window.Resources>

</Style>

</Window.Resources>

• Tworzymy obiekt klasy System.Windows.Style.

• Zawiera on kolekcję Setterów – jeden na własność, której wartość chcemy ustawić.

• Setter określa nazwę własności i wartość, jaką ma jej nadać.

• Każdy element WPF może używać jednego Stylu (lub żadnego) – wybieramy go przez własność Style.

OK

</Button>

Anuluj

</Button>

• Możemy też ustawić to programistycznie:

(4)

• Styl ustawia bazowy wygląd elementu – możemy to nadpisać, ustawiając daną własność w tym elemencie (przeważnie jednak, zamiast na tym polegać, będziemy definiować różne warianty stylów).

• Styl pozwala stworzyć grupę powiązanych ustawień i w łatwy sposób nadać je jakiemuś elementowi. Nie musimy się martwić, jakie własności on ustawia, ani wiedzieć, gdy się zmienia:

<Window.Resources>

<Setter Property="FrameworkElement.Margin" Value="3"/>

<Setter Property="Control.Padding" Value="10,3"/>

</Style>

</Window.Resources>

(5)

Własności klasy Style:

• Setters – kolekcja Setterów i EventSetterów, ustawiających wartości własności i dołączających obsługę zdarzeń.

• Triggers – pozwalają na automatyczną modyfikację stylu, np. w reakcji na zmianę jakiejś własności lub zdarzenie.

• Resources – zasoby używane przez style dobrze jest definiować wewnątrz niego.

• BasedOn – pozwala na dziedziczenie stylów.

• TargetType – określa typ elementu, jakiego dotyczy styl; pozwala stworzyć styl, który będzie stosowany automatycznie do elementów określonego typu.

(6)

Tworzenie obiektu stylu

• Można je definiować w zasobach (na dowolnym poziomie: okna, aplikacji, kontenera, kontrolki).

• Można też ustawiać od razu w miejscu użycia:

<Button.Style>

<Style>

</Style>

</Button.Style>

OK

</Button>

• Wydaje się to mało użyteczne w wypadku setterów, ale bywa przydatne z triggerami.

(7)

Setters

• Styl zawiera kolekcję obiektów klasy Setter.

• Każdy Setter ustawia pojedynczą własność (tylko zależnościową!) w elemencie.

• Aby ustawić złożoną wartość, możemy (jak zwykle) zastąpić atrybut zagnieżdżeniem:

<Setter.Value>

</LinearGradientBrush>

</Setter.Value>

</Setter>

(8)

• Aby określić własność, którą chcemy ustawić, musimy podać zarówno jej nazwę jak i nazwę klasy, w której jest zawarta. Nie musi to być jednak nazwa klasy, w której jest ona zdefiniowana (może to być klasa potomna, która dziedziczy tę własność):

</Style>

• Działanie się nie zmieni, bo nadal odwołujemy się do tej samej własności.

• Pozwala to również ustawiać własności, które nie będą istnieć w elemencie używającym tego stylu.

(9)

• Poniższy przykład nie ustawi innego stylu dla przycisku, a innego dla pola tekstowego. Własności będą ustawione dwukrotnie, zatem w efekcie otrzymamy wynik ostatniego ustawienia. Dzieje się tak, mimo iż FontSize jest deklarowane osobno w Button i TextBlock – wskazują bowiem na tę samą własność

zależnościową.

</Style>

• Jeśli wszystkie własności, które ustawiamy, dotyczą jednego typu elementów, możemy ustawić TargetType stylu:

</Style>

(10)

EventSetters

• Dowiązują do elementu obsługę zdarzeń.

...

<EventSetter Event="UIElement.MouseEnter"

Handler="element_MouseEnter"/>

<EventSetter Event="UIElement.MouseLeave"

Handler="element_MouseLeave"/>

</Style>

• Metody obsługi zdarzeń:

private void element_MouseEnter(...) {

((UIElement)sender).FontStyle = FontStyles.Italic;

}

private void element_MouseLeave(...) {

((Control)sender).ClearValue(Control.FontStyleProperty);

}

(11)

• Zdarzenia MouseEnter i MouseLeave nie wykorzystują tunneling i bubbling, dlatego nie moglibyśmy ustawić ich np. w kontenerze dla grupy elementów.

EventSetter jest niezłym rozwiązaniem.

• EventSettery są rzadko wykorzystywane w WPF – podobną funkcjonalność mogą zapewnić nam bowiem triggery.

(12)

Dziedziczenie stylów

• Możemy zdefiniować dowolną liczbę stylów na dowolnym poziomie.

• Ale jeden element może używać tylko jednego stylu.

• Z pomocą przychodzi dziedziczenie własności i dziedziczenie stylów.

• Niektóre własności są dziedziczone z kontenera (IsEnabled, IsVisible, Foreground, własności czcionek).

• Możemy też stworzyć nowy styl na podstawie innego (atrybut BasedOn):

<Window.Resources>

</Style>

<Style x:Key="EmphasizedOrangeButton"

BasedOn="{StaticResource OrangeButton}">

</Style>

</Window.Resources>

(13)

• Jeśli ponownie ustawimy tę samą własność, setter potomny nadpisze wartość z settera bazowego.

• Dziedziczenie stylów zwiększa złożoność, dlatego dobrze jest ograniczyć jego użycie do sytuacji gdy jeden styl jest pewnym wariantem drugiego. W pozostałych przypadkach lepiej jest tworzyć style z różnymi kombinacjami formatowania.

(14)

Automatyczne stosowanie stylów

• Aby automatycznie używać stylu do wszystkich elementów określonego typu, należy:

◦ ustawić własność TargetType,

◦ nie ustawiać klucza (WPF zrobi to za nas: x:Key="{x:Type Button}").

• Styl będzie automatycznie używany przez wszystkie elementy określonego typu w

dół drzewa elementów .

<Window.Resources>

</Style>

</Window.Resources>

<Button Style="{x:Null}">Anuluj</Button>

</WrapPanel>

(15)

• Przycisk Anuluj zastępuje automatyczny styl swoim własnym ustawieniem (w tym wypadku nullem, co po prostu powoduje usunięcie stylu).

• W wypadku złożonych okien, kłopotliwe bywa śledzenie w jaki sposób ustawiana jest dana własność. Dlatego z automatycznych stylów lepiej korzystać oszczędnie, np. tylko aby ustawić jednakowy margines wszystkich Buttonów w kontenerze.

(16)

Triggers

• Pozwalają na automatyzację prostych zmian stylu (bez potrzeby pisania kodu) – np.

w reakcji na zdarzenie lub zmianę wartości.

• Każdy styl może mieć dowolną liczbę triggerów: obiektów klas dziedziczących z System.Windows.TriggerBase, zawartych w kolekcji Style.Triggers.

• Triggery mogą być użyte bezpośrednio w elementach, z pominięciem Stylu, dzięki kolekcji FrameworkElement.Triggers.

Klasy dziedziczące z TriggerBase

• Trigger – najprostszy z triggerów, reaguje na zmianę wartości własności zależnościowej.

• MultiTrigger – jak wyżej, ale pozwala łączyć kilka warunków.

• DataTrigger – podobny do Triggera, ale reaguje na zmianę w dowiązanych danych – nei wymaga własności zależnościowej.

• MultiDataTrigger – jak wyżej, ale dla kilku warunków.

• EventTrigger – uruchamiają określone akcji w reakcji na zdarzenie, służą np. do wyświetlania animacji.

(17)

Trigger

• Może być dołączony do dowolnej własności zależnościwej (np. IsFocused, IsMouseOver, IsPressed).

• Określamy własność, która ma być obserwowana i wartość, jakiej oczekujemy.

• Gdy własność przyjmie tę wartość, uruchomione zostaną settery z kolekcji Trigger.Setters.

• Nie jest możliwe stworzenie bardziej złożonych reguł: tylko proste porównanie wartości.

<Style.Setters>

</Style.Setters>

<Style.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="Foreground" Value="White"/>

</Trigger>

</Style.Triggers>

</Style>

(18)

• Kolor znaków zmieni się, gdy wskaźnik myszy znajduje się nad przyciskiem.

• Nie musimy deklarować „powrotu do poprzedniej wartości”: oryginalna wartość zostaje zapamiętana i własność do niej wraca, gdy trigger przestanie być aktywny.

• Możemy stworzyć kilka triggerów do jednego elementu. Jeśli ustawiają one tę samą własność, wygrywa zawsze ostatni na naszej liście (niezależnie od czasu zdarzeń).

(19)

<Style.Triggers>

</Trigger>

</Trigger>

</Trigger>

</Style.Triggers>

</Style>

• Gdy naciskamy przycisk, wygrywa IsPressed.

(20)

Triggery można wykorzystać do informowania o błędzie:

• Pola z wiązaniem danych (i walidacją!):

<TextBox Text="{Binding Path=Imię,

ValidatesOnDataErrors=True}"/>

• Trigger reaguje na Validation.HasError:

<Style.Triggers>

<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},

Path=(Validation.Errors)[0].ErrorContent}"/>

</Trigger>

</Style.Triggers>

</Style>

(21)

MultiTrigger

Kolekcja Conditions pozwala zdefiniować szereg oczekiwanych wartości własności.

Trigger uruchamia się tylko wówczas, gdy wszystkie one są spełnione.

<Style.Triggers>

<MultiTrigger.Conditions>

</MultiTrigger.Conditions>

<MultiTrigger.Setters>

</MultiTrigger.Setters>

</MultiTrigger>

</Style.Triggers>

</Style>

Kolor tekstu zostanie ustawiony tylko gdy przycisk ma focusa, a wskaźnik myszy znajduje się nad nim.

(22)

EventTrigger

• Oczekuje na odpalenie konkretnego zdarzenia i uruchamia przewidzianą akcję.

Przeważnie służy to do włączania animacji.

• Przykład:

...

<Style.Triggers>

<EventTrigger.Actions>

<DoubleAnimation Duration="0:0:0.2"

Storyboard.TargetProperty="FontSize"

To="22" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Style.Triggers>

</Style>

(23)

• Animacja zdefiniowana jest w Storyboardzie. Animacja sprowadza się do modyfikacji własności zależniościowych w określonym czasie.

• W przeciwieństwie do Triggerów, nie ma automatycznego „powrotu” i musimy zadeklarować to sami:

...

<Style.Triggers>

...

<EventTrigger.Actions>

<DoubleAnimation Duration="0:0:1"

Storyboard.TargetProperty="FontSize" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Style.Triggers>

</Style>

• Tym razem jednak nie podajemy docelowego rozmiaru czcionki, WPF uznaje

(24)

DataTrigger

• Jak triggery, ale nie wymagają własności zależnościowych.

<Window.Resources>

<Style.Triggers>

<DataTrigger Binding="{Binding

RelativeSource={RelativeSource Self}, Path=Text}" Value="EX">

<Setter Property="Control.Background"

Value="Orange"/>

</DataTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<TextBox Margin="3"

Style="{StaticResource DangerStyle}" />

</StackPanel>

(25)

• Style w listach: przy pomocy ItemContainerStyle możemy wskazać styl, który będzie użyty do każdego elementu listy.

<ListBox.ItemContainerStyle>

<Style>

<Setter Property="ListBoxItem.Background"

Value="LightSteelBlue" />

<Setter Property="ListBoxItem.Margin"

Value="5" />

<Setter Property="ListBoxItem.Padding"

Value="5" />

</Style>

</ListBox.ItemContainerStyle>

</ListBox>

(26)

(27)

• Przy pomocy triggerów możemy formatować wygląd elementu wybranego:

...

<Style.Triggers>

<Trigger Property="IsSelected" Value="True">

<Setter ... />

</Trigger>

</Style.Triggers>

</Style>

(28)

• Naprzemienne podświetlanie wierszy: AlternationCount i AlternationIndex.

<Style.Triggers>

<Trigger Property="ItemsControl.AlternationIndex"

Value="1">

</Trigger>

</Style.Triggers>

</Style>

</ListBox>

(29)

• StyleSelector – gdy chcemy nadać różny styl bazując na bardziej złożonych warunkach. Działa bardzo podobnie, jak DataTemplateSelector.

(30)

• DataTriggery można wykorzystać również do warunkowego formatowania w szablonach danych:

<DataTemplate.Triggers>

<DataTrigger Binding="{Binding Path=CategoryName}"

Value="Horror">

<Setter Property="Control.Foreground"

Value="Red" />

</DataTrigger>

</DataTemplate.Triggers>

...

</Grid>

</Border>

</DataTemplate>

(31)

• Wady – zmieniamy pojedyncze własności, testujemy tylko pojedyncze warunki.

(32)

• DataTrigger pozwala utworzyć listę z elementami, które wyświetlają dodatkowe dane po wybraniu (a raczej ukrywają, gdy element nie jest wybrany).

• Należy sprawdzić wartość IsSelected elementu listy i ustawić wartość Visibility innego elementu.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock.Style>

<Style>

...

</Style>

</TextBlock.Style>

</TextBlock>

</Grid>

</Border>

(33)

<Style>

<Style.Triggers>

<Setter Property="TextBlock.Visibility"

Value="Collapsed" />

</DataTrigger>

</Style.Triggers>

</Style>

(34)

Kontrolki list

(35)

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

(36)

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

(37)

ComboBox

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

(38)

• 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

(39)

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.

(40)

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

<ListView.View>

<GridView.Columns>

<GridViewColumn Header="Tytuł"

DisplayMemberBinding="{Binding Path=Title}"/>

<GridViewColumn Header="Autor"

DisplayMemberBinding="{Binding Path=Author}"/>

<GridViewColumn Header="Cena"

DisplayMemberBinding="{Binding Path=Price}"/>

</GridView.Columns>

</GridView>

</ListView.View>

</ListView>

(41)

• 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).

(42)

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.

(43)

(44)

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;

(45)

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

(46)

(47)

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>

(48)

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

(49)

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>

(50)

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;

}

(51)

• Dodajmy książki do kategorii:

Name = name;

books = new List<Book>();

}

private List<Book> books;

public List<Book> Books {

get { return books; } }

}

(52)

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>

(53)

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

(54)

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

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

(55)

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

<Window.Resources>

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

ItemsSource="{Binding Path=Books}">

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

</Window.Resources>

<Grid>

</Grid>

(56)

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

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(...));

(57)

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

(58)