Radio Button Groping In Silverlight 3

No.of Views1326
Bookmarked0 times
Downloads 
Votes0
By  dpatra   On  16 Feb 2010 00:02:01
Tag : Silver Light and XAML , How to
Radio Button Groping In Silverlight 3
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 Introduction
In this article we will see how we can achieve multi grouping in Silverlight.
Ordinarily, radio buttons are grouped by their container. That means if you place three RadioButton controls in a single StackPanel, they form a group from which you can select just one of the three.

Creating Silverlight Project
Fire up Blend 3 and create a Silverlight Application. Name it as RadioButtonGroupingInSL3.

Image Loading


Add a Stack Panel into the Grid.

Image loading....

Image loading....

Now add three Radio Buttons into Stack Panel Name them as Group 1.

Image Loading....

Now at this point of time if you run your application you will find by default they are grouped, so that only one Radio Button can be selected.if you place a combination of radio buttons in two separate StackPanel controls, you have two independent groups on your hands.

To achieve multi grouping we will add another four Radio Buttons.This time name them as Group 2 and Group 3.

Image loading....

The GroupName property allows you to override this behavior. You can use it to create more than one group in the same container or to create a single group that spans multiple containers. Either way, the trick is simple—just give all the radio buttons that belong together the same group name.
{codecitation class="brush: csharp; gutter: true;" width="700px"}

<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Height="100" VerticalAlignment="Top" Margin="0" Orientation="Horizontal">
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEC7C7C" Offset="1"/>
<GradientStop Color="White"/>
</LinearGradientBrush>
</StackPanel.Background>
<RadioButton Content="Gropup 1"/>
<RadioButton Content="Gropup 1"/>
<RadioButton GroupName="Group2" Content="Gropup 2"/>
<StackPanel Orientation="Horizontal">
<RadioButton Content="Group 3"/>
<RadioButton Content="Group 3"/>
<RadioButton Content="Group 3"/>
<RadioButton GroupName="Group2" Content="Group 3"/>
</StackPanel>
</StackPanel>
</Grid>

{/codecitation}

Here, there are two containers holding radio buttons, but three groups. The final radio button at the bottom of each group box is part of a third group. In this example, it makes for a confusing design, but there may be some scenarios where you want to separate a specific radio button from the pack in a subtle way without causing it to lose its groupmembership.
Now if you run your application you will find the third Radio Button of the first Stack Panel can be selected too.

Image Loading....

That's all,Enjoy Coding.

Thank you


About the Author


Diptimaya Patra

Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center.

Occupation :Software Engineer
Company : UST Global.
Location : India
Follow me at twitter : http://twitter.com/dpatra


 
Sign Up to vote for this article
 
About Author
 
dpatra
Occupation-Not Provided
Company-Not Provided
Member Type-Expert
Location-Not Provided
Joined date-13 Jul 2009
Home Page-Not Provided
Blog Page-Not Provided
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top