| 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 |
|
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: |