Windows Presentation Foundation



Podobne dokumenty
Modele zawartości. WPF wykorzystuje 4 modele zawartości kontrolek: ContentControl pojedyncza zawartość

Programowanie obiektowe i zdarzeniowe wykład 1 Wprowadzenie do programowania zdarzeniowego

Rys. 3. Kod elementów na stronie po dodaniu kontrolek podstawowych.

1. Wprowadzenie do WPF i XAML. Tworzenie interfejsu użytkownika.

Jarosław Kuchta Podstawy Programowania Obiektowego. Podstawy grafiki obiektowej

XAML Extensible Application Markup Language

MVVM i XAML w Visual Studio 2015 / Jacek Matulewski. Gliwice, cop Spis treści

Programowanie obiektowe i zdarzeniowe wykład 8 grafika i animacja

Laboratorium Programowanie urządzeń mobilnych

Laboratorium programowania urządzeń mobilnych

Windows Presentation Foundation WPF (2)

Silverlight. Od podstaw

Styles, Templates, Skins & Themes

Windows Presentation Foundation

Jarosław Kuchta. Podstawy Programowania Obiektowego. ćwiczenie 10. Podstawy grafiki w WPF

Programowanie w technologii.net wykład 3 Dependency Properties, Routed Events

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia

Budowa aplikacji w technologii.net wykład 11 Animacje

Biblioteka Windows Forms

PROGRAMOWANIE WINDOWS PRESENTATION FOUNDATION (AVALON) W JĘZYKACH XAML ORAZ C#

SL: warstwy aplikacji. Wykład 4 Silverlight

Aby nadać jej pożądaną postać należy w pliku Window1.xaml stworzyć definicję swojego stylu modyfikując ręcznie postać zapisu XAML:

Alfabetyczna lista stylów

Visual Basic for Applications. Formatki tworzenie,

Dodanie nowej formy do projektu polega na:

Kurs programowania 2 - listy

Komponenty wizualne i XAML

WPF 4.5 : księga eksperta / Adam Nathan. Gliwice, cop Spis treści

Spis treści. Część I Przygotowanie środowiska Część II Język C# Wstęp... 9

Wprowadzenie do programowania aplikacji mobilnych

Zdarzenia i polecenia

Interfejs użytkownika (ang. User Interface, UI) w technice część urządzenia odpowiedzialna za interakcję z użytkownikiem

CSS - layout strony internetowej

Programowanie obiektowe

Windows 8 : programowanie aplikacji z wykorzystaniem C# i XAML / Charles Petzold. Gliwice, cop Spis treści

Programowanie w technologii.net wykład 4 Aplikacja i okna

.NET NET Framework Microsoft Windows Communication Foundation Microsoft Windows Presentation Foundation Microsoft Windows Workflow Foundation

Założenia projektu: Projekt ma zadanie pokazać praktyczne zastosowanie App Inventor 2, poprzez stworzenie prostej aplikacji do nauki słówek.

Podstawy programowania. Ćwiczenie. Pojęcia bazowe. Języki programowania. Środowisko programowania Visual Studio

Programowanie obiektowe i zdarzeniowe wykład 3 Okna i kontrolki

Zdarzenie Zachodzi gdy Kolejność zdarzeń Kolejność Zdarzenie Opis uwaga: CausesValidation True.

Informatyka I. Interfejs GUI wysokiego poziomu. Biblioteka Swing. Programowanie zdarzeniowe. Politechnika Warszawska Wydział Transportu 2018

Dokument hipertekstowy

Szybkie tworzenie grafiki w GcIde

GRID LAYOUT. Waldemar Korłub. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Instrukcja laboratoryjna cz.3

Responsywne strony WWW

Podstawowe kontrolki i ich obsługa

Kier. MTR Programowanie w MATLABie Laboratorium

Kurs języka Python. Wykład 5. Marcin Młotkowski. 9 listopada Rodzaje parametrów funkcji. 2 Biblioteka Tk. 3 Układanie kontrolek w oknie

Rozdział 2. Pierwsza aplikacja Windows Store.

Instrukcja laboratoryjna cz.3

Multimedia i interfejsy. Ćwiczenie 5 HTML5

wstawianie przycisków umożliwiających wybieranie wartości poprzez klikanie strzałek

Programownie w technologii.net wykład 6 Element Binding i Data Binding

Programowanie aplikacji na urządzenia mobilne

Iwona Iskierka, Sławomir Iskierka

Programowanie obiektowe i zdarzeniowe wykład 4 Kompozycja, kolekcje, wiązanie danych

- Narzędzie Windows Forms. - Przykładowe aplikacje. Wyższa Metody Szkoła programowania Techniczno Ekonomiczna 1 w Świdnicy

Instrukcja laboratoryjna cz.7

Inżynieria Programowania Laboratorium 6 Pierwsza finalna wersja. Paweł Paduch paduch@tu.kielce.pl

Visual Studio instalacja

Metodyka programowania. Visual Studio C#

Języki programowania wysokiego poziomu. CSS Wskazówki

Aplikacje WWW. Laboratorium z przedmiotu Aplikacje WWW - zestaw 01

Języki programowania wysokiego poziomu. HTML cz.2.

5. Tworzenie prostego kalkulatora

Programowanie w środowisku graficznym GUI

- dodaj obiekt tekstowy: /** Maciej */ Stage { title : "First JavaFX App" scene: Scene { width: 300 height: 300 content: [ ] } }

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >

Opis. Wykład: 30 Laboratorium: 30

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE

To sposób w jaki użytkownik wchodzi w interakcje z systemem. Środowisko graficzne używa kombinacji graficznych elementów(przyciski, okna, menu) i

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

Ćwiczenie 3 - Tworzenie zmiennych i połączeń animacyjnych w InTouch u

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML cd. Ramki, tabelki

Ćwiczenia 9 - Swing - część 1

Tworzenie stron internetowych w kodzie HTML Cz 5

Ćwiczenie 6 Proste aplikacje - podstawowe komponenty.

Układy witryn internetowych

HTML, Javascript, CSS oraz Bootstrap

I. Wstawianie rysunków

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

MVVM Light Toolkit Przewodnik krok po kroku

WYKONANIE APLIKACJI OKIENKOWEJ OBLICZAJĄCEJ SUMĘ DWÓCH LICZB W ŚRODOWISKU PROGRAMISTYCZNYM. NetBeans. Wykonał: Jacek Ventzke informatyka sem.

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

UWAGA: poniższe procedury przygotowane zostały w oparciu o program HiTi PhotoDesiree 2 w wersji

Laboratorium 8 ( Android -pierwsza aplikacja)

Podstawy pozycjonowania CSS

Instrukcja laboratoryjna nr.4

Kompleksowe tworzenie aplikacji klasy Desktop z wykorzystaniem SWT i

I. Spis treści I. Spis treści... 2 II. Kreator szablonów Tworzenie szablonu Menu... 4 a. Opis ikon Dodanie nowego elementu...

Przewodnik po obszarze roboczym

Windows Phone XML WG MICROSOFT GUI. Schemat w dokumencie. Schemat w pliku zewnętrznym. Visual Studio: Properties pliku xml-owego

Transkrypt:

Windows Presentation Foundation

Tworzenie interfejsu użytkownika Współpraca projektanta i programisty (XAML) Interfejsy atrakcyjniejsze graficznie (np. 3D) Aplikacje internetowe (XBAP) Użycie Layoutów Style i szablony Interfejsy wielookienkowe i nawigacyjne

Rysowanie 2D i 3D Grafika i kontrolki jako elementy visual tree Transformacje i animacje Skalowalność (użycie grafiki wektorowej) Wykorzystanie możliwości karty graficznej Zamiana GDI+ na DirectX

Media Obrazy JPEG, BMP, GIF, TIFF, PNG i inne Audio i Video Kontrolka MediaElement WMV, MPEG, AVI Wykorzystanie Windows Media Player'a

Źródła danych Łączenie kontrolek ze źródłami danych np. TextBox'a z właściwością obiektu np. ListBox'a z dowolną kolekcją Klasa Binding

Binding <TreeView Name = "treeview"> <TreeViewItem... />... </TreeView> <TextBlock x:name = "currentfolder" Text = "{ Binding ElementName = treeview, Path = SelectedItem.Header}"/>

Dokumenty i czcionki Dokumenty niezmienne ten sam wygląd na ekranie i po wydruku XPS Dokumenty pływające lepsza czytelność dostosowywanie wyglądu np. do rozmiaru okna wygodniejsze przeglądanie Zaawansowany mechanizm obsługi czcionek OpenType, ClearType Teksty w formacie Unicode

Przykład

XAML (Extensible Application Markup Language) Język deklaratywny Oparty na XML'u Ułatwia współpracę projektanta z programistą Może być używany w połączeniu z C# (code behind)

XAML <WrapPanel Background="Pink"> <Button Content="Ala" /> <Button> <Button.Content> "Ela" </Button.Content> </Button> <Button> "Ola" </Button> </WrapPanel>

X A M L Uniwersalny język do tworzenia i inicjalizowania obiektów Stosowany nie tylko w WPF: Windows Workflow Foundation Windows Communication Foundation

Elementy i atrybuty <Button Content = "OK" Click = "button_click"/> X M L.NET deklaracja elementu == utworzenie obiektu ustawienie atrybutu == ustawienie właściwości lub ustawienie atrybutu == obsłużenie zdarzenia

Elementy właściwości(owe) <Button> <Button.Content> <Rectangle Height = "40" Width = "40"> </Button.Content> <Button.Background> <SolidColorBrush Color = "White"/> </Button.Background> </Button>

Elementy kolekcji <ListBox> <ListBox.Items> <ListBoxItem Content= Item 1 /> <ListBoxItem Content= Item 2 /> </ListBox.Items> </ListBox>

"content property" <Button> Ala </Button> <ListBox> <ListBoxItem Content= Item 1 /> <ListBoxItem Content= Item 2 /> </ListBox>

Rozmiary i położenie kontrolek Height, MinHeight, MaxHeight, ActualHeight Width, MinWidth, MaxWidth, ActualWidth Margin ( np. "0, 10, 20, 30"; "10, 20" "15" ) Padding HorizontalAlignment (Left, Center, Right, Stretch) VerticalAlignment (Top, Center, Bottom, Stretch)

Panele Canvas StackPanel WrapPanel DockPanel Grid

Canvas Domyślnie: kontrolki w lewym górnym rogu kontrolki nachodzą na siebie Właściwości Left Top Right Bottom ZIndex

Attached properties <Canvas> <Button Canvas.Left = "50" Canvas.Top = "30" Content = "OK" /> <Button Canvas.Bottom = "100" Canvas.Right = "30" Content = "Anuluj" /> </Canvas>

Attached properties <StackPanel TextElement.FontSize = "30"> <Button Content = "OK" /> <Button Content = "Anuluj" /> </StackPanel>

StackPanel Rozmieszczenie kontrolek: jedna obok drugiej jedna nad drugą Właściwość Orientation Vertical (domyślnie) Horizontal

WrapPanel Rozmieszczenie kontrolek: jedna obok drugiej jedna nad drugą jeśli się nie mieszczą w rzędzie lub kolumnie nowy rząd nowa kolumna Właściwości Orientation, ItemHeight, ItemWidth

DockPanel Rozmieszczenie kontrolek: wzdłuż czterech brzegów ostatnia wypełnia Właściwości Dock Left, Top, Right, Bottom LastChildFill true, false

Grid Rozmieszczenie kontrolek w formie tabeli określona ilość wierszy i kolumn Właściwości RowDefinitions RowDefinition.Height,...SharedSizeGroup ColumnDefinitions ColumnDefinition.Width,...SharedSizeGroup Row, RowSpan Column, ColumnSpan

GridSplitter Umożliwia użytkownikowi zmianę szerokości kolumn wysokości wierszy Właściwości HorizontalAlignment VerticalAlignment ResizeDirection Auto, Rows, Columns ResizeBehavior BasedOnAlignment, PreviousAndCurrent, CurrentAndNext, PreviousAndNext

Gdy coś się nie mieści Clipping właściwość ClipToBounds Scrolling ScrollViewer Scaling Viewbox Stretch ( None, Fill, Uniform, UniformToFill ) StretchDirection ( UpOnly, DownOnly, Both )

Transformacje LayoutTransform przed umieszczeniem elementu w kontenerze RenderTransform po umieszczeniu elementu w kontenerze RenderTransformOrigin środek transformacji

Transformacje RotateTransform ScaleTransform SkewTransform TranslateTransform MatrixTransform

Transformacje <Button Background= Yellow > <Button.RenderTransform> <ScaleTransform ScaleX= 2 ScaleY= 2 /> </Button.RenderTransform> Przeskalowany </Button>

Łączenie transformacji <Button> <Button.RenderTransform> <TransformGroup> <RotateTransform Angle= 45 /> <ScaleTransform ScaleX= 5 ScaleY= 1 /> <SkewTransform AngleX= 30 /> </TransformGroup> </Button.RenderTransform> OK </Button>

Kontrolki Content Controls Items Controls Others

Przyciski Typ bazowy BaseButton Button RepeatButton ToggleButton CheckBox RadioButton

Typ bazowy BaseButton Content HasContent Click IsPressed ClickMode Release Press Hover

Button IsDefault IsDefaulted IsCancel

RepeatButton Delay Interval

ToggleButton IsChecked ( true, false, null ) IsThreeState Zdarzenia Checked Unchecked Indeterminate

CheckBox... To tylko ToggleButton z innym wyglądem

RadioButton Dziedziczy po ToggleButton Może być zaznaczony jeden w grupie Użytkownik może tylko zaznaczać Grupowanie RadioButton'ów wspólny, bezpośredni rodzic właściwość GroupName

Routed event Zachodzi dla danego elementu visual tree, a następnie dla kolejnych elementów, aż do korzenia (Bubbling) Zachodzi dla korzenia visual tree, a następnie dla kolejnych elementów, aż do elementu, który był źródłem zdarzenia (Tunneling) Zachodzi tylko dla elementu źródłowego (Direct)

RoutedEventArgs Dziedziczy po System.EventArgs Zawiera: Source (logical tree) OriginalSource (visual tree) Handled RoutedEvent (jakie zdarzenie)

Bubbeling a Tunneling Większość zdarzeń jest typu Bubbeling Zdarzenia często występują parami Zdarzenie (np. KeyDown) PreviewZdarzenie (np. PreviewKeyDown) PreviewZdarzenie obsłużenie == anulowanie Zdarzenia (Handled=true) jest typu Tunneling elementy UI nie reagują na te zdarzenia

Zdarzenia klawiatury (Preview)KeyDown (Preview)KeyUp IsKeyboardFocusedChanged IsKeyboardFocusWithinChanged (Preview)GotKeyboardFocus (Preview)LostKeyboardFocus

Attached events (zdarzenia przyczepione) Zdarzenia "tunelują" i "bąbelkują także przez elementy, które takich zdarzeń nie zawierają Element może obsłużyć zdarzenie z innej klasy <Window Title = "Okno" Button.Click = "Metoda"> <Button Content = "Ala" /> <Button Content = "Ola" /> </Window>

Zdarzenia myszy MouseEnter, MouseLeave (Preview)MouseMove (Preview)MouseDown /...Up (Preview)MouseLeftButtonDown /...Up (Preview)MouseRightButtonDown /...Up (Preview)MouseWheel...

ListBox <ListBox> <Label> Ola </Label> <Button> Ala </Button> <Image Source = "obrazek.jpg" /> <sys:datetime> 1/1/2012 </sys:datetime> </ListBox>

Właściwość Items... typu ItemCollection content property Właściwość tylko do odczytu Każdy element może być dowolnym obiektem... i jest wyświetlany tak jak w ContentControl Elementy typu UIElement wyglądają jak zwykle Elementy innych typów == TextBlock (ToString( ))

Dependency properties Powiadamianie o zmianie wartości Dziedziczenie wartości Wielu "dostawców" wartości

Powiadamianie <Trigger Property = "IsMouseOver" Value = "True"> <Setter Property = "Foreground" Value = "Blue"/> </Trigger> Tylko w stylach i szablonach!

Wielu dostawców 1. Local value 2. Parent template trigger 3. Parent template 4. Style triggers 5. Template triggers 6. Style setters 7. Theme style triggers 8. Theme style setters 9. Property value inheritance 10. Default value