Your SlideShare is downloading. ×
  • Like
Silverlight week2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Silverlight week2

  • 236 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
236
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. <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. 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. 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. 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. Common Properties Parent CV M Vertical Alignment Horizontal Alignment Parent Margin Element Content Padding Height Width
  • 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. Alignment <Stackpanel> <Button HA=“Left”> HCA <Button HA=“Center” <Button HA=“Right” <Button HA=“Stretch” Center Right Left
  • 16. Animation • Silverlight supports only RenderTransform defined in UI Element. • FrameworkElements supports 2 properties: – LayoutTransform (applied before layout) – RenderTransform (after layout before rendering)
  • 17. Animation : 5 Types of 2D • RotateTransform • ScaleTransform • SkewTransform • TranslateTransform • MatrixTransform
  • 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. 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. 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. 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. 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. StoryBoard • Has Begin, Stop, Pause, Resume.
  • 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. 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. Class Project • Animate throwing a red ball continuosly.
  • 27. • http://www.codeproject.com/KB/silverlight/SilverlightBouncingBall.aspx