How do I control a Storyboard animation once it starts?
In code behind: The following article from MSDN describes how to Pause, Resume, Stop, etc. on a running animation: http://msdn.microsoft.com/en-us/library/ms741997.aspx In XAML: The following example uses controllable storyboard actions to interactively control a storyboard. [XAML] <Page xmlns=’http://schemas.microsoft.com/winfx/2006/xaml/presentation’ xmlns:x=’http://schemas.microsoft.com/winfx/2006/xaml’ WindowTitle=’Controlling a Storyboard’ > <StackPanel Margin=’20’ > <!– This rectangle is animated. –> <Rectangle Name=’myRectangle’ Width=’100′ Height=’20’ Margin=’12,0,0,5′ Fill=’#AA3333FF’ HorizontalAlignment=’Left’ /> <!– This StackPanel contains all the Buttons. –> <StackPanel Orientation=’Horizontal’ Margin=’0,30,0,0′> <Button Name=’BeginButton’>Begin</Button> <Button Name=’PauseButton’>Pause</Button> <Button Name=’ResumeButton’>Resume</Button> <Button Name=’SeekButton’>Seek</Button> <Button Name=’SkipToFillButton’>Skip To Fill</Button> <Button Name=’SetSpeedRatioButton’>Triple Speed</Button> <Button Name=’StopButton’>Stop</Button> <StackPanel.Triggers> <!– Begin the Storyboard –> <EventTrigger RoutedEvent=’Button.Click’ SourceName=’BeginButton’> <BeginStoryboard Name=’MyBeginStoryboard’> <Storyboard > <DoubleAnimation Storyboard.TargetName=’myRectangle’ Storyboard.TargetProperty=’Width’ Duration=’0:0:5′ From=’100′ To=’500′ /> </Storyboard> </BeginStoryboard> </EventTrigger> <!– Pause the Storyboard –> <EventTrigger RoutedEvent=’Button.Click’ SourceName=’PauseButton’> <PauseStoryboard BeginStoryboardName=’MyBeginStoryboard’ /> </EventTrigger> <!– Resume the Storyboard –> <EventTrigger RoutedEvent=’Button.Click’ SourceName=’ResumeButton’> <ResumeStoryboard BeginStoryboardName=’MyBeginStoryboard’ /> </EventTrigger> <!– Seek one second into the storyboard’s active period. –> <EventTrigger RoutedEvent=’Button.Click’ SourceName=’SeekButton’> <SeekStoryboard BeginStoryboardName=’MyBeginStoryboard’ Offset=’0:0:1′ Origin=’BeginTime’ /> </EventTrigger> <!– Skip to Fill –> <EventTrigger RoutedEvent=’Button.Click’ SourceName=’SkipToFillButton’> <SkipStoryboardToFill BeginStoryboardName=’MyBeginStoryboard’ /> </EventTrigger> <!– Stop the Storyboard –> <EventTrigger RoutedEvent=’Button.Click’ SourceName=’StopButton’> <StopStoryboard BeginStoryboardName=’MyBeginStoryboard’ /> </EventTrigger> <!– Triple the speed of the Storyboard –> <EventTrigger RoutedEvent=’Button.Click’ SourceName=’SetSpeedRatioButton’> <SetStoryboardSpeedRatio SpeedRatio=’3′ BeginStoryboardName=’MyBeginStoryboard’ /> </EventTrigger> </StackPanel.Triggers> </StackPanel> </StackPanel> </Page>
How do I trigger an animation when the data in the control is changed?
Animations can be applied to the objects in WPF application when the data in the control changes using the DataTriggers. The following lines of code is used to apply animations using a DataTrigger [XAML] <TextBlock Text=’WPF Application’ Name=’tb1′ Foreground=’Blue’ FontSize=’28’ TextAlignment=’Center’ Height=’50’ VerticalAlignment=’Top’> <TextBlock.Style> <Style> <Style.Triggers> <DataTrigger Binding='{Binding ElementName=cb1,Path=IsChecked}’ Value=’true’> <DataTrigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty=’Opacity’ From=’0′ To=’1′ Duration=’0:0:1′ AutoReverse=’True’ RepeatBehavior=’Forever’ /> </Storyboard> </BeginStoryboard> </DataTrigger.EnterActions> <DataTrigger.ExitActions> <BeginStoryboard> <Storyboard FillBehavior=’Stop’> <DoubleAnimation Storyboard.TargetProperty=’Opacity’ To=’1′ Duration=’0:0:1′ /> </Storyboard> </BeginStoryboard> </DataTrigger.ExitActions> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock> <CheckBox Name=’cb1′ Content=’Show Animation’ IsChecked=’True’ Height=’30’ HorizontalAlignment=’Center’ />
How can I bind a method and pass a parameter to the method ?
As with support for parameterized constructor, this is most useful for existing classes that are not databinding-friendly and can’t be changed. For your own types, you might as well expose potential datasources as properties. But note that the photos collection exposed a method call ‘GetFolderName’, that returned a string representing the folder containing all the current items. You could expose this method as a datasource as follows. [XAML} <ObjctDataProvider x:Key=’dataProvider’ ObjectType='{x:Type Local:Photos}’ MethodName=’GetFolderName’/> If the parameters need to be passed to the method, you can use ObjectDataProvider’s ‘MethodParameters’ property ( which works just like it’s ConstructorParameter property). To Bind this method, simply bind it to the entire ObjectDataProvider. [XAML] <TextBlock Text='{Binding source={StaticResource dataProvider}}’/> Specifying the path in this case would apply to the instance returned by the method.
How do I include a delay only for the first tooltip and not for subsequent tooltips in my app?
The trick is to use the InitialShowDelay and BetweenShowDelay property appropriately as shown below in all your tooltips: [XAML] <Ellipse Height=’25’ Width=’50’ Fill=’Gray’ HorizontalAlignment=’Left’ ToolTipService.InitialShowDelay=’1000′ ToolTipService.ShowDuration=’7000′ ToolTipService.BetweenShowDelay=’2000′> <Ellipse.ToolTip> <ToolTip Placement=’Right’ PlacementRectangle=’50,0,0,0′ HorizontalOffset=’10’ VerticalOffset=’20’ HasDropShadow=’false’ Opened=’whenToolTipOpens’ Closed=’whenToolTipCloses’ > <BulletDecorator> <BulletDecorator.Bullet> <Ellipse Height=’10’ Width=’20’ Fill=’Blue’/> </BulletDecorator.Bullet> <TextBlock>Uses the ToolTip Class
How do I use the TooltipService class?
The following example shows how to use the ‘ToolTipService’ properties to specify the position of a tooltip among other things. This also shows how the tooltip look and feel can be customized with any content. [XAML] <Ellipse Height=’25’ Width=’50’ Fill=’Gray’ HorizontalAlignment=’Left’ ToolTipService.InitialShowDelay=’1000′ ToolTipService.ShowDuration=’7000′ ToolTipService.BetweenShowDelay=’2000′ ToolTipService.Placement=’Right’ ToolTipService.PlacementRectangle=’50,0,0,0′ ToolTipService.HorizontalOffset=’10’ ToolTipService.VerticalOffset=’20’ ToolTipService.HasDropShadow=’false’ ToolTipService.ShowOnDisabled=’true’ ToolTipService.IsEnabled=’true’ ToolTipOpening=’whenToolTipOpens’ ToolTipClosing=’whenToolTipCloses’ > <Ellipse.ToolTip> <BulletDecorator> <BulletDecorator.Bullet> <Ellipse Height=’10’ Width=’20’ Fill=’Blue’/> </BulletDecorator.Bullet> <TextBlock>Uses the ToolTipService class</TextBlock> </BulletDecorator> </Ellipse.ToolTip> </Ellipse>