See on esimene tunnis tehtud Windows Phone programm. Esimesele nupule vajutades trükitakse ekraanil olevasse tekstilahtrisse „Hello World!“ ning teise nupu vajutuse peale pannakse see textbox liikuma.
Liikumise trajektoor ja muud omadused sätiti paika visuaalselt, Expression Blend’i vahendusel, seetõttu siis ka selline kogukas xaml-kood.
Vaata kõigepealt videost mida see rakendus teeb.
Windows Phone–Hello World! ja Storyboard
MainPage.xaml
<phone:PhoneApplicationPage
x:Class="StoryBoardTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Storyboard1" AutoReverse="True" RepeatBehavior="2x">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBox1">
<EasingDoubleKeyFrame KeyTime="0" Value="312"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="114"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="114"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="-31.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:3.9" Value="-31.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBox1">
<EasingDoubleKeyFrame KeyTime="0" Value="13.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="9"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="9"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="6"/>
<EasingDoubleKeyFrame KeyTime="0:0:3.9" Value="6"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="textBox1">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="180.039"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="359.93"/>
<EasingDoubleKeyFrame KeyTime="0:0:3.9" Value="359.93"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Storyboard test" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Hello World!" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Hello World!" Height="72" HorizontalAlignment="Right" Margin="0,44,48,0" Name="button1" VerticalAlignment="Top" Width="234" Click="KirjutaHello_Click" />
<TextBox Height="82" HorizontalAlignment="Left" Margin="34,171,0,0" Name="textBox1" VerticalAlignment="Top" Width="374" RenderTransformOrigin="0.5,0.5" >
<TextBox.RenderTransform>
<CompositeTransform/>
</TextBox.RenderTransform>
</TextBox>
<Button Content="Käivita" Height="72" HorizontalAlignment="Left" Margin="248,429,0,0" Name="button2" VerticalAlignment="Top" Width="160" Click="button2_Click" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace StoryBoardTest
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void KirjutaHello_Click(object sender, RoutedEventArgs e)
{
textBox1.Text = "Hello World!";
}
private void button2_Click(object sender, RoutedEventArgs e)
{
Storyboard1.Begin();
}
}
}