Windows Presentation FoundationDawid Cieszyńskicieszak@cieszak.eu

Agenda

Co to jest? Do czego służy?Porównanie z Windows FormsJęzyk XAML i przykłady koduData Binding i Update TriggerExpression BlendNowe kontrolki w WPF?Podsumowanie

Co to jest?

Windows Presentation Foundation(System.Windows.*)

Windows CardSpace

Windows Workflow Foundation(System.Workflow.*)

Windows CommunicationFoundation(System.ServiceModel.*)

Do czego służy?

Co to jest?

Nowa estetyka Windows VistaTransformacje, animacje, przezroczystość, cieniowanie, efekty trójwymiarowe, itp.StyleWyzwalacze

Windows Forms Windows Presentation Foundation

• kontrolka odpowiedzialna za rysowanie• zachowanie interfejsu, efekty muszą być oprogramowane przez programistę• dane do/z kontrolki muszą być przekazywane „ręcznie”

• cała powierzchnia okna jest kontrolowana i rysowana wspólnie• wyeliminowanie uczestnictwa aplikacji w odświeżaniu okna• efekty bardzo łatwe do uzyskania• osadzanie jednych kontrolek na innych• bindowanie kontrolek i obiektów

WPF vs Windows Forms

XAML = Extensible Application Markup

Language

<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>

XAML

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;

C#

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush(Colors.LightBlue)b1.Width = 100

VB.NETHTML?

Przykłady kodu XAML

App.xaml

<Application x:Class="WpfApplication1.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources>

</Application.Resources></Application>

MainWindow.xaml

<Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid> </Grid></Window>

Layout

DockPanelStackPanelGridCanvas

Przykład XAML

<Rectangle Fill="Red„ Width="150„ Height="100" />

Przykład XAML

<Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition /> </Grid.RowDefinitions> <Rectangle Fill="Red" Width="150" Height="100„

Grid.Column="1" Grid.Row="1"/></Grid>

Przykład XAML

<Button Height="25" Width="100" Grid.Column="0„ Grid.Row="0" Click="Button_Click"/>

<Rectangle x:Name="rect" Fill="Red" Width="150" Height="100"

Grid.Column="1" Grid.Row="1"/>

private void Button_Click(object sender, RoutedEventArgs e){ rect.Fill= new SolidColorBrush(Colors.Blue);}

Przykład XAML

<Rectangle x:Name="rect" Width="150" Height="100" Grid.Column="1" Grid.Row="1">

<Rectangle.Fill> <LinearGradientBrush> <GradientStop Offset="0" Color="LightBlue" /> <GradientStop Offset="0.4" Color="Blue" /> <GradientStop Offset="0.8" Color="Purple" /> <GradientStop Offset="1.0" Color="Lavender"/> </LinearGradientBrush> </Rectangle.Fill></Rectangle>

Przykład XAML

<TextBlockFontFamily="Verdana" FontSize="72„FontStyle="Italic" FontWeight="Bold" >

KOALA <TextBlock.Foreground> <ImageBrush ImageSource="Koala.jpg" /> </TextBlock.Foreground></TextBlock>

Przykład XAML

<TextBlock Text="Click to win!" TextDecorations="None" Cursor="Hand" FontSize="14" FontWeight="Bold" MouseEnter="TextBlock_MouseEnter" MouseLeave="TextBlock_MouseLeave" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp" />

private void TextBlock_MouseEnter(object sender, MouseEventArgs e){ ((TextBlock)sender).TextDecorations = TextDecorations.Underline; ((TextBlock)sender).Foreground = Brushes.Maroon;}

private void TextBlock_MouseLeave(object sender, MouseEventArgs e){ ((TextBlock)sender).TextDecorations = null; ((TextBlock)sender).Foreground = Brushes.Black;}

private void TextBlock_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){ MessageBox.Show("Congratulations!");}

Style

<Application.Resources> <Style TargetType="Button" x:Key="GelButton"> <Setter Property="Margin" Value="1,2,1,2"/> <Setter Property="HorizontalAlignment„

Value="Left"/> <Setter Property="Template"> <Setter.Value> ... </Setter.Value> </Setter> </Style></Application.Resources>

<Button Height="50" Width="250" Style="{StaticResource GelButton}" Content="Button

1"/>

Style

<Application.Resources> <Style TargetType="Button"> <Setter Property="Margin" Value="1,2,1,2"/> <Setter Property="HorizontalAlignment„

Value="Left"/> <Setter Property="Template"> <Setter.Value> ... </Setter.Value> </Setter> </Style></Application.Resources>

<Button Height="50" Width="250" Content="Button 1"/>

Data Binding

Managed Object

ADO.NET Data Source

XML Data

Data Binding

Tryby Bindowania

Cel Źródło

OneWay

TwoWay

OneWayToSource

OneTime

OneWay

TwoWay

OneWayToSource

OneTime

Bindowanie do obiektu

namespace MyNamespace{ class MyClass { public string ColorName { get { return "Red"; } } }}

<DockPanel xmlns:c="clr-namespace:MyNamespace"> <DockPanel.Resources> <c:MyClass x:Key="mySource" /> </DockPanel.Resources> <Button

Background="{Binding Path=ColorName,Source={StaticResource mySource}}"> ... </Button> </DockPanel>

Bindowanie

<DockPanel xmlns:c="clr-namespace:MyNamespace"> <DockPanel.Resources>...</DockPanel.Resources> <DockPanel.DataContext> <Binding Source="{StaticResource mySource}"/> </DockPanel.DataContext> <Button Background="{Binding Path=BackColorName}"> ... </Button> <TextBox Foreground="{Binding Path=ForeColorName}"> ... </TextBox></DockPanel>

UpdateTrigger

<TextBox Width="100"> <TextBox.Text> <Binding Source="{StaticResource myData}" Path="ColorName" UpdateSourceTrigger="PropertyChanged" /> </TextBox.Text></TextBox>

Kiedy ma następować aktualizacja?Kiedy ma następować aktualizacja?

• Default • Explicit• LostFocus• PropertyChanged

• Default • Explicit• LostFocus• PropertyChanged

UpdateTrigger - przykład

<Label>Enter a Name:</Label><TextBox> <TextBox.Text> <Binding Source="{StaticResource myDataSource}"

Path ="Name" UpdateSourceTrigger= "PropertyChanged" />

</TextBox.Text></TextBox><Label>The name you entered:</Label><TextBlock Text="{Binding Source= {StaticResource myDataSource}, Path = Name}"/>

<TextBox Name="itemNameTextBox" Text="{Binding Path=ItemName, UpdateSourceTrigger=Explicit}" />

//itemNameTextBox is an instance of a TextBoxBindingExpression be = itemNameTextBox.GetBindingExpression(TextBox.TextProperty);be.UpdateSource();

DataTemplate

<DataTemplate x:Key="myTaskTemplate"> <Border Name="border" BorderBrush="Aqua"

BorderThickness="1" Padding="5" Margin="5"> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Text="Task Name:"/> <TextBlock Grid.Row="0" Grid.Column="l" Text="{Binding Path=TaskName}"/> <TextBlock Grid.Row="1" Grid.Column="0" Text="Description:" /> <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path.Description}" /> <TextBlock Grid.Row="2" Grid.Column="0" Text="Priority:" /> <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}" /> </Grid> </Border></DataTemplate>

<ListBox Width="400" Margin="10" ItemsSource="{Binding Source={StaticResource myTodoList}}" ItemTemplate="{StaticResource myTaskTemplate}" HorizontalContentAlignment="Stretch"/>

<Border Width="400"

BorderBrush="Green"

BorderThickness="9">

<StackPanel>

<MediaElement Source="aero.wmv" />

<Button>Hello</Button>

</StackPanel>

</Border>

Audio i Wideo

Różne formaty: WMV, MPEG, Some AVIsSynchronizacha z animacjami

Ronnie Saurenmann (WPF)

Grafika 2D, Grafika 3D, Obrazy

Grafika 2D Grafika 3D

Obrazy

Ronnie Saurenmann (WPF)

Transformacja i animacja

RotateTransformScaleTransformRenderTransformEfekty: rozmycie, poświataZmiana każdej właściwości w czasie

Dokumenty, drukowanieUżycie kontrolek Windows FormsXAML Browser Applications (XBAPs)

Co jeszcze?

Expression Blend

Nowe kontrolki

Datagrid, Ribbon, Visual State Manager

WPF Toolkit:http://wpf.codeplex.com/Office UI Licensing Developer Center:http://msdn.microsoft.com/hr-hr/office/aa973809(en-us).aspx

Demo

Ribbon

Łatwe tworzenie GUIAutomagiczne przekazywanie wartościProstota i funkcjonalnośćOddzielenie logiki od wygląduZachwyt użytkownika

Podsumowanie

Dziękuję

<Canvas Width="100" Height="100"> <Ellipse Fill="Yellow" Stroke="Black" StrokeThickness="7" Width="100" Height="100" /> <Ellipse Fill="Black" Width="10" Height="15" Canvas.Left="28" Canvas.Top="28" /> <Ellipse Fill="Black" Width="10" Height="15" Canvas.Left="62" Canvas.Top="28" /> <Path Stroke="Black" StrokeThickness="6" Data="M 30,60 Q 50,90 70,60" /></Canvas>