In this article we will learn how to use RadioButton control of Silverlight. I also explained how to rotate image in Silverlight 4.
RadioButton Control
RadioButton control are mostly used together in a group but one is selected at a time.
For example:
Drag a image control, five RadioButton control and one Button control from the ToolBox on the Form and select an image from the source property of the Image control. RadioButtons named left, right, up, Down and same. Button named rotate.The form looks like this.
Figure 1.
XAML code
<UserControl x:Class="SilverlightApplication35.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<RadioButton Content="Left" Height="16" HorizontalAlignment="Left" Margin="12,208,0,0"Name="Rdbtnleft"
VerticalAlignment="Top" />
<RadioButton Content="Right" Height="16" HorizontalAlignment="Left" Margin="112,208,0,0"Name="Rdbtnright"
VerticalAlignment="Top" />
<RadioButton Content="Up" Height="16" HorizontalAlignment="Left" Margin="206,208,0,0"Name="Rdbtnup"
VerticalAlignment="Top" />
<RadioButton Content="Down" Height="16" HorizontalAlignment="Left" Margin="300,208,0,0"Name="Rdbtndown"
VerticalAlignment="Top" />
<Image Height="150" HorizontalAlignment="Left" Margin="124,12,0,0" Name="Image1"Stretch="Fill"
VerticalAlignment="Top" Width="200"Source="/SilverlightApplication35;component/Images/dog-animal.jpg" />
<Button Content="Rotate" Height="23" HorizontalAlignment="Left" Margin="124,242,0,0"Name="Button1"
VerticalAlignment="Top" Width="97" />
<RadioButton Content="Same" Height="16" HorizontalAlignment="Left" Margin="300,245,0,0"Name="Rdbtnsame"
VerticalAlignment="Top" />
</Grid>
</UserControl>
Rotation of image is being performed by RotateTransform class.
Dim rotate As New RotateTransform()
In click event of Button we are checking radio button's isChecked property. If IsChecked is true for a radio button it means that radio button is selected.
Now double click on the Button named Rotate of the designing form and add the following code.
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs) Handles Button1.Click
Dim rotate As New RotateTransform()
If Rdbtnleft.IsChecked = True Then ' Left rotate
rotate.Angle = 30
Image1.RenderTransform = rotate
ElseIf Rdbtnright.IsChecked = True Then ' right rotate
rotate.Angle = 45
Image1.RenderTransform = rotate
ElseIf Rdbtnup.IsChecked = True Then ' up rotate
rotate.Angle = 60
Image1.RenderTransform = rotate
ElseIf Rdbtndown.IsChecked = True 'Down rotate
rotate.Angle = 90
Image1.RenderTransform = rotate
Else
Rdbtnsame.IsChecked = True ' for same position
Image1.RenderTransform = rotate
End If
End Sub
Now save and run the application.
Figure 2.
Now select Down RadioButton and click on the rotate Button.
Figure 3.
Now to take old position select same RadioButton and click on the rotate Button.
Figure 4.