Home Course Index C1 Complete Code PDF Version of this Page

Course 2D_SL: 2D-Computer Graphics with Silverlight
Chapter C1: The Intro Project


Copyright © by V. Miszalok, last update: 20-09-2010

Mail me...
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.

 

Preliminaries

Guidance for Visual Web Developer 2010 Express:

1) Main Menu after start of VWD Express: Tools → Options → check lower left checkbox: Show all Settings →
→ Projects and Solutions → Projects location: → C:\temp.
→ Text Editor (double click) → All Languages (double click) → Tabs →
  Indenting: None → Tab size: 2 → Insert spaces
.
→ Text Editor (double click) → C# (double click) → Formatting → uncheck all three check boxes → OK.
→ Text Editor (double click) → XAML (double click) → Tabs →
  Indenting: None → Tab size: 1, Indent size: 1 → Insert spaces
.
→ Text Editor (double click) → XAML (double click) → Formatting → uncheck all Auto-Formatting Events → OK.

2) Main Menu after start of VWD Express: File → New Project... → Project types: Visual C# (double click) → Silverlight → Templates: Silverlight Application
Name: SL_intro1 → 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.
The Solution Explorer - SL_intro1 window appears as shown on the right.

In the Solution Explorer - SL_intro1 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 Version 01: Page.xaml which follows.

 
 

Version 01: 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">
 <Grid Background="Cornsilk" ShowGridLines="True">
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="90"/>
   <ColumnDefinition/>
  </Grid.ColumnDefinitions>
 </Grid>
</UserControl>
 
 

Version 02: 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">
 <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>
 
 

Version 03: 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">
 <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>
 
 

Version 04: Page.xaml and Page.xaml.cs

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() ) );
    }
  }
}
 
 

Version 05: Page.xaml and Page.xaml.cs

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;
    }
  }
}
 
 

Version 06: Page.xaml and Page.xaml.cs

Page.xaml:
Remove the last three lines </StackPanel>, </Grid> and </UserControl> from
Page.xaml Version 05 and replace them by:

   <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:
Remove the last two lines with the last two brackets "}" from
Page.xaml.cs Version 05 and replace them by:

    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 {}
    }
  }
}
 
 

Version 07: Page.xaml and Page.xaml.cs

Page.xaml:
Remove the last three lines </StackPanel>, </Grid> and </UserControl> from
Page.xaml Version 06 and replace them by:

   <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:
Remove the last two lines with the last two brackets "}" from
Page.xaml.cs Version 06 and replace them by:

    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;
    }
  }
}
 
 

Insert the Silverlight content in an arbitrary HTML-file

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. Click Debug → Start Debugging F5.
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>
 

Out of Browser = OOB Application

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... → Check the checkbox: Enable running application out of the browser.
Click Debug. → Start Debugging F5. → Your browser will display C:/temp/SL_intro1/Bin/Release/TestPage.html just showing SL_intro1.xap as before.

2. Right-click the browser content. A context menu will appear showing a line: Install SL_intro1... onto this computer.... Click it. An Install application-window appears. Uncheck the checkbox Start menu and check the checkbox Desktop → OK.

3. Our program now starts a window: SL_intro1... - localhost and at the same time a persistent new icon named: SL_intro1... will appear on your desktop. From now our application behaves on any platform as any normal application.

4. You can de-install everything and remove the icon from your desktop by a Right-click onto the content of a running SL_intro1... - localhost. A context menu will appear. Click the line: Remove this application... → Are you sure you want to permanently remove this application ? → Yes.

top of page: