XAML Extensible Application Markup Language

Transkrypt

1 XAML Extensible Application Markup Language Opis i zastosowania... Maciej Poniedziałek WfiIS IS rok 5

2 XAML: Język oparty o XML zoptymalizowanym do opisu bogatych, wizualnych interfejsów, takich jak tworzone w Adobe Flash. SVG czy XUL. Pliki XAML tworzone są ręcznie lub przy pomocy wizualnych narzędzi, takich jak Microsoft Expression Studio. Wynikowy kod XML interpretowany jest w locie przez podsystem systemu operacyjnego odpowiedzialny za wyświetlanie danych, co zastępuje GDI z poprzednich wersji Windows. Elementy XAML mapowane są do obiektów Common Language Runtime. Atrybuty mapowane są do właściwości lub zdarzeń tych obiektów XAML został stworzony w celu zapewnienia wsparcia klasą i metodą w architekturze.net, które zajmują się obsługą interakcji z użytkownikiem, zwłaszcza wyświetlaniem. Akronim XAML pierwotnie rozwijany był jako extensible Avalon Markup Language, gdzie Avalon było nazwą kodową dla tej grupy klas.net..

3 Rysunek poglądowy

4 Windows Presentation Foundation (WPF, nazwa kodowa Avalon) nazwa silnika graficznego i API bazującego na.net 3, wchodzącego w skład WinFX. WPF integruje interfejs użytkownika, grafikę 2D i 3D, multimedia, dokumenty oraz generowanie/rozpoznawanie mowy (do aplikacji sterowanych głosem). API oparte o XAML. Całość zawarta w nowym API WinFX, zaś graficzna część GUI wykorzystuje grafikę wektorową, budowaną z użyciem akceleratorów grafiki 3D i efektów graficznych udostępnianych przez WGF (??? DirectX10). (podobne Quartz z Mac OS X ).

5 XAML - pierwsze kroki.. <Application x:class="wpfapplication1.app" xmlns=" StartupUri="Window1.xaml"> <Application.Resources /> </Application> namespace WpfApplication1 namespace WpfApplication1 { { //Interaction logic for Window1.xaml public partial class App : Application { } public partial class Window1 : Window } { public Window1() [STAThread] public static void Main() { { InitializeComponent(); Application app = new Application(); } app.startupuri = new Uri( MainWindow.xaml, } UriKind.Relative); } app.run(); } <Window x:class="wpfapplication1.window1" xmlns=" xmlns:x=" Title="Window1" Height="300" Width="300"> <Grid></Grid> </Window> XAML BAML

6 <Border BorderBrush="Black" BorderThickness="5" Margin="10" Padding="5"> <Button>Click Me!</Button> </Border> <div style="border: solid 5px black; margin: 10px; padding: 5px"> <input type="button" value="click Me!" /> </div> <Ellipse Width="200" Height="150"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Offset="0" Color="Teal"/> <GradientStop Offset="1" Color="Aqua"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> Rectangle Line Path Ellipse

7 StackPanel, DockPanel, Grid <DockPanel> <TextBlock DockPanel.Dock="Top">My UI</TextBlock> <ListBox DockPanel.Dock="Right"> <ListBoxItem>Item 1</ListBoxItem> <ListBoxItem>Item 2</ListBoxItem> </ListBox> <RichTextBox/> </DockPanel> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="3*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBlock Grid.ColumnSpan="2">My UI</TextBlock> <ListBox Grid.Row="1" Grid.Column="0"> <ListBoxItem>Item 1</ListBoxItem> <ListBoxItem>Item 2</ListBoxItem> </ListBox> <RichTextBox Grid.Row="1" Grid.Column="1" /> </Grid> DependencyProperties

8 Databinding and DataTemplates are perhaps the most powerful features of WPF <Grid> <Grid.RowDefinitions> <RowDefinition/><RowDefinition/><RowDefinition/> <RowDefinition/><RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="75"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Label>First Name:</Label> <TextBox Grid.Column="1" Text="{Binding Path=FirstName}"/> <Label Grid.Row="1">Last Name:</Label> <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding LastName}"/> <Label Grid.Row="2">Street:</Label> <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Address.Street}"/> <Label Grid.Row="3">City:</Label> <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding Address.City}"/> <Label Grid.Row="4">State:</Label> <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding Address.State}"/> </Grid> <Grid> <Grid.Resources> <DataTemplate DataType="{x:Type local:person}"> <Grid Margin="3"> <Grid.BitmapEffect> <DropShadowBitmapEffect /> </Grid.BitmapEffect> <Rectangle Opacity="1" RadiusX="9" RadiusY="9" Fill="Blue" StrokeThickness="0.35"> </Rectangle> <Rectangle Margin="2,2,2,0" VerticalAlignment="Top" RadiusX="6" RadiusY="6" Stroke="Transparent" Height="15px"> </Rectangle> <Grid Margin="5"> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <StackPanel Grid.Row="0" Orientation="Horizontal"> <TextBlock FontSize="16" Foreground="White" Text="{Binding LastName}" /> <TextBlock FontSize="16" Foreground="White" xml:space="preserve">, </TextBlock> <TextBlock FontSize="16" Foreground="White" Text="{Binding FirstName}" /> </StackPanel> DataTemplate DataTriggers </Grid> </Grid> </Grid> </DataTemplate> </Grid.Resources> <ListBox Name="personList" />

9 'Styles' i 'Control Templates' inherit styles named styles Styles Templates Skins Themes <StackPanel> <StackPanel.Resources> <Style x:key="basestyle" TargetType="{x:Type Control}"> <Setter Property="FontFamily" Value="Trebuchet" /> <Setter Property="FontSize" Value="15" /> <Setter Property="FontWeight" Value="Bold" /> </Style> <Style BasedOn="{StaticResource basestyle}" TargetType="{x:Type Label}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="Red" /> </Trigger> </Style.Triggers> </Style> </StackPanel.Resources> <Label>Here is some text.</label> <Label Style="{StaticResource basestyle}">more text.</label> <Label>The last bit of text.</label> </StackPanel> <Button x:name="b"> <Button.RenderTransform> <TransformGroup> <RotateTransform Angle="45"/> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="10"/> </TransformGroup> </Button.RenderTransform> OK </Button>

10 Animacje: <Button Height="40" Width="125"> Click ME! <Button.Triggers> <EventTrigger RoutedEvent="Button.MouseEnter"> <BeginStoryboard> <Storyboard TargetProperty="Opacity"> <DoubleAnimation From="1" To="0" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> <Window.Resources> <Style TargetType="{x:Type RadioButton}"> <Style.Triggers> <Trigger Property="IsChecked" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard TargetProperty="Opacity"> <DoubleAnimation From="1" To="0" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> </Style.Triggers> </Style> </Window.Resources> <RadioButton Height="40" Width="125">aaaa</RadioButton>

11 <Viewport3D> <Viewport3D.Camera> <PerspectiveCamera FarPlaneDistance="20" LookDirection="3,-1,-1" UpDirection="0,1,0" NearPlaneDistance="1" Position="-5,2,3" FieldOfView="45" /> </Viewport3D.Camera> <ModelVisual3D> <ModelVisual3D.Content> <Model3DGroup> <DirectionalLight Color="White" Direction="-3,-4,-5" /> <GeometryModel3D> <GeometryModel3D.Geometry> <MeshGeometry3D Positions=" " Normals=" " TextureCoordinates=" " TriangleIndices=" " /> </GeometryModel3D.Geometry> <GeometryModel3D.Material> <DiffuseMaterial> <DiffuseMaterial.Brush> <SolidColorBrush Color="Blue"/> </DiffuseMaterial.Brush> </DiffuseMaterial> </GeometryModel3D.Material> </GeometryModel3D> </Model3DGroup> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>

12 Prawie jak <script> w htmlu: <Window xmlns= xmlns:x= > <Button Click= button_click >OK</Button> <x:code><![cdata[ void button_click(object sender, RoutedEventArgs e) { this.close(); } ]]></x:code> </Window> Praca z xaml'em: System.Uri uri =new System.Uri( MyWindow.xaml, System.UriKind.Relative); Window window = (Window) Application.LoadComponent(uri); //tutaj cos robimy string xaml = XamlWriter.Save(window);

13 Silverlight "WPF/E" Microsoft Silverlight - technologia internetowa umożliwiająca wyświetlanie treści multimedialnych za pomocą przeglądarki. Rozwijany był pod kodową nazwą Windows Presentation Foundation/Everywhere (WPF/E) i zaprojektowany tak, aby współpracował z językami XAML oraz JavaScript. W Wersji 1.1 (aktualnie w fazie alpha) możliwe jest pisanie w dowolnym języku obsługiwanym przez.net, dodatkowo obsługuje języki interpretowane takie jak Ruby i Python. Celem producenta jest udostępnienie Silverlight jako technologii dla wielu systemów operacyjnych i przeglądarek (cross-platform). Do tej pory Microsoft wydał plugin tylko dla systemów Windows (Internet Explorer i Mozilla Firefox) i Mac OS X. Nie pojawiła się natomiast wersja dla systemu Linux. Odpowiednikiem dla tego systemu jest opensource'owy projekt "Moonlight" aktualnie w fazie rozwojowej do pobrania z SVN.

14 Microsoft Silverlight 1.1 Alpha. Microsoft Visual Studio 2008 Beta 2. Microsoft Silverlight Tools Alpha for VS 2008 Beta 2. Microsoft Silverlight 1.1 SDK Alpha Refresh Sept 2007

15 start.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" > <!-- saved from url=(0014)about:internet --> <head> <title>silverlight Project Test Page </title> <script type="text/javascript" src="silverlight.js"></script> <script type="text/javascript" src="testpage.html.js"></script> <style type="text/css">.silverlighthost { width: 640px; height: 480px; } </style> </head> <body> <div id="silverlightcontrolhost" class="silverlighthost" > <script type="text/javascript"> createsilverlight(); </script> </div> </body> </html>

16 TestPage.html.js // JScript source code //contains calls to silverlight.js, example below loads Page.xaml function createsilverlight() { Silverlight.createObjectEx({ source: "Page.xaml", parentelement: document.getelementbyid("silverlightcontrolhost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "1.1", enablehtmlaccess: "true" }, events: {} }); // Give the keyboard focus to the Silverlight control by default document.body.onload = function() { var silverlightcontrol = document.getelementbyid('silverlightcontrol'); if (silverlightcontrol) silverlightcontrol.focus(); } }

17 Page.xaml <Canvas x:name="parentcanvas" xmlns=" xmlns:x=" Loaded="Page_Loaded" x:class="silverlightstarterkit.page;assembly=clientbin/silverlightstarterkit.dll" xmlns:uicontrol="clr-namespace:silverlight.samples.controls;assembly=clientbin/silverlight.samples.controls.dll" Width="640" Height="480" Background="White" > <!-- ScrollViewer --> <uicontrol:scrollviewer x:name="scrollviewer" ScrollableHeight="60" ScrollableWidth="2"/> <Canvas x:name="standincanvas" Width="1200" Height="1200"> <!-- Buttons with click handlers --> <uicontrol:button Canvas.Top="0" Canvas.Left="0" Text="Button1" Click="ClickHandler"/> <uicontrol:button Canvas.Top="0" Canvas.Left="130" Text="Button2" Click="ClickHandler"/> <uicontrol:button Canvas.Top="0" Canvas.Left="260" Text="Button3" Click="ClickHandler"/> <!-- Slider with horizontal orientation (set via code) --> <uicontrol:slider x:name="hslider" Canvas.Top="60" Canvas.Left="450" /> <!-- Slider with vertical orientation (set via code) --> <uicontrol:slider x:name="vslider" Canvas.Top="100" Canvas.Left="450" /> <!-- Scroll bar with horizontal orientation (set via code) --> <uicontrol:scrollbar x:name="hscrollbar" Canvas.Top="80" Canvas.Left="50" /> <!-- Scroll bar with vertical orientation (set via code) --> <uicontrol:scrollbar x:name="vscrollbar" Canvas.Top="100" Canvas.Left="50" ScrollStep="25"/> <!-- List box with list items populated via code --> <uicontrol:listbox x:name="listbox" Canvas.Top="130" Canvas.Left="80" /> </Canvas> </Canvas>

18 Podsumowanie i Linki: Sams - Windows Presentation Foundation Unleashed