Programowanie w technologii .NET wykład 2 –

(1)

Programowanie w technologii .NET

wykład 2 – posługiwanie się kontrolkami

Własności:

// publiczne zmienne składowe:

class Element {

public string nazwa;

}

// użycie:

Element el = new Element();

el.nazwa = "...";

... = el.nazwa;

(2)

// gettery i settery:

class Element {

private string nazwa;

public void setNazwa(string value) {

nazwa = value;

}

public string getNazwa() {

return nazwa;

} }

// użycie:

el.setNazwa("...");

... = el.getNazwa();

(3)

// properties:

class Element {

public string nazwa;

public string Nazwa {

set {

nazwa = value;

} get {

return nazwa;

} } }

// użycie:

el.Nazwa = "...";

... = el.Nazwa;

(4)

// auto-properties:

class Element {

public string Nazwa { set; get; } }

// użycie:

el.Nazwa = "...";

... = el.Nazwa;

(5)

Mechanizm partial class:

class Element {

private int x, y;

protected string nazwa;

public Element(int x, int y) {

this.x = x; this.y = y;

}

public void nazwij(string n) {

nazwa = n;

}

public void przesun(int dx, int dy) {

x += dx; y += dy;

} }

(6)

partial class Element {

private int x, y;

public Element(int x, int y) {

this.x = x; this.y = y;

}

public void przesun(int dx, int dy) {

x += dx; y += dy;

} }

partial class Element {

protected string nazwa;

public void nazwij(string n) {

nazwa = n;

} }

(7)

Delegacje i zdarzenia:

public delegate void funkcja(string a);

class A {

public void f(string x) {

Console.WriteLine("A.f({0})", x);

} } // ...

A a = new A();

funkcja delegacja = a.f;

// ...

delegacja("test");

(8)

public delegate void EventHandler(...);

class Button {

public event EventHandler Click;

protected void mouseButtonDown(...) {

// ...

Click(...);

} }

class MyApp {

MyApp() {

Button btn = new Button();

btn.Click += f;

}

public void f(...) {

// ...

}

(9)

„ręczne” tworzenie okna:

public class Window1 : Window {

public Window1() {

InitializeComponent();

}

private void InitializeComponent() {

} }

(10)

public class Window1 : Window {

public Window1() { InitializeComponent(); } private void InitializeComponent() {

// tytuł i rozmiar:

this.Width = this.Height = 300;

this.Title = "Okienko";

} }

(11)

// tytuł i rozmiar:

this.Width = this.Height = 300;

this.Title = "Okienko";

// przycisk:

button1 = new Button();

button1.Content = "Nie dotykać";

button1.Margin = new Thickness(30);

}

private Button button1;

}

(12)

// przycisk:

button1 = new Button();

button1.Content = "Nie dotykać";

button1.Margin = new Thickness(30);

// podpinamy obsługę button1.Click += klik;

}

private Button button1;

private void klik(object sender, RoutedEventArgs e) { button1.Content = "Bzzzzt";

} }

(13)

// przycisk:

// podpinamy obsługę button1.Click += klik;

// panel na zawartość:

DockPanel panel = new DockPanel();

// przycisk wrzucamy na panel:

panel.AddChild(button1);

// a panel na okno:

this.AddChild(panel);

}

private void klik(object sender, RoutedEventArgs e) { button1.Content = "Bzzzzt";

} }

(14)

public partial class Window1 : Window { private void InitializeComponent() { this.Width = this.Height = 300;

button1.Click += klik;

DockPanel panel = new DockPanel();

panel.AddChild(button1);

this.AddChild(panel);

}

public class Window1 : Window { public Window1()

{

InitializeComponent();

}

private void klik(object sender, RoutedEventArgs e) {

button1.Content = "Bzzzzt";

}

(15)

<Window x:Class="WpfApplication1.Window1" ...

Width="300" Height="300" Title="Okienko">

<DockPanel>

<Button Margin="30" Name="button1" Click="klik">

Nie dotykać </Button>

</DockPanel>

</Window>

public class Window1 : Window { public Window1()

{

InitializeComponent();

}

private void klik(object sender, RoutedEventArgs e) {

button1.Content = "Bzzzzt";

} }

(16)

posługiwanie się własnościami:

w kodzie:

btn1.Content = "Not OK";

posługiwanie się zdarzeniami:

albo w kodzie:

btn1.Click += new RoutedEventHandler(klik);

lub:

btn1.Click += klik;

i odłączanie:

btn1.Click -= klik;

metoda obsługi zdarzenia:

void klik(object sender, RoutedEventArgs e) { ... }

(17)

Content Controls – kontrolki zawartości

Mogą zawierać pojedynczy element. Ten sam mechanizm zagnieżdżania, który pozwalał układać nam elementy w kontenerach, służy do ustawienia zawartości kontrolki.

<Button Margin="3" Padding="5">Napis</Button>

</Button>

<Label Margin="3">Napis i obrazek</Label>

</StackPanel>

</Button>

</StackPanel>

 Mają właściwość Content.

(18)

(19)

uwaga: tylko część elementów umieszczanych na oknie to kontrolki (kontrolki to elementy z którymi użytkownik może wchodzić w interakcję)

Podstawowe własności kontrolek:

 Dotyczące rozmieszczenia (Margin, Padding, HorizontalAlignment, VerticalContentAlignment, etc.)

(20)

 Wybór czcionek:

<Label FontFamily="Arial">Arial</Label>

<Label FontFamily="Times New Roman">Times New Roman</Label>

<Label FontFamily="Courier New">Courier New</Label>

<Label FontFamily="Comic Sans MS">Comic Sans MS</Label>

<Label FontStyle="Italic">Italic</Label>

<Label FontStyle="Italic" FontWeight="Bold">Italic Bold</Label>

</WrapPanel>

(21)

 Wybór tła, kolorów, obramowania

<Label Foreground="BlueViolet">BlueViolet</Label>

<Label Background="GreenYellow">GreenYellow</Label>

<Label Background="SkyBlue">SkyBlue</Label>

<Label BorderBrush="Maroon" BorderThickness="1">Maroon 1</Label>

</WrapPanel>

Albo: <Label Foreground="#FFFF0000">Red</Label>

(22)

 Background, Foreground są typu Brush, a nie Color – pozwala to na używanie różnego rodzaju wypełnień (gradienty, tekstura, …):

<Label>Red

<Label.Foreground>

</Label. Foreground >

</Label>

 Ręcznie:

pędzel z koloru:

button1.Background = new SolidColorBrush(Colors.GreenYellow);

z koloru systemowego:

button1.Background = new SolidColorBrush(SystemColors.ControlColor);

pędzle systemowe:

button1.Background = SystemColors.ControlBrush;

z koloru w RGB:

button1.Foreground = new SolidColorBrush(Color.FromRgb(0, 128, 255));

z koloru w ARGB – z wartością Alpha:

button1.Foreground = new SolidColorBrush(Color.FromArgb(128, 0, 128, 255));

(23)

 Widoczność:

<Button>Pierwszy</Button>

<Button Visibility="Hidden">Drugi</Button>

<Button>Trzeci</Button>

</WrapPanel>

 Przeźroczystość:

<Button>Pełny</Button>

<Button Opacity="0.5">Opacity</Button>

<Button Background="#80FFFFFF">Kolor</Button>

</WrapPanel>

 Dostępność – wyszarzenie:

<Button>Normalny</Button>

<Button IsEnabled="False">Niedostępny</Button>

</WrapPanel>

(24)

Przycisk – Button

<Label Margin="3">Podaj kod:</Label>

</DockPanel>

<Button Margin="3" Padding="15,3" IsDefault="True"

Click="OkClick">OK</Button>

<Button Margin="3" Padding="15,3" IsCancel="True"

Click="CancelClick">Anuluj</Button>

</WrapPanel>

</StackPanel>

(25)

private void CancelClick(object sender, RoutedEventArgs e) {

MessageBox.Show("Nacisnąłeś Anuluj");

}

private void OkClick(object sender, RoutedEventArgs e) {

MessageBox.Show("Nacisnąłeś OK");

}

 Zdarzenie Click.

 Właściwości:

o IsCancel (naciśnięcie Esc automatycznie go uruchomi)

o IsDefault (ma specjalne graficzne oznaczenie, uruchomi go naciśnięcie Enter (o ile nie stoimy na innym przycisku))

o (ale zamknięciem okna musimy zająć się sami)

(26)

CheckBox i RadioButton – są szczególnymi typami przycisków.

CheckBox:

 właściwość IsChecked – przyjmuje wartość true, false oraz null (stan niezdefiniowany)

 właściwość IsThreeState – ustawiona na true oznacza, że użytkownik może wybrać stan niezdefiniowany

</StackPanel>

(27)

RadioButton:

 wybór jednego z grupy (na podstawie zawierania elementów w kontenerze)

 możliwe definiowanie własnych grup (właściwość GroupName)

<RadioButton Margin="3" IsChecked="True">Opcja A</RadioButton>

<RadioButton Margin="3">Opcja B</RadioButton>

<RadioButton Margin="3">Opcja C</RadioButton>

</StackPanel>

(28)

GroupBox

 Ramka z nagłówkiem, służy do grupowania innych kontrolek

 Zawiera pojedynczy element!

<RadioButton Margin="3">Pierwsza</RadioButton>

<RadioButton Margin="3">Druga</RadioButton>

<RadioButton Margin="3">Trzecia</RadioButton>

</StackPanel>

</GroupBox>

(29)

 W nagłówku możemy umieścić również inne elementy.

<GroupBox.Header>

<CheckBox Click="adresClick" Name="adresCheck" IsChecked="true">

Adres</CheckBox>

</GroupBox.Header>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Label Margin="3">Imię i nazwisko:</Label>

<Label Margin="3" Grid.Row="1">Ulica:</Label>

<Label Margin="3" Grid.Row="2">Kod i miejscowość:</Label>

</Grid>

</GroupBox>

(30)

private void adres(object sender, RoutedEventArgs e) {

if (adresCheck.IsChecked == true) adresGrid.IsEnabled = true;

else

adresGrid.IsEnabled = false;

}

(31)

Przykład praktyczny:

<CheckBox Margin="3" Tag="Pieczarki">Pieczarki</CheckBox>

<CheckBox Margin="3" Tag="Salami">Salami</CheckBox>

<CheckBox Margin="3" Tag="Oliwki">Oliwki</CheckBox>

</StackPanel>

</GroupBox>

</StackPanel>

(32)

string str = "Wybrałeś: ";

foreach (CheckBox cbx in dodatki.Children) {

if(cbx.IsChecked == true) str += cbx.Tag + ", ";

}

wybór.Content = str;

}

(33)

Label – etykieta

 To również jest kontrolka zawartości

 Pozwala na definiowanie mnemoników – skrótów odsyłających do kontrolki

<CheckBox Margin="3">Wybór _pierwszy</CheckBox>

<CheckBox Margin="3">Wybór _drugi</CheckBox>

<CheckBox Margin="3">Wybór _trzeci</CheckBox>

</StackPanel>

(34)

ToolTip – podpowiedzi:

 Nie reagują na wejście użytkownika

...

...

</Button>

...

</StackPanel>

(35)

 Mogą być bardziej złożone:

<Button.ToolTip>

<Label FontWeight="Bold" Background="Blue"

Foreground="White">

Przycisk "Dwa"

</Label>

<TextBlock Padding="10" Width="200"

TextWrapping="WrapWithOverflow">

Opis działania drugiego przycisku zajmuje parę linijek tekstu.

</TextBlock>

<Label FontWeight="Bold">F1 - dodatkowa pomoc.</Label>

</StackPanel>

</Button.ToolTip>

Dwa

</Button>

(36)

 elementy na tooltipie nie reagują na wejście użytkownika!

 właściwości kontrolki Tooltip pozwalają ustawić położenie, czas wyświetlania, czas oczekiwania, etc.

(37)

Popup: podobne do tooltipa, ale nie znika ani nie pojawia się automatycznie, a jego elementy mogą przyjmować wejście („łapie focusa”)

w XAMLu tylko definiujemy

<Button Click="klik">Opcje</Button>

<Popup Name="opcje" StaysOpen="False" Placement="Mouse"

PopupAnimation="Slide">

<Border BorderBrush="Black" BorderThickness="1"

Background="White">

<CheckBox>Opcja 1</CheckBox>

</StackPanel>

</Border>

</Popup>

a otwieramy w kodzie:

opcje.IsOpen = true;

}

(38)

Kursor myszy

właściwość Cursor można ustawić dla każdego elementu

kursory systemowe dostępne jako statyczne właściwości klasy Cursors:

button1.Cursor = Cursors.Wait;

a w XAMLu:

jeśli ustawienia kursora się nakładają (np. okna i kontrolki na nim umieszczonej) –

wybierana jest właściwość bardziej specyficzna (czyli nad kontrolką jest kursor kontrolki, a nad resztą okna – kursor okna)

przeciwdziała temu:

ForceCursor – aby ojciec nadpisał kursora dzieci

inne rozwiązanie – kursor dla każdego elementu każdego okna aplikacji:

Mouse.OverrideCursor = Cursors.Wait;

własne kursory:

this.Cursor = new Cursor(Path.Combine(applicationDir, "mycursor.ani"));

(39)

Expander

 Ukrywa swoją zawartość, którą użytkownik może rozwinąć.

 IsExpanded – sterujemy rozwinięciem/zwinięciem

 ExpandDirection – kierunek rozwijania (domyślne Down lub Up, Left, Right)

...

</StackPanel>

</Expander>

</StackPanel>

(40)

Kontrolki tekstowe: TextBox Wprowadzanie kilku linijek tekstu:

 AcceptsReturn – ustawione na true pozwala na wprowadzanie Enterów

 AcceptsTab – podobnie z Tabami

 TextWrapping (ustawiona na Wrap lub WrapWithOverflow) – zawijanie zbyt długich wierszy (WrapWithOverflow pozwala wypływać poza kontrolkę zbyt długim liniom, Wrap zawsze łamie tekst)

AlamakotaAlamakota Alamakota</TextBox>

AlamakotaAlamakota Alamakota</TextBox>

(41)

Ponadto:

 MinLines i MaxLines pozwalają na ustawienie rozmiaru kontrolki aby była w stanie wyświetlić zadeklarowaną liczbę linii

 LineCount – pozwala sprawdzić faktyczną liczbę linii

 VerticalScrollBarVisibility – ustawiając na Visible lub Auto dodajemy pasek przewijania

 IsReadOnly – tekst tylko do odczytu (ale pozwala wybrać go i skopiować w odróżnieniu od etykiety)

 Text – zawartość tekstowa

 Text Selection:

<Button Click="klik">zaznacz</Button>

box.SelectionStart = 5;

box.SelectionLength = 5;

box.SelectedText = "xxx";

box.Focus();

}

(42)

 Focus() – przejęcie „fokusa”

<Button DockPanel.Dock="Right" Click="Clear">Wyczyść</Button>

</DockPanel>

private void Clear(object sender, RoutedEventArgs e) {

tekst.Text = "";

tekst.Focus();

}

 Kontrolka, która aktualnie przyjmuje wejście z klawiatury, ma „focusa”.

 właściwość Focusable – czy może przyjąć focusa

 Przechodzenie Tabem – na podstawie hierarchii zagnieżdżenia.

o Można to zmienić, wybierając własną sekwencję przez ustawienie właści- wości TabIndex (0 – pierwszy, a potem wraz ze wzrostem).

o IsTabStop – jeśli false, to danego elementu nie zwiedzamy Tabem (ale na-

(43)

PasswordBox

 Password – pozwala pobrać hasło

 (hasło przechowywane jest w pamięci w postaci zaszyfrowanej)

<Label Margin="3">Hasło</Label>

</DockPanel>

<Button HorizontalAlignment="Center" Margin="3" Padding="15,3"

Click="OkClick">OK</Button>

</StackPanel>

private void OkClick(object sender, RoutedEventArgs e) {

MessageBox.Show("Twoje hasło to " + hasło.Password + "!");

}

(44)

Range-Based Controls (ScrollBar, Slider, ProgressBar)

 Przyjmują pewną wartość z ustalonego zakresu

 Value (aktualna wartość) – jej zmiana odpala ValueChanged

 Maximum i Minimum – dolny i górny zakres Slider:

 Orientation – w poziomie czy w pionie?

 TickPlacement – None, TopLeft lub BottomRight

 TickFrequency – odległość między tickami

 IsSnapToTickEnabled – doklejanie do ticków

<Slider Minimum="1" Value="15" Maximum="100" TickFrequency="10"

TickPlacement="TopLeft"/>

(45)

 Ticks – kolekcja położeń (jeśli np. mają być nieregularnie rozmieszczone)

 IsSelectionRangeEnabled – wybór zakresu na ścieżce (użyteczne np. w media playerach) (przy pomocy SelectionStart i SelectionEnd)

<Slider Margin="5" Value="1.5" TickFrequency="1"

TickPlacement="BottomRight"/>

<Slider Margin="5" Value="1.5" Ticks="1,2,3,5,8"

TickPlacement="BottomRight"/>

<Slider Margin="5" Value="1.5" TickFrequency="2.5"

TickPlacement="BottomRight" IsSelectionRangeEnabled="True"

SelectionStart="3" SelectionEnd="7"/>

(46)

Inny przykład:

<Slider Margin="5" Minimum="10" Maximum="50" Value="12"

TickFrequency="5" TickPlacement="BottomRight"

ValueChanged="slide"/>

To jest test slidera.

</Label>

</StackPanel>

private void slide(object sender,

RoutedPropertyChangedEventArgs<double> e) {

this.FontSize = e.NewValue;

}

(47)

ProgressBar

Nie zapewnia interakcji, a jedynie wyświetla jakąś informację dla użytkownika.

Pozwala też na stan nieokreślony (gdy nie wiemy ile czasu potrwa zdarzenie):

(48)

Menu

 Mamy dostępne dwie kontrolki: Menu (menu aplikacji) i ContextMenu (menu kontekstowe).

 Menu:

o Podlega zwyczajnym regułom rozmieszczania elementów (przeważnie jest na szczycie DockPanela lub w pierwszym wierszu Grida).

o Można dodać dowolną liczbę menu.

o Własność IsMainMenu ustawiona na true powoduje, że menu dostanie focusa po naciśnięciu klawisza Alt lub F10.

 ContextMenu:

o Nie jest umieszczane w oknie, lecz ustawiane dla konkretnego elementu.

MenuItem

 Menu zbudowane jest z elementów typu MenuItem oraz Separator.

 MenuItem to rozwijalne podmenu.

 Separator to po prostu pozioma linia, nie reagująca na wejście użytkownika.

 Menu możemy (teoretycznie) wypełniać dowolnymi elementami (ale lepiej nie przesadzać).

(49)

</MenuItem>

</MenuItem>

</Menu>

 MenuItem reaguje na kliknięcie zdarzeniem Click.

 Wyświetla: tekst (Header), ikonę (Icon), znacznik wyboru (IsChecked – wybranie dodatkowo IsCheckable kliknięcie zmienia stan wyboru), skrót klawiaturowy (InputGestureText – to jest tylko tekstu skrótu, nie zapewnia to obsługi).

(50)

ToolBar i StatusBar

<Button>Paste</Button>

</ToolBar>

<Label>Ready</Label>

</StatusBar>

(51)

Items Controls – kontrolki elementów

 Pozwalają na wyświetlanie listy wielu elementów.

ListBox

 SelectionMode można ustawić na: Multiple (wybieramy kilka klikając na nich) lub Extended (klikając z Ctrl lub Shift)

<ListBoxItem>jeden</ListBoxItem>

<ListBoxItem>cztery</ListBoxItem>

</ListBox>

(52)

Na liście można umieszczać też inne elementy:

</ListBoxItem>

</ListBoxItem>

</ListBox>

(53)

a nawet:

<Label VerticalContentAlignment="Center">uwaga</Label>

</StackPanel>

</StackPanel>

</ListBox>

(54)

pozwala to stworzyć listę wyboru:

<ListBox SelectionMode="Extended" Name="lista"

SelectionChanged="lst_SelChanged"

CheckBox.Click="lst_SelChanged">

<CheckBox>jeden</CheckBox>

<CheckBox>cztery</CheckBox>

</ListBox>

private void lst_SelChanged(object sender, EventArgs e) { StringBuilder str = new StringBuilder();

foreach (CheckBox item in lista.Items) { if (item.IsChecked == true) {

str.Append(item.Content);

str.Append("\r\n");

} }

opis.Content = str.ToString();

(55)

ComboBox

 działa podobnie jak ListBox, ale ukazuje jedynie jeden wybrany element

<ComboBoxItem>jeden</ComboBoxItem>

<ComboBoxItem>cztery</ComboBoxItem>

</ComboBox >

 Właściwość IsEditable ustawiona na true pozwala użytkownikowi wprowadzić własną wartość.

(56)

Programistyczny dostęp do listy elementów:

<Button Click="Dodaj">Dodaj</Button>

</ToolBar>

</DockPanel>

private void Dodaj(object sender, RoutedEventArgs e) {

lista.Items.Add(new ListBoxItem { Content="nowy element" });

}

private void Usuń(object sender, RoutedEventArgs e) {

if(lista.SelectedIndex >= 0)

lista.Items.RemoveAt(lista.SelectedIndex);

}

(57)