Silverlight ja Expression Blend

1. Silverlight ja Expression Blend Jaana Metsamaa

2. Mis see Silverlight on? • plug-in • erinevadplatvormid • erinevadveebilehitsejad • telefonid

3. Mis see Silverlight teeb? • HTML olivanaveeb • Silverlight on uusveeb!

4. Töövahendid

5. Töövahendid

6. Töövahendid

7. XAML <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!" /> </Canvas>

8. Teremaailm!

9. XAML <UserControl xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid x:Name=“LayoutRoot”> <TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!"/> <Button x:Name="nupp"Content=“Vajuta“ Click="meetod”></Button> </Grid> </UserControl> Page.xaml

10. Teremaailm! Vajuta

11. Teremaailm! Vajuta

12. XAML Juur, selle sees saab olla ainult element asi. <UserControl xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid x:Name=“LayoutRoot”> <TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!"/> <Button x:Name="nupp"Content=“Vajuta“ Click="meetod”></Button> </Grid> </UserControl> MainPage.xaml Tavaliselt on selleksühekselemendiksmõnipaigutushaldur (Grid, StackPanel), mille sissepaigutataksekõikmuuekraanilolev.

13. XAML <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!" /> </Canvas>

14. XAML <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!" /> </Canvas> = TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = "Tere maailm!";

15. Väljanägemine - Stiilid Kõigeolulisemlause <TextBlock x:Name="txt" FontSize="32” Margin=”5” Text=”Kõige olulisem lause”> <TextBlock.Fill> <LinearGradientBrush> <GradientStop Color = "LightBlue" Offset="0"/> <GradientStop Color="SteelBlue“ Offset="1"/> </LinearGradientBrush> </TextBlock.Fill></TextBlock >

16. Miturida XAML koodi? Kõigeolulisemlause Kõigeolulisemlause Kõigeolulisemlause Kõigeolulisemlause

17. Stiil <Style x:Key="stiil" TargetType="TextBlock"> <Setter Property="FontSize" Value="24" /> <Setter Property="Margin" Value="5" /> <Setter Property="Foreground"> <Setter.Value> <LinearGradientBrush> <GradientStop Color = "LightBlue" Offset="0"/> <GradientStop Color="SteelBlue“ Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> </Style> <TextBlock x:Name=“txt“ Text="Hei" Style="{StaticResource stiil}“ /> <TextBlock x:Name=“a2“ Text=“Tere" Style="{StaticResource stiil}“ />

18. Transformatsioonid 0 • Suurendamine - Scale • Pööramine - Rotate • Liigutamine - Translate • Väänamine - Skew 1 2 4 3

19. Transformatsioonja XAML <Rectangle x:Name=”kast” Fill=“Red” "> <Rectangle.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="2"/> </Rectangle.RenderTransform> </Rectangle > = ScaleTransform st = new ScaleTransform(); st.ScaleX = 2; st.ScaleY = 2; txt.RenderTransfrom = st;

20. Animatsioon = Transformatsioon + aeg <Rectangle x:Name=”kast" Fil=”Red”> <Rectangle .Resources> <Storyboard x:Name="Kuma"> <DoubleAnimation x:Name="Animatsioon" Storyboard.TargetName="kast" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:05" /> </Storyboard> </Rectangle .Resources> </Rectangle > NB! Animatsioonid ei alga automaatselt, need tuleb käivitada!

21. Käitumismallid - Behaviors • Annavad Silverlight elementidele oskuse reageerida rakenduses toimuvatele sündmustele. • Sündmus: Hire vajutus, hiire liigutamine, animatsiooni lõppemine, video paus jne. • Oskus: Alusta animatsiooni, mängi videot jne.

22. Käitumismallid - Behaviors

23. Publitseerimine • Kus? – Kui server suudab näidata tavalist veebilehte HTML-is, siis suudab ta näidata ka Silverlight rakendusi. • Kuidas? – Niisamuti, kui video embeddemine blogisse - <object> märgendi abil.