Home Course Index << Prev Next >> PDF Version of this Page

Course 2D_SL: 2D-Computer Graphics with Silverlight
Chapter C3: The Complete Code of the Controls in a Grid Project


Copyright © by V. Miszalok, last update: 15-07-2009

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

 

Preliminaries

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.

 

Page.xaml

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

Page.xaml.cs

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.

 

Test

Get Microsoft Silverlight
top of page: