Windows Presentation Foundation

Folie 1 Windows Presentation Foundation Workshop Teil 1 Pawel Kazakow Bjoern Hass pawel.kazakow@studentprogram.de bjoern.hass@studentprogram.de

.NET Framework 3.0 Folie 2 Erweitert das bestehende.net 2.0 Managed Code API Bestandteil von Windows Vista Verfügbar für Windows XP und Server 2003 als separater Download Früherer Codename: WinFX

.NET Framework 3.0 Folie 3 Windows Presentation Foundation.NET Framework 3.0

Folie 4 Windows Presentation Foundation Überblick Pawel Kazakow Bjoern Hass pawel.kazakow@studentprogram.de bjoern.hass@studentprogram.de

Windows Presentation Foundation Folie 5 Ehemaliger Codename: Avalon API für die Gestaltung und Zusammenführung von Anwendungsoberflächen, Dokumenten und Medieninhalten Die Win32-basierte UI, ist nun fast 20 Jahre alt, sie ist alternd und einschränkend

Advances Graphics Folie 6 GDI+ ist die Technologie in Punkto 2D Grafik für Windows WPF verwendet die Hardware (Grafikkarte) und ist somit deutlich schneller als GDI+ WPF bietet sehr viel mehr Freiraum in der Oberflächengestaltung

Möglichkeiten auf ersten Blick Folie 7 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13 14. 15. 16.

Trennung des Designs und Codes Folie 8 XAML extensible Application Markup Language grafische XML-basierte Beschreibungssprache Abkopplung der Programmlogik vom Design Designer kümmern sich um die Oberfläche und Programmierer um die Funktionalität

Designer-Developer Productivity Folie 9 Designer Entwickler..designt mit XAML können Designer und Entwickler ihre Zusammenarbeit rationalisieren programmiert die Logik

Designer-Developer Productivity Folie 10 Designer Microsoft Werkzeuge für Designer und Entwickler Declarative Programming via XAML Werkzeuge von anderen Anbietern (z. B. ZAM 3D von Electric Rain) Entwickler

WPF und GDI+ Folie 11 WPF hebt Beschränkungen bei Darstellung von Steuerelementen auf Bekanntes Problem: Überlappung von Steuerelementen - das zuletzt gezeichnete blieb wegen Exklusivität sichtbar

WPF: Unabhängigkeit von der Auflösung Auflösung aktueller TFT-Monitore: 150 DPI Monitore mit 200 DPI bereits erhältlich Problem: alles klein Folie 12 Einstellung Große Schriftarten führt zu großen Layoutproblemen in Anwendungsoberflächen Lösung: Skalierung, in GDI+ aber nicht möglich! WPF rendert UI als eine Einheit, Anwendung von Skalierung und 3D-Transformationen einfach und schnell (Hardwareunterstützung)

WPF: Drawing Object Model Folie 13 Win32-Methode Zeichne das Objekt auf verlangen direkt auf den Bildschirm WPF Methode Erstelle Objekt via Code oder XAML, und danach kümmert sich WPF um das rendern des Objekts

WPF: Flexible Content Model Viele Elemente sind Platzhalter für Anwendungsspeziefischen Inhalt Beispiel: ein Button hat ein Label zur Beschreibung seiner Funktion, der nur Text aufnehmen kann Folie 14 Mit WPF, kann beliebiger Inhalt überall anzeigt werden, nicht nur Text und Grafiken, sondern auch Steuerelemente!

WPF: Data-Driven UI Problem: Hartkodierter Inhalt ist schlecht Folie 15 Lösung: Anlegen von Templates, welche erst durch Programmcode gesetzt werden Mit XAML auf einfachste Weise möglich!

WPF: Fazit Folie 16

Folie 17 Windows Presentation Foundation Vertiefung Pawel Kazakow Bjoern Hass pawel.kazakow@studentprogram.de bjoern.hass@studentprogram.de

Kompatible Betriebssysteme Folie 18 WPF-Anwendungen setzen die Installation von.net Framework 3.0 voraus. Windows Vista Windows Server 2003 Nachinstallation von.net Framework 3.0 erforderlich Windows XP Service Pack 2 Nachinstallation von.net Framework 3.0 erforderlich msdn.microsoft.com/netframework/downloads

Neuerungen von WPF im Überblick Folie 19 Zwei neue Programmierschnittstellen (Trennung von Design und Logik) Neue Grafikfähigkeiten, darunter Animation und 3D Neue Philosophie zum Anpassen von Steuerelementen

Geschichtliches Folie 20 Möglichkeiten zum Schreiben einer Windows- Anwendung mit C-basierten Sprachen: Jahr Sprache Schnittstelle 1985 C Windows-API 1992 C++ Microsoft Foundation Classes (MFC) 2001 C#, C++ Windows Forms (.NET Framework 1.0) 2006 C#, C++ Windows Presentation Foundation (WPF)

WPF Architektur: Services Folie 21 Document Services User interface services XPS Documents Application Services Controls Databinding Packaging Services Deployment Services Layout Media integration layer Base services Imaging Effects 2D 3D Text Audio Video XAML Accessibility Animation Input and Eventing Composition Engine Protperty System

Trennung von Design und Logik Folie 22 Oberflächendesign (XAML) vom Logikcode (C# oder jede andere CLS-kompatible Sprache) in WPF getrennt Ansatz bekannt von Webanwendungen: Logik in PHP, Design in HTML

Trennung von Design und Logik Folie 23 Begriffsklärung Markup: Auszeichnungssprache Beispiele für Markupsprachen: XAML, HTML, LaTeX XAML ist eine XML-basierte Markupsprache Eine WPF-Anwendung ist i. d. R. eine Kombination aus Code und Markup

Trennung von Design und Logik Folie 24 Vor dem Kompilieren wird XAML in Code umgewandelt Alles, was mit XAML beschrieben werden kann, kann auch mit Code (z. B. C#) beschrieben werden, aber nicht umgekehrt Es ist möglich eine sinnvolle Anwendung komplett in XAML zu programmieren

Warum XAML? <Border Background="Red"> <Canvas Background="Blue" Margin="20"> <Button Canvas.Top="30" Canvas.Left="50"> Hello World! </Button> </Canvas> </Border> Border b = new Border(); Canvas c = new Canvas(); Button btn = new Button(); b.background = Brushes.Red; c.background = Brushes.Blue; c.margin = new Thinkness(20); btn.content = "Hello World!"; c.children.add(btn); Canvas.SetTop(btn, 30.0D); Canvas.SetLeft(btn, 50.0D); b.child = c; this.content = b; Folie 25 C# XAML kompaktere und übersichtlichere Beschreibung durch XAML

Pixelgrafik vs. Vektorgrafik Folie 26

Pixelgrafik vs. Vektorgrafik Folie 27

WPF Architektur: Interaktion Folie 28 Hauptkomponente von WPF dunkelgrau markiert WPF rendert alles über DirectX milecore in unmanaged Code für engere Integration mit DirectX

Folie 29 Windows Presentation Foundation Praxisvorbereitung Pawel Kazakow Bjoern Hass pawel.kazakow@studentprogram.de bjoern.hass@studentprogram.de

Entwicklungsumgebung Folie 30 Microsoft Visual Studio 2005 Professional oder Microsoft Visual C# 2005 Express Edition Visual Studio 2005 Extensions for Windows Visual Studio 2005 Extensions for Windows Communication Foundation, Windows Presentation Foundation (Unterstützung für C# und VB.NET) msdn.microsoft.com/netframework/downloads

Neues Projekt in Visual Studio 2005 Folie 31 Menü: File New Project

XML-Syntax Folie 32 XML-Tag mit Inhalt: <Tag Attribut="Wert">...</Tag> XML-Tag ohne Inhalt: <Tag Attribut="Wert"></Tag> Kurzschreibweise: <Tag Attribut="Wert"/> Kommentare: <!--<Tag Attribut="Wert"></Tag>--> Tastenkürzel im XAML-Editor: Auskommentieren: STRG+K C Kommentierung entfernen: STRG+K U

Layouts Folie 33 StackPanel Canvas Grid DockPanel

StackPanel: Beschreibung Folie 34 Steuerelemente werden innerhalb der StackPanel vertikal oder horizontal gestapelt. Mit ScrollViewer können Schiebebalken hinzugefügt werden.

StackPanel mit ScrollView: Vorschau Folie 35

StackPanel mit ScrollView: Beispielcode Folie 36 <ScrollViewer HorizontalScrollBarVisibility="*"> <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left"> <TextBlock TextWrapping="Wrap Margin="0,0,0,20"> Scrolling is enabled when it is necessary. Resize the window, making it larger and smaller. </TextBlock> <Rectangle Fill="LightBlue" Width="200 Height="200"/> </StackPanel> </ScrollViewer>

Canvas: Beschreibung Folie 37 Definiert einen Bereich (container), in dem Steuerelemente explizit mit Koordinaten (x,y) relativ zum Bereich positioniert werden können.

Canvas: Vorschau Folie 38

Canvas: Beispielcode Folie 39 <Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2"> <Canvas Background="LightBlue" Width="400" Height="400"> <Button Canvas.Top="50">Canvas.Top="50"</Button> <Button Canvas.Bottom="50">Canvas.Bottom="50"</Button> <Button Canvas.Left="50">Canvas.Left="50"</Button> <Button Canvas.Right="50">Canvas.Right="50"</Button> </Canvas> </Border>

Grid: Beschreibung Folie 40 Stellt ein Modell zur Verfügung, mit dem eine tabellarische Anordnung (Zeile, Spalte) der Steuerelemente möglich wird.

Grid: Vorschau Folie 41

Grid: Beispielcode Folie 42 <Grid Height="400" Width="800" Name="myGrid" ShowGridLines="True" Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*" Name="colDef1"/> <ColumnDefinition Width="*" Name="colDef2"/> <ColumnDefinition Width="*" Name="colDef3"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition Height="*" Name="rowDef1"/> <RowDefinition Height="*" Name="rowDef2"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center">colDef1</TextBlock> <TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center">colDef2</TextBlock> <TextBlock Grid.Row="0" Grid.Column="3" HorizontalAlignment="Center">colDef3</TextBlock> <TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center">rowDef1</TextBlock> <Rectangle Name="rect1" Fill="LightSteelBlue" Width="100" Height="100" Grid.Row="1" Grid.Column="1"/> <Rectangle Name="rect2" Fill="SteelBlue" Width="100" Height="100" Grid.Row="1" Grid.Column="2"/> <Rectangle Name="rect3" Fill="DarkSlateGray" Width="100" Height="100" Grid.Row="1" Grid.Column="3"/> <TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center">rowDef2</TextBlock> <Ellipse Name="ellipse1" Fill="LightSteelBlue" Width="100" Height="100" Grid.Row="2" Grid.Column="1"/> <Ellipse Name="ellipse2" Fill="SteelBlue" Width="100" Height="100" Grid.Row="2" Grid.Column="2"/> <Ellipse Name="ellipse3" Fill="DarkSlateGray" Width="100" Height="100" Grid.Row="2" Grid.Column="3"/> </Grid>

DockPanel: Beschreibung Folie 43 Erlaubt das Andocken der Elemente, ohne dass man sich um die genaue Positionierung kümmern muss.

DockPanel: Vorschau Folie 44

DockPanel: Beispielcode Folie 45 <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> <Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left"> <TextBlock Foreground="Black">Dock = "Left"</TextBlock> </Border> <Border Background="White" BorderBrush="Black" BorderThickness="1"> <TextBlock Foreground="Black"> This content will "Fill" the remaining space </TextBlock> </Border> </DockPanel>

Standardsteuerelemente Folie 46 <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Menu Name="menu1" Grid.Row="1"> <MenuItem Header="File"> <MenuItem Header="Open"></MenuItem> <Separator/> <MenuItem Header="Exit"></MenuItem> </MenuItem> </Menu> <Button Margin="10,50,10,10" Name="button1" Grid.Row="1"> <DockPanel Margin="10,10,10,10" Name="dockPanel1"> <TextBlock Text="Hallo Welt!" DockPanel.Dock="Bottom"></TextBlock> <Image Source="Sonnenuntergang.jpg" DockPanel.Dock="Top"></Image> </DockPanel> </Button> <StackPanel Grid.Row="2"> <CheckBox Content="Check Me!" Name="check1" Grid.Row="2" IsChecked="True"></CheckBox> <RadioButton Content="Choose Me!" Name="radio1" Grid.Row="2" IsChecked="True"></RadioButton> <RadioButton Name="radio2" Grid.Row="2">...or Me!</RadioButton> </StackPanel> </Grid>

Transformation von Elementen Folie 47 <TextBlock FontSize="40" FontWeight="UltraBold" Foreground="Blue">Text</TextBlock> <TextBlock FontSize="40" FontWeight="UltraBold" Foreground="Blue"> <TextBlock.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="1"/> </TextBlock.RenderTransform> Scale </TextBlock> <TextBlock FontSize="40" FontWeight="UltraBold" Foreground="Blue"> <TextBlock.RenderTransform> <SkewTransform AngleX="45" /> </TextBlock.RenderTransform> Skew1 </TextBlock> <TextBlock FontSize="40" FontWeight="UltraBold" Foreground="Green"> <TextBlock.RenderTransform> <SkewTransform AngleX="45" AngleY="10" /> </TextBlock.RenderTransform> Skew2 </TextBlock> <Button Foreground="Red" FontSize="40" FontWeight="ExtraBold" Margin="20" Width="160" Height="50"> <Button.RenderTransform> <SkewTransform AngleX="45" /> </Button.RenderTransform> Skew3 </Button>

Styles definieren Folie 48 <Window.Resources> <Style x:key="buttonstyle" TargetType="{x:Type Button}"> <Setter Property="Background" Value="Blue"/> </Style> </Window.Resources> <Button Style="{StaticResource ButtonStyle}"> click me </Button>

Ereignisbehandlung Folie 49 Windows1.xaml... <Menu Name="menu1" Grid.Row="1"> <MenuItem Header="File"> <MenuItem Header="Open"></MenuItem> <Separator/> <MenuItem Header="Exit" Click="MyExitEvent"></MenuItem> </MenuItem>... Windows1.xaml.cs public partial class Window1 : System.Windows.Window {... private void MyExitEvent(object s, RoutedEventArgs e) { this.close(); }... }

Vielen Dank für die Aufmerksamkeit! Folie 50 www.studentprogram.de/hamburg Pawel Kazakow Bjoern Hass pawel.kazakow@studentprogram.de bjoern.hass@studentprogram.de

Quellangaben Folie 51 http://msdn.microsoft.com http://wpf.netfx3.com/ http://thewpfblog.com/ http://www.codeproject.com