Objective

In this article, I will explain couple of things step by step

  1. How to work with Radio Button control of Silver Light 3.0
  2. How to Rotate Image in Silver Light

Expected Output


On selecting Radio Button Image will rotate in some angle.


 Procedure
Create a Silver Light application by File -> New -> Project -> SilverLight then selecting Silver Light Application project template. Host the SilverLightApplication1 in Web Application
Design the Silver Light page. Add Radio Buttons like below

MainPage.Xaml

<UserControl xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”
x:Class=”SilverlightApplication1.MainPage”


xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;


xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;


xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243; xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;


mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>


<Grid x:Name=”LayoutRoot” Background=”Azure”>


<Grid.RowDefinitions>


<RowDefinition Height=”400″/>


<RowDefinition Height=”*” />


</Grid.RowDefinitions>


<Image x:Name=”imgToDisplay” Height=”400″ Width=”300″ Source=”a.jpg”
Grid.Row=”0″/>


<StackPanel Orientation=”Horizontal” Grid.Row=”1″>


<RadioButton x:Name=”rdBtnLeft” Content=”Left” Click=”rdBtnName_Click”
HorizontalAlignment=”Right” />


<RadioButton x:Name=”rdBtnRight” Content=” Right” Click=”rdBtnName_Click”
HorizontalAlignment=”Right”/>


<RadioButton x:Name=”rdBtnUp” Content=”Up” Click=”rdBtnName_Click”
HorizontalAlignment=”Right”/>


<RadioButton x:Name=”rdBtndown” Content=”Down” Click=”rdBtnName_Click”
HorizontalAlignment=”Right” />


<Button x:Name=”btnRotate” Content=” Rotate” Click=”btnRotate_Click” HorizontalAlignment=”Center” Height=”65″ Width=”100″
/>


</StackPanel>


</Grid>

</UserControl>

 Code Behind

  1. Add same event for click on all radio buttons.
  2. In the click event of radio buttons, I am assigning sender’s name and checking it in a switch case.
    string
    radioButton = ((FrameworkElement)sender).Name;

    switch (radioButton)

{

}

 

  1. Rotation of image is being performed by RotateTransform class.


    RotateTransform rotate = new
    RotateTransform();

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


    if (rdBtnLeft.IsChecked == true)

    {

    }
     

MainPage.Xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

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 SilverlightApplication1

{


public
partial
class
MainPage : UserControl

{


int parameter = 0;


public MainPage()

{

InitializeComponent();

}
private
void rdBtnName_Click(object sender, RoutedEventArgs e)

{


RotateTransform rotate = new
RotateTransform();


string radioButton = ((FrameworkElement)sender).Name;


switch (radioButton)

{

case
“rdBtnLeft”:

rotate.Angle = 30;

imgToDisplay.RenderTransform = rotate;


break;


case
“rdBtnRight”:

rotate.Angle = 45;

imgToDisplay.RenderTransform = rotate;


break;


case
“rdBtnUp”:

rotate.Angle = 60;

imgToDisplay.RenderTransform = rotate;


break;


case
“rdBtndown” :

rotate.Angle = 360;

imgToDisplay.RenderTransform = rotate;


break;

}

}

 private
void btnRotate_Click(object sender, RoutedEventArgs e)

{


RotateTransform rotate = new
RotateTransform();


if (rdBtnLeft.IsChecked == true)

{

rotate.Angle = 30;

imgToDisplay.RenderTransform = rotate;

}


else
if (rdBtnRight.IsChecked == true)

{

rotate.Angle = 45;

imgToDisplay.RenderTransform = rotate;

}


else
if (rdBtnUp.IsChecked == true)

{

rotate.Angle = 60;

imgToDisplay.RenderTransform = rotate;

}


else

{

rotate.Angle = 90;

imgToDisplay.RenderTransform = rotate;

}}}}
Conclusion
In this article, I explained how to work with Radio Button control of Silver Light. I also explained how to rotate image in silver light. Thanks for reading .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s