Paul Yanez » blend

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%

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

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.