XAML Extensible Application Markup Language Opis i zastosowania... Maciej Poniedziałek WfiIS IS rok 5
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..
Rysunek poglądowy
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 ).
XAML - pierwsze kroki.. <Application x:class="wpfapplication1.app" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 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="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> XAML BAML
<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
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
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" />
'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>
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>
<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="-1-1 0 1-1 0-1 1 0 1 1 0" Normals="0 1 1 0 0 1 0 0 1 0 0 1" TextureCoordinates="0 1 1 1 0 0 1 0" TriangleIndices=" 0 1 2 1 3 2" /> </GeometryModel3D.Geometry> <GeometryModel3D.Material> <DiffuseMaterial> <DiffuseMaterial.Brush> <SolidColorBrush Color="Blue"/> </DiffuseMaterial.Brush> </DiffuseMaterial> </GeometryModel3D.Material> </GeometryModel3D> </Model3DGroup> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
Prawie jak <script> w htmlu: <Window xmlns= http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x= http://schemas.microsoft.com/winfx/2006/xaml > <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);
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.
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
start.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <!-- 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>
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(); } }
Page.xaml <Canvas x:name="parentcanvas" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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>
Podsumowanie i Linki: http://dotnetslackers.com/articles/silverlight/wpftutorial.aspx http://msdn2.microsoft.com/en-us/library/ms752299.aspx Sams - Windows Presentation Foundation Unleashed http://silverlight.net/getstarted/