Home | Course Index | << Prev | Next >> | PDF Version of this Page |
Course 2D_SL: 2D-Computer Graphics with Silverlight
|
||
Let me know what you think |
Preliminaries Page.XAML Page.xaml.cs Test |
Install 1) Visual Web Developer 2010 Express Edition English
and 2) Silverlight 4 Tools for Visual Studio 2010.
Guidance for Visual Web Developer 2010 Express:
Main Menu after start of VWD Express: File → New Project... → Project types: Visual C# (double click) → Silverlight → Templates: Silverlight Application
Name: ControlsInAGrid1 → Location: C:\temp\SLProjects → Create directory for solution: switch off → OK.
An Add Silverlight Application-Window appears.
Choose "Automatically generate a test page to host Silverlight at build time" → OK.
In the Solution Explorer - ControlsInAGrid1 click the branch Page.xaml. A split window will appear containing the default xaml code. Delete this code completely and replace it by the code of Page.xaml which follows.
<UserControl x:Class="ControlsInAGrid1.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="400"> <Grid ShowGridLines ="True" Background="#FFA0A050"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Grid.Row="0" Margin="10" VerticalAlignment ="Center" HorizontalAlignment="Center" FontSize="20" Text="Intro1"/> <TextBlock Grid.Column="1" Grid.Row="0" Margin="10" FontSize="12" TextWrapping="Wrap" > <Run Text="This is some "/> <Run FontWeight="Bold" Text="formatted "/><LineBreak /> <Run FontStyle="Italic" Text="text."/> <Run Text="It spans multiple lines."/> </TextBlock> <CheckBox x:Name="checkbox" Grid.Column="2" Grid.Row="0" Margin="10" Content="Image" HorizontalAlignment="Center" VerticalAlignment="Top" Click="OnCheckBoxClick"/> <Image x:Name="image" Grid.Column="2" Grid.Row="0" Margin="10" Source="Foto.jpg"/> <Button x:Name="button" Grid.Column="3" Grid.Row="0" Margin="10" Content="ClickMe" Click="OnButtonClick"> <Button.Resources> <Storyboard x:Name="ButtonAnimationStoryboard"> <DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty ="Opacity" From="1.0" To="0.0" Duration="0:0:2" AutoReverse="True"/> </Storyboard> </Button.Resources> </Button> <MediaElement x:Name="video" Grid.Column="0" Grid.Row="1" Margin="10" VerticalAlignment="Top" Source="smooth.wmv" Stretch="Fill"/> <Button x:Name="vbutton" Grid.Column="0" Grid.Row="1" Margin="10" VerticalAlignment="Bottom" Height ="15" Width ="15" Content=">" Click="OnvButtonClick" /> <Rectangle x:Name="rect" Grid.Column="1" Grid.Row="1" Margin="10" Height ="80" Width ="80" Fill="#FFAA7733" Stroke="#FF553311" StrokeThickness="10" RadiusX="10" RadiusY="10" Loaded="rectangleLoaded"> <Rectangle.Resources> <Storyboard x:Name="RectangleAnimationStoryboard"> <DoubleAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty ="Width" To="10" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever"/> <DoubleAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty ="Height" To="10" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever"/> </Storyboard> </Rectangle.Resources> </Rectangle> <Ellipse x:Name="ellipse" Grid.Column="2" Grid.Row="1" Margin="10" Fill="#FF000000" Stroke="#FFFFFFFF" StrokeThickness="10"/> <Polygon x:Name="polygon" Grid.Column="3" Grid.Row="1" Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" Fill="#FF00FF00" Stroke="#FF000000" Points="28.8,14.4 40.0,49.2 10.6,27.6 47.0,27.6 17.6,49.2"/> <TextBox x:Name="textbox" Grid.Column="0" Grid.Row="2" Margin="10" VerticalAlignment="Center" Height="100" FontSize="12" Text="Type here!"/> <RadioButton x:Name="rb_red" Grid.Column="1" Grid.Row="2" Margin="10" VerticalAlignment="Top" Content="red" Click="OnRadioButtonClick"/> <RadioButton x:Name="rb_green" Grid.Column="1" Grid.Row="2" Margin="10" VerticalAlignment="Center" Content="green" Click="OnRadioButtonClick"/> <RadioButton x:Name="rb_blue" Grid.Column="1" Grid.Row="2" Margin="10" VerticalAlignment="Bottom" Content="blue" Click="OnRadioButtonClick"/> <StackPanel Grid.Column="2" Grid.Row="2" Orientation="Vertical"> <Slider x:Name="s_size" Margin="10" ValueChanged="OnSliderValueChanged" Orientation="Vertical" Height="40" Maximum="100"/> <TextBlock HorizontalAlignment="Center" Text="Height" FontSize="10"/> <Slider x:Name="s_border" Margin="10" ValueChanged="OnSliderValueChanged" Width="40" Maximum="10"/> <TextBlock HorizontalAlignment="Center" Text="Border" FontSize="10"/> </StackPanel> <ScrollBar x:Name="scroll" Grid.Column="4" Grid.Row="2" Margin="10" Width="20" Height="100" Minimum="0.5" Maximum="2.3" ValueChanged="OnScrollBarValueChanged"/> </Grid> </UserControl>
using System; using System.Collections.Generic; using System.Linq; 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; namespace ControlsInAGrid1 { public partial class Page : UserControl { ScaleTransform polygonscale = new ScaleTransform(); DoubleAnimation anima = new DoubleAnimation(); public Page() { InitializeComponent(); checkbox.IsChecked = true; s_size.Value = 100; s_border.Value = 10; for (int i = 0; i < polygon.Points.Count; i++) { polygonscale.CenterX += polygon.Points[i].X; polygonscale.CenterY += polygon.Points[i].Y; } polygonscale.CenterX /= polygon.Points.Count; polygonscale.CenterY /= polygon.Points.Count; anima.To = 14; } private void OnButtonClick(object sender, RoutedEventArgs e) { ButtonAnimationStoryboard.Stop(); button.Content = "Fade away"; ButtonAnimationStoryboard.Begin(); } private void OnvButtonClick(object sender, RoutedEventArgs e) { video.Stop(); video.Play(); } private void rectangleLoaded(object sender, RoutedEventArgs e) { RectangleAnimationStoryboard.Begin(); } private void OnCheckBoxClick(object sender, RoutedEventArgs e) { if (checkbox.IsChecked == true) image.Visibility = Visibility.Visible; else image.Visibility = Visibility.Collapsed; } private void OnRadioButtonClick(object sender, RoutedEventArgs e) { switch (((RadioButton)sender).Name) { case "rb_red": textbox.Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0)); break; case "rb_green": textbox.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 255, 0)); break; case "rb_blue": textbox.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 255)); break; } } private void OnSliderValueChanged(object sender, RoutedEventArgs e) { switch (((Slider)sender).Name) { case "s_size" : ellipse.Height = s_size.Value; break; case "s_border": ellipse.StrokeThickness = s_border.Value; break; } } private void OnScrollBarValueChanged(object sender, RoutedEventArgs e) { try { polygonscale.ScaleX = polygonscale.ScaleY = scroll.Value; polygon.RenderTransform = polygonscale; } catch {} } } //end of class Page } //end of namespace
1) Main menu of Visual Web Developer 2010 Express → Debug → Start Debugging F5 or → Debug → Start Without Debugging Ctrl+F5.
2) Download the foto Foto.jpg and store it into the project directory C:\Temp\SLProjects\ControlsInAGrid1\Bin\Debug and/or into C:\Temp\SLProjects\ControlsInAGrid1\Bin\Release or wherever Visual Web Developer 2010 Express stored your TestPage.html.
3) Download the video clip smooth.wmv and store it into the project directory C:\Temp\SLProjects\ControlsInAGrid1\Bin\Debug and/or into C:\Temp\SLProjects\ControlsInAGrid1\Bin\Release or wherever Visual Web Developer 2010 Express stored your TestPage.html.
4) Compile and run again via the main menu of Visual Web Developer 2010 Express → Debug → Start Debugging F5 or → Debug → Start Without Debugging Ctrl+F5 and the photo in the first row and the video clip in the second row should run.
top of page: |