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>
![](../../Images/xgoup.gif) |
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
top of page:![](../../Images/xgoup.gif) |