Silverlight week2

391 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
391
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Silverlight week2

  1. 1. Silverlight 4 Course 1. Introduction to Silverlight 2. Layout 3. Input Handling 4. Applications, Resources, Deployment 5. Data Binding, View Model 6. Out of Browser, File Access, Printing 7. WCF RIA Services (4 Weeks )
  2. 2. Silverlight Layout Week 2 Agenda 1. XAML Continued 2. Class Hierarchy 3. DependencyProperty, AttachedProperty 4. Common Properties 5. Animation 6. Canvas, StackPanel, Grid 7. GridSplitter, ScrollViewer, Border 8. ClassProject
  3. 3. XAML Continued <UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 • Primary namespace does not have a prefix. • XAML language namespace has “x” prefix. Prefixes are by convention. • URL is a dummy URL. Nothing exists there. Just a way for XAML compiler to resolve the symbols. • Default ns maps to : System.Windows, S.W.Automation, S.W.Controls, S.W.C.Primitives, S.W.Data, S.W.Documents, S.W.Forms.Integration, S.W.Ink, S.W.Input, S.W.Media, S.W.M.Imaging, S.W.M.Effects, Media3D, TextFormatting, S.W. Navigation, Shapes, Shell.
  4. 4. Type convertor • <Button Background=“Red” … /> • Here Background is of Brush class which defines the TypeConverter attribute as : [TypeConverter(typeof(BrushConverter)), …] public abstract class Brush : … { .. } BrushConverter knows how to create a Brush with “Red” color.
  5. 5. RST • SL Runtime • SL SDK • SL ToolKit : Has quality band for each feature. – Some will move into SDK or runtime over time. – Some might disappear too.
  6. 6. Routed Events • Bubbling. • OriginalSource. • Why bubble ? Hot Key can be defined in Root instead of all focusable control. • textBlock1.MouseEnter += new MouseEventHandler(textBlocks_MouseEnter); • Handled boolean stops routing except for GotFocus, LostFocus, and MouseMove • Some controls like Button signals Handled for Click functionality. Use AddHandler()
  7. 7. Class Hierarchy • Object – DependencyObject : Dependency Property • UIElement : Command Binding, Routed Events, Layout, Focus – FrameworkElement :Styles, Databinding, Resources, ToolTips, Context menus » Control : Fg, bg, fontsize » ContentControl » Button
  8. 8. Dependency Property • Enables styling, automatic data binding, animation. • Values added on top of .Net properties are : 1. Change Notification : Can automatically trigger some action based on property’s meta data specified during Register() : Re- render, UpdateLayout, Refresh data bindings,.. Etc [FrameWorkPropertyMetaDataOptions.Inherit | AffectsRender | AffectsMeasure ] 2. Property Value Inheritance : Parent Element Fontsize applied to all childs automatically. (Not all properties inherit… need to opt in Register()) 3. Support for multiple providers :
  9. 9. <StackPanel.Resources> <Style x:Key="ImmediateStyle" TargetType="Button"> <Setter Property="Background" Value="Green"/> </Style> </StackPanel.Resources> <Button Style="{StaticResource ImmediateStyle}" Background="Red"> <TextBlock>Hello</TextBlock> </Button> Which color the button gets : From Style or local value ?
  10. 10. Dependency Property Multiple Provider • Depends on multiple providers. Order is : 1. Animation (Active or Hold), 2. Local Values (Set Value), 3. Templated Properties (ControlTemplate or DataTemplate) 4. StyleSetters (Setter) 5. Default value
  11. 11. Attached Property • Property that can be arbitrarily attached to any object. • Example : Grid.Row, Grid.Column. • Not necessarily between Parent->Child. • StackPanel does not have a FontSize,FontStyle. – <StackPanel TextElement.FontSize=“24”… />
  12. 12. Common Properties • Margin • Padding • Horizontal/Vertical Alignment • Horizontal/Vertical Content Alignment • Min/Max Width/Height • Width/Height (default is Double.NaN) • Actual Width/Height • Visibility : Visible, Collapsed • Opaque : 0 to 1 • FlowDirection : LeftToRight (english), RightToLeft (Arabic)
  13. 13. Common Properties Parent CV M Vertical Alignment Horizontal Alignment Parent Margin Element Content Padding Height Width
  14. 14. Common Properties • Margin is on the outside. • Margin=“20” or Margin = “20, 30” or Margin=“10, 20, 30, 40” left, top, right, bottom • Padding on inside. Same syntax as Margin • VerticalAlignment : What to do with extra vertical space : Top, Center, Bottom, Stretch (default) • Horizontal Alignment : Left, Center, Right, Stretch
  15. 15. Alignment <Stackpanel> <Button HA=“Left”> HCA <Button HA=“Center” <Button HA=“Right” <Button HA=“Stretch” Center Right Left
  16. 16. Animation • Silverlight supports only RenderTransform defined in UI Element. • FrameworkElements supports 2 properties: – LayoutTransform (applied before layout) – RenderTransform (after layout before rendering)
  17. 17. Animation : 5 Types of 2D • RotateTransform • ScaleTransform • SkewTransform • TranslateTransform • MatrixTransform
  18. 18. RotateTransform • Angle, CenterX, CenterY <Button RenderTransformOrigin=“0.5,0.5”> <Button.RenderTransform> <RotateTransform Angle=“45” CenterX=“0” CenterY=“0”/> </Button.RenderTransform> Hello World rotated </Button>
  19. 19. ScaleTransform • Enlarges or Shrinks – ScaleX (multiplier for width) – ScaleY(multiplier for height) – Does ActualHeight, ActualWidth changes ? No. – Element not aware of trnasform. ScaleX=“2” ScaleY=“2 ”
  20. 20. SkewTransform • SkewTransform :AngleX AngleY CenterX CenterY • TranslateTransform : X, Y – simply moves the element. • MatrixTransform : based on matrix (not Keanu Reeves Matrix – algebra matrix) • TransformGroup ( simultaneous transforms ) Demo – No picture.
  21. 21. TransformGroup <StackPanel> <TextBlock FontSize="28" Text="Hello"> <TextBlock.RenderTransform> <TransformGroup> <RotateTransform Angle="45" /> <SkewTransform CenterX="0" CenterY="0" AngleX="60"/> </TransformGroup> </TextBlock.RenderTransform> </TextBlock> </StackPanel>
  22. 22. Storyboard <UserControl x:Class="animation_ovw_intro.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <StackPanel> <StackPanel.Resources> <!-- Animates the rectangle's opacity. --> <Storyboard x:Name="myStoryboard"> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </StackPanel.Resources> <TextBlock Margin="10">Click on the rectangle to start the animation.</TextBlock> <Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /> </StackPanel> </UserControl> // When the user clicks the Rectangle, the animation begins. private void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); }
  23. 23. StoryBoard • Has Begin, Stop, Pause, Resume.
  24. 24. Canvas, Stack Panel, Grid • Canvas • Canvas.Top, Canvas.Left : Attached Properties • Canvas.SetTop(), Canvas.SetLeft() • Stack Panel • Vertical or Horizontal Orientation • Can be nested • Can be different item types • Grid • Column Definitions : Column Definition • Row Definitions : Row Definition • Star Sized (Remaining space) • RowSpan, ColumnSpan
  25. 25. GridSplitter, ScrollViewer, Border • GridSplitter • Add to a cell • Specify direction • ScrollViewer • HorizontalScrollBarVisibility=“Auto” • Border • Makes optional rounded edges. • <Border BorderBrush=“Blue” BorderThickness=“10” CornerRadius=“80” • Does not clip the child element.
  26. 26. Class Project • Animate throwing a red ball continuosly.
  27. 27. • http://www.codeproject.com/KB/silverlight/SilverlightBouncingBall.aspx

×