locked
progress bar increase wihen I check boxes RRS feed

  • Question

  • I have a progress bar and two-five checkboxes.  I would like for the progress bar to increase in value each time I check a box.  So if I have three boxes I would like to increase the progress bar 33% for each box I check.  How would I do that?  I triend changepropertyaction that that does not seem to have what I need. Unless I am doing it incorrectly.
    Friday, December 4, 2009 6:29 AM

All replies

  • You'll have to do it using states but here is the code to do it all is below (also, I used radio buttons as that seems more logical since only one will be selected).

    	<StackPanel x:Name="LayoutRoot" Background="White">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="ProgressBar">
    				<VisualState x:Name="Default"/>
    				<VisualState x:Name="_20">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="progressBar" Storyboard.TargetProperty="(RangeBase.Value)">
    							<SplineDoubleKeyFrame KeyTime="00:00:00" Value="20"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="_40">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="progressBar" Storyboard.TargetProperty="(RangeBase.Value)">
    							<SplineDoubleKeyFrame KeyTime="00:00:00" Value="40"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="_60">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="progressBar" Storyboard.TargetProperty="(RangeBase.Value)">
    							<SplineDoubleKeyFrame KeyTime="00:00:00" Value="60"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="_80">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="progressBar" Storyboard.TargetProperty="(RangeBase.Value)">
    							<SplineDoubleKeyFrame KeyTime="00:00:00" Value="80"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="_100">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="progressBar" Storyboard.TargetProperty="(RangeBase.Value)">
    							<SplineDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<ProgressBar x:Name="progressBar" Style="{DynamicResource ProgressBar-Sketch}" Height="38" BorderThickness="1,1,1,10" Margin="0,10,312,0"/>
    		<RadioButton x:Name="radioButton" Style="{DynamicResource RadioButton-Sketch}" Content="0" GroupName="Progress" IsChecked="True">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pb:ActivateStateAction TargetScreen="SelectorBarTemplateSketchScreens.Screen_1_6" TargetState="Default"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</RadioButton>
    		<RadioButton x:Name="radioButton1" Style="{DynamicResource RadioButton-Sketch}" Content="20" GroupName="Progress">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pb:ActivateStateAction TargetScreen="SelectorBarTemplateSketchScreens.Screen_1_6" TargetState="_20"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</RadioButton>
    		<RadioButton x:Name="radioButton2" Style="{DynamicResource RadioButton-Sketch}" Content="40" GroupName="Progress">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pb:ActivateStateAction TargetScreen="SelectorBarTemplateSketchScreens.Screen_1_6" TargetState="_40"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</RadioButton>
    		<RadioButton x:Name="radioButton3" Style="{DynamicResource RadioButton-Sketch}" Content="60" GroupName="Progress">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pb:ActivateStateAction TargetScreen="SelectorBarTemplateSketchScreens.Screen_1_6" TargetState="_60"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</RadioButton>
    		<RadioButton x:Name="radioButton4" Style="{DynamicResource RadioButton-Sketch}" Content="80" GroupName="Progress">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pb:ActivateStateAction TargetScreen="SelectorBarTemplateSketchScreens.Screen_1_6" TargetState="_80"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</RadioButton>
    		<RadioButton x:Name="radioButton5" Style="{DynamicResource RadioButton-Sketch}" Content="100" GroupName="Progress">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pb:ActivateStateAction TargetScreen="SelectorBarTemplateSketchScreens.Screen_1_6" TargetState="_100"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</RadioButton>
    	</StackPanel>
    </UserControl>
    • Proposed as answer by Terry Ballard Friday, December 11, 2009 7:30 PM
    Friday, December 11, 2009 7:30 PM
  • Terry thank you for the answer.  Looks like I need to brush up on states. I have not learned those yet. Thanks again. 
    Saturday, December 12, 2009 1:46 AM
  • If Terry's response did the trick, please remember to mark his response as an answer so everyone knows that it's working!  :)
    Saturday, December 12, 2009 8:00 AM
  • If Terry's response did the trick, please remember to mark his response as an answer so everyone knows that it's working!  :)
    Thanks for the tip.  I don't know if it works yet.  
    Saturday, December 12, 2009 8:05 PM