locked
How can i triger state based on item selected in a combo box RRS feed

  • Question

  • i have 10 different states that need to triger with respect to selection in a combo box. Please help with this scnerio. i looked but was unable to find a solution. i saw too many things with go to state but using buttons.

    Any & every help's appreciated.


    bina

    Sunday, January 13, 2013 3:52 AM

Answers

  • Cont...

    The Yellow outline in the above indicates that the property is bound.  We bound it to the SelectedIndex.

    Your xaml will look like this...

    <ComboBox x:Name="myComboBox2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="144.001,0,0,0">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=myComboBox2}" RightOperand="0"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:GoToStateAction StateName="State1"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    			<ComboBoxItem Content="Black"/>
    			<ComboBoxItem Content="Red"/>
    			<ComboBoxItem Content="Orange"/>
    			<ComboBoxItem Content="Yellow"/>
    			<ComboBoxItem Content="Lime"/>
    			<ComboBoxItem Content="DarkGreen"/>
    			<ComboBoxItem Content="LightBlue"/>
    			<ComboBoxItem Content="Blue"/>
    			<ComboBoxItem Content="Indigo"/>
    			<ComboBoxItem Content="Violet"/>
    		</ComboBox>

    Repeat 9 times for your other 9 states.  Or this is where copy/past can be your friend again by simply editing the xaml directly...

    Use the buttons on the top right of your artboard to change the view to design, xaml or split.

    "Copy and past the EventTrigger to make it faster.  Just change the RightOperand value and the StateName."

    <i:Interaction.Triggers>
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=myComboBox2}" RightOperand="0"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:GoToStateAction StateName="State1"/>
    				</i:EventTrigger>
    				
    				<!--Copy and past the EventTrigger to make it faster.  Just change the RightOperand value and the StateName-->
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=myComboBox2}" RightOperand="1"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:GoToStateAction StateName="State2"/>
    				</i:EventTrigger>
    				
    			</i:Interaction.Triggers>

    Build and run your project and it should all work.

    I will post the sample project to my SkyDrive and post the link in a second if you would like to play with it.

    Just let me know if you have any questions. 

    ~Christine

    Here is the sample... BinaRaza Sample


    My Gallery - calControls





    • Edited by Christine L. _ Sunday, January 13, 2013 4:50 PM
    • Marked as answer by bina raza Monday, January 14, 2013 6:39 AM
    Sunday, January 13, 2013 4:29 PM

All replies

  • Hello Bina.

    First of all what kind of project is this?  WPF, Silverlight, Phone?

    Are you trying to use the GoToStateAction or do it from code?

    Here is a simple example for WPF using the GoToStateAction, using the SelectionChanged event, based on the index selected...

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    	xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    	x:Class="WpfApplication10.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualState x:Name="State1">
    					<Storyboard>
    						<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="LayoutRoot">
    							<EasingColorKeyFrame KeyTime="0" Value="Red"/>
    						</ColorAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="State2">
    					<Storyboard>
    						<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="LayoutRoot">
    							<EasingColorKeyFrame KeyTime="0" Value="Blue"/>
    						</ColorAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<ComboBox x:Name="comboBox" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=comboBox}" RightOperand="0"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:GoToStateAction StateName="State1"/>
    				</i:EventTrigger>
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=comboBox}" RightOperand="1"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:GoToStateAction StateName="State2"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    			<ComboBoxItem Content="Item 1"/>
    			<ComboBoxItem Content="Item 2"/>
    		</ComboBox>
    	</Grid>
    </Window>

    You can acheive the same in code-behind, and this is for WPF/C#...

    private void comboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
    {
    	int a = comboBox.SelectedIndex;
    	if (a == 0)
    		VisualStateManager.GoToElementState(LayoutRoot, "State1", true);
    	if (a == 1)
    		VisualStateManager.GoToElementState(LayoutRoot, "State2", true);
    }

    If your combobox items are bound to data, you could also use a DataTrigger.

    So let us know what kind of project and how you populate your ComboBoxItems.

    ~Christine


    My Gallery - calControls


    Sunday, January 13, 2013 6:22 AM
  • Thanks Christine,

    I apologise for not putting the detail first. I am designing a WPF. Multi Touch App. But so far using sample data.

    I am not a coder :(. Did some coding back in collee days. some C# SQL.So I am familear with the basic consepts.

    Will you be able to guide me how can i achieve this scnerio with design/expression blend 4.

    I have populated the combo box.

    My states are defined.

    I just Can't figure out how to connect them :(


    bina

    Sunday, January 13, 2013 1:52 PM
  • Well lets start with hooking them up with code.

    In my sample I created a ComboBox and named it in the Objects and Timeline panel... "myComboBox".

    I added 10 ComboBoxItems as shown below and created 10 states.

    Blend will start your method in the code-behind.  It will look like this...

    private void myComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
    {
    	// TODO: Add event handler implementation here.
    }

    You can delete the comment it put between the curly brackets.

    Then fill in your if statements. 

    private void myComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
    {
    	if (myComboBox.SelectedIndex == 0)  VisualStateManager.GoToElementState(LayoutRoot, "State1", true);
    	if (myComboBox.SelectedIndex == 1)  VisualStateManager.GoToElementState(LayoutRoot, "State2", true);
    	if (myComboBox.SelectedIndex == 2)  VisualStateManager.GoToElementState(LayoutRoot, "State3", true);
    	if (myComboBox.SelectedIndex == 3)  VisualStateManager.GoToElementState(LayoutRoot, "State4", true);
    	if (myComboBox.SelectedIndex == 4)  VisualStateManager.GoToElementState(LayoutRoot, "State5", true);
    	if (myComboBox.SelectedIndex == 5)  VisualStateManager.GoToElementState(LayoutRoot, "State6", true);
    	if (myComboBox.SelectedIndex == 6)  VisualStateManager.GoToElementState(LayoutRoot, "State7", true);
    	if (myComboBox.SelectedIndex == 7)  VisualStateManager.GoToElementState(LayoutRoot, "State8", true);
    	if (myComboBox.SelectedIndex == 8)  VisualStateManager.GoToElementState(LayoutRoot, "State9", true);
    	if (myComboBox.SelectedIndex == 9)  VisualStateManager.GoToElementState(LayoutRoot, "State10", true);
    }

    This is where copy/paste can be your friend.  Do the first line then past it 9 times and go through and edit the lines.

    For the first line in the above it says that if the selected index is 0 or the first item is selected, then it calls the VisualStateManager to go to "State1".  "LayoutRoot" is the name of my main grid.  "State1" is what I named the state.  The "true" tells the VisualStateManager to use any transitions if they are present.  For this example I did not use transitions.

    Once you get the 10 "if's" in there.  Build and test your project.

    Now the above assumes you selected C# as your language for your project.  If you selected VB then let me know and we can convert the code.

    I will continue on a second post to show you how to use the "GoToStateAction" instead of code-behind.

    ~Christine


    My Gallery - calControls

    Sunday, January 13, 2013 3:40 PM
  • To manage the states using the GoToStateAction instead of code-behind...

    I created a second ComboBox called "myComboBox2".

    With that selected, click the "Assets" tab.  Select Behaviors > GoToStateAction.  (You can also use the search box and type in "GoToS" for it to quickly find the action.

    With the ComboBox still selected, double-click the GoToStateAction to add it.

    Once added, and with the new action selected in your Objects and Timeline, look in the Properties pane and it should be there for you to set up.

    Note... Make sure you change the EventName to "SelectionChanged".

    Now the line above the "Equal" on the far right click the small square button to bring up a menu. 

    Select "Element Property Binding".

    Your cursor will change.  Click on the ComboBox and select "SelectedIndex" in the drop-down that appears.

    Going to a second thread as I am not allowed to use more than 2 images.


    My Gallery - calControls


    Sunday, January 13, 2013 4:09 PM
  • Cont...

    The Yellow outline in the above indicates that the property is bound.  We bound it to the SelectedIndex.

    Your xaml will look like this...

    <ComboBox x:Name="myComboBox2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="144.001,0,0,0">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=myComboBox2}" RightOperand="0"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:GoToStateAction StateName="State1"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    			<ComboBoxItem Content="Black"/>
    			<ComboBoxItem Content="Red"/>
    			<ComboBoxItem Content="Orange"/>
    			<ComboBoxItem Content="Yellow"/>
    			<ComboBoxItem Content="Lime"/>
    			<ComboBoxItem Content="DarkGreen"/>
    			<ComboBoxItem Content="LightBlue"/>
    			<ComboBoxItem Content="Blue"/>
    			<ComboBoxItem Content="Indigo"/>
    			<ComboBoxItem Content="Violet"/>
    		</ComboBox>

    Repeat 9 times for your other 9 states.  Or this is where copy/past can be your friend again by simply editing the xaml directly...

    Use the buttons on the top right of your artboard to change the view to design, xaml or split.

    "Copy and past the EventTrigger to make it faster.  Just change the RightOperand value and the StateName."

    <i:Interaction.Triggers>
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=myComboBox2}" RightOperand="0"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:GoToStateAction StateName="State1"/>
    				</i:EventTrigger>
    				
    				<!--Copy and past the EventTrigger to make it faster.  Just change the RightOperand value and the StateName-->
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=myComboBox2}" RightOperand="1"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:GoToStateAction StateName="State2"/>
    				</i:EventTrigger>
    				
    			</i:Interaction.Triggers>

    Build and run your project and it should all work.

    I will post the sample project to my SkyDrive and post the link in a second if you would like to play with it.

    Just let me know if you have any questions. 

    ~Christine

    Here is the sample... BinaRaza Sample


    My Gallery - calControls





    • Edited by Christine L. _ Sunday, January 13, 2013 4:50 PM
    • Marked as answer by bina raza Monday, January 14, 2013 6:39 AM
    Sunday, January 13, 2013 4:29 PM
  • Thanks Christine,

    You are awesome. You made my day & next week too :). All the help is greatly appreciated.


    bina

    Monday, January 14, 2013 6:40 AM