locked
Bind multiple Checkboxes for only 1 selection RRS feed

  • Question

  • Hi

    I have options listed as checkboxes. I want that user can only select 1 at a time.

    Can that be accomplished using skethflow ?

    Please and Thanks.

    SA

     

     

     

    Thursday, November 3, 2011 5:44 PM

Answers

  • Change your Checkbox to RadioButton options which only allows one selection at a time. Cheers!
    • Proposed as answer by KS.BlendDesigner Thursday, November 3, 2011 6:32 PM
    • Marked as answer by SA-2011 Thursday, November 3, 2011 6:51 PM
    Thursday, November 3, 2011 6:32 PM

All replies

  • Change your Checkbox to RadioButton options which only allows one selection at a time. Cheers!
    • Proposed as answer by KS.BlendDesigner Thursday, November 3, 2011 6:32 PM
    • Marked as answer by SA-2011 Thursday, November 3, 2011 6:51 PM
    Thursday, November 3, 2011 6:32 PM
  • i INTEND TO DO IT WITH CHECKBOXES....r u telling me it isnt possible with checkboxes...?
    Thursday, November 3, 2011 6:52 PM
  • Also can we do a select all on checkboxes ?

    Please nd thanks..

    Thursday, November 3, 2011 7:11 PM
  • Well realistically you can do just about anything. Except you said you wanted only one selection allowed at a time. That would be best suited for a RadioButton control. If you just want each to have the appearance of a checkbox with the square and check instead of the round dot of a radio button then you can edit the template of a radiobutton to make it look like a check box, but still only allow one selection at a time.

    Now then, if you're trying to allow either one selection, or multiple selections, or even select all then ya you could use checkboxes and bind them individually or even a listbox class control can accomplish that pretty efficiently as well. Except from the sounds of it, you're just building some mock-ups in sketchflow right? With a requirement of only one selection possible at a time? Then that's definitely what radiobuttons are made for.

    Hope this helps, if not maybe elaborate a little more on what you're trying to accomplish and we'll take another look. :)

    Thursday, November 3, 2011 7:22 PM
  • Whoops, I should have refreshed before answering, leaving my answer as is, even though others already answered:

    Yes, use radiobuttons :)

    The radiobutton control is designed for this scenario. By default all sibling radio buttons become part of one group and are mutually exclusive of one another.


    Thursday, November 3, 2011 8:08 PM
    Moderator
  • Ok agreed..I am now using Radiobuttons where there wud only be one selection...makes sense for me as well..:)

    I am doing mockups in sketchflow but trying to make it more interactive for the users....

     

    Another thing is that, when we have multiple records say in a listbox/gridview we tend to have in the header SELECT ALL option...How can we accomplish that in sketchflow ?

    Thanks in Anticipation.

    Regards

    SA

    Thursday, November 3, 2011 8:24 PM
  • You can make an Action that will select all the items in your ListBox and attach that to whatever you want as the trigger. You will need to change the SelectionMode on your ListBox to either "Multiple" or "Extended" depending on your needs, otherwise you can't select multiple elements in the ListBox anyway.

     

    Step 1: Add a new Action to your project. (File -> New Item -> Action). I called mine "ListBoxSelectAllAction" -- if you don't want to call it that, just replace ListBoxSelectAllAction in all the text below with your name. This step adds the necessary references so the project will build.

     

    Step 2: Paste this into your class, and then change the namespace to be your project namespace.

     

    using System.Windows.Controls;
    using System.Windows.Interactivity;
    
    namespace WpfApplication
    {
    	//
    	// If you want your Action to target elements other than its parent, extend your class
    	// from TargetedTriggerAction instead of from TriggerAction
    	//
    	public class ListBoxSelectAllAction : TargetedTriggerAction<ListBox>
    	{
    		public ListBoxSelectAllAction()
    		{
    			// Insert code required on object creation below this point.
    		}
    
    		protected override void Invoke(object o)
    		{
    			this.Target.SelectAll();
    		}
    	}
    }
    

     


    Step 3: Build your project. This is important; if you skip this step, the Action won't show up in your list of available Actions in the UI.

     

    Step 4: Figure out what you want to be the trigger. In my case, I have a Button above my ListBox that I'm using for the trigger, but you can use whatever you want.

     

    Step 5: Open the Assets panel and click on Behaviors. The "ListBoxSelectAllAction" should be one of the options. Drag that onto your trigger object and set the EventName appropriately. Set the TargetObject of the Action to your ListBox.

     

    That should do it. Let me know if you run into problems.

    • Edited by Brian Hilstrom Friday, November 4, 2011 3:31 PM Added note about SelectionMode on the ListBox.
    Friday, November 4, 2011 3:26 PM
  • Sorry, I am using a silverlight app...and I am a BA..so wudnt understand this code thing..!

    Can u suggest something that can be done from the UI...I am using the sketchables data grid...

     

    Thanks.

    SA

     

    Friday, November 4, 2011 5:14 PM
  • The code I posted above works in a Silverlight app as well as a WPF app, so you shouldn't have any problems there. The only code you should need (for a ListBox) is what I've given you above in step 2 -- the rest is just using it with the regular UI commands. Unfortunately I'm not aware of a way to make this work without any code behind at all.

    I'm not familiar with sketchables code, so I'm not sure what their version of a datagrid looks like. In theory, you should be able to use the methodology I described above with whatever structure they have. The data type may change (the example I posted was for ListBox, and they might use something different), and the processing inside the Invoke method may change. I would suggest asking the author of the sketchables code; that person would have the most knowledge on how to get what you're looking for out of their structures. Their website is over here: http://www.hardcodet.net/category/net/sketchables.

    Friday, November 4, 2011 7:23 PM
  • OK I dont think the sketchable control has the luxury..

    What I would want to know though is, Is it possible to have multiple checkboxes and treat one of them as select all, disable all..in blend ?

    Friday, November 4, 2011 7:46 PM
  • To accomplish what you are trying to do, I'd think you'd have to go to code-behind. 

    CheckBox XAML...

    <CheckBox x:Name="check1" Content="CheckBox" Click="checkBoxClicked"/>
    <CheckBox x:Name="check2" Content="CheckBox" Click="checkBoxClicked"/>
    <CheckBox x:Name="check3" Content="CheckBox" Click="checkBoxClicked"/>
    

     

    And Code-Behind...

    private void checkBoxClicked(object sender, System.Windows.RoutedEventArgs e)
    		{
    			CheckBox clickedCheckBox = sender as CheckBox;
    			clickedCheckBox.IsChecked = true;
    			
    			if (clickedCheckBox.Name != "check1") {check1.IsChecked = false;}
    			if (clickedCheckBox.Name != "check2") {check2.IsChecked = false;}
    			if (clickedCheckBox.Name != "check3") {check3.IsChecked = false;}
    		}
    

    I don't believe the "SelectAll" is available in the datagrid for Silverlight.  You may want to consider going to a ListBox as Brian provided you code for.

    This will show you the properties and events available for Silverlight DataGrid... http://msdn.microsoft.com/en-us/library/system.windows.controls.datagrid(v=VS.95).aspx

    Good Luck.

    ~Christine


    Friday, November 4, 2011 10:53 PM
  • Please tell me where do I add this code behind...I am working in Expressions blend sketchflow...

    I only see the xaml code and i tried to add tags javascript and put this code in tht...but it doesnt accept.

    Where do i put this code....please nd thanks.

    Monday, November 7, 2011 5:07 PM
  • Hey SA,

    If I recall correctly, your creating a Silverlight App in Blend/Sketchflow.  There are a couple of ways to get to your code-behind.

    1.  In the top left corner.  Click the "Projects" tab.  Locate the Screen.xaml file in that list.  (Whatever you named your screen.)  Click to the left of the xaml name on the little triangle button to expand it.  There will be a Screen.xaml.cs file under it.  That is your code behind file.

    2.  Click the checkbox on your layout to highlight it.  In the "Properties" tab (top right) you should see "Name" and "Type".  To the right of those 2 items you'll see a button that looks like a square with a lightning bolt.  If you hover your mouse over it, it says "Events".  Type in "checkBoxClicked" in the "Click" event  (3rd one down.) and hit enter.  This will automatically open the code behind with part of the method already done for you.  You just put the code you want between the brackets.

    This is a great site for learning... http://www.kirupa.com/blend_silverlight/index.htm

    You could also take a look at some of the videos here... http://expression.microsoft.com/en-us/cc197141

    Good luck.

    ~Christine


    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace SilverlightPrototype2Screens
    {
    	public partial class Screen_1 : UserControl
    	{
    		public Screen_1()
    		{
    			InitializeComponent();
    		}
    
    		private void checkBoxClicked(object sender, System.Windows.RoutedEventArgs e)
    		{
    			CheckBox clickedCheckBox = sender as CheckBox;
    			clickedCheckBox.IsChecked = true;
    			
    			if (clickedCheckBox.Name != "check1") {check1.IsChecked = false;}
    			if (clickedCheckBox.Name != "check2") {check2.IsChecked = false;}
    			if (clickedCheckBox.Name != "check3") {check3.IsChecked = false;}
    		}
    	}
    }


    <UserControl
    	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"
    	x:Class="SilverlightPrototype2Screens.Screen_1"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<StackPanel Orientation="Vertical" d:LayoutOverrides="Height">
    			<CheckBox x:Name="check3" Content="CheckBox" Click="checkBoxClicked"/>
    			<CheckBox x:Name="check2" Content="CheckBox" Click="checkBoxClicked"/>
    			<CheckBox x:Name="check1" Content="CheckBox" Click="checkBoxClicked"/>
    		</StackPanel>
    	</Grid>
    </UserControl>

    Monday, November 7, 2011 10:04 PM
  • thankyou so much....I missed tht part..

    And thanks for sharing the useful links....much appreciated..

     

    Regards

    Saurabh

    Monday, November 7, 2011 10:30 PM