1 / 76

Charles Petzold charlespetzold

XAML. Charles Petzold www.charlespetzold.com. Agenda. Layout and positioning Shapes, brushes, and brush resources Text, fonts, and font resources Images and writeable bitmaps UI element properties Creating XAML objects programmatically Transforms and projections

maegan
Download Presentation

Charles Petzold charlespetzold

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XAML Charles Petzold www.charlespetzold.com

  2. Agenda • Layout and positioning • Shapes, brushes, and brush resources • Text, fonts, and font resources • Images and writeable bitmaps • UI element properties • Creating XAML objects programmatically • Transforms and projections • Animations and animation easing • GPU caching

  3. Layout Controls • Controls for positioning UI elements • More in the Silverlight for Windows Phone Toolkit

  4. Canvas • Allows absolute positioning of elements <Canvas> <Rectangle Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Fill="Red" /> <Canvas Canvas.Left="200" Canvas.Top="100" Width="200" Height="200" Background="Yellow"> <Rectangle Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Fill="Blue" /> </Canvas> </Canvas>

  5. StackPanel • Stacks elements horizontally or vertically <StackPanel Orientation="Horizontal"> <Rectangle Width="100" Height="100" Fill="Red" /> <Rectangle Width="100" Height="100" Fill="Green" /> <Rectangle Width="100" Height="100" Fill="Blue" /> </StackPanel>

  6. Grid • Arranges elements in rows and columns <Grid ShowGridLines="true"> <Grid.RowDefinitions> <RowDefinition Height="150" /> <RowDefinition Height="150" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="150" /> <ColumnDefinition Width="150" /> </Grid.ColumnDefinitions> <Rectangle Width="100" Height="100" Fill="Red" Grid.Row="0" Grid.Column="0" /> <Rectangle Width="100" Height="100" Fill="Green" Grid.Row="0" Grid.Column="1" /> <Rectangle Width="100" Height="100" Fill="Blue" Grid.Row="1" Grid.Column="0" /> <Rectangle Width="100" Height="100" Fill="Yellow" Grid.Row="1" Grid.Column="1" /> </Grid>

  7. Sizing Rows and Columns • Absolute sizing: Width="200" • Automatic sizing: Width="Auto" • Column width == Width of widest object in column • Proportional sizing: <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> 25% of total width 50% of total width 25% of total width

  8. Alignment • FrameworkElement'sHorizontalAlignmentand VerticalAlignment properties control alignment <Rectangle Width="100" Height="100" Fill="Red" HorizontalAlignment="Left" VerticalAlignment="Top" /> <Rectangle Width="100" Height="100" Fill="Green" Margin="10" HorizontalAlignment="Right" VerticalAlignment="Bottom" />

  9. Margins • FrameworkElement's Margin property creates padding around elements <StackPanel Orientation="Horizontal"> <Rectangle Width="100" Height="100" Fill="Red" Margin="10" /> <Rectangle Width="100" Height="100" Fill="Green" Margin="10" /> <Rectangle Width="100" Height="100" Fill="Blue" Margin="10" /> </StackPanel>

  10. Layout

  11. Shapes • Silverlight supports six shape types Rectangle Ellipse Polygon Line PolyLine Path

  12. Rectangles <Rectangle Width="300" Height="200" StrokeThickness="10" Stroke="Black" Fill="Yellow" />

  13. Paths <Path Fill="Yellow" Stroke="Black" StrokeThickness="4" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 200,200 C 200,300 330,250 580,140 C 330,300 130,450 200,200"/>

  14. Brushes • Objects used to color XAML UI elements • Apply using property-element syntax

  15. Property-Element Syntax • Allows properties to be assigned nontrivial values <Rectangle Height="200" Width="300" Stroke="Black" StrokeThickness="10"> <Rectangle.Stroke> <SolidColorBrush Color="Black" /> </Rectangle.Stroke> <Rectangle.Fill> <SolidColorBrush Color="Yellow" /> </Rectangle.Fill> </Rectangle>

  16. LinearGradientBrush <Rectangle Height="200" Width="300" Stroke="Black" StrokeThickness="10"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

  17. RadialGradientBrush <Rectangle Height="200" Width="300" Stroke="Black" StrokeThickness="10"> <Rectangle.Fill> <RadialGradientBrushGradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle>

  18. Stock Brush Resources • Approximately 25 built-in brush resources • PhoneAccentBrush and PhoneSubtleBrush • PhoneBackgroundBrush and PhoneForegroundBrush • PhoneChromeBrush and PhoneDisabledBrush • PhoneBorderBrush and many others • Colors change with theme and accent colors • Complete list at http://msdn.microsoft.com/en-us/library/ff769552(v=vs.92).aspx • Also in ThemeResources.xaml

  19. Stock Brush Resources in Action Dark theme Blue accent Light theme Blue accent Dark theme Orange accent

  20. Using Stock Brush Resources <Rectangle Width="300" Height="80" Stroke="{StaticResourcePhoneBorderBrush}" Fill="{StaticResourcePhoneAccentBrush}" /> {StaticResource} markup extension loads the specified resource

  21. Stock Brushes

  22. TextBlock <TextBlockFontSize="120" FontFamily="Georgia" FontStyle="Italic" FontWeight="Bold"> Silverlight <TextBlock.Foreground> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </TextBlock.Foreground> </TextBlock>

  23. Fonts • Default is Segoe WP • Approx. 15 fonts provided in ROM on phones • Arial, Courier New, Georgia, Times New Roman, Segoe WP, Tahoma, Trebuchet MS, Verdana, and more • Complete list at http://msdn.microsoft.com/en-us/library/ff806365%28v=VS.95%29.aspx • Custom fonts supported, too

  24. Custom Fonts • Build TTFs into application assembly as resources • Also works with ZIP files containing TTFs • Reference individual fonts using syntax FontFamily="filename#fontname" <TextBlockFontFamily="MyHandwriting.ttf#ChickenScratch"> Silverlight </TextBlock>

  25. Stock Font Resources • Built-in FontFamily resources • PhoneFontFamilyNormal, PhoneFontFamilyLight, PhoneFontFamilySemiLight, PhoneFontFamilySemiBold • Built-in FontSize resources • PhoneFontSizeSmall, Normal, Medium, MediumLarge, Large, ExtraLarge, ExtraExtraLarge, Huge • Built-in Style resources • PhoneTextNormalStyle, PhoneTextAccentStyle, PhoneTextContrastStyle, and many others • Combine FontFamily, FontSize, and Foreground

  26. Stock Font Resources in Action PhoneTextNormalStyle PhoneTextTitle1Style PhoneTextExtraLargeStyle PhoneTextSubtleStyle PhoneTextAccentStyle

  27. Using Stock Font Resources <TextBlock... Style="{StaticResourcePhoneTextExtraLargeStyle}" /> <TextBlock... Style="{StaticResourcePhoneTextAccentStyle}" /> {StaticResource} markup extension loads the specified resource

  28. Images <Image Source="Bandit.jpg"/> <Image Source="http://www.wintellect.com/images/Bandit.jpg" /> <Image Source="Images/Bandit.jpg" Stretch="None" /> <Image Source="Images/Bandit.jpg" Width="400" />

  29. Images and Build Actions • Set build action to Content, not Resource, for images and other media • Both work • Resource is the default • Content is faster

  30. WriteableBitmap • Silverlight's pixel-addressable bitmap API • Pixels exposed through Pixels property • One-dimensional array (row-first order) • Create bitmaps from scratch • Create bitmaps from Image objects • Render all or part of the XAML tree to a bitmap

  31. Generating an Image WriteableBitmap bitmap = new WriteableBitmap(width, height); for (int x = 0; x < width; x++) { for (int y = 0; y < height; y++) { bitmap.Pixels[(y * width) + x] = unchecked((int)0xFF000000); // ARGB (black) } } bitmap.Invalidate(); // Copy WriteableBitmap bits to a XAML Image MyImage.Source = bitmap;

  32. Modifying a XAML Image WriteableBitmapbitmap = new WriteableBitmap((BitmapImage)MyImage.Source); for (int x = 0; x < bitmap.PixelWidth; x++) { for (int y = 0; y < bitmap.PixelHeight; y++) { // TODO: Modify pixel at bitmap.Pixels[[(y * width) + x] } } bitmap.Invalidate(); // Copy WriteableBitmap bits to back to the XAML Image MyImage.Source = bitmap;

  33. Rendering XAML to a Bitmap // Create a WriteableBitmap WriteableBitmap bitmap = new WriteableBitmap(width, height); // Render Canvas named "TargetCanvas" to the bitmap bitmap.Render(TargetCanvas, null); bitmap.Invalidate(); // Copy WriteableBitmap bits to a XAML Image MyImage.Source = bitmap;

  34. WriteableBitmap

  35. Properties of UI Elements

  36. Visibility • Controls visibility of XAML objects • Visibility.Visible(default) – Visible • Visibility.Collapsed – Not visible • Use Opacity, not Visibility, to hide objects temporarily (opposite desktop guidance) // XAML <Ellipse x:Name="Ball" Width="300" Height="200" Fill="Red" /> // C# Ball.Visibility = Visibility.Collapsed; // Make it disappear

  37. Opacity <Ellipse Canvas.Left="50" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10" Fill="Red" Opacity="0.5" /> <Ellipse Canvas.Left="200" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10" Fill="#80FFFF00" />

  38. OpacityMask <TextBlock Text="Silverlight" Foreground="White" ... /> <TextBlockText="Silverlight" Foreground="White" ...> ... <TextBlock.OpacityMask> <LinearGradientBrushStartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.5" Color="#00000000" /> <GradientStop Offset="1" Color="#80000000" /> </LinearGradientBrush> </TextBlock.OpacityMask> </TextBlock>

  39. Canvas.ZIndex <Ellipse Canvas.Left="50" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10" Fill="Red" Canvas.ZIndex="1" /> <Ellipse Canvas.Left="200" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10" Fill="Yellow" Canvas.ZIndex="0" />

  40. Creating XAML Objects at Run-Time • Direct instantiation • Ellipse e = new Ellipse(); • One object at a time • XamlReader.Load • Creates object(s) from XAML strings • One object or tree of objects • Add object(s) to XAML DOM separately

  41. Direct Instantiation Ellipse ellipse = new Ellipse(); ellipse.SetValue(Canvas.LeftProperty, 50.0); ellipse.SetValue(Canvas.TopProperty, 50.0); ellipse.Width = 100.0; ellipse.Height = 100.0; ellipse.Fill = new SolidColorBrush(Colors.Red); Placeholder.Children.Add(ellipse);

  42. XamlReader.Load string xaml = "<Ellipse " + "xmlns=\"http://schemas.microsoft.com/client/2007\" " + "Canvas.Left=\"50\" Canvas.Top=\"50\" " + "Width=\"100\" Height="\100\" Fill=\"Red\" />"; FrameworkElement ellipse = (FrameworkElement) XamlReader.Load(xaml); Placeholder.Children.Add(ellipse);

  43. Creating XAML Objects at Run-Time

  44. Transforms • Enable objects or groups of objects to be translated, rotated, scaled, and skewed • Applied by assigning Transform object(s) to visual element's RenderTransform property • RenderTransform applies transform to objects after layout is performed (not before) • Silverlight doesn't support LayoutTransform • Applies transform to objects before layout • The basis for many advanced visual effects

  45. Transform Types TranslateTransform RotateTransform SkewTransform ScaleTransform

  46. RotateTransform <Rectangle Fill="Yellow" Stroke="Black" Height="200" Width="300" StrokeThickness="10"> <Rectangle.RenderTransform> <RotateTransform Angle="30" /> </Rectangle.RenderTransform> </Rectangle> (0,0) X 30o Y

  47. Controlling Center of Rotation <Rectangle Fill="Yellow" Stroke="Black" Height="200" Width="300" StrokeThickness="10"> <Rectangle.RenderTransform> <RotateTransform Angle="30" CenterX="150" CenterY="100" /> </Rectangle.RenderTransform> </Rectangle> X 30o Y

  48. RenderTransformOrigin • XAML property that controls transform origin using normalized coordinates • 0,0 = Upper left corner • 1,1 = Lower right corner <Rectangle Fill="Yellow" Stroke="Black" Height="200" Width="300" StrokeThickness="10" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="30" /> </Rectangle.RenderTransform> </Rectangle>

  49. TransformGroup • Use <TransformGroup> element to apply multiple transforms to a XAML element • Transforms applied in top-to-bottom order <Rectangle ...> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="135" /> <ScaleTransformScaleX="1.5" ScaleY="1.2" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle>

  50. CompositeTransform • One transform that does it all • Applies transforms in following order: • Scale, Skew, Rotate, Translate <Rectangle ...> <Rectangle.RenderTransform> <CompositeTransform Rotation="135" ScaleX="1.5" ScaleY="1.2" TranslateX="100" SkewX="30" /> </Rectangle.RenderTransform> </Rectangle>

More Related