How to make a video file play at specific scene in Silverlight, say like when time is 00:30 seconds?

ashley2009
ashley2009 used Ask the Experts™
on
Hello,

I have a question on Silverlight and XAML. I just cannot figure out, and I am not sure whether it is possible.

To explain my problem, I made a small demo file, which has two control: a textBlock and a MediaElement ( a 3 second video file).
In this example, the textBox does some animation (when the video file is invisible) for the first second, and then, I want the video file to become visible and to play, but I cannot play the video file when time is 2 second and after I make the video file visible.
I can make the video file visible, but I cannot make it play at scene 2.


I hope that I am explaining you nicely. Please help. Basically, it is like, the textBlock does some animation when the video file is invisible, and then, after 1 second, the textBlock becomes invisible, and the video file becomes visible and starts playing.

I can make the video file visible after 1 second, but the video file does not play. Please tell  me what XAML or C# code to use to solve this because I have been trying for some time. StoryBoard: Video and TextBlock Control
XAML
.......
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib"
	x:Class="SilverlightApplication1.MainPage"
	Width="640" Height="480">
	<UserControl.Resources>
		<Storyboard x:Name="Storyboard1">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock1">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="383.333"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock1">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-101.666"/>
			</DoubleAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock1">
				<DiscreteObjectKeyFrame KeyTime="0:0:1">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="clip_Small_0001_wmv">
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-87"/>
				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-87"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="clip_Small_0001_wmv">
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-71"/>
				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-71"/>
			</DoubleAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="clip_Small_0001_wmv">
				<DiscreteObjectKeyFrame KeyTime="0:0:1">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="0:0:3">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(MediaElement.AutoPlay)" Storyboard.TargetName="clip_Small_0001_wmv">
				<DiscreteObjectKeyFrame KeyTime="0">
					<DiscreteObjectKeyFrame.Value>
						<System:Boolean>False</System:Boolean>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="0:0:1">
					<DiscreteObjectKeyFrame.Value>
						<System:Boolean>True</System:Boolean>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot" Background="White">
		<TextBlock x:Name="textBlock1"  HorizontalAlignment="Left" Margin="57,170,0,0" TextWrapping="Wrap" Text="TextBlock   1" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" FontSize="22">
			<TextBlock.RenderTransform>
				<CompositeTransform/>
			</TextBlock.RenderTransform>
		</TextBlock>
		<MediaElement x:Name="clip_Small_0001_wmv" Margin="198,142,122,98" Source="/Video/clip_Small_0001.wmv" Stretch="Fill" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
			<MediaElement.RenderTransform>
				<CompositeTransform/>
			</MediaElement.RenderTransform>
		</MediaElement>
	</Grid>
</UserControl>

C# Code Behind
................
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 SilverlightApplication1
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			// Required to initialize variables
			InitializeComponent();
			Storyboard1.Begin();
		}
	}
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
The MediaElement has got a "Position" property that takes a TimeSpan object as a value. I suppose that you can set this in the XAML file.

Author

Commented:
Hello,

thank you. My problem got solved. Now I can  make an animation consisted of multiple storyboards and video files. Please see the XAML and C# code at below. Definitely my main animated Silverlight application will not be this, but now I can proceed and complete the silverlight animation that I was making with multiple storyboards and video files. Thank you for your response.

What solved the problem?

I had to put a handler to my storyboard's completed event.
<Storyboard x:Name="Storyboard1" Completed="st1_Completed">

Therefore, after storyboard gets completed, st1_Completed event gets raised, where the video file starts.
void  st1_Completed(object sender, EventArgs e){
                  clip_Small_0001_wmv.Visibility = System.Windows.Visibility.Visible;
                  clip_Small_0001_wmv.Play();
                  clip_Small_0001_wmv.MediaEnded += new System.Windows.RoutedEventHandler(clip_Small_0001_wmv_MediaEnded);
}

And after the video file ends, the event gets added "clip_Small_0001_wmv_MediaEnded" and the next storyboard starts.....
private void clip_Small_0001_wmv_MediaEnded(object sender, System.Windows.RoutedEventArgs e){
                  clip_Small_0001_wmv.Visibility = System.Windows.Visibility.Collapsed;
                  Storyboard2.Begin();
}

The whole code is at below.

XAML

..................

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    x:Class="SilverlightApplication1.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <Storyboard x:Name="Storyboard1" Completed="st1_Completed">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="383.333"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-101.666"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock1">
                <DiscreteObjectKeyFrame KeyTime="0:0:1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
           
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image2">
                <DiscreteObjectKeyFrame KeyTime="0:0:1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
           
        </Storyboard>
        <Storyboard x:Name="Storyboard2" Completed="st2_Completed">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock1">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock2">
                <DiscreteObjectKeyFrame KeyTime="0:0:2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="textBlock2">
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="2"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="2"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock2">
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="2"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="2"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock2">
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="200"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="-10"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock2">
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-100"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="25"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="image1">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="image1">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="Storyboard3">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock1">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="image1">
                <EasingDoubleKeyFrame KeyTime="0" Value="1.552"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.3"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.3"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="2.431"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="image1">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.2"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="1.978"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="image1">
                <EasingDoubleKeyFrame KeyTime="0" Value="-7.5"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="12.501"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="image1">
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="-78.375"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock x:Name="textBlock1"  HorizontalAlignment="Left" Margin="57,170,0,0" TextWrapping="Wrap" Text="TextBlock   1" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" FontSize="22">
            <TextBlock.RenderTransform>
                <CompositeTransform/>
            </TextBlock.RenderTransform>
        </TextBlock>
        <MediaElement x:Name="clip_Small_0001_wmv" Margin="198,142,122,98" Source="/Video/clip_Small_0001.wmv"
        Stretch="Fill" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" AutoPlay="False">
            <MediaElement.RenderTransform>
                <CompositeTransform/>
            </MediaElement.RenderTransform>
        </MediaElement>
        <Image x:Name="image1" Margin="159,22,122,8" Source="american-eagle-and-flag-ii.jpg" Stretch="Fill" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="image2" Margin="0,0,-160,-120" Source="american_eagle.jpg" Stretch="Fill" Visibility="Collapsed"/>
        <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="138,0,0,216" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Bottom" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5">
            <TextBlock.RenderTransform>
                <CompositeTransform/>
            </TextBlock.RenderTransform>
        </TextBlock>
    <MediaElement x:Name="clip4_0001_wmv" Margin="198,142,122,98" Source="/Video/clip2_0001.wmv"
        Stretch="Fill" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" AutoPlay="False">
            <MediaElement.RenderTransform>
                <CompositeTransform/>
            </MediaElement.RenderTransform>
        </MediaElement>
    <MediaElement x:Name="_05_Harvesting_Material_mp3" HorizontalAlignment="Left" Height="0" Margin="118,220,0,0" Source="/05 Harvesting Material.mp3" Stretch="Fill" VerticalAlignment="Top" Width="0"/>
   
    </Grid>
</UserControl>

...................................................................................................

C# Code Behind

...............................

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 SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
            Storyboard1.Begin();
        }
         void  st1_Completed(object sender, EventArgs e)
        {
            clip_Small_0001_wmv.Visibility = System.Windows.Visibility.Visible;
            clip_Small_0001_wmv.Play();
            clip_Small_0001_wmv.MediaEnded += new System.Windows.RoutedEventHandler(clip_Small_0001_wmv_MediaEnded);
        }
        void  st2_Completed(object sender, EventArgs e)
        {
            clip4_0001_wmv.Visibility = System.Windows.Visibility.Visible;
            clip4_0001_wmv.Play();
            clip4_0001_wmv.MediaEnded += new System.Windows.RoutedEventHandler(clip4_Small_0001_wmv_MediaEnded);
        }
        private void clip4_Small_0001_wmv_MediaEnded(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            //MessageBox.Show("HEELO MEDIA ENDED");
            clip4_0001_wmv.Visibility = System.Windows.Visibility.Collapsed;
            Storyboard3.Begin();
        }
        private void clip_Small_0001_wmv_MediaEnded(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            clip_Small_0001_wmv.Visibility = System.Windows.Visibility.Collapsed;
            Storyboard2.Begin();
        }
    }
}

 

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial