Download - Silverlight week2
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 )
Silverlight Layout Week 2
Agenda
1. XAML Continued2. Class Hierarchy3. DependencyProperty,
AttachedProperty4. Common Properties5. Animation6. Canvas, StackPanel, Grid7. GridSplitter, ScrollViewer, Border8. ClassProject
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.
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.
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.
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()
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
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 :
<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 ?
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
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”… />
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)
Common Properties
Parent
CV
M
Vertical Alignment
Horizontal Alignment
Parent
MarginElement
Content
Padding
Height
Width
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
Alignment
<Stackpanel>
<Button HA=“Left”> HCA
<Button HA=“Center”
<Button HA=“Right”
<Button HA=“Stretch”Center
Right
Left
Animation• Silverlight supports only RenderTransform defined in UI
Element.• FrameworkElements supports 2 properties:
– LayoutTransform (applied before layout)– RenderTransform (after layout before
rendering)
Animation : 5 Types of 2D
• RotateTransform• ScaleTransform• SkewTransform• TranslateTransform• MatrixTransform
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>
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”
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.
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>
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();
}
StoryBoard
• Has Begin, Stop, Pause, Resume.
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
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.
Class Project
• Animate throwing a red ball continuosly.
• http://www.codeproject.com/KB/silverlight/SilverlightBouncingBall.aspx