C# für Einsteiger - edenmarket.de · C# f ü r Quereinsteiger ©eden market GmbH Max-Brod-Weg 14 D...

C# für EinsteigerModul 10: Oberflächen mit WPF

Autor: Anton Kölbl

C# f üü üü

r Quereinsteiger

Fon: +49 (0) 711 990 16 -50 � Fax: -99 � www.edenmarket.de

Gliederung

1. Einleitung

2. XAML

3. Grafik

4. Databinding

C# f üü üü

r Quereinsteiger

Einleitung

Die Windows Presentation Foundation WPF sindwichtig(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ächenzur Verfügung. Möglich sind z.B.

• 3D-Darstellungen

• Abspielen von Videos (mit Windows Media Player 10)

• Datenbindung

• Animationen

C# f üü üü

r Quereinsteiger

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

C# f üü üü

r Quereinsteiger

Einleitung

C# f üü üü

r Quereinsteiger

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.

C# f üü üü

r Quereinsteiger

Einleitung

C# f üü üü

r Quereinsteiger

Einleitung

Für die Entwicklung gibt es drei Varianten:

• Code

• XAML

• XAML+Code

Ab einer gewissen Projektgröße ist nur noch die dritteVariante sinnvoll.

C# f üü üü

r Quereinsteiger

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()); }

C# f üü üü

r Quereinsteiger

Einleitung

Vorgehensweise nur mit XAML:

• selber Projekttyp, .cs-Dateien löschen

• jetzt Informationen in 2 XML-Dateien

<WindowWindowWindowWindow x:Class="WpfApplicationXaml.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Fenster aus XAML" Height="300" Width="300" />

<ApplicationApplicationApplicationApplication x:Class="WpfApplicationXaml.App"

StartupUri="Window1.xaml"StartupUri="Window1.xaml"StartupUri="Window1.xaml"StartupUri="Window1.xaml" />

C# f üü üü

r Quereinsteiger

Einleitung

Vorgehensweise Code und XAML gemischt:

• Projekttyp WPF Application

• erzeugt– C# für Logik (Code-behind)

– XAML für UI

C# f üü üü

r Quereinsteiger

Gliederung

1. Einleitung

2. XAML

3. Grafik

4. Databinding

C# f üü üü

r Quereinsteiger

XAML ist ein neuer XML-Dialekt

• 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

C# f üü üü

r Quereinsteiger

XAML definiert den Inhalteines Fensters:

Container gruppierenmehrere Komponenten

</StackPanel>

</Window>

C# f üü üü

r Quereinsteiger

Events können beim Button direkt durch Doppelclickerzeugt werden.

Methode wird in Code-behind-Klasse erzeugt:

private void Button_Click(object sender, RoutedEventArgs e)

MessageBox.Show("Test");

C# f üü üü

r Quereinsteiger

Properties und Events können oft direkt als XML-Attribute angegeben werden; dies ist aber nur bei Strings möglich.

C# f üü üü

r Quereinsteiger

Eine alternative Syntax mit Unterelementen ist immermöglich.

<Button.BackgroundButton.BackgroundButton.BackgroundButton.Background><SolidColorBrush Color="Blue"/> </Button.Background> <Button.ForegroundButton.ForegroundButton.ForegroundButton.Foreground> <SolidColorBrush Color="Red"/> </Button.Foreground> <Button.ContentButton.ContentButton.ContentButton.Content> This is a button </Button.Content>

</Button>

C# f üü üü

r Quereinsteiger

Manche komplexen Werte können über TypeConverterautomatisch umgewandelt werden. Folgende Variantensind äquivalent:

<Button.Margin>

</Button>

C# f üü üü

r Quereinsteiger

Übung 10, Aufgabe 1

C# f üü üü

r Quereinsteiger

Properties stammen oft von (evt. abstrakten) Basisklassen, deshalb ist normale XML-Validierung mitXAML nicht möglich -> spezielle Tools notwendig

Einige Properties können an alle Komponentenangehängt werden -> Elternelemente werden nichtüberfrachtet

<Button DockPanel.DockDockPanel.DockDockPanel.DockDockPanel.Dock="Right" Width="100" Height="20">right</Button>

</DockPanel>

C# f üü üü

r Quereinsteiger

XAML kann zur Laufzeit geschrieben und auch in die laufende Anwendung eingelesen werden:

Button origianlButton = ...

string savedButton = XamlWriter.SaveXamlWriter.SaveXamlWriter.SaveXamlWriter.Save(origianlButton);

StringReader stringReader = new StringReader(savedButton);

XmlReader xmlReader = XmlReader.Create(stringReader);

Button readerLoadButton = (Button) XamlReader.LoadXamlReader.LoadXamlReader.LoadXamlReader.Load(xmlReader);

C# f üü üü

r Quereinsteiger

XAML-Container stammen von der abstrakten KlassePanel in System.Windows.Controls ab.

Kindelemente sind in einer Collection Children untergebracht (muss in XML aber nicht angegebenwerden).

C# f üü üü

r Quereinsteiger

Canvas ist ein Container, dessen Kindelemente an den Seiten verankert werden können.

Bei Überdeckungen der Kinder kann man die Property ZIndex definieren.

<TextBlock FontSize="14" Canvas.TopCanvas.TopCanvas.TopCanvas.Top="100" Canvas.LeftCanvas.LeftCanvas.LeftCanvas.Left="10">Sonne</TextBlock>

</Canvas>

C# f üü üü

r Quereinsteiger

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);

C# f üü üü

r Quereinsteiger

Beim StackPanel werden die Kinder nacheinanderangeordnet (standardmäßig vertikal, Property Orientation kontrolliert das).

<TextBlock Foreground="Black" FontSize="12">Sonne</TextBlock>

</Border>

</Border>

C# f üü üü

r Quereinsteiger

Beim DockPanel werden die Kinder an den 4 Seiten und in der Mitte angeordnet (vgl. BorderLayout in Java).

</Border>

</Border>

<Border Height="25" Background="LemonChiffon" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="BottomDockPanel.Dock="BottomDockPanel.Dock="BottomDockPanel.Dock="Bottom""""> <TextBlock Foreground="Black">Dock = "Bottom"</TextBlock>

</Border>

C# f üü üü

r Quereinsteiger

Beim Grid kann eine Tabellenstruktur definiert werden.

</Grid.ColumnDefinitions>

<Grid.RowDefinitionsGrid.RowDefinitionsGrid.RowDefinitionsGrid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpanGrid.ColumnSpanGrid.ColumnSpanGrid.ColumnSpan="3" Grid.RowGrid.RowGrid.RowGrid.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>

C# f üü üü

r Quereinsteiger

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 …

C# f üü üü

r Quereinsteiger

Standardkomponenten sind z.B.

• Label, TextBox, PasswordBox

• Button, CheckBox, RadioButton

• Menu, MenuItem

• ListBox, ComboBox

• ScrollBar, ScrollViewer

C# f üü üü

r Quereinsteiger

Zusatzkomponenten sind z.B.

• ViewBox für Skalierungen

• Border

• BulletDecorator

• GroupBox

• Expander zum Auf- und Zuklappen

• Image, MediaElement

• Popup

• ProgressBar, StatusBar, ToolBar

• ToolTip

C# f üü üü

r Quereinsteiger

Gliederung

1. Einleitung

2. XAML

3. Grafik

4. Databinding

C# f üü üü

r Quereinsteiger

Grafik

Es gibt herausragende Fähigkeiten in den Bereichen

• 2D

• Bildbearbeitung

• Textdarstellung

• 3D

• Videos

Diese dürften meistens das entscheidende Kriterium fürden Einsatz von WPF darstellen.

C# f üü üü

r Quereinsteiger

Grafik

2D-Operationen rechnen in einer geräteunabhängigenEinheit (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).

C# f üü üü

r Quereinsteiger

Grafik

C# f üü üü

r Quereinsteiger

Grafik

Gemeinsame Eigenschaften der 2D-Formen:

• Stroke für den Umriss

• StrokeThickness

• Fill

Canvas ist sehr gut als Container geeignet.

C# f üü üü

r Quereinsteiger

Grafik

Affine Transformationenkönnen angewendetwerden:

<Polyline.RenderTransform>

</Polyline>

C# f üü üü

r Quereinsteiger

Grafik

Animationen über Mausevents(Farbe / Durchsichtigkeit ändertsich)

C# f üü üü

r Quereinsteiger

Grafik

Farbverläufe können als Füllungeingesetzt werden (auch rund)

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

C# f üü üü

r Quereinsteiger

Grafik

Bei der Bildbearbeitung stellt schon die StandardklasseImage viele Möglichkeiten bereit. Folgende Formatekönnen angezeigt werden:

• bmp

• gif

• ico

• jpg

• png

• tiff

• wdp (Windows Media Photo)

C# f üü üü

r Quereinsteiger

Grafik

Ausschnitte können über CroppedBitmap gewähltwerden:

</Image.Source>

</Image>

C# f üü üü

r Quereinsteiger

Grafik

Bitmapeffekte

• BlurBitmapEffect

• OuterGlowBitmapEffect

• DropShadowBitmapEffect

<Button Margin="50" Width="200">DropShadow

<Button.BitmapEffectButton.BitmapEffectButton.BitmapEffectButton.BitmapEffect>

<DropShadowBitmapEffectDropShadowBitmapEffectDropShadowBitmapEffectDropShadowBitmapEffect Color="Black"

Direction="320" ShadowDepth="25"

Softness="1" Opacity="0.5"/>

</Button.BitmapEffect>

</Button>

C# f üü üü

r Quereinsteiger

Grafik

Textverarbeitung: TextBox füreinfachen Text, TextBlock mitInlineCollection für unterschiedlicheFormatierungen.

Beide können als Beschriftungverwendet werden, z.B. für Buttons.

<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>

C# f üü üü

r Quereinsteiger

Grafik

Texteffekte sind möglich:

• Rotation

• Unter-, Durch-, Überstreichen

<TextBlock FontSize="36">the lazy brown dog.

<TextBlock.TextDecorations>

<TextDecoration

PenThicknessUnit="FontRecommended">

<TextDecoration.Pen>

<Pen.Brush> ...

C# f üü üü

r Quereinsteiger

Grafik

Für größere Dokumente:

• FixedDocument

• FlowDocument

Jeweils mit Viewerkomponentenz.B. in XPS

<Paragraph FontSize="18">Flow Format Example</Paragraph> ...

<List>

<Paragraph>ListItem 1</Paragraph> ...

C# f üü üü

r Quereinsteiger

Grafik

3D-Darstellungen können in ViewPort3D eingebettet werden:

<Viewport3D.Camera>

</Viewport3D.Camera>

<Viewport3D.Children> ...

C# f üü üü

r Quereinsteiger

Grafik

Eine VisualBrush kann als Füllung Videos abspielen(MediaPlayer als Backend).

<TextBlock.Foreground>

<VisualBrush.Visual>

</VisualBrush.Visual>

</VisualBrush>

</TextBlock.Foreground>

</TextBlock>

C# f üü üü

r Quereinsteiger

Gliederung

1. Einleitung

2. XAML

3. Grafik

4. Databinding

C# f üü üü

r Quereinsteiger

Databinding

Woher kommt der Text in einer TextBox oder die Einträge in einer Liste?

Umgekehrt: Wie kommen aktualisierte Werte aus einemTextfeld zurück in Stammdaten?

Bisher: Mühsame gleichbleibende Handarbeit

C# f üü üü

r Quereinsteiger

Databinding

WPF bietet ein neues Modell an, um UI mit demDatenbestand abzugleichen: Databinding.

In System.Windows.Data gibt es den entscheidendenTyp Binding, der Properties synchronisieren kann.

C# f üü üü

r Quereinsteiger

Databinding

Beispiel: Beschriftung eines Butttons soll von Textfeldkommen.

Eine mögliche Schreibweise über Attribut:

</StackPanel>

C# f üü üü

r Quereinsteiger

Databinding

Beispiel: Beschriftung eines Butttons soll von Textfeldkommen.

Andere mögliche Schreibweise über Kindelement:

</Button>

</StackPanel>

C# f üü üü

r Quereinsteiger

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)

C# f üü üü

r Quereinsteiger

Databinding

Das Ziel wird immer sofort aktualisiert, die Quelle nichtunbedingt. Einstellbar durch UpdateSourceTrigger mitden Werten:

• Default (bei TextBox LostFocus)

• Explicit (Methode UpdateSource() aufrufen)

• LostFocus

• PropertyChanged

C# f üü üü

r Quereinsteiger

Databinding

Mögliche Quellen für ein Binding:

• XAML-Element (schon betrachtet)

• Objekte aus C#

• Collections

• XML-Daten

• ADO-Datenquellen

C# f üü üü

r Quereinsteiger

Databinding

Als Beispiel werden normale Objekte betrachtet (andereFälle ähnlich).

Klassen müssen für das Binding erfüllen:

• öffentliche Properties (Felder gehen nicht)

• Defaultkonstruktor

C# f üü üü

r Quereinsteiger

Databinding

• Interface INotifyPropertyChanged ausSystem.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;

C# f üü üü

r Quereinsteiger

Databinding

XAML kann im Window auch C#-Namesräumedeklarieren:

<WindowWindowWindowWindow x:Class="DataBinding.Window1"

xmlns:clrxmlns:clrxmlns:clrxmlns:clr="clr-namespace:System;assembly=mscorlib"

xmlns:srcxmlns:srcxmlns:srcxmlns:src="clr-namespace:DataBinding"

Title="Window1" Height="300" Width="300">

C# f üü üü

r Quereinsteiger

Databinding

Ein Datenobjekt kann von XAML als benannteRessource erzeugt werden.

<Window.Resources>

<src:Produkt x:Key="p1" Name="Persil"src:Produkt x:Key="p1" Name="Persil"src:Produkt x:Key="p1" Name="Persil"src:Produkt x:Key="p1" Name="Persil" />

</Window.Resources>

C# f üü üü

r Quereinsteiger

Databinding

Eine benannte Ressource kann auch alsObjectDataProvider erzeugt werden:

<Window.Resources>

</Window.Resources> ...

C# f üü üü

r Quereinsteiger

Databinding

Im Code kann man nach der Ressource suchen und einObjekt zuweisen:

// z.B. beim Laden

Produkt produkt = ...;

ObjectDataProvider providerObjectDataProvider providerObjectDataProvider providerObjectDataProvider provider = (ObjectDataProvider) FindResource("p2");

provider.ObjectInstance provider.ObjectInstance provider.ObjectInstance provider.ObjectInstance = produkt;

C# f üü üü

r Quereinsteiger

Übung 10, Aufgabe 2

C# für Einsteiger - edenmarket.de · C# f ü r Quereinsteiger ©eden market GmbH Max-Brod-Weg 14 D...

Documents

Transcript of C# für Einsteiger - edenmarket.de · C# f ü r Quereinsteiger ©eden market GmbH Max-Brod-Weg 14 D...

Foto: pm Und Weihnachten in Mali - Karin Strenz · 2014-05-19 · Foto: pm Zufrieden mit dem Schulsport: Bildungsminister Mathias Brod-korb. Foto: hgl >>> Veranstaltungen Schwerer

max. 4 Ausbildungsplätze als Schiffsführer (Quereinsteiger ... quereinsteiger schiffer... · max. 4 Ausbildungsplätze als Schiffsführer (Quereinsteiger) * für die Elbfähren

Musterbuch Kristallglas, František Halama, Železný Brod, 1935 - … · 2010. 7. 27. · Pressglas-Korrespondenz Anhang MB Kristallglas Halama 1939 2010-2-01 Stand 26.07.2010 PK

NS-verfolgungsbedingt entzogene Kulturgüter in der ......Brod (e), Ruben Krosnie (Krosno) (Polen) Brom, Sigmund 25.8.1920 - ? Schüler, Maxstrasse 28 Fürth ... Henri 1892 - 1987

Zehnder ComfoWell 220 · Montageplatte CW-M 220-4 x 75 990 323 520 Montageplatte CW-M 220-4 x 90 990 323 521 Endplatte CW-P 220 – DN 125 990 323 510 Montageset CW-K 220 – CA 140

Du bist für uns Eine wichtige Visitenkarte und ... - REMAX€¦ · Abgeschlossene RE/MAX Basis-Ausbildung von Vorteil, jedoch nicht Bedingung. Motivierte, engagierte Quereinsteiger

AEM ISH 990-5230b€¦ · · 2015-03-04Installationshandbuch NetBotz® Funksensor-Pod 180 NBPD0180 AEM ISH 990-5230b.book Page i Wednesday, July 16, 2014 11:30 AM

EINFÜHRUNG IN DIE ENERGIEWIRTSCHAFT · ENERGIEWIRTSCHAFT Der Wegweiser in die Energieversorgung für Neu- und Quereinsteiger Experten aus 13 Unternehmen weisen Ihnen ... Juli 2018

Themenheft durchstarten | Zeitarbeit | Ausgabe 2017 · (Neu-)Start auf dem Arbeitsmarkt, zum Beispiel für Ältere oder Quereinsteiger. checkliste. Kommt Zeitarbeit für mich infrage?

Merck Kommanditgesellschaft auf Aktien · 2021. 1. 18. · Merck Kommanditgesellschaft auf Aktien . Darmstadt . Deutschland - ISIN DE 000 659 990 5 - - Wertpapierkennnummer 659 990

Pneumatischer Schwenkspanner Luft Doppelt Typ CTX · 8 1320 1130 1080 1030 990 950 910 163 7 1150 990 940 900 870 830 800 201 6 990 850 810 770 740 710 680 260 5 820 710 670 650 620

2007-Ktm-990 Superduke Black Fahrgestell

ANN KÖLN NEWS #01 - willkommeninagnes.files.wordpress.com · Medienproduktion mit Basisqualifikation Projektmanagement“ mit integriertem Praktikum, das auch Neu- und Quereinsteiger*innen

Martin Wiethaler Betriebsvorstellung Quereinsteiger ...€¦ · Martin Wiethaler Betriebsvorstellung Betriebsvorstellung Youtube / ebay: hakenpflug • Betriebsfläche 150 ha •

Clemens Hoffmann IT-Berater Smalltalk für Quereinsteiger.

HOF 2004 Form 990

2009-2010 IRS Form 990

Fachschaftsrat Geographie Geoökologie und ... · alle Erstsemester und Quereinsteiger ab WS 07/08 und optional für bereits immatrikulierte Studierende. Für die Zwischenprüfung

Von Karin Brod. 1. Das Wesen der Beratung 2. Der Beratungsprozess als Gegenstand rechtlicher Regelungen 3. Das Rechtsdienstleistungsgesetz (RDG) 4. Was.

Chemie für · PDF file3 Chemie für Quereinsteiger Band 1 . Strukturchemie und Teilchensystematik VORWORT