piątek, 4 maja 2012

70-511 Rozdział 1 - Tworzenie interfejsu użytwkownika - podstawowe kontrolki

Pierwszy rozdział treningu, dotyczy budowania interfejsu użytkownika. Platforma .NET umożliwia budowanie interfejsu użytkownika za pomocą WindowsForms lub WPF.
Budowa interfejsu w każdym z tych frameworków rządzi się swoimi prawami. My zajmiemy się WPFem.
Kontrolki w WPF można podzielić na 3 rodzaje:


  • Kontrolki indywidualne - spełniają najczęściej jedno zadanie: pozwalają na wprowadzenie tekstu (TextBox), wyświetlanie tekstu (Label, TextBlock), klikanie (Button) itp
  • Kontrolki przechowujące kolekcje obiektów - przechowują grupy powiązanych ze sobą obiektów - np. ListBox, Menu, TreeView
  • Kontrolki odpowiedzialne za rozmieszczenie innych kontrolek na formatce - np. Grid, StackPanel, Canvas

Content Controls
Kontrolka Content Control dziedziczy po klasie ContentControl i pozwala na zagnieżdżenie w sobie pojedynczej kontrolki. Zagnieżdżona kontrolka może być dowolnego typu, a odwołanie się do niej czy też jej przypisanie może nastąpić zarówno w kodzie jak i XAML za pomocą właściwości Content.
Właściwość Content jest typu object, tak więc można przypisać jej dowolny obiekt. Wyświetlenie takiej zagnieżdżonej kontrolki zależy od tego czy dziedziczy po klasie UIElement:
  • jeżeli nie dziedziczy po UIElement, zostanie zastosowana metoda ToString i jej rezultat będzie wyświetlony w kontrolce
  • jeżeli dziedziczy po UIElement, zostanie wyświetlona w taki sposób, jaki zostało to wyspecyfikowanie w kontrolce
Należy zauważyć, że pomimo tego, iż Content control, może zawierać tylko jeden zagnieżdżony element, za pomocą odpowiedniego kontenera (np. StackPanel) można wyświetlić więcej obiektów.


Label control - Mnemonic keys
Kontrolka ta wykorzystywana jest do wyświetlania tekstu. Kontrolka ta pozwala na korzystanie z tzw. mnemonic keys, czyli predefiniowanych skrótów, które definiują która kontrolka ma stać się aktywna w przypadku ich użycia.
Przykładowe użycie: Label oraz obok TextBox. Chcemy aby po naciśnięciu ALT + I został przeniesiony kursor na TextBox. Realizacja w kodzie:

Code:
            <Label Target="{Binding ElementName=tbFirstName}">Naciśnij Alt+_I</Label>
            <TextBox Name="tbFirstName" Height="30" Width="100" />

Mnemonic Key (skrót ustawiamy poprzez dodanie znaku podkreślenia "_" przed wybraną literą do skrótu. Kontrolkę docelową wskazujemy za pomocą bindowania i nazwy elementu na który wskazujemy.


Button control
Przycisk jest dobrze znaną kontrolkę więc nie będę się nad nim rozwodził.
Dwie ważne właściwości, które zwykle ustawiamy podczas tworzenia interfejsu użytkownika to:
  • IsDefault - determinuje, który klawisz zareaguje po naciśnięciu Entera na formatce
  • IsCanceled - determinuje który klawisz zareaguje po naciśnięciu klawisza Esc
Przyciski definiują także tzw. access keys (przyciski dostępu). Jest to funkcjonalność podobna do Mnemonic keys i w taki sam sposób jest definiowana (poprzez znak podkreślenia przed wybraną literą). Klawisz skrótu to także ALT + wybrana litera.


CheckBox
Pozwala na wybór opcji. Zawiera właściwość IsChecked która jest typu bool?. Przybiera więc 3 stany:
  • po otwarciu formatki: null
  • po zaznaczeniu: true
  • po odznaczeniu: false

RadioButton
RadioButton pozwala na wybór jednej opcji z wielu. Jeżeli chcemy pogrupować RadioButton-y mamy dwie możliwości:
  • w kontenerze (Grid, StackPanel) są one automatycznie grupowane do jednej grupy
  • Można użyć właściwości GroupName w celu przypisania RadioButtonowi innej grupy 

TextBlock
Kontrolka służąca do wyświetlania tekstu.


ImageControl
Kontrolka służąca do wyświetlania plików graficznych. Najważniejsze właściwości:
  • Source - źródło - tzw URI Uniform Resource Identifier - ścieżka do miejsca gdzie jest załadowana grafika
  • Stretch - format wyświetlania grafiki, do dyspozycji mamy jeden z czterech:
    • None - zawartość pliku graficznego jest wyświetlana w oryginalnym rozmiarze, w razie potrzeby przycinana jeżeli się nie zmieści w kontrolce
    • Fill - zawartość pliku graficznego jest powiększana/zmniejszana w celu dopasowania do powierzchni w kontrolce ImageControl
    • Uniform - dostosowanie wielkości grafiki do kontrolki z proporcji obrazu
    • UniformToFill - plik graficzny jest odpowiednio powiększany/zmniejszany aby dopasować się do wielkości kontrolki. Zostają zachowane proporcje obrazu, w razie nie zmieszczenia obrazu zostaje on obcięty.

TextBox
Kontrolka umożliwia użytkownikowi wprowadzanie teksu. Najważniejsze właściwości:
  • IsReadOnly - tylko do odczytu
  • TextWrapping - umożliwia wprowadzanie wielu linii tekstu po ustawieniu tej właściwości na "Wrap"
  • VerticalScrollBarVisibility - dodaje pasek przewijania z góry na dół w kontrolce

ProgressBar
Daje możliwość wizualnego przedstawienia użytkownikowi postępu podczas wykonywania czasochłonnych operacji. Podstawowe właściwości:
  • IsIndeterminate - jeżeli ustawione na False pasek postępu wyświetla wartość z pola Value, w przeciwnym przypadku pasek postępu będzie "krążył" nie oddając do końca obecnego postępu
  • Maximum - maksymalna wartość właściwości Value (oznacza 100%)
  • Minimum - minimalna wartość Value (oznacza 0%)
  • Orientation - położne paska postępu pionowe lub poziome
  • Value - aktualna wartość postępu

Slider
Pozwana użytkownikowi w graficzny sposób zmienić wartość. Podstawowe właściwości:
  • IsDirectionReversed - determinuje czy kierunek jest odwrócony (od prawa do lewa)
  • LargeChange - maksymalna zmiana w przypadku kliknięcia myszką na końcu paska
  • Orientation - orientacja (pozioma lub pionowa)
  • SmallChange - najmniejsza zmiana w przypadku kliknięcia myszką na pasku
  • TickFrequency - determinuje podziałkę (co ile ma być)
  • TickPlacement - położenie podziałki
  • Ticks - ręczne przypisanie wartości podziałki i położenia
  • Value - aktualna wartość

Kolejność przechodzenia po kontrolkach za pomocą klawisza TAB
  • Ustawiamy za pomocą właściwości TabIndex
  • Kontrolki które nie mają zdefiniowanej wartości TabIndex otrzymują aktywność po przejściu wszystkich kontrolek, które mają ją ustawioną
  • Jeżeli kontrolki maja ustawiony ten sam TabIndex, kolejność przejścia jest determinowana kolejnością zadeklarowania w XAML-u
Jeżeli nie chcemy aby któraś kontrolka otrzymała aktywność podczas używania klawisza TAB, należy ustawić właściwość KeyboardNavigation.IsTabStop na False 

Brak komentarzy:

Prześlij komentarz