Home | Course Index | C1 Complete Code | PDF Version of this Page |
Course 2D_SL: 2D-Computer Graphics with Silverlight
|
||
Let me know what you think |
Preliminaries Version 01: Page.XAML Version 02: Page.XAML Version 03: Page.XAML Version 04: Page.XAML and Page.xaml.cs Version 05: Page.XAML and Page.xaml.cs Version 06: Page.XAML and Page.xaml.cs Version 07: Page.XAML and Page.xaml.cs Insert the Silverlight content in an arbitrary HTML-file Out of Browser = OOB Application |
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: |
<UserControl x:Class="SL_intro1.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="380" Height="150"> <Grid Background="Cornsilk" ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition Width="90"/> <ColumnDefinition/> </Grid.ColumnDefinitions> </Grid> </UserControl> |
|
<UserControl x:Class="SL_intro1.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="380" Height="150"> <Grid Background="Cornsilk"> <Grid.ColumnDefinitions> <ColumnDefinition Width="90"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Button Grid.Column="0" Background="White" Content="left"/> <Button Grid.Column="1" Background="White" Content="right"/> </Grid> </UserControl> |
|
<UserControl x:Class="SL_intro1.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="380" Height="150"> <Grid Background="Cornsilk"> <Grid.ColumnDefinitions> <ColumnDefinition Width="90"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Button Grid.Column="1" Background="White"> <Polygon Stroke="Black" Fill="Black" Points="20 20, 270 20, 190 130"/> </Button> </Grid> </UserControl> |
|
Page.xaml: <UserControl x:Class="SL_intro1.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="380" Height="150" x:Name="user_control"> <Grid Background="Cornsilk"> <Grid.ColumnDefinitions> <ColumnDefinition Width="90"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Button x:Name="draw_area" Grid.Column="1" Background="White" Padding="0,0,8,8" Loaded="on_draw_area_loaded"> <Polygon x:Name="polygon" Stroke="Black" Fill="Black"/> </Button> </Grid> </UserControl> Page.xaml.cs: using System; using System.Windows; using System.Windows.Controls; using System.Windows.Shapes; namespace SL_intro1 { public partial class Page : UserControl { Random r = new Random(); int no_of_polygon_points = 100; double w, h; public Page() { InitializeComponent(); } private void on_draw_area_loaded( object sender, EventArgs e ) { draw_area.Width = user_control.Width - 90; draw_area.Height = user_control.Height ; w = draw_area.Width - draw_area.Padding.Left - draw_area.Padding.Right; h = draw_area.Height - draw_area.Padding.Top - draw_area.Padding.Bottom; for ( int i=0; i < no_of_polygon_points; i++ ) polygon.Points.Add( new Point( w * r.NextDouble(), h * r.NextDouble() ) ); } } } |
Page.xaml: <UserControl x:Class="SL_intro1.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="380" Height="380" x:Name="user_control"> <Grid Background="Cornsilk"> <Grid.ColumnDefinitions> <ColumnDefinition Width="90"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Button x:Name="draw_area" Grid.Column="1" Background="White" Padding="0,0,8,8" Loaded="on_draw_area_loaded"> <Polygon x:Name="polygon" Stroke="Black" Fill="Black"/> </Button> <StackPanel Grid.Column="0" Orientation="Vertical" Margin="3"> <Button x:Name="start_button" Content="Start" Click="on_start_button_click"/> <Button x:Name="stop_button" Content="Stop" Click="on_stop_button_click"/> <Button x:Name="clear_button" Content="Clear" Click="on_clear_button_click"/> </StackPanel> </Grid> </UserControl> Page.xaml.cs: using System; using System.Windows; using System.Windows.Controls; using System.Windows.Shapes; using System.Windows.Media; using System.Windows.Threading; namespace SL_intro1 { public partial class Page : UserControl { Random r = new Random(); int no_of_polygon_points = 100; DispatcherTimer timer = new DispatcherTimer(); double w, h; public Page() { InitializeComponent(); timer.Tick += new EventHandler(on_timer); } private void on_draw_area_loaded(object sender, EventArgs e) { draw_area.Width = user_control.Width - 90; draw_area.Height = user_control.Height ; w = draw_area.Width - draw_area.Padding.Left - draw_area.Padding.Right; h = draw_area.Height - draw_area.Padding.Top - draw_area.Padding.Bottom; for ( int i=0; i < no_of_polygon_points; i++ ) polygon.Points.Add( new Point( w * r.NextDouble(), h * r.NextDouble() ) ); } private void on_start_button_click(object sender, EventArgs e) { timer.Start(); } private void on_stop_button_click(object sender, EventArgs e) { timer.Stop(); } private void on_clear_button_click(object sender, EventArgs e) { timer.Stop(); draw_area.Content = null; } public void on_timer(object sender, EventArgs e) { int i = r.Next( no_of_polygon_points ); polygon.Points.RemoveAt(i); polygon.Points.Insert( i, new Point( w * r.NextDouble(), h * r.NextDouble() ) ); draw_area.Content = 0; draw_area.Content = polygon; } } } |
|
Page.xaml: <TextBlock Text="Speed" FontSize="10" HorizontalAlignment="Center"/> <Slider x:Name="time_interval_slider" Minimum="0" Maximum="1000" Value="0" ValueChanged="on_time_interval_slider_value_changed" IsDirectionReversed="True"/> <TextBlock Text="Opacity" FontSize="10" HorizontalAlignment="Center"/> <Slider x:Name="opacity_slider" Minimum="0" Maximum="1" Value="1" ValueChanged="on_opacity_slider_value_changed" /> <StackPanel Height="10" /> <StackPanel Background="red" > <Slider x:Name="red_slider" Minimum="0" Maximum="255" Value="0" ValueChanged="on_color_slider_value_changed" /> </StackPanel> <StackPanel Background="green" > <Slider x:Name="green_slider" Minimum="0" Maximum="255" Value="0" ValueChanged="on_color_slider_value_changed" /> </StackPanel> <StackPanel Background="blue" > <Slider x:Name="blue_slider" Minimum="0" Maximum="255" Value="0" ValueChanged="on_color_slider_value_changed" /> </StackPanel> <StackPanel Height="10" /> <TextBlock x:Name="textblock_polygon_points" Text="Vertices: 100" FontSize="10" HorizontalAlignment="Center" /> <Slider x:Name="no_of_polygon_points_slider" Minimum="3" Maximum="200" Value="100" ValueChanged="on_no_of_polygon_points_slider_value_changed"/> </StackPanel> </Grid> </UserControl> Page.xaml.cs: public void on_time_interval_slider_value_changed ( object sender, EventArgs e ) { int milliseconds = (int)time_interval_slider.Value ; timer.Interval = new TimeSpan(0, 0, 0, 0, milliseconds ); } public void on_opacity_slider_value_changed ( object sender, EventArgs e ) { try { polygon.Stroke.Opacity = opacity_slider.Value; polygon.Fill.Opacity = opacity_slider.Value; } catch {} } public void on_color_slider_value_changed ( object sender, EventArgs e ) { SolidColorBrush brush = (SolidColorBrush)polygon.Fill; Color c = brush.Color; switch ( ((Slider)sender).Name ) { case "red_slider" : c.R = (byte)red_slider .Value; break; case "green_slider": c.G = (byte)green_slider.Value; break; case "blue_slider" : c.B = (byte)blue_slider .Value; break; } brush = new SolidColorBrush( c ); polygon.Stroke = polygon.Fill = brush; draw_area.Content = 0; draw_area.Content = polygon; } public void on_no_of_polygon_points_slider_value_changed ( object sender, EventArgs e ) { try { no_of_polygon_points = (int)no_of_polygon_points_slider.Value; textblock_polygon_points.Text = "Vertices: " + no_of_polygon_points.ToString(); polygon.Points.Clear(); w = draw_area.ActualWidth - 8; h = draw_area.ActualHeight - 8; for ( int i=0; i < no_of_polygon_points; i++ ) polygon.Points.Add( new Point( w * r.NextDouble(), h * r.NextDouble() ) ); draw_area.Content = 0; draw_area.Content = polygon; } catch {} } } } |
|
Page.xaml: <StackPanel Height="10" /> <RadioButton Content="Wire Frame" Click="on_radio_button_fill_mode_wire_frame_click"/> <RadioButton Content="Filled" IsChecked="True" Click="on_radio_button_fill_mode_filled_click"/> </StackPanel> </Grid> </UserControl> Page.xaml.cs: public void on_radio_button_fill_mode_wire_frame_click ( object sender, EventArgs e ) { polygon.Fill = draw_area.Background; draw_area.Content = 0; draw_area.Content = polygon; } public void on_radio_button_fill_mode_filled_click ( object sender, EventArgs e ) { polygon.Fill = polygon.Stroke; draw_area.Content = 0; draw_area.Content = polygon; } } } |
|
Switch the compiler to produce a release-mode XAP-file via the main menu after start of VWD 2010 Express:
Build → Configuration Manager... → Active solution configuration: Release → Close.
Your C:\temp\SL_intro1\bin\Release-directory will now contain a XAP-file SL_intro1.xap that can be incorporated into any HTML-page by:
1. Store it in the same directory as the housing HTML-page.
2. Call it at any line from inside the <body></body> tags of the HTML-page by inserting the following HTML-code:
<div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="SL_intro1.xap"/> <param name="minRuntimeVersion" value="3.0.40624.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object> </div>
It is possible to detach SL_intro1.xap from its embedding TestPage.html and to create a stand-alone program that can be started in its own window. This mechanism works with all platforms and all browsers running the Silverlight 3 plug-in.
1. Main menu after start of VWD 2010 Express: Project → SL_intro1 Properties... →
2. Right-click the browser content. A context menu will appear showing a line:
3. Our program now starts a window:
4. You can de-install everything and remove the icon from your desktop by a Right-click onto the content of a running
top of page: |