locked
Sketchflow listbox ChangePropertyAction with a condition. RRS feed

  • Question

  • I'm developing a Silverlight 4 prototype with Sketchflow.

    I have a listbox with the following code:

       
    <ListBox x:Name="TypesThrows" DataContext="{Binding Source={StaticResource TiradasDataSource}}" HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate1}" ItemsSource="{Binding Collection}" Margin="32,210,0,82" Style="{StaticResource ListBox-Sketch}" Width="200">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <i:Interaction.Behaviors>
                        <ei:ConditionBehavior>
                            <ei:ConditionalExpression>
                                <ei:ComparisonCondition LeftOperand="{Binding Name, Source={StaticResource DataStore}}" RightOperand="Celtic Cross"/>
                            </ei:ConditionalExpression>
                        </ei:ConditionBehavior>
                    </i:Interaction.Behaviors>
                    <ei:ChangePropertyAction TargetName="grid" PropertyName="Opacity" Value="1" Duration="0:0:2">
                        <ei:ChangePropertyAction.Ease>
                            <CircleEase EasingMode="EaseIn"/>
                        </ei:ChangePropertyAction.Ease>
                    </ei:ChangePropertyAction>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ListBox>
    




    This listbox is bound to the following project sample data:

       
    <SampleData:TiradasDataSource xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.ThrowsDataSource" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
          <SampleData:TiradasDataSource.Collection>
            <SampleData:Item Nombre="Celtic Cross" />
            <SampleData:Item Nombre="Roman" />
            <SampleData:Item Nombre="Another kind of" />
          </SampleData:TiradasDataSource.Collection>
        </SampleData:TiradasDataSource>
    



    My goal is to show a grid when user selects 'Celtic Cross' on listbox, but I've tried with above code, and it doesn't trigger it.

    What am I doing wrong?
    • Edited by VansFannel Friday, October 28, 2011 2:43 PM better title
    Friday, October 28, 2011 12:00 PM

Answers

  • I've confirmed the following works.

    Differences that you need to account for:

    • My sample data name is Property1 instead of Name, change Property1 to Name
    • My object names may be different, grid/listbox, etc...

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<ListBox x:Name="listBox" HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="83,160,0,20" Width="200">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedItem.Property1, ElementName=listBox}" RightOperand="TestValue"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:ChangePropertyAction TargetName="grid" PropertyName="Opacity" Value="1">
    						<ei:ChangePropertyAction.Ease>
    							<CircleEase EasingMode="EaseIn"/>
    						</ei:ChangePropertyAction.Ease>
    					</ei:ChangePropertyAction>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</ListBox>
    		<Grid x:Name="grid" HorizontalAlignment="Right" Margin="0,112,45,197" Width="223" Background="#FFFF5F5F" Opacity="0"/>
    	</Grid>
    

    Friday, October 28, 2011 5:35 PM
    Moderator
  • It works!

    I've had to change define sample data source in document to make it works.

    • Marked as answer by VansFannel Friday, October 28, 2011 6:15 PM
    Friday, October 28, 2011 6:15 PM

All replies

  • Because the behavior is attached to the listbox, it will databind to Name in the ListBox's datacontext, which may or may not exist. You might try binding to the SelectedItem property of the listbox and then the .Name property, but I haven't tried that.
    Friday, October 28, 2011 4:46 PM
    Moderator
  • Because the behavior is attached to the listbox, it will databind to Name in the ListBox's datacontext, which may or may not exist. You might try binding to the SelectedItem property of the listbox and then the .Name property, but I haven't tried that.


    Thanks for your answer, but I'm not sure if I've understood. Here, it is what I've done:

    <ListBox x:Name="TypesThrows" DataContext="{Binding Source={StaticResource TiradasDataSource}}" HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate1}" ItemsSource="{Binding Collection}" Margin="32,210,0,82" Style="{StaticResource ListBox-Sketch}" Width="200">
    	<i:Interaction.Triggers>
    		<i:EventTrigger SourceObject="{Binding SelectedItem, ElementName=TypesThrows}">
    			<i:Interaction.Behaviors>
    				<ei:ConditionBehavior>
    					<ei:ConditionalExpression>
    						<ei:ComparisonCondition LeftOperand="{Binding Name, Source={StaticResource DataStore}}" RightOperand="Celtic Cross"/>
    					</ei:ConditionalExpression>
    				</ei:ConditionBehavior>
    			</i:Interaction.Behaviors>
    			<ei:ChangePropertyAction TargetName="grid" PropertyName="Opacity" Value="1">
    				<ei:ChangePropertyAction.Ease>
    					<CircleEase EasingMode="EaseIn"/>
    				</ei:ChangePropertyAction.Ease>
    			</ei:ChangePropertyAction>
    		</i:EventTrigger>
    	</i:Interaction.Triggers>
    </ListBox>
    

    I'm getting the same.

    Any other clue?

     

     

    Friday, October 28, 2011 5:16 PM
  • I've confirmed the following works.

    Differences that you need to account for:

    • My sample data name is Property1 instead of Name, change Property1 to Name
    • My object names may be different, grid/listbox, etc...

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<ListBox x:Name="listBox" HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="83,160,0,20" Width="200">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="SelectionChanged">
    					<i:Interaction.Behaviors>
    						<ei:ConditionBehavior>
    							<ei:ConditionalExpression>
    								<ei:ComparisonCondition LeftOperand="{Binding SelectedItem.Property1, ElementName=listBox}" RightOperand="TestValue"/>
    							</ei:ConditionalExpression>
    						</ei:ConditionBehavior>
    					</i:Interaction.Behaviors>
    					<ei:ChangePropertyAction TargetName="grid" PropertyName="Opacity" Value="1">
    						<ei:ChangePropertyAction.Ease>
    							<CircleEase EasingMode="EaseIn"/>
    						</ei:ChangePropertyAction.Ease>
    					</ei:ChangePropertyAction>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</ListBox>
    		<Grid x:Name="grid" HorizontalAlignment="Right" Margin="0,112,45,197" Width="223" Background="#FFFF5F5F" Opacity="0"/>
    	</Grid>
    

    Friday, October 28, 2011 5:35 PM
    Moderator
  • I think this is your xaml edited to do what I did above, but I can't test it without the rest of your project :)
    <ListBox x:Name="TypesThrows" DataContext="{Binding Source={StaticResource TiradasDataSource}}" HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate1}" ItemsSource="{Binding Collection}" Margin="32,210,0,82" Style="{StaticResource ListBox-Sketch}" Width="200">
    	<i:Interaction.Triggers>
    		<i:EventTrigger EventName="SelectionChanged">
    			<i:Interaction.Behaviors>
    				<ei:ConditionBehavior>
    					<ei:ConditionalExpression>
    						<ei:ComparisonCondition LeftOperand="{Binding SelectedItem.Name, ElementName=TypesThrows}" RightOperand="Celtic Cross"/>
    					</ei:ConditionalExpression>
    				</ei:ConditionBehavior>
    			</i:Interaction.Behaviors>
    			<ei:ChangePropertyAction TargetName="grid" PropertyName="Opacity" Value="1">
    				<ei:ChangePropertyAction.Ease>
    					<CircleEase EasingMode="EaseIn"/>
    				</ei:ChangePropertyAction.Ease>
    			</ei:ChangePropertyAction>
    		</i:EventTrigger>
    	</i:Interaction.Triggers>
    </ListBox>
    

    Friday, October 28, 2011 5:36 PM
    Moderator
  • Thanks for your answer. I've test it, but it doesn't work. Maybe, I can send you my project ;).

    I'll continue working on it.

    Thanks again.

    Friday, October 28, 2011 5:49 PM
  • It works!

    I've had to change define sample data source in document to make it works.

    • Marked as answer by VansFannel Friday, October 28, 2011 6:15 PM
    Friday, October 28, 2011 6:15 PM