C# für Einsteiger Modul 10: Oberflächen mit WPF eden market Autor: Anton Kölbl

Transkript

1 C# für Einsteiger Modul 10: Oberflächen mit WPF 2009 eden market Autor: Anton Kölbl 1

2 2 Gliederung 1. Einleitung 2. XAML 3. Grafik 4. Databinding

3 Einleitung Die Windows Presentation Foundation WPF sind wichtig(st)er Bestandteil von.net 3.0; früher waren die Bezeichnungen Avalon und WinFX gebräuchlich. Sie stellen ein API für anspruchsvolle Benutzeroberflächen zur Verfügung. Möglich sind z.b. 3D-Darstellungen Abspielen von Videos (mit Windows Media Player 10) Datenbindung Animationen 3

4 Einleitung Nur noch Betriebssysteme ab XP werden unterstützt. Technisch wird Ballast abgeworfen: Kein Aufsatz auf Windows SDK wie Windows.Forms Komponenten werden direkt über WPF gezeichnet Layout wird in XML definiert Weitergehende Verwendung von Ressourcen Grafik auf Vektorbasis unabhängig von Auflösung WPF/E ( Everywhere ) durch Silverlight auch für Browser 4

5 Einleitung 5

6 Einleitung Längere Zeit werden die Windows.Forms und WPF parallel existieren. WPF sollte v.a. für sehr anspruchsvolle (Multimedia-)Oberflächen eingesetzt werden. Grafik kann dann separat vom Code durch Designer entworfen werden. Hierzu neue Expression-Produktreihe von Microsoft. Speziell Expression Blend für XAML. 6

7 Einleitung 7

8 Einleitung Für die Entwicklung gibt es drei Varianten: Code XAML XAML+Code Ab einer gewissen Projektgröße ist nur noch die dritte Variante sinnvoll. 8

9 Einleitung Vorgehensweise nur mit Code: Projekttyp WPF Application,.xaml-Dateien löschen Klasse von System.Windows.Window ableiten class Window1: Window { public Window1() { Title = "Ein erstes Fenster"; Width = 200; Height = 100; } [STAThread()] public static void Main() { new Application().Run(new Window1()); } } 9

10 Einleitung Vorgehensweise nur mit XAML: selber Projekttyp,.cs-Dateien löschen jetzt Informationen in 2 XML-Dateien <Window x:class="wpfapplicationxaml.window1" xmlns=" xmlns:x=" Title="Fenster aus XAML" Height="300" Width="300" /> <Application x:class="wpfapplicationxaml.app" xmlns=" xmlns:x=" StartupUri="Window1.xaml" /> 10

11 Einleitung Vorgehensweise Code und XAML gemischt: Projekttyp WPF Application erzeugt C# für Logik (Code-behind) XAML für UI 11

12 12 Gliederung 1. Einleitung 2. XAML 3. Grafik 4. Databinding

13 XAML XAML ist ein neuer XML-Dialekt Ziel: Trennung von Logik und UI UI wird von Designer erzeugt XAML kann von Tools generiert werden dann z.b. Import in Visual Studio Zwei Namensräume werden benötigt: xmlns=" xmlns:x=" 13

14 XAML XAML definiert den Inhalt eines Fensters: Container gruppieren mehrere Komponenten <Window> <StackPanel> <Button Content="Click Me"/> </StackPanel> </Window> 14

15 XAML Events können beim Button direkt durch Doppelclick erzeugt werden. Methode wird in Code-behind-Klasse erzeugt: private void Button_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Test"); } 15

16 XAML Properties und Events können oft direkt als XML-Attribute angegeben werden; dies ist aber nur bei Strings möglich. <Button Content="Click Me" Click="Button_Click" /> 16

17 XAML Eine alternative Syntax mit Unterelementen ist immer möglich. <Button> <Button.Background Button.Background><SolidColorBrush Color="Blue"/> </Button.Background> <Button.Foreground Button.Foreground> <SolidColorBrush Color="Red"/> </Button.Foreground> <Button.Content Button.Content> This is a button </Button.Content> </Button> 17

18 XAML Manche komplexen Werte können über TypeConverter automatisch umgewandelt werden. Folgende Varianten sind äquivalent: <Button Margin="10,20,10,30" Content="Hallo"/> <Button Content="Hallo"> <Button.Margin> <Thickness Left="10" Top="20" Right="10" Bottom="30"/> </Button.Margin> </Button> 18

19 Übung 10, Aufgabe 1 19

20 XAML Properties stammen oft von (evt. abstrakten) Basisklassen, deshalb ist normale XML-Validierung mit XAML nicht möglich -> spezielle Tools notwendig Einige Properties können an alle Komponenten angehängt werden -> Elternelemente werden nicht überfrachtet <DockPanel> <Button DockPanel.Dock="Left" Width="100" Height="20">left</Button> <Button DockPanel.Dock="Right" Width="100" Height="20">right</Button> </DockPanel> 20

21 XAML XAML kann zur Laufzeit geschrieben und auch in die laufende Anwendung eingelesen werden: Button origianlbutton =... string savedbutton = XamlWriter.Save(origianlButton); StringReader stringreader = new StringReader(savedButton); XmlReader xmlreader = XmlReader.Create(stringReader); Button readerloadbutton = (Button) XamlReader.Load(xmlReader); 21

22 XAML XAML-Container stammen von der abstrakten Klasse Panel in System.Windows.Controls ab. Kindelemente sind in einer Collection Children untergebracht (muss in XML aber nicht angegeben werden). 22

23 XAML Canvas ist ein Container, dessen Kindelemente an den Seiten verankert werden können. Bei Überdeckungen der Kinder kann man die Property ZIndex definieren. <Canvas Background="LightSteelBlue"> <TextBlock FontSize="14" Canvas.Top="100" Canvas.Left="10">Sonne</TextBlock> <TextBlock FontSize="22" Canvas.Top="200" Canvas.Left="75">Mond</TextBlock> </Canvas> 23

24 XAML Prinzipiell könnte alles auch immer rein mit Code erreicht werden, ist aber meist umständlicher. TextBlock txt1 = new TextBlock(); txt1.fontsize = 14; txt1.text = "Sonne"; Canvas.SetTop(txt1, 100); Canvas.SetLeft(txt1, 10); mycanvas.children.add(txt1); 24

25 XAML Beim StackPanel werden die Kinder nacheinander angeordnet (standardmäßig vertikal, Property Orientation kontrolliert das). <StackPanel StackPanel> <Border Background="SkyBlue" BorderBrush="Black" BorderThickness="1"> <TextBlock Foreground="Black" FontSize="12">Sonne</TextBlock> </Border> <Border Width="400" Background="CadetBlue" BorderBrush="Black" BorderThickness="1"> <TextBlock Foreground="Black" FontSize="14">Mond</TextBlock> </Border>... 25

26 XAML Beim DockPanel werden die Kinder an den 4 Seiten und in der Mitte angeordnet (vgl. BorderLayout in Java). <DockPanel LastChildFill="True"> <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top"> <TextBlock Foreground="Black">Dock = "Top"</TextBlock> </Border> <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top"> <TextBlock Foreground="Black">Dock = "Top"</TextBlock> </Border> <Border Height="25" Background="LemonChiffon" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom"> <TextBlock Foreground="Black">Dock = "Bottom"</TextBlock> </Border>... 26

27 XAML Beim Grid kann eine Tabellenstruktur definiert werden. <Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100"> <Grid.ColumnDefinitions Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock> <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock> <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock> <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock> <TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock>... 27

28 XAML Im Container können die Komponenten plaziert werden. Sie erben von Control viele Eigenschaften: Background, Foreground Height, Width Name FontFamily, FontSize, FontStyle Cursor, Tooltip Margin, Padding Opacity, Visibility 28

29 XAML Standardkomponenten sind z.b. Label, TextBox, PasswordBox Button, CheckBox, RadioButton Menu, MenuItem ListBox, ComboBox ScrollBar, ScrollViewer <StackPanel> <RadioButton GroupName="colorgrp">Red</RadioButton> <RadioButton GroupName="colorgrp">Blue</RadioButton> <RadioButton GroupName="numgrp">1</RadioButton> <RadioButton GroupName="numgrp">2</RadioButton> 29

30 XAML Zusatzkomponenten sind z.b. ViewBox für Skalierungen Border BulletDecorator GroupBox Expander zum Auf- und Zuklappen Image, MediaElement Popup ProgressBar, StatusBar, ToolBar ToolTip 30

31 31 Gliederung 1. Einleitung 2. XAML 3. Grafik 4. Databinding

32 Grafik Es gibt herausragende Fähigkeiten in den Bereichen 2D Bildbearbeitung Textdarstellung 3D Videos Diese dürften meistens das entscheidende Kriterium für den Einsatz von WPF darstellen. 32

33 Grafik 2D-Operationen rechnen in einer geräteunabhängigen Einheit (Device Independent Pixel) der Größe 1/96 Inch. Auf dem Bildschirm wird das je nach dpi skaliert. Folgende Grundformen (von Shape abgeleitet) Line, Rectangle, Ellipse, Polyline, Polygon, Path Alle können direkt als Komponente verwendet werden (da von UIElement abgeleitet). 33

34 Grafik 34

35 Grafik Gemeinsame Eigenschaften der 2D-Formen: Stroke für den Umriss StrokeThickness Fill Canvas ist sehr gut als Container geeignet. <Canvas Height="300" Width="300"> <Line X1="10" Y1="10" X2="50" Y2="50" Stroke="Black" StrokeThickness="4" />... 35

36 Grafik Affine Transformationen können angewendet werden: <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10" Canvas.Left="75" Canvas.Top="50"> <Polyline.RenderTransform> <RotateTransform CenterX="0" CenterY="0" Angle="22" /> </Polyline.RenderTransform> </Polyline> 36

37 Grafik Animationen über Mausevents (Farbe / Durchsichtigkeit ändert sich) 37

38 Grafik Farbverläufe können als Füllung eingesetzt werden (auch rund) <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> 38

39 Grafik Bei der Bildbearbeitung stellt schon die Standardklasse Image viele Möglichkeiten bereit. Folgende Formate können angezeigt werden: bmp gif ico jpg png tiff wdp (Windows Media Photo) 39

40 Grafik Ausschnitte können über CroppedBitmap gewählt werden: <Image Width="200" Grid.Column="0" Grid.Row="3" Margin="5"> <Image.Source> <CroppedBitmap Source="{StaticResource croppedimage}" SourceRect=" "/> </Image.Source> </Image> 40

41 Grafik Bitmapeffekte BlurBitmapEffect OuterGlowBitmapEffect DropShadowBitmapEffect <Button Margin="50" Width="200">DropShadow <Button.BitmapEffect Button.BitmapEffect> <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="25" Softness="1" Opacity="0.5"/> </Button.BitmapEffect> </Button> 41

42 Grafik Textverarbeitung: TextBox für einfachen Text, TextBlock mit InlineCollection für unterschiedliche Formatierungen. Beide können als Beschriftung verwendet werden, z.b. für Buttons. <TextBlock Name="textBlock1" TextWrapping="Wrap"> <Bold>TextBlock</Bold> is designed to be <Italic>lightweight</Italic>, and is geared specifically at integrating <Italic>small</Italic> portions of flow content into a UI. </TextBlock> 42

43 Grafik Texteffekte sind möglich: Rotation Unter-, Durch-, Überstreichen <TextBlock FontSize="36">the lazy brown dog. <TextBlock.TextDecorations> <TextDecorationCollection> <TextDecoration PenThicknessUnit="FontRecommended"> <TextDecoration.Pen> <Pen Thickness="1.5"> <Pen.Brush>... 43

44 Grafik Für größere Dokumente: FixedDocument FlowDocument Jeweils mit Viewerkomponenten z.b. in XPS <FlowDocument> <Paragraph FontSize="18">Flow Format Example</Paragraph>... <List> <ListItem> <Paragraph>ListItem 1</Paragraph>... 44

45 Grafik 3D-Darstellungen können in ViewPort3D eingebettet werden: <Canvas Width="321" Height="201"> <Viewport3D ClipToBounds="True" Width="150" Height="150" Canvas.Left="0" Canvas.Top="10"> <Viewport3D.Camera> <PerspectiveCamera Position="0,0,2" LookDirection="0,0,-1" FieldOfView="60" /> </Viewport3D.Camera> <Viewport3D.Children>... 45

46 Grafik Eine VisualBrush kann als Füllung Videos abspielen (MediaPlayer als Backend). <TextBlock FontSize="100pt" Text="Some Text" FontWeight="Bold"> <TextBlock.Foreground> <VisualBrush VisualBrush> <VisualBrush.Visual> <MediaElement Source="Video.wmf" /> </VisualBrush.Visual> </VisualBrush> </TextBlock.Foreground> </TextBlock> 46

47 47 Gliederung 1. Einleitung 2. XAML 3. Grafik 4. Databinding

48 Databinding Woher kommt der Text in einer TextBox oder die Einträge in einer Liste? Umgekehrt: Wie kommen aktualisierte Werte aus einem Textfeld zurück in Stammdaten? Bisher: Mühsame gleichbleibende Handarbeit 48

49 Databinding WPF bietet ein neues Modell an, um UI mit dem Datenbestand abzugleichen: Databinding. In System.Windows.Data gibt es den entscheidenden Typ Binding, der Properties synchronisieren kann. 49

50 Databinding Beispiel: Beschriftung eines Butttons soll von Textfeld kommen. Eine mögliche Schreibweise über Attribut: <StackPanel> <Button Content="{Binding ElementName=tb, Path=Text}"/> <TextBlock Name="tb">Ein Test</TextBlock> </StackPanel> 50

51 Databinding Beispiel: Beschriftung eines Butttons soll von Textfeld kommen. Andere mögliche Schreibweise über Kindelement: <StackPanel> <Button> <Binding ElementName="tb" Path="Text" /> </Button> <TextBlock Name="tb">Ein Test</TextBlock> </StackPanel> 51

52 Databinding Modus der Aktualisierung ist über Mode einstellbar: Default (vordefiniert, bei TextBoxen TwoWay) OneTime (einmal von Quelle zu Ziel) OneWay (immer von Quelle zu Ziel) OneWayToSource (immer von Ziel zu Quelle) TwoWay (immer in beide Richtungen) <Binding... Mode="OneWayToSource"/> 52

53 Databinding Das Ziel wird immer sofort aktualisiert, die Quelle nicht unbedingt. Einstellbar durch UpdateSourceTrigger mit den Werten: Default (bei TextBox LostFocus) Explicit (Methode UpdateSource() aufrufen) LostFocus PropertyChanged <Binding... UpdateSourceTrigger="LostFocus"/> 53

54 Databinding Mögliche Quellen für ein Binding: XAML-Element (schon betrachtet) Objekte aus C# Collections XML-Daten ADO-Datenquellen <Binding... UpdateSourceTrigger="LostFocus"/> 54

55 Databinding Als Beispiel werden normale Objekte betrachtet (andere Fälle ähnlich). Klassen müssen für das Binding erfüllen: öffentliche Properties (Felder gehen nicht) Defaultkonstruktor 55

56 Databinding Interface INotifyPropertyChanged aus System.ComponentModel // in Datenklasse public String Name { get { return name; } set { name = value; OnPropertyChanged("Name") ;} } public void OnPropertyChanged(string prop) { if (PropertyChanged!= null) PropertyChanged(this, new PropertyChangedEventArgs(prop)); } public event PropertyChangedEventHandler PropertyChanged; 56

57 Databinding XAML kann im Window auch C#-Namesräume deklarieren: <Window x:class="databinding.window1" xmlns=" xmlns:x=" xmlns:clr="clr-namespace:system;assembly=mscorlib" xmlns:src="clr-namespace:databinding" Title="Window1" Height="300" Width="300"> 57

58 Databinding Ein Datenobjekt kann von XAML als benannte Ressource erzeugt werden. <Window x:class="databinding.window1"... > <Window.Resources> <src:produkt x:key="p1" Name="Persil" /> </Window.Resources>... <Binding Source="{StaticResource p1}" Path="Name" /> 58

59 Databinding Eine benannte Ressource kann auch als ObjectDataProvider erzeugt werden: <Window x:class="databinding.window1"... > <Window.Resources> <ObjectDataProvider x:key="p2" /> </Window.Resources>... 59

60 Databinding Im Code kann man nach der Ressource suchen und ein Objekt zuweisen: // z.b. beim Laden Produkt produkt =...; ObjectDataProvider provider = (ObjectDataProvider) FindResource("p2"); provider.objectinstance = produkt; 60

61 Übung 10, Aufgabe 2 61