silverlight week2
TRANSCRIPT
![Page 1: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/1.jpg)
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 )
![Page 2: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/2.jpg)
Silverlight Layout Week 2
Agenda
1. XAML Continued2. Class Hierarchy3. DependencyProperty,
AttachedProperty4. Common Properties5. Animation6. Canvas, StackPanel, Grid7. GridSplitter, ScrollViewer, Border8. ClassProject
![Page 3: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/3.jpg)
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.
![Page 4: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/4.jpg)
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.
![Page 5: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/5.jpg)
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.
![Page 6: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/6.jpg)
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()
![Page 7: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/7.jpg)
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
![Page 8: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/8.jpg)
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 :
![Page 9: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/9.jpg)
<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 ?
![Page 10: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/10.jpg)
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
![Page 11: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/11.jpg)
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”… />
![Page 12: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/12.jpg)
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)
![Page 13: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/13.jpg)
Common Properties
Parent
CV
M
Vertical Alignment
Horizontal Alignment
Parent
MarginElement
Content
Padding
Height
Width
![Page 14: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/14.jpg)
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
![Page 15: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/15.jpg)
Alignment
<Stackpanel>
<Button HA=“Left”> HCA
<Button HA=“Center”
<Button HA=“Right”
<Button HA=“Stretch”Center
Right
Left
![Page 16: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/16.jpg)
Animation• Silverlight supports only RenderTransform defined in UI
Element.• FrameworkElements supports 2 properties:
– LayoutTransform (applied before layout)– RenderTransform (after layout before
rendering)
![Page 17: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/17.jpg)
Animation : 5 Types of 2D
• RotateTransform• ScaleTransform• SkewTransform• TranslateTransform• MatrixTransform
![Page 18: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/18.jpg)
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>
![Page 19: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/19.jpg)
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”
![Page 20: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/20.jpg)
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.
![Page 21: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/21.jpg)
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>
![Page 22: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/22.jpg)
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();
}
![Page 23: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/23.jpg)
StoryBoard
• Has Begin, Stop, Pause, Resume.
![Page 24: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/24.jpg)
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
![Page 25: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/25.jpg)
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.
![Page 26: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/26.jpg)
Class Project
• Animate throwing a red ball continuosly.
![Page 27: Silverlight week2](https://reader036.vdocument.in/reader036/viewer/2022062303/5561e6e1d8b42a9d068b4f02/html5/thumbnails/27.jpg)
• http://www.codeproject.com/KB/silverlight/SilverlightBouncingBall.aspx