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;
			}
		}
	}
}

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 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.

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

Microsoft blows past Flash and unleashes Silverlight 4 Beta

admin — Thu, 19 Nov 2009 23:50:43 +0000

For the past 2 weeks I have been saying Adobe Flash is done because of Silverlight 3 part1 and part 2. Now, Microsoft releases the beta of Silverlight 4 and I can honestly say that Adobe Flash should get out of the RIA arena entirely. Is this a stretch?, why did anyone think an animation product could compete in the RIA space in the first place?

The manner in which Microsoft released the beta of Silverlight 4 at the Professional Developer Conference on Nov 18th shows me one thing, Microsoft is not only very serious about being the leader in the RIA arena but they are looking to crush the competition, namely Adobe Flash.

First, the speed in which this beta was announced, just 3 months after the release of Silverlight 3. The release of Silverlight 3 was huge, but this beta just completely blows it away. The demos presented at the PDC conference by Scott Guthrie were simply great and just sent the developers into a frenzy.

Secondly, the new features in Silverlight 4 are simply unbelievable. The new features include:
Webcam and microphone support
Printing
Library sharing with WPF
Rich Text
Clipboard access
Right click support
Mouse wheel
Drag and Drop from desktop
MVVM
WCF RIA Services
New Windowing API’s
Notification pop-up support
HTML support
Keyboard in Fullscreen mode
Hardware device access

The planned release of Silverlight 4 is in the first half of 2010.

I love how folks are not agreeing with me on the end of Adobe Flash and sending me emails, the bottom line is that I see this as the modern day “Browser wars” when Microsoft went all out against Netscape and crushed them. I see Microsoft doing the same in the RIA space and Microsoft is going all out to win. Microsoft doing a release like this in 3 months, I ask myself how many resources were ported over from other products to this release?

Developers can start building apps but the player is not pubicly available
Silverlight 4 Beta Information – Get all your downloads here
Silverlight 4 Beta – A guide to the new features
Silverlight 4 runtime

The End of Adobe Flash – Part 2

admin — Wed, 18 Nov 2009 13:13:13 +0000

This is an update to my article on ‘SilverLight will be the Adobe Flash killer’. Tomorrow will be 2 weeks since I have written the article and two very big things have already occurred.

The first is that Adobe cut 9% percent of its workforce on Nov 10th, this is the second huge cut by Adobe in the past year. In my opinion, Adobe is a Desktop publishing company and not a software devleopment company and when/if further cuts occur, they will happen on the Flash teams, not the Photoshop teams.

The second big thing to occur is the yesterday’s article by Techcrunch on was the announcement of a ‘Seesmic for Windows’ client. The entire article seems like a huge jab/left hook at Adobe Air and it’s limitations and all the new capabilities Seesmic will have because of the switch to the Windows platform.

What you will see as a result of Seesmic moving to Windows is a constant reminder of the Windows platform due to the nature in which Loic delivers releases, which seems to be almost weekly.

In my original article I basically stated that you could do the same exact things in Silverlight that you could do in Flash. I was hesistant to state that Silverlight was more powerful because I wanted to reach the flash community in a calm rational approach.

Seesmic coming out like this will be the first in many to come on the limitations the Flash/Adobe Air platform as compared to the Microsoft platform.

Two weeks ago I believed it would be 2 years before all the real applications/games on the web would be in Silverlight and Flash would be used for nothing more than creating banners. I think it will be sooner than that now.

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);
		}
	}
}

SilverLight will be the Adobe Flash killer

admin — Fri, 06 Nov 2009 02:03:53 +0000

Prediction
I am making a very big prediction, it is the beginning of the end of Adobe Flash. When I first saw Flash 12 years ago I knew immediately that this was it, it was light years ahead of anything on the web. It is rare that you see something and know immediately that this is going to be big. In the years 1998, 99, 2000 the Flash community was awesome, it was like we were in the wild west just discovering new stuff. I really felt I was in on something and could not believe that other people could not see the same.

The Debate
You may have seen numerous articles on the Flash vs Silverlight debate such as this one. I believe that the articles being written and discussions that are taking place are simply asking the wrong questions.

The discussions should not be between the specific details of Flash and Silverlight. But it should be at a higher level, such as “How long will it take me to become a professional in Silverlight?”, by professional, I mean someone is compensated for their work. Just think of the possibilities that are opened up by learning this product, you basically open yourself up to a whole new industry.

Learning Curve
So if I am right, the million dollar question is – How long is it going to take to learn this new software product?
In my honest opinion if you are a Flash developer as soon as you start the program you will know about 60% of it right out of the box. Simply due to the similarities between Flash and Blend, practically the same tools, timeline, stage, properties, layout code etc. The following videos I have made are about 30 minutes in total length and will get you up to about 80%. Think about that, 80% knowledge of a new product and you have invested less than an hour.

Animation
Introduction to Animation in Microsoft Expression Blend 3

Integration with Adobe
Importing graphics from Adobe Illustrator into Microsoft Expression Blend 3

Customizing Cursors
Implementing a custom hit area in Microsoft Expression Blend 3

Drawing
Exploring the Gradient tool in Microsoft Expression Blend 3

Layout
Exploring the Canvas control in Microsoft Expression Blend 3

Video
Creating a Silverlight video player in Microsoft Expression Blend 3

Layers
Exploring the Objects panel in Microsoft Expression Blend 3

Creating Buttons
Creating a Silverlight button with Microsoft Blend 3

Styles
Creating a Resource Dictionary with Microsoft Blend 3

Hit Area
Implementing a custom hit area in Microsoft Expression Blend 3

Money
When all is said and done, it comes down to money. If a developer is as knowledgeable in Flash and SilverLight, the Silverlight developer will be compensated more, PERIOD. The flash job opportunities mostly come by way of the Advertising field and game development worlds and the projects built are measured in days.

The Silverlight opportunities will come by way of Engineering based companies. Engineering companies mostly work on projects that are measured in years.

The Bottom Line…
For the last 10 plus years when asked what I do, I would proudly say “I am a flash developer that ….
Moving forward my answer will be “I create user experiences and I use products a,b,c.

Try Silverlight for 60 days for free. I feel like it’s 1998 all over again and can’t believe more people aren’t aware of this movement. I am going to do everything I can to push Silverlight in front of everyone whether they are developers, users or clients.

Either way we will be the winners from this, us the developers. Microsoft and Adobe will be forced to improve.

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.