Archive for the ‘Silverlight’ Tag

3D example in Silverlight

Talking with my boy Ryan made me start thinking about trying new things in Silverlight…3D.  Here is an example of images in Z space.  I am working on getting a camera object implemented so you can zoom in and out on the objects.

Advertisements

Create a video player in Silverlight 2 – Part 2

In part 1 we covered setting up a very basic video player. In part 2 we will add

  • Scrubbing the video
  • wiring up volume,
  • and muting.

In future versions I will show how to display a buffer message, skin the controls, and how to work with media that’s not embedded in the xap.

  1. Scrubbing
    • Add a MouseLeftButtonDown and MouseLeftButtonUp events for the slider in the constructor.
      Register MouseLeftButtonDown and MouseLeftButtonUp events for the slider
    • Add a property to lock the scrubber while the mouse button is down.
    • In the MouseLeftButtonDown event, set the scrubber lock to true.
    • In the MouseLeftButtonUp event, release the lock on the scrubber and update the position of the video.
    • Finally in the Tick event of the timer, prevent updating the position of the slider while the scrubber is locked.
  2. Volume
    • XAML. It important to set the Min to 0 and the Max to 1. The MediaElements volume ranges from 0 to 1.
    • Register the ValueChanged event in the constructor for the slider.
    • Set the video’s volume to the value in the ValueChanged event.
    • Set the initial position of the slider to the video’s volume. You can either do this in the CurrentStateChanged event or the MediaOpened event of the MediaElement.
  3. Mute button
    • XAML, add a ToggleButton
    • Register the Checked and UnChecked events in the constuctor for the mute button.

    • Add a variable to store the previous volume.

    • Checked event

    • UnChecked event
  4. Resulting player

Files:
Instead of the whole project (because the video is embedded in the project), here are the two important pieces of this project

XAML

C#

UPDATE

If you are having problems with the Slider not recoginzing MouseLeftButtonUp or MouseLeftButtonDown events, check out the VideoSlider

Create a video player in Silverlight 2 – Part 1

Creating a video player in Silverlight is pretty simple. The MediaElement does all the heavy lifting, all you need to do is wire up a UI and you have a basic Video player. Here is a tutorial on how to create a simple video player from scratch using Silverlight 2.

  1. Create a Silverlight application
  2. Add a video to the project. This is for testing purposes only. Later in part 2 we will use a streaming video.
  3. Add a MediaElement and a Toggle button for Play/Pause of the video.XAML
    XAML Play Pause toggle button

    C#
    C# Play Pause Toggle button

  4. Add a Slider to show the position of the video. To show the progress of the video on the slider, we will need to create a DispatcherTimer. On the Tick event we will update the value of the slider. In this example I have set the value of the Tick to 50 milliseconds. There is minor jumping; if you want to get seamless indicator movment try going under 41 milliseconds. We also need to Start and Stop the timer. I am doing this on CurrentStateChanged event of the MediaElement.XAML
    XAML slider

    C#
    C# Scrubber

  5. Add a TextBlock to show the exact position of the video. To update the text, I am adding this to the Tick event of the timer.XAML
    XAML Video position text

    C#
    C# Video position text

  6. Screen shot of the player at the end of Part 1
    Part 1 screen shot

Links
Source (11Mb because of the WMV)
Part 2 of how to Create a video player in Silverlight 2

UPDATE

If you are having problems with the Slider not recoginzing MouseLeftButtonUp or MouseLeftButtonDown events, check out the VideoSlider

Atlanta Code Camp

My first code camp is over and done with. I got a chance to meet a lot of great people who are as interested and enthusiastic about Silverlight as I am. As promised here are the presentation and the code from my presentation on Saturday.

A couple notes: the presentation is saved as a pptx, so e-mail or leave me a comment if you would like a ppt. As for the code, make sure you change the port the xml file is coming from. This will be in the Page.xaml.cs

Presentation (zip)
Code (zip)

References

Silverlight 1.0 gallery
http://silverlight.net/community/gallerydetail.aspx?cat=3&sort=2

Microsoft Developer reference poster
http://brad_abrams.members.winisp.net/Projects/Mix08SL2Poster/Silverlight2PosterMIX08.png

XAML overview
http://msdn2.microsoft.com/en-us/library/ms752059.aspx

Silverlight 2 controls:
http://silverlight.net/Samples/2b1/SilverlightControls/run/default.html

Scott Guthries first look at Silverlight 2
http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

MSDN Silverlight
http://msdn2.microsoft.com/en-us/library/cc303041.aspx

Data visualizations

Today I recieved an e-mail to The Best Tools for Visualization.  For the past five years I have worked in a world where there is really only one way to display data, THE GRID.  To be exact, the .NET DataGrid.  This control alone has employed many developers and has allowed them to make a living (remember The DataGrid Girl?).

These application have pushed the limits on how we think and view data.  With Silverlight we have the opputunity join the data visualization revolution.  It’s time to get out of the mindset of writing a stored procedures and hooking them to a datagrids.  Challenge yourself and your users.

Over the next few weeks I will be working on creating a data visualization project in Silverlight, and I will use the Animation Engine I have created as the basis for motion.

Stay tuned.

Positioning in Silverlight 2

A common mistake in Silverlight is for people to use the Canvas.Left and Canvas.Top property when positioning elements.  In Silverlight 2, there is a push towards a relative positioning model.  This makes the Margin, HorizontalAlignment, and VerticalAlignment very important (for all you CSS people the Margin starts on the Left and goes clockwise).  So, how do you position, move, or animate elements?  Where is the X and Y?  You can find them in the TranslateTransform which is part of the TransformGroup which is part of the RenderTransform.

XAML (see below for this code to copy)
Transform group
This is a pain to access from C#.  You have to access the TranslateTransform through the Children collection using the index.  What happens if you switch the positions of the Transforms in XAML?  Your code will fail.  Here is the code to access X and Y through C# (again, see below for code to copy).
C Sharp translate transform
So my question: Why not add the X, Y, ScaleX, and ScaleY to the UIElement?  This would eliminate the need to go through multiple castings in C#, it would prevent index failures if you change your transforms in XAML, and it would eliminate the misuse of the Canvas.Left and Canvas.Top properties.

Code to copy:

<Grid x:Name=”LayoutRoot” Background=”White”>
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform X=”0″ Y=”0″ />
<ScaleTransform ScaleX=”1″ ScaleY=”0″ />
<RotateTransform Angle=”0″ />
<SkewTransform AngleX=”0″ AngleY=”0″ />
</TransformGroup>
</Grid.RenderTransform>
</Grid>

            ((LayoutRoot.RenderTransform as TransformGroup).Children[0] as TranslateTransform).X;
((LayoutRoot.RenderTransform as TransformGroup).Children[0] as TranslateTransform).Y;

Set the source for an image from C#

In Silverlight, there are two ways to set the source for an image.

  1. image.SetValue(Image.SourceProperty,value);
  2. image.Source = new BitmapImage(new Uri(value, UriKind.Absolute));

For the second option you will need to include the following namespace: using System.Windows.Media.Imaging;.

Animation engine for Silverlight

Just added Animations for Width and Height.  Check out the code and the example.  For more information here is the initial post.   I will add more documentation after getting a few more animations in the engine.

Known issues:
After the animation of Width, the width property doesn’t get set.  Same with Height.

Reusing a Storyboard

It is possible to reuse a storyboard.  Make sure to stop the storyboard before you set a new target property.  Thanks Tom for pointing this out.

XAML

    <Canvas x:Name=”LayoutRoot” Background=”White”>
<Button Height=”20″ Width=”120″ Canvas.Left=”0″ Canvas.Top=”0″ Content=”Button” x:Name=”btnTest”/>
<Rectangle x:Name=”Fred” Height=”30″ Width=”30″ Fill=”Aquamarine” Canvas.Top=”50″/>
<Rectangle x:Name=”Wilma” Height=”30″ Width=”30″ Fill=”OrangeRed” Canvas.Top=”150″/>
</Canvas>
C#

        void Page_Loaded(object sender, RoutedEventArgs e)
{
_storyboard = new Storyboard();
_dx = new DoubleAnimation();
_dx.From = 0;
_dx.To = 250;
_dx.Duration = new Duration(new TimeSpan(0,0,3));
_dx.AutoReverse = true;
_dx.RepeatBehavior = RepeatBehavior.Forever;

            Storyboard.SetTargetName(_dx, “Fred”);
Storyboard.SetTargetProperty(_dx, “(Rectangle.Width)”);
_storyboard.Children.Add(_dx);
LayoutRoot.Resources.Add(_storyboard);
_storyboard.Begin();
}

 

        void btnTest_Click(object sender, RoutedEventArgs e)
{
            _storyboard.Stop();
Storyboard.SetTargetName(_dx, “Wilma”);
_storyboard.Begin();
}

Animate Silverlight 2 object from 1 line of code

In a previous post about how to create animations dynamically, I showed how to add StoryBoards from C#. I have extracted this logic into a class called SLAnimator. This allows you to do an animation from one line code, and a nice thing about this approach is it still uses the built in Silverlight Animation system.

Here is an example of the code to call the animation.
SLAnimator.Animate(this, rect, 100, 100, 100,1,1);
Parameters:

  • Container element
  • UIElement to animate
  • Time of animation in milliseconds
  • X of destination
  • Y of destination
  • ScaleX
  • ScaleY

This animation API is at it’s infancy, so I will continue updating as time permits. Feel free to download the class and give me your feed back.

Enjoy!

Links:
Download the source
Working example


Get Microsoft Silverlight