Paul Yanez » Silverlight

Fluid Layout Silverlight Video Player Part 1

admin — Thu, 29 Apr 2010 04:17:33 +0000

In the following tutorial we will begin building a fluid layout for a Silverlight video player.
The main goal is to allow the scaling of the middle section of controlbar which houses the progressbar to scale according to the width of the player. The left and right columns will remain a fixed size. There should be no loss of quality of the graphic assets of the controls and the position of each control should remain relative of it’s container at all times.

Steps
1- Build a wireframe of the containers you are trying to scale and have as fixed sizes
2- Use the Grid component as your layout component
3- Areas that you want to remain a fixed size, set the “ColumnDefinition Width” to a numerical value – ex: the pause component is fixed – ColumnDefinition Width=”50″
4- Areas that you want to scale, set the “ColumnDefinition Width” to “*” – ex: the middle section which contains the progressbar

Use the slider below to see the fluid layout

Wireframe of the videoplayer and the scaling we want to achieve

XAML code

The controls in this tutorial are not functional, the controls are simply meant to be placed with a fluid layout. The following are tutorials on building a video player
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

Creating custom Silverlight buttons with Images Gradients and Transitions

admin — Tue, 27 Apr 2010 18:26:00 +0000

In the following tutorial I will show how to create your own custom button with images, gradients and transitions.

1- import an image and place on the artboard
2- add a rectangle with a radial gradient the same width and height as the image
3- add a rectangle with no fill and grey color as the border
4- select all 3 objects, right click and group into a canvas
5- right click and select make into usercontrol
6- select button as the type of usercontrol you want to create
7- right click and select “edit template/edit current”
8- select the states panel and go to the “mouseover” state and set the gradient’s opacity property to “0″ and change the stroke color of the rectangle from grey to white
9- change the transition duration to 0.3 sec and set the transition to “cubic in”

Silverlight

Import an image and place on the artboard

Add a rectangle with a radial gradient the same width and height as the image

Add a rectangle with no fill and grey color as the border

Select all 3 objects

Group into a canvas

Right click and select make into usercontrol, select button as the type of usercontrol you want to create

Right click and select “edit template/edit current”, select the states panel and go to the “mouseover” state and set the gradient’s opacity property to “0″ and change the stroke color of the rectangle from grey to white

Change the transition duration to 0.3 sec and set the transition to “cubic in”

XAML code

XAML code – Resource Dictionary

Expression Blend Tip #2 in Rendering Effects

admin — Tue, 27 Apr 2010 00:48:26 +0000

In a previous tip I showed how Expression Blend does not render effects if you are zoomed in above 400%. More times than not I am zoomed in well above 400% when I am designing UI components. I found out how to change the zoom setting to 800% and render the effects properly and allow me to design how I am accustomed to.

To change the percentage that effects will be rendered
1- Go to Tools/Options
2- Select “Artboard” from the list
3- Change the “Zoom threshold” from 400% to 800%

Effects now render even when zoomed in at 800%

Gradient capabilities in Silverlight fonts

admin — Mon, 26 Apr 2010 02:52:48 +0000

In the following tutorial I will show how extensive the font capabilities in Silverlight are. Being able to display beautiful fonts within xaml allows the ability to programmatically alter a designed font with gradients and drop shadows applied.

1- place text on artboard
2- select the gradient tab on the properties panel and apply any style gradient

Gradient and dropshadow effect applied to fonts

Silverlight

XAML code

Expression Blend Tip in Rendering Effects

admin — Fri, 23 Apr 2010 09:55:15 +0000

This is a tip for developers using Expression Blend creating effects. Effects do not render if you are zoomed in above 400%. More times than not I am zoomed in well above 400% when I am designing UI components. So I was confused as to why I couldn’t see the rollover effect that I was applying to my component.

Zoomed in at 800%, effects are not visible

Zoomed in at 400%, effects render

Fluid layout and Fullscreen in Silverlight

admin — Wed, 21 Apr 2010 03:00:57 +0000

In this tutorial we will have a Silverlight application take up the entire webpage and have the capablity to go fullscreen. This will allow you to create Silverlight applications that take up 100% of the width and height of html pages.

1- Place a rectangle on the stage
2- Set the margins to Margin=”8,8,8,42″ which will place the rectangle at 8 from the left, right and top and 42 from the bottom.
3- Place a button on the stage and set its width to 120
4- With the button selected select the “events” panel
5- Enter “toggleFullscreen” on the Click event
6- Add code to handle the toggling of the fullscreen window status

Click the button to go Fullscreen and have a fluid layout

XAML code

C# code


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 Fullscreen
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void toggleFullscreen(object sender, System.Windows.RoutedEventArgs e)
		{
			if (Application.Current.Host.Content.IsFullScreen)
			{
				Application.Current.Host.Content.IsFullScreen = false;
			}
			else
			{
				Application.Current.Host.Content.IsFullScreen = true;
			}
		}
	}
}

Building a Windows Phone 7 Twitter Application using Silverlight in Blend 4 – Part2

admin — Fri, 26 Mar 2010 10:15:21 +0000

This is part 2 of “Building a Windows Phone 7 Twitter Application using Silverlight in Blend 4″. In this tutorial we will build a Twitter user profile screen. You will be able to display the user image, follower count, friend count, status post count, user description and load the user page background image.

View all parts of the tutorial
Part 1 – Search by Twitter User status
Part 2 – Display Twitter user details

Screenshot of user profile screen

XAML code

C# code


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;
using System.Windows.Media.Imaging;

namespace WindowsPhoneApplication2
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

		    private void lookup_Click(object sender, System.Windows.RoutedEventArgs e)
        {
        	WebClient twitter = new WebClient();
			twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
			twitter.DownloadStringAsync(new Uri("http://twitter.com/users/" + username.Text +".xml"));
		}

		void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
		{
			if(e.Error != null)
				return;

			XElement xmlTweets = XElement.Parse(e.Result);
			img.Source = new BitmapImage(new Uri(xmlTweets.Element("profile_image_url").Value, UriKind.Absolute));
			twittername.Text = xmlTweets.Element("name").Value;
			followers.Text = xmlTweets.Element("followers_count").Value;
			friends.Text = xmlTweets.Element("friends_count").Value;
			statuses.Text = xmlTweets.Element("statuses_count").Value;
			description.Text = xmlTweets.Element("description").Value;
			imgBackground.Source = new BitmapImage(new Uri(xmlTweets.Element("profile_background_image_url").Value, UriKind.Absolute));
		}
    }
}

Windows Phone Application Tip in Blend 4

admin — Tue, 23 Mar 2010 09:41:35 +0000

This is a tip for developers using Blend 4 to create Windows Phone Applications. By default it seems that the ability to rotate the emulator and it contents is not set. A bit of code is necessary to have the contents of the application rotate properly with the emulator.

Note: In Visual Studio the code is included, this is a Blend 4 specific issue.

Default behavior

After applying code

C# code – Add line 21 SupportedOrientations =

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace OrientationTest
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
			SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
        }
    }
}

Building a Windows Phone 7 Twitter Application using Silverlight in Blend 4

admin — Mon, 22 Mar 2010 02:55:18 +0000

First I would like to say that the code is from Scott Gu’s article Building a Windows Phone 7 Twitter Application using Silverlight. I am very excited that Silverlight will soon be capable of working on Windows Phones. Designing for the phone brings numerous design and user experience problems not associated with the average 20-30 inch computer monitors. About 6 months ago I began tackling those problems in my previous Blend tutorials for layout, animation and video within a iPhone interface.

Goal, I wanted to see if I could extend Scott’s app to do the following:

Add a custom design
Add functionality – currently you can only look up a user’s timeline. The goal would be to be able to post, search etc to Twitter, basically a full fledged Twitter application. This tutorial tackles the design.
Add a main screen to access the different screens with animation for the screen changes.

Challenges
Gradients in Blend 4 seem to not work well as of yet. A major part of my design was to use a gradient as a background but using a rectangle with a gradient produced banding. As a last resort I imported a gradient jpg and it produced slightly better results.

The 100% UI size in Blend is not the same as the emulator. If you want to design to the emulator the dimensions are 335×558.
If you want the UI in Blend to match the emulator set the layout to 70%.

To remove the default color of the list box Property=”Background” Value=”Transparent”

View all parts of the tutorial
Part 1 – Search by Twitter User status
Part 2 – Display Twitter user details

Screenshots of original app and new design applied

XAML code

C# code


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;

namespace WindowsPhoneApplication2
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

		    private void lookup_Click(object sender, System.Windows.RoutedEventArgs e)
        {
        	WebClient twitter = new WebClient();
			twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
        	twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + username.Text ));
		}

		void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
		{
			if(e.Error != null)
				return;

			XElement xmlTweets = XElement.Parse(e.Result);

			listBox1.ItemsSource = from tweet in xmlTweets.Descendants("status")
				select new TwitterItem
			{
				ImageSource = tweet.Element("user").Element("profile_image_url").Value,
				Message = tweet.Element("text").Value,
				UserName = tweet.Element("user").Element("screen_name").Value
			};
		}
    }
}

Reversing Gradient stops in Silverlight

admin — Tue, 12 Jan 2010 07:43:18 +0000

In this tutorial I will show how to reverse the gradient stops in Microsoft Blend.

Complex gradients
A complex gradient is a gradient that has multiple gradient stops such as the image below which has 7.

Reverse Gradient stops button
You can perform a reversal of all your gradient stops by one simple click. In the image below the arrow is pointing to the button in the properties panel to reverse the gradient stops.

Perfect reversal
As you can see the gradient stops have been reversed exactly, there is no need to guess.

Reversed Gradient
And in one simple click you can have a perfectly reversed gradient.

Using RotationY to rotate Objects in Silverlight

admin — Thu, 31 Dec 2009 05:34:52 +0000

In this tutorial we will rotate an image left to right with a slider control.

Steps
1- Place an image on the stage
2- on the image add a PlaneProjection, this can easily be done by editing the Projection / Rotation / Y in the properties panel
3- name the PlaneProjection to x:Name=”rotater”
4- add a slider to the stage
5- name the slider x:Name=”rotateYSlider”
6- on the slider set ValueChanged=”changeRotateY”

View all parts of the tutorial
Part 1 – Scaling Objects with a Slider control in Silverlight
Part 2 – Using RotationX to rotate Objects in Silverlight
Part 3 – Using RotationY to rotate Objects in Silverlight

Use the Rotate Y slider to rotate the image

XAML code

C# code


private void changeRotateY(object sender, System.Windows.RoutedPropertyChangedEventArgs e)
{
	rotater.RotationY = rotateYSlider.Value;
	rotater.RotationY = rotateYSlider.Value;
}

Embedding fonts in Silverlight

admin — Mon, 28 Dec 2009 03:04:58 +0000

In this tutorial I will show how to embed a font in Silverlight and show the increase in file size that will occur when doing so.

Placing a Textblock component on the stage and using a built-in Silverlight font such as “Arial” the xap file created will be 4 kb. However, if try to use a font such as “Myriad Pro” when you view the results panel you will see a message “The font, Myriad Pro, isn’t a built-in Silverlight font. You must embed this font for it to display in your Silverlight Application.”

Embedding a font is as simple as selecting the “Embed” checkbox in the text properties panel.
One thing to note when embedding the font “Myriad Pro” the xap file size becomes 831 kb.

XAML code

Using RotationX to rotate Objects in Silverlight

admin — Sun, 13 Dec 2009 23:02:04 +0000

In this tutorial we will rotate an image with a slider control. This is the 2nd tutorial of image transformations, the first tutorial ‘Scaling Objects with a Slider control in Silverlight’

Steps
1- Place an image on the stage
2- on the image add a PlaneProjection, this can easily be done by editing the Projection / Rotation / X in the properties panel
3- name RotationX to x:Name=”rotateX”
4- add a slider to the stage
5- name the slider x:Name=”rotateXSlider”
6- on the slider set ValueChanged=”changeRotateX”

Use the Rotate X slider to rotate the image

XAML code

C# code


private void changeRotateX(object sender, System.Windows.RoutedPropertyChangedEventArgs e)
{
	rotateX.RotationX = rotateXSlider.Value;
	rotateX.RotationX = rotateXSlider.Value;
}

Silverlight Tip – Creating rounded corners in Silverlight

admin — Sun, 13 Dec 2009 02:37:42 +0000

In this tutorial I will show how to create a rounded corner on an object. In a previous tutorial Scaling Objects with a Slider control in Silverlight, The design of the slider control I wanted had a rounded edge. Programmatically you can set the RadiusX and RadiusY properties but I wanted to do this within Microsoft Blend design mode.

The object I wanted to edit was the ‘horizontaltracklargechangedecreaserepeatbutton’ layer in the slider control. Once I was within the object I created a ‘Rectangle’, selected it and handles in the top left corner appeared. Simply drag in and out on the handles and all corners of the objects will go from square to rounded. FYI, the RadiusX and RadiusY of this control is 2.75.

Scaling Objects with a Slider control in Silverlight

admin — Sun, 13 Dec 2009 01:03:36 +0000

In this tutorial we will scale an image with a slider control.

Steps
1- Place an image on the stage
2- add a transform group to that image, this can easily be accomplished by editing the scale property
3- name ScaleX to x:Name=”scaleTransform”
4- add a slider to the stage
5- name the slider x:Name=”scaleSlider”
6- on the slider set ValueChanged=”changeScale”

Use the slider to scale the image

XAML code

C# code


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 ScaleObject
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
			scaleSlider.Value = 7;
		}

		private void changeScale(object sender, System.Windows.RoutedPropertyChangedEventArgs e)
		{
			scaleTransform.ScaleX = scaleSlider.Value;
   			scaleTransform.ScaleY = scaleSlider.Value;
		}
	}
}

Building a Start Playing button for your Hulu inspired SilverLight video player

admin — Fri, 11 Dec 2009 05:14:07 +0000

In this tutorial we will create a start play button on launch of your Hulu inspired SilverLight video player.

Steps
1- Set the media element’s AutoPlay=”False”
2- Place a button in the middle of the stage
3- Replace the graphics on normal and mouseover states
4- on click of start button set the buttons visibility to collapsed, set the media element to play

View all parts of the tutorial
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

XAML code

C# code


	startButton.Visibility = Visibility.Collapsed;
	controlBar.Visibility = Visibility.Visible;
	mp.Play();

Building a Volume Slider for your Hulu inspired SilverLight video player

admin — Fri, 11 Dec 2009 00:16:19 +0000

In this tutorial we will edit a slider control and use it as our volume slider control. This volume slider will allow the user the ability to scrub the volume from 0-100%.

Steps
1- Place a slider control on the stage
2- Right click on the slider control and select “Edit Template/Edit a copy”
3- Replace the graphics for ‘HorizontalThumb’ and ‘TrackRectangle’
4- Databind the Media Element control ‘volume’ property to the volume slider
5- Set the value property of the volume slider to 1

XAML code

Silverlight Tip – Editing selections from the Objects and Timeline panel

admin — Thu, 10 Dec 2009 02:13:47 +0000

To me, it is the little things that make you more productive within a given environment that I constantly search for. Since I have only been working with Silverlight for less than 2 months there are cool things I find almost daily. I have not shared those little things since they are not full fledged tutorials, but that I am changing that today. If it helped me than perphaps it can help someone else, and that is the main reason I started to blog. I was building a custom volume slider for my video player and I was having difficulty selecting the ‘HorizontalThumb’ object from the Blend horizontal slider component and found a way to avoid wasting time.

When you are editing a Silverlight component within Blend to make your own custom component you will see multiple objects. Selecting the object you want to edit can become frustrating. Simply select the object you want to edit by selecting it from the Objects and Timeline layer and right click and do your editing.

Using Transition Preview within Microsoft Blend

admin — Mon, 07 Dec 2009 00:22:02 +0000

In this video I demonstrate the Transition Preview within Microsoft Expression Blend. This will save lots of time when creating states and not having to run the project.

Building the Time Slider control for your Hulu inspired SilverLight video player

admin — Sun, 06 Dec 2009 15:19:23 +0000

This is part 6 in our series of building a Hulu inspired video player. In this tutorial we will be building the slider time display control.

We will take the static design of UI design

1- Replace a slider of type hSlider
2- Replace the design elements

XAML code

C# code


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 HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public double barSize;
		System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();

		public hulu_player()
		{
			InitializeComponent();
			myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500);
            myDispatcherTimer.Tick += new EventHandler(setTimeControl);
            myDispatcherTimer.Start();
		}

		private void setTimeControl(object o, EventArgs sender)
		{
			current.Text = String.Format("{0:00}:{1:00}:{2:00}", mp.Position.Hours, mp.Position.Minutes, mp.Position.Seconds);
		}

		private void downloadProgressHandler(object sender, System.Windows.RoutedEventArgs e)
		{

			total.Text = String.Format("{0:00}:{1:00}:{2:00}", mp.NaturalDuration.TimeSpan.Hours, mp.NaturalDuration.TimeSpan.Minutes, mp.NaturalDuration.TimeSpan.Seconds);
		}
	}
}

Building a Volume Control for your Hulu inspired SilverLight video player

admin — Sat, 05 Dec 2009 18:07:18 +0000

This is Part 5 in a series of tutorials demonstrating how to build a Hulu inspired video player in Silverlight 3.
In this video we will show how to databind a media element’s isMuted property to a toggle button volume control’s isChecked property.

XAML code

Drag and Drop images from Filesystem to Silverlight 4 Applications

admin — Thu, 26 Nov 2009 19:27:37 +0000

In this video I show how to drag and drop images from the filesystem into a Silverlight 4 application.
On an image component simply add a drop event and set AllowDrop=”True”
You will need to download the tools to build Silverlight 4 beta applications, make sure to download Microsoft Expression Blend 4.

XAML code

C# code


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;
using System.IO;
using System.Windows.Media.Imaging;

namespace SilverlightApplication14
{
	public partial class IPhoneMain : UserControl
	{
		public IPhoneMain()
		{
			InitializeComponent();
		}

		private void OnDropEvent(object sender, DragEventArgs e)
		{
			FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

			foreach (FileInfo fileInfo in files)
			{
				FileStream fs = fileInfo.OpenRead();
				BitmapImage bi = new BitmapImage();
				bi.SetSource(fs);
				img.Source = bi;
				fs.Close();
			}
		}
	}
}

Databinding controls in SilverLight 3

admin — Tue, 17 Nov 2009 12:57:47 +0000

In the following video I will show how to Databind a progressbar’s width to the position of a video. The Databinding feature in Microsoft Expression Blend 3 allows this interaction without the need to write one of code.

You can view my article on Databinding here

Building a Download Progress Bar for your Hulu inspired SilverLight video player

admin — Sat, 14 Nov 2009 18:16:49 +0000

This is part 4 in our series of building a Hulu inspired video player. In this tutorial we will be building a download progress bar.

We will take the design of our download progress bar and set it’s width equal to the position of the video’s DownloadProgress property. To make this auto-update we will hook into the ‘DownloadProgressChanged’ event.

1- Place a rectangle on the stage, on a layer below the progress bar
2- Set the rectangle’s HorizontalAlignment to Left
2- Set the rectangle’s color to white and its alpha to 20%
3- On the DownloadProgressChanged event of the mediaElement we will execute code

The end result in code is: loadProgressBar.Width = mp.DownloadProgress * bar.ActualWidth;

XAML code

C# code


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 HuluSilverLight
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void downloadProgressHandler(object sender, System.Windows.RoutedEventArgs e)
		{
			loadProgressBar.Width = mp.DownloadProgress * bar.ActualWidth;
		}
	}
}

Building a Progress Bar for your Hulu inspired SilverLight video player

admin — Fri, 13 Nov 2009 12:32:13 +0000

This is part 3 in our series of building a Hulu inspired video player. In this tutorial we will be building a progress bar.

We will take the design of our progress bar and set it’s width equal to the position of the video’s current position. To make this dynamic and without needing to write any code we will use the concept of Binding.

You can view a video on Databinding here
1- Place a rectangle on the stage
2- Set the rectangle’s HorizontalAlignment to Left
2- Set the rectangle’s color to white and its alpha to 20%
3- Bind the width property of the rectangle to the Position.TotalSeconds of the mediaElement

In design view
Select the rectangle
Click the yellow box next to the width property.
Select ‘Databinding’
Select the ‘Element Property’ tab
In the “Scene Elements’ list, select the mediaElement control
In the properties list select ‘Position / TotalSeconds’

The end result in XAML is: Width=”{Binding Position.TotalSeconds, ElementName=mp, Mode=OneWay}”

XAML code

C# code


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 HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public hulu_player()
		{
			InitializeComponent();
		}

		private void pauseVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Pause();
		}

		private void playVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Play();
		}

	}
}

Loading external video into your Hulu inspired Silverlight video player

admin — Wed, 11 Nov 2009 12:47:41 +0000

This is part 2 in our series of building a Hulu inspired video player. This tutorial may well be the most important in the process of building a Silverlight video player.

In our previous example “Building a Play-Pause control for a Hulu inspired SilverLight video player” the video was included within the Silverlight file. This caused a very bad user experience because the user had to wait to load the entire video before the file was shown.

By setting the video source to be remote, the Silverlight file is now 14k as compared to 6,700k. Now, the Silverlight file which simply contains a MediaElement is loaded almost instantaneously and the video plays as it loads.

You can play and pause the video

XAML code

C# code


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 HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public hulu_player()
		{
			InitializeComponent();
		}

		private void pauseVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Pause();
		}

		private void playVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Play();
		}

	}
}

Building a Play-Pause control for a Hulu inspired SilverLight video player

admin — Tue, 10 Nov 2009 05:26:34 +0000

The following example is the Part 1 in a series of tutorials demonstrating how to build a Hulu inspired video player in Silverlight 3. This tutorial shows how to create a play-pause button control utilizing the ToggleButton control.

1- Place a ToggleButton on the stage
2- Right click and select “Edit Template / Edit a copy”
3- Name your control
4- Delete everything in the component – FocusVisualElement, DisabledVisualElement, contentPresenter and the Background. Do not delete the top level Grid.
5- In the states panel add designs for the Normal, MouseOver and Pressed states.
6- Add the Pause icon to the Unchecked CheckStates and the Play icon to the Checked CheckState.
7- Add a MediaElement control and set it’s source.
8- On your custom control add the code to pause and play the video on the Checked and UnChecked events.

You can play and pause the video

XAML code

C# code


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 HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public hulu_player()
		{
			InitializeComponent();
		}

		private void pauseVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Pause();
		}

		private void playVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Play();
		}

	}
}

Dynamically creating thumbnails with WriteableBitmap and DispatcherTimer in Silverlight 3

admin — Sat, 07 Nov 2009 20:43:13 +0000

In the previous example “Creating thumbnails of video frames with WriteableBitmap in Microsoft Expression Blend 3″ the user was able to create thumbnails by clicking on the video display.

The following example shows how thumbnails could be dynamically created by using DispatcherTimer thereby eliminating the need to click.

To stop the timer from firing, I simply hooked into the MediaElement mediaEnded event.

XAML code

C# code


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;
using System.Windows.Media.Imaging;

namespace ImageSnapshot
{
	public partial class MainPage : UserControl
	{
		System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();

		public MainPage()
		{
			InitializeComponent();

            myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500);
            myDispatcherTimer.Tick += new EventHandler(takeSnapShot);
            myDispatcherTimer.Start();
		}
		private void takeSnapShot(object o, EventArgs sender)
		{
			WriteableBitmap snapShot = new WriteableBitmap(myMediaElement, null);

			Image image = new Image();
			image.Height = 89;
			image.Margin = new Thickness(10);
			image.Source = snapShot;

			thumbs.Children.Add(image);
			scroller.UpdateLayout();
			double scrollPos = thumbs.ActualWidth;
			scroller.ScrollToHorizontalOffset(scrollPos);
		}

		private void stopTimer(object sender, System.Windows.RoutedEventArgs e)
		{
			myDispatcherTimer.Stop();
		}
	}
}

Creating thumbnails of video frames with WriteableBitmap in Microsoft Expression Blend 3

admin — Sat, 07 Nov 2009 08:03:44 +0000

Click on video to create thumbnails
The following example shows how to create thumbnails by using the WriteableBitmap class.

XAML code

C# code


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;
using System.Windows.Media.Imaging;

namespace ImageSnapshot
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void takeSnapShot(object sender, MouseButtonEventArgs e)
		{
			WriteableBitmap snapShot = new WriteableBitmap(myMediaElement, null);

			Image image = new Image();
			image.Height = 89;
			image.Margin = new Thickness(10);
			image.Source = snapShot;

			thumbs.Children.Add(image);
			scroller.UpdateLayout();
			double scrollPos = thumbs.ActualWidth;
			scroller.ScrollToHorizontalOffset(scrollPos);
		}
	}
}

Introduction to Animation in Microsoft Expression Blend 3

admin — Fri, 30 Oct 2009 10:07:16 +0000

In this video I discuss a few keys topics of animation in Microsoft Expression Blend 3. Topics include storyboards, creating keyframes, setting transforms on objects and previewing within the Blend IDE.

Importing graphics from Adobe Illustrator into Microsoft Expression Blend 3

admin — Thu, 29 Oct 2009 23:11:55 +0000

In this video I show how to import vector graphics from Adobe Illustrator and load it into a user control in Blend 3.

Implementing a custom hit area in Microsoft Expression Blend 3

admin — Thu, 29 Oct 2009 05:24:10 +0000

In the following video I show how to implement a custom hit area in Microsoft Expression Blend 3.

Implementing a custom cursor in Microsoft Expression Blend 3

admin — Wed, 28 Oct 2009 12:13:47 +0000

In The following video I show how to implement a custom mouse cursor in Microsoft Expression Blend 3.

Exploring the Gradient tool in Microsoft Expression Blend 3

admin — Wed, 28 Oct 2009 00:53:06 +0000

The following video shows how to work with the gradient tool in MIcrosoft Expression Blend 3. The video goes in depth of gradient stops, reversing gradients, and the xaml output.

Exploring the Canvas control in Microsoft Expression Blend 3

admin — Tue, 27 Oct 2009 08:42:21 +0000

This video will show you how to use the canvas control in Microsoft Expression Blend 3. The canvas control allows for absolute positioning and the ability to stack objects on top of each other. This control is the designers best friend when creating interfaces in Blend 3.

Creating a Silverlight video player in Microsoft Expression Blend 3

admin — Mon, 26 Oct 2009 03:20:32 +0000

This video will show you how to add a video player in Microsoft Expression Blend 3. Adding video to Silverlight projects ia as simple as placing a media element control from the assets panel on the stage and setting the media element’s source to a video file.

Exploring the Objects panel in Microsoft Expression Blend 3

admin — Wed, 21 Oct 2009 07:50:17 +0000

This video will show you a few tips on the object panel in Expression Blend 3.

Creating a Silverlight button with Microsoft Blend 3

admin — Tue, 20 Oct 2009 09:39:01 +0000

This video tutorial will show how to create a custom button, modify its normal, mouse over and pressed states. Also add animation effects between those states.

Creating a Resource Dictionary with Microsoft Blend 3

admin — Mon, 19 Oct 2009 23:49:48 +0000

This video tutorial will show how to create a resource dictionary for your Microsoft Expression 3 projects. In this video you will see how a gradient could be externalized into the resource dictionary and be used by other objects in your project.