Monday, September 01, 2008
I created a quick mashup in Popfly using my Flickr account. Enjoy!
(I highly recommend the full screen option. These pictures are BIG.)
Labels: devlink, jeff blankenburg, popfly, Silverlight
Monday, August 11, 2008
UPDATED: Due to some awesome technical difficulties, I will yet again not be streaming this broadcast live. However, I am recording it, and will be making available as soon as possible. My apologies for the inconvenience.
You may have seen my post about WCF with Silverlight a few months ago, but on Tuesday night, John Stockton (no, not the point guard) will be presenting his take on this at the Cleveland .NET Special Interest Group.
The meeting takes place at the Microsoft offices in Independence, OH on the second Tuesday of every month, which happens to be tomorrow. The meetings start at 5:45, and usually end around 7:30 PM.
After the meeting, there's a group of us that head over to the Winking Lizard on Rockside Road for a late snack and some beverages. I have some of the best conversations with these people, both technical and not-so-much. Make an effort to carve some time out of your busy schedule tomorrow night to participate in both events.
If you can't make it due to deadlines/family/car trouble/agoraphobia/atomic weight, I am also going to be streaming the presentation LIVE over the Internet. All you need to do is open a browser, and go to my page at ustream.tv. You can also watch it on my blog, in this post. I've embedded a player for your convenience. You don't need to register, just show up and get your learn on.
You may have seen my post about WCF with Silverlight a few months ago, but on Tuesday night, John Stockton (no, not the point guard) will be presenting his take on this at the Cleveland .NET Special Interest Group.
The meeting takes place at the Microsoft offices in Independence, OH on the second Tuesday of every month, which happens to be tomorrow. The meetings start at 5:45, and usually end around 7:30 PM.
After the meeting, there's a group of us that head over to the Winking Lizard on Rockside Road for a late snack and some beverages. I have some of the best conversations with these people, both technical and not-so-much. Make an effort to carve some time out of your busy schedule tomorrow night to participate in both events.
If you can't make it due to deadlines/family/car trouble/agoraphobia/atomic weight, I am also going to be streaming the presentation LIVE over the Internet. All you need to do is open a browser, and go to my page at ustream.tv. You can also watch it on my blog, in this post. I've embedded a player for your convenience. You don't need to register, just show up and get your learn on.
Labels: john stockton, Silverlight, web service
Friday, August 08, 2008
NBC will start their broadcast of the 2008 Summer Olympics today. They have partnered with Microsoft to use Silverlight as their video delivery medium. You will be able to watch the events live from Beijing, with multiple events (or multiple angles of the same event) in your browser.
You can even participate in some social networking as well. It will show you what the most popular video feeds are. I'm looking forward to trying it out...
You can watch all of it at http://www.nbcolympics.com, starting today!
Labels: NBC, olympics, Silverlight
Tuesday, June 24, 2008
I like speaking in public. I really enjoy it. But it's been far too long since I've done it. And my next scheduled talk isn't until the end of August, at DevLink.
I'm posting this message to let the world know that I'm ready to get back in the game. Please contact me at jeffrey.blankenburg@microsoft.com if you would like me to come talk to your developers, whether that's internal to your company, or at a user group in your community. I will do my best to accomodate all requests. I've got several new talks ready, as well as a few older favorites that audiences enjoy.
Here they are:
* Building Next Generation Web Apps With Visual Studio 2008
This talk is an overview of Visual Studio 2008 and some of the great new features it has to offer. This includes tools and techniques ranging from the Split view design pane to effectively using LINQ.
* Silverlight 101: The Basics
This talk really is an introduction. We'll talk about XAML, build a basic application, and show the integration with Expression Blend. I would recommend this for any group that wants to get their feet wet with Silverlight.
* Silverlight 301: Way More Than A Spinning Button
In this talk, we will learn how to build a Silverlight application that talks to a SQL server through a WCF web service. We will render the content in a visually appealing way using XAML. And if you ask nicely, I'll even spin a button for ya.
* Cool Microsoft Stuff: The Technologies You Have To Try
This is an overview of some of the amazing things Microsoft is working on behind the scenes. Some of them are available in beta form, but you're guaranteed to see something you've never seen before. This includes technologies like Photosynth, Deep Zoom, and Live Mesh.
* XNA Anyone?
This talk will walk you through the basics of game development using XNA as the platform. We will also talk about game development for the Zune.
I'm posting this message to let the world know that I'm ready to get back in the game. Please contact me at jeffrey.blankenburg@microsoft.com if you would like me to come talk to your developers, whether that's internal to your company, or at a user group in your community. I will do my best to accomodate all requests. I've got several new talks ready, as well as a few older favorites that audiences enjoy.
Here they are:
* Building Next Generation Web Apps With Visual Studio 2008
This talk is an overview of Visual Studio 2008 and some of the great new features it has to offer. This includes tools and techniques ranging from the Split view design pane to effectively using LINQ.
* Silverlight 101: The Basics
This talk really is an introduction. We'll talk about XAML, build a basic application, and show the integration with Expression Blend. I would recommend this for any group that wants to get their feet wet with Silverlight.
* Silverlight 301: Way More Than A Spinning Button
In this talk, we will learn how to build a Silverlight application that talks to a SQL server through a WCF web service. We will render the content in a visually appealing way using XAML. And if you ask nicely, I'll even spin a button for ya.
* Cool Microsoft Stuff: The Technologies You Have To Try
This is an overview of some of the amazing things Microsoft is working on behind the scenes. Some of them are available in beta form, but you're guaranteed to see something you've never seen before. This includes technologies like Photosynth, Deep Zoom, and Live Mesh.
* XNA Anyone?
This talk will walk you through the basics of game development using XNA as the platform. We will also talk about game development for the Zune.
Labels: developer evangelist, jeff blankenburg, microsoft, Silverlight, silverlight 2, software development
Thursday, June 19, 2008
Today I'm going to show how to create a simple WCF service, and consume it from a Silverlight application. This is something you are going to need to do quite often, and if for no other reason, I am documenting this here so that I have it as a reference.
The first thing we need to do is create a Silverlight application. (In order to have all of the Silverlight 2 prerequisites, make sure you visit this page.)
1) I'm going to start from the beginning. First, we need to create a new Silverlight project. I'm naming mine JBWCFService.
2) We will then be prompted to create a web project to accompany our Silverlight project. I choose a Web Application Project from the dropdown.
3) Here is a view of what my solution explorer looks like after the projects are created. I have a Silverlight project called JBWCFService and a Web Application project called JBWCFServiceWeb, not surprisingly.
4) Next, I want to create a SQL database from which to get my data from. I'm not going to walk through all the steps of adding tables, columns, and data. You can certainly find that elsewhere. Here's my adding the SQL database to my project though...
5) OK, it's time to create our service. I'm naming my service MyNewService. It's just another thing to add to our project, so here we go:
6) Once the new service has been created, you will have a few new files in your project. In my case, they are named IMyNewService.cs, MyNewService.svc, and its code-behind, MyNewService.svc.cs. By default, the interface (IMyNewService.cs) will be open and ready for editing. They create a DoWork() method for you, but we're going to delete that and do something more interesting in a little while. First, we need to get LINQ up and running against our data. I am naming mine LINQClasses.
7) In addition to adding the class files necessary, this will also open the LINQ design surface by default. We can just drag items from our data structure right to the left half of the surface, creating ORM class structures that represent our data. In my example, I only have one table, profile, but we can do this for all of our tables, and stored procedures can be dragged to the right half of the surface, creating methods. I have already dragged my table over in the next screenshot (click to enlarge).
8) We also want to make sure that our data is unidirectionally serializable (I like big words). By clicking on the design surface (not one of the table boxes), you can get to the properties of the DataContext, and change the Serialization Mode to "Unidirectional."
9) Now we need our Silverlight project to become aware of our WCF service running in the web application project. To do this, we just need to add a new service reference to the Silverlight project. Click the "Discover" button to find it automatically. This will also automatically spin up a web server for your service to run in. I named my service reference MyNewServiceReference.
10) Ready to write some code? To this point, everything has been handled automatically for us. Now we have to get our hands dirty. Let's go back to our Service interface (IMyNewService.cs). In there, let's get rid of that DoWork() method. Instead, our method is going to return a List of profiles from the database, based on our new classes that were created for us. Because this is an interface, we don't define the actual functionality of the method here, just it's signature. I named my method GetProfilesByLastName.
11) Ok, that was exhausting. Let's have the IDE write some more code for us now. Let's open the code-behind file for MyNewService.svc (MyNewService.svc.cs). You can see that it inherits from the interface we just defined, so right click on the name of the interface, and have it implement the interface for you.
12) Now you've got the shell for the method. We just need to tell this method what to do. Here's where the LINQ comes into play. We need to get a reference to our DataContext from earlier, and then I wrote a simple query to retrieve names from the database based on a last name query. Finally, we return our list of data.
13) Each time we update our service, we will need to update our service reference in the Silverlight project, so that it sees our new methods. Just right click on the service reference and choose "Update Service Reference." Also, we have one small change we need to make to our web.config file as well. If you've been following the instructions, then you can scroll down to the bottom of your web.config and look for the <endpoint binding="wsHttpBinding" /> property. Silverlight only currently supports basicHttpBinding, so we need to change it to that.
14) Next, we need to add one more reference to our Silverlight project before we can finally start working with the XAML. We need to add a reference to System.Windows.Controls.Data so that we can use the DataGrid control in our interface.
15) XAML time. Kinda. We need to include that reference as a namespace in our Page.xaml document. OK, now we can add some controls to our page. I also added a Button, a TextBox, and a DataGrid, inside a couple of StackPanels, for layout purposes.
16) Now, we need to call that method in our service and populate that grid. The first thing we need to do is instantiate our ServiceClient. Now, since we are calling this service asynchronously, we also need to set up an event handler to know when our data has returned so that we can update the DataGrid. There's an excellent bit of shorthand for creating this code automatically. My screenshot shows all of the code I will need, but for the line that starts:
sc.GetProfilesByLastName +=
I only actually typed what is above. After that, I pressed the Tab key twice. The first press of Tab actually finishes out my EventHandler statement. The second Tab press creates my EventHandler method, so that I can add the guts. Finally in my Button_Click method, I need to call the GetProfilesByLastName asynchronously, passing in the value from my TextBox, named DataEntry.
17) The last little touch we need to put on this application is the actual binding of the data to our DataGrid, and we'll do that in the new EventHandler method that was created for us. There's just one line of code in the method:
DataGrid.ItemsSource = e.Result;
So, there you have it. We've created a WCF service that uses LINQ to talk to a SQL server, and a Silverlight 2 application that consumes that service and renders the result. Not bad for 17 steps, and only a few lines of code.
Click here to download the solution files.
The first thing we need to do is create a Silverlight application. (In order to have all of the Silverlight 2 prerequisites, make sure you visit this page.)
1) I'm going to start from the beginning. First, we need to create a new Silverlight project. I'm naming mine JBWCFService.
2) We will then be prompted to create a web project to accompany our Silverlight project. I choose a Web Application Project from the dropdown.
3) Here is a view of what my solution explorer looks like after the projects are created. I have a Silverlight project called JBWCFService and a Web Application project called JBWCFServiceWeb, not surprisingly.
4) Next, I want to create a SQL database from which to get my data from. I'm not going to walk through all the steps of adding tables, columns, and data. You can certainly find that elsewhere. Here's my adding the SQL database to my project though...
5) OK, it's time to create our service. I'm naming my service MyNewService. It's just another thing to add to our project, so here we go:
6) Once the new service has been created, you will have a few new files in your project. In my case, they are named IMyNewService.cs, MyNewService.svc, and its code-behind, MyNewService.svc.cs. By default, the interface (IMyNewService.cs) will be open and ready for editing. They create a DoWork() method for you, but we're going to delete that and do something more interesting in a little while. First, we need to get LINQ up and running against our data. I am naming mine LINQClasses.
7) In addition to adding the class files necessary, this will also open the LINQ design surface by default. We can just drag items from our data structure right to the left half of the surface, creating ORM class structures that represent our data. In my example, I only have one table, profile, but we can do this for all of our tables, and stored procedures can be dragged to the right half of the surface, creating methods. I have already dragged my table over in the next screenshot (click to enlarge).
8) We also want to make sure that our data is unidirectionally serializable (I like big words). By clicking on the design surface (not one of the table boxes), you can get to the properties of the DataContext, and change the Serialization Mode to "Unidirectional."
9) Now we need our Silverlight project to become aware of our WCF service running in the web application project. To do this, we just need to add a new service reference to the Silverlight project. Click the "Discover" button to find it automatically. This will also automatically spin up a web server for your service to run in. I named my service reference MyNewServiceReference.
10) Ready to write some code? To this point, everything has been handled automatically for us. Now we have to get our hands dirty. Let's go back to our Service interface (IMyNewService.cs). In there, let's get rid of that DoWork() method. Instead, our method is going to return a List of profiles from the database, based on our new classes that were created for us. Because this is an interface, we don't define the actual functionality of the method here, just it's signature. I named my method GetProfilesByLastName.
11) Ok, that was exhausting. Let's have the IDE write some more code for us now. Let's open the code-behind file for MyNewService.svc (MyNewService.svc.cs). You can see that it inherits from the interface we just defined, so right click on the name of the interface, and have it implement the interface for you.
12) Now you've got the shell for the method. We just need to tell this method what to do. Here's where the LINQ comes into play. We need to get a reference to our DataContext from earlier, and then I wrote a simple query to retrieve names from the database based on a last name query. Finally, we return our list of data.
13) Each time we update our service, we will need to update our service reference in the Silverlight project, so that it sees our new methods. Just right click on the service reference and choose "Update Service Reference." Also, we have one small change we need to make to our web.config file as well. If you've been following the instructions, then you can scroll down to the bottom of your web.config and look for the <endpoint binding="wsHttpBinding" /> property. Silverlight only currently supports basicHttpBinding, so we need to change it to that.
14) Next, we need to add one more reference to our Silverlight project before we can finally start working with the XAML. We need to add a reference to System.Windows.Controls.Data so that we can use the DataGrid control in our interface.
15) XAML time. Kinda. We need to include that reference as a namespace in our Page.xaml document. OK, now we can add some controls to our page. I also added a Button, a TextBox, and a DataGrid, inside a couple of StackPanels, for layout purposes.
16) Now, we need to call that method in our service and populate that grid. The first thing we need to do is instantiate our ServiceClient. Now, since we are calling this service asynchronously, we also need to set up an event handler to know when our data has returned so that we can update the DataGrid. There's an excellent bit of shorthand for creating this code automatically. My screenshot shows all of the code I will need, but for the line that starts:
sc.GetProfilesByLastName +=
I only actually typed what is above. After that, I pressed the Tab key twice. The first press of Tab actually finishes out my EventHandler statement. The second Tab press creates my EventHandler method, so that I can add the guts. Finally in my Button_Click method, I need to call the GetProfilesByLastName asynchronously, passing in the value from my TextBox, named DataEntry.
17) The last little touch we need to put on this application is the actual binding of the data to our DataGrid, and we'll do that in the new EventHandler method that was created for us. There's just one line of code in the method:
DataGrid.ItemsSource = e.Result;
So, there you have it. We've created a WCF service that uses LINQ to talk to a SQL server, and a Silverlight 2 application that consumes that service and renders the result. Not bad for 17 steps, and only a few lines of code.
Click here to download the solution files.
Labels: jeff blankenburg, linq to sql, microsoft, Silverlight, silverlight 2, tutorial, wcf, web service
Wednesday, June 18, 2008
So I encountered a bug today. A real-life, this-hasn't-been-fixed-yet bug in Silverlight 2 Beta 2. And I gotta think it's pretty common. After all of my posting on layout options, I think it's my responsibility to mention this one. It is also documented on the Silverlight forums, but I want to make sure it's shared here as well...
Much of what I am doing for my pet Silverlight 2 project requires me to show/hide different canvases, depending on which "page" you are on within my site. I've seen some Silverlight sites that are actually just different SL apps, and links actually take you to a seperate .aspx page for each one. I wanted to keep the user experience without any postbacks. All AJAX. No wavering from my page. Because of this, each navigation button just hides everything and shows the section it represents.
So each "page" is represented as a canvas. And for the simple example below, it works perfectly.
However, when your canvas contains elements that derive from Control, you don't get the behavior you expect. Here's my canvas with real stuff in it:
What I am finding is that my canvas just doesn't show up. In my code, I know my syntax is correct, because it works for all of the simple canvases like the first one I showed. The moment I add a Button, TextBox, Radio Button, User Controls, etc. the Canvas no longer will change its Visibility property from Collapsed to Visible. This, it would seem, is a major problem. However, there's a pretty simple workaround for this.
Click here to see the example running.
By making my base element for this function something other than a Canvas, it works perfectly. In my example, I have used a StackPanel, and just put my Canvas right inside it as the only element. In this example, all of the contents of my "page" will display as expected now.
Sure, it's a little work-around-y, but it gets the job done until this bug is corrected.
Has anyone else encountered this? What was your solution?
Much of what I am doing for my pet Silverlight 2 project requires me to show/hide different canvases, depending on which "page" you are on within my site. I've seen some Silverlight sites that are actually just different SL apps, and links actually take you to a seperate .aspx page for each one. I wanted to keep the user experience without any postbacks. All AJAX. No wavering from my page. Because of this, each navigation button just hides everything and shows the section it represents.
So each "page" is represented as a canvas. And for the simple example below, it works perfectly.
However, when your canvas contains elements that derive from Control, you don't get the behavior you expect. Here's my canvas with real stuff in it:
What I am finding is that my canvas just doesn't show up. In my code, I know my syntax is correct, because it works for all of the simple canvases like the first one I showed. The moment I add a Button, TextBox, Radio Button, User Controls, etc. the Canvas no longer will change its Visibility property from Collapsed to Visible. This, it would seem, is a major problem. However, there's a pretty simple workaround for this.
Click here to see the example running.
By making my base element for this function something other than a Canvas, it works perfectly. In my example, I have used a StackPanel, and just put my Canvas right inside it as the only element. In this example, all of the contents of my "page" will display as expected now.
Sure, it's a little work-around-y, but it gets the job done until this bug is corrected.
Has anyone else encountered this? What was your solution?
Labels: canvas, jeff blankenburg, Silverlight, silverlight 2, visibility
Friday, June 06, 2008
(See Part 1 and Part 2 first...)
In the third and final installment of this series on Silverlight Layout, we are going to be discussing my preferred option for interface creation: The Grid. In many ways, I would compare this to table based layout in HTML (which is generally a bad word), but I will come to its defense in Silverlight today.
There are many reasons why table-based layouts should not be used in HTML. A few of them are:
1) Tables are very heavy. With all of the <tr> and <td> tags you need, the page bloats quickly.
2) CSS is the right way to do it. Once you harness the power of CSS, you have far greater control of your layout (not to mention accessibility) than you do with tables.
3) Tables are very difficult to manipulate once they are in place. If you've ever tried to move things around in a legacy table layout, you know what I'm talking about.
The reason I am recommending this type of layout is because those problems have been addressed in Silverlight with the <Grid>. So let's take a look at the code.
You'll notice that this doesn't really look like HTML table layout that you've seen in the past. Instead, we've seperated (still in the same file, mind you) the content from the layout. We don't have to wrap each element in a set of table tags. We define a grid, and then we assign each element to a cell of that grid. I've also turned on the ShowGridLines attribute, so we can see exactly what the grid looks like. We can also assign height and width values to the cells of the grid, up to and including the wildcard "*" character. This tells the application to use the rest of the remaining space for that cell. If you have more than one wildcard cell, it will split the unclaimed space evenly between them. Please note that the grid starts with 0,0, not 1,1. So our Red Rectangle is assigned to Grid.Cell="0" and Grid.Row="0" which puts it in the top left corner. Each of the respective rectangles after that is assigned to their respective grid location as well. The design pane of Visual Studio 2008 looks like this with the XAML I just used:
You'll notice that the Black rectangle is missing. That is the one assigned to the wildcard space. In the design pane, there's not a Canvas width and height defined. In the XAML, I did not specify a width and height for my Grid. This causes it to fill the entire space of the window it is rendered in. When we run the application, however, you'll see that the black box is, in fact, there, and takes up the rest of your browser window.
In my next post, I will talk about using templates to create "styles" that can be reused by your XAML elements.
In the third and final installment of this series on Silverlight Layout, we are going to be discussing my preferred option for interface creation: The Grid. In many ways, I would compare this to table based layout in HTML (which is generally a bad word), but I will come to its defense in Silverlight today.
There are many reasons why table-based layouts should not be used in HTML. A few of them are:
1) Tables are very heavy. With all of the <tr> and <td> tags you need, the page bloats quickly.
2) CSS is the right way to do it. Once you harness the power of CSS, you have far greater control of your layout (not to mention accessibility) than you do with tables.
3) Tables are very difficult to manipulate once they are in place. If you've ever tried to move things around in a legacy table layout, you know what I'm talking about.
The reason I am recommending this type of layout is because those problems have been addressed in Silverlight with the <Grid>. So let's take a look at the code.
You'll notice that this doesn't really look like HTML table layout that you've seen in the past. Instead, we've seperated (still in the same file, mind you) the content from the layout. We don't have to wrap each element in a set of table tags. We define a grid, and then we assign each element to a cell of that grid. I've also turned on the ShowGridLines attribute, so we can see exactly what the grid looks like. We can also assign height and width values to the cells of the grid, up to and including the wildcard "*" character. This tells the application to use the rest of the remaining space for that cell. If you have more than one wildcard cell, it will split the unclaimed space evenly between them. Please note that the grid starts with 0,0, not 1,1. So our Red Rectangle is assigned to Grid.Cell="0" and Grid.Row="0" which puts it in the top left corner. Each of the respective rectangles after that is assigned to their respective grid location as well. The design pane of Visual Studio 2008 looks like this with the XAML I just used:
You'll notice that the Black rectangle is missing. That is the one assigned to the wildcard space. In the design pane, there's not a Canvas width and height defined. In the XAML, I did not specify a width and height for my Grid. This causes it to fill the entire space of the window it is rendered in. When we run the application, however, you'll see that the black box is, in fact, there, and takes up the rest of your browser window.
In my next post, I will talk about using templates to create "styles" that can be reused by your XAML elements.
Labels: grid, jeff blankenburg, layout, microsoft, Silverlight, tables, visual studio 2008, XAML
(See Part 1 first...)
Today we are looking at a second way to lay out your interface in Silverlight. This will be far more familiar to the CSS fanatics out there. The primary concept is simple...we'll be using a StackPanel control to position our elements.
For those of you less familiar with CSS, this is more of a flow-based layout. As the size of the Silverlight container grows and shrinks, you will find that the elements will move to accomodate that space. I, personally, would not recommend approaching your entire interface with this technique, but it certainly makes sense for small portions, like navigations and lists of data.
Most of our positions will be determined by manipulating the margins of the individual elements on the page. In doing so, we can place our elements specific distances apart without having to specify their exact position on that page.
In the example below, I have 6 buttons that I want to arrange in a 3x2 block. I start with an outer stack panel that, by default, will stack my elements vertically. However, I want to have two rows of 3 buttons each, so I am going to nest two more stack panels. Each of these will have the Orientation attribute of the StackPanel set to Horizontal, to create the rows.
For demonstration purposes, I also modified the margins of a few of the buttons, just to show that we are merely stacking these elements. This is not a grid, or table, and certainly not absolute positioning. These elements are merely stacked, either horizontally or vertically, with margins as the leverage to move things around a bit.
NOTE: I have a major complaint about how margins were implemented in Silverlight.
Again, for those of you familiar with CSS, the de-facto standard for specifying margin sizes was one of two formats:
margin-left:10px;
margin-right:10px;
etc.
OR
margin:0 10px 0 10px;
Each of those examples would have given you a 10 pixel margin on both the left and right of the element you were styling. In the second example, we are using a bit of shorthand to specify ALL of the margins in one line. They start with the top, and go clockwise. margin:Top Right Bottom Left;
In the margin implementation for Silverlight, it would appear that they also offer a shorthand version for margins (actually, the only version is shorthand), and they did not follow the standard convention mentioned above. Instead, they chose to use Margin="Left, Top, Right, Bottom". I've not yet talked with the team to see why this convention was chosen over something more familiar to developers, but if I can find an answer, I will post it here.
(continue to Part 3...)
Today we are looking at a second way to lay out your interface in Silverlight. This will be far more familiar to the CSS fanatics out there. The primary concept is simple...we'll be using a StackPanel control to position our elements.
For those of you less familiar with CSS, this is more of a flow-based layout. As the size of the Silverlight container grows and shrinks, you will find that the elements will move to accomodate that space. I, personally, would not recommend approaching your entire interface with this technique, but it certainly makes sense for small portions, like navigations and lists of data.
Most of our positions will be determined by manipulating the margins of the individual elements on the page. In doing so, we can place our elements specific distances apart without having to specify their exact position on that page.
In the example below, I have 6 buttons that I want to arrange in a 3x2 block. I start with an outer stack panel that, by default, will stack my elements vertically. However, I want to have two rows of 3 buttons each, so I am going to nest two more stack panels. Each of these will have the Orientation attribute of the StackPanel set to Horizontal, to create the rows.
For demonstration purposes, I also modified the margins of a few of the buttons, just to show that we are merely stacking these elements. This is not a grid, or table, and certainly not absolute positioning. These elements are merely stacked, either horizontally or vertically, with margins as the leverage to move things around a bit.
NOTE: I have a major complaint about how margins were implemented in Silverlight.
Again, for those of you familiar with CSS, the de-facto standard for specifying margin sizes was one of two formats:
margin-left:10px;
margin-right:10px;
etc.
OR
margin:0 10px 0 10px;
Each of those examples would have given you a 10 pixel margin on both the left and right of the element you were styling. In the second example, we are using a bit of shorthand to specify ALL of the margins in one line. They start with the top, and go clockwise. margin:Top Right Bottom Left;
In the margin implementation for Silverlight, it would appear that they also offer a shorthand version for margins (actually, the only version is shorthand), and they did not follow the standard convention mentioned above. Instead, they chose to use Margin="Left, Top, Right, Bottom". I've not yet talked with the team to see why this convention was chosen over something more familiar to developers, but if I can find an answer, I will post it here.
(continue to Part 3...)
Labels: .net, jeff blankenburg, microsoft, Silverlight, stack panel, XAML
There are many decisions to be made when you're building a new application, and Silverlight introduces some new (but old) paradigms when it comes to the layout of your interface.
In this first part of three articles, we're going to be talking about the <Canvas> option. I equate this to a more familiar concept in HTML known as absolute positioning. Each element will be given its own specific location on the page, and nothing but code can move them. This is also one of the downfalls of the <Canvas>, but for many apps, this may not matter.
With elements absolutely positioned, things just don't adjust. If a user resizes their browser, the elements don't move. If a user tries to see your application on a smaller screen than you anticipated, part of the app is going to be hidden. (Think mobile phones, for example...if you position everything out to fit in a window 800 x 600, that 320 x 200 screen is not going to show very much).
However, this is still one of the fastest ways to get your elements positioned on a page, and the taboos that came with absolute positioning in CSS are erased, because we're now developing in a universal plugin, not 17 flavors of browser and platform combinations.
So how do we do it? Here's some example code:
As you can see, it's pretty straightforward. We have a button, an ellipse, and a rectangle, and their positions are defined by the Canvas.Left and Canvas.Top attributes. You can also nest <Canvas> tags, and the Left and Top attributes apply to the immediate parent of the element you are positioning.
Click here to see the code above running in a browser.
(continue to Part 2...and Part 3...)
Labels: absolute positioning, CSS, jeff blankenburg, layout, Silverlight
Saturday, April 05, 2008
I've been talking technology for a while here, but it's about time I start adding some value. I already mentioned the JUXtapose blog, so get over there for podcasts on User Experience and the technologies I use to make my UX and UI better.
Today, I want to talk about Silverlight 2 (Beta 1). One of the things that always frustrated me when creating a new application is that nobody ever wrote a good example of how to get my Silverlight application to scale with the random sizes of my user's browsers. As long as I stay vector based, this application should look the same at 640x480 and 1280x1024. And if it makes sense to have it on a mobile phone, then let's use the same application there too.
Today, my friends, I've got the simple steps you need to make your Silverlight 2 application scale effectively. I'll start this tutorial after you've created your default application (there's a great walkthrough on that here by Jesse Liberty).
I am using Visual Studio 2008, and Microsoft Silverlight Tools Beta 1 for Visual Studio 2008. My .entire solution can be downloaded here, so you can compare the changes I have made to a default project.
Step 1
If you followed the usual steps, your project should look something like mine.
We're only going to be working in two files for this: Page.xaml, and its code-behind file, Page.xaml.cs. First, let's take a look at the Page.xaml file, because more of our work will be code, not markup. Below is a shot of the entire XAML file (click to enlarge).
The only additions I have made to this file are the entire <canvas.rendertransform> section. I've also made the rootCanvas red, so that we can see it. One other thing that I have to credit Matt Casto for finding...you MUST define an initial size for your RootCanvas. Mine is 800x600, but you can use any size you'd like.
Step 2
Now we've got a little code to write, but it's honestly pretty straightforward. We've got four things to add:
Here's a screenshot of my entire application namespace within the page.xaml.cs file (click to enlarge).
First, we need to create a couple of variables. primarily, I need variables for the original height and width of my control before I get started. You'll see why in a moment, but it's basically to retain the "aspect ratio" of our control.
Second, in my "main" method, Page(), I route a new RoutedEventHandler to my Page_Loaded method when the XAML loads.
Third, I have to create my Page_Loaded method. Here, I need to capture the original height and width, and I also add a new event handler to my application when the "host.content" = browser is resized. Finally, I call my Resize() method.
Fourth, now that I have a new event handler pointing to Content_Resized(), I should probably write that method too. It just passes the call along to my Resize() method.
Fifth and finally, I need to write my Resize() method. This is slightly more complicated than you might expect, but there's a reason. We need to capture the width and height of the new browser size. That's what currentWidth and currentHeight are for. uniformScaleAmount is what makes this complicated. We want to scale this thing uniformly, that is to say, if the application was originally 800x600, we want to keep a 4:3 ratio at all times, rather than stretching the app to fill the space allowed. Once we have determined the appropriate scale constant, we then also want to keep this app centered both vertically and horizontally in the browser as well. The last 4 lines of the code handle this, by altering the size of the overall control.
Please give this a try on your next application. You should be able to use this on any size Silverlight application, and as long as your creative assets can handle scaling to any size (read: vector), your application should look great at all sizes. Please leave me a comment if you give this a try...I want to know that I helped someone out!
Today, I want to talk about Silverlight 2 (Beta 1). One of the things that always frustrated me when creating a new application is that nobody ever wrote a good example of how to get my Silverlight application to scale with the random sizes of my user's browsers. As long as I stay vector based, this application should look the same at 640x480 and 1280x1024. And if it makes sense to have it on a mobile phone, then let's use the same application there too.
Today, my friends, I've got the simple steps you need to make your Silverlight 2 application scale effectively. I'll start this tutorial after you've created your default application (there's a great walkthrough on that here by Jesse Liberty).
I am using Visual Studio 2008, and Microsoft Silverlight Tools Beta 1 for Visual Studio 2008. My .entire solution can be downloaded here, so you can compare the changes I have made to a default project.
Step 1
If you followed the usual steps, your project should look something like mine.
We're only going to be working in two files for this: Page.xaml, and its code-behind file, Page.xaml.cs. First, let's take a look at the Page.xaml file, because more of our work will be code, not markup. Below is a shot of the entire XAML file (click to enlarge).
The only additions I have made to this file are the entire <canvas.rendertransform> section. I've also made the rootCanvas red, so that we can see it. One other thing that I have to credit Matt Casto for finding...you MUST define an initial size for your RootCanvas. Mine is 800x600, but you can use any size you'd like.
Step 2
Now we've got a little code to write, but it's honestly pretty straightforward. We've got four things to add:
- an event handler for when the browser is resized.
- a Page_Loaded method to intialize everything.
- a proxy method for resizing our Silverlight control initially.
- a Resize() method for doing the heavy lifting.
Here's a screenshot of my entire application namespace within the page.xaml.cs file (click to enlarge).
First, we need to create a couple of variables. primarily, I need variables for the original height and width of my control before I get started. You'll see why in a moment, but it's basically to retain the "aspect ratio" of our control.
Second, in my "main" method, Page(), I route a new RoutedEventHandler to my Page_Loaded method when the XAML loads.
this.Loaded += new RoutedEventHandler(Page_Loaded);
Third, I have to create my Page_Loaded method. Here, I need to capture the original height and width, and I also add a new event handler to my application when the "host.content" = browser is resized. Finally, I call my Resize() method.
void Page_Loaded(object sender, RoutedEventArgs e)
{
_originalWidth = RootCanvas.Width;
_originalHeight = RootCanvas.Height;
Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);
Resize();
}
Fourth, now that I have a new event handler pointing to Content_Resized(), I should probably write that method too. It just passes the call along to my Resize() method.
void Content_Resized(object sender, EventArgs e)
{
Resize();
}
Fifth and finally, I need to write my Resize() method. This is slightly more complicated than you might expect, but there's a reason. We need to capture the width and height of the new browser size. That's what currentWidth and currentHeight are for. uniformScaleAmount is what makes this complicated. We want to scale this thing uniformly, that is to say, if the application was originally 800x600, we want to keep a 4:3 ratio at all times, rather than stretching the app to fill the space allowed. Once we have determined the appropriate scale constant, we then also want to keep this app centered both vertically and horizontally in the browser as well. The last 4 lines of the code handle this, by altering the size of the overall control.
double currentWidth = Application.Current.Host.Content.ActualWidth;
double currentHeight = Application.Current.Host.Content.ActualHeight;
double uniformScaleAmount = Math.Min((currentWidth / _originalWidth), (currentHeight / _originalHeight));
RootCanvasScaleTransform.ScaleX = uniformScaleAmount;
RootCanvasScaleTransform.ScaleY = uniformScaleAmount;
double scaledWidth = Math.Min(_originalWidth * uniformScaleAmount, currentWidth);
double scaledHeight = Math.Min(_originalHeight * uniformScaleAmount, currentHeight);
RootCanvasTranslateTransform.X = (Math.Min(RootCanvas.ActualWidth, currentWidth) - scaledWidth) / 2d;
RootCanvasTranslateTransform.Y = (Math.Min(RootCanvas.ActualHeight, currentHeight) - scaledHeight) / 2d;
}
Please give this a try on your next application. You should be able to use this on any size Silverlight application, and as long as your creative assets can handle scaling to any size (read: vector), your application should look great at all sizes. Please leave me a comment if you give this a try...I want to know that I helped someone out!
Labels: jeff blankenburg, resize, resizing, Silverlight, visual studio 2008
Thursday, April 03, 2008
I know I've talked about this podcast series before...but it's growing. And it's got a new home. http://www.juxtaposeblog.com
JUXtapose stands for Jeff on User Experience, and the podcast series is about exactly that. My thoughts on UX, and the tips and tricks you can use in your applications to make them more effective for your users.
I'm starting a whole set of videos on creating Silverlight 2.0 applications. These will center around creating a NCAA-tournament style site, with user management, a slick interface, and plenty of data and web services to make everything happen. I hope you'll check it out.
You can subscribe to my RSS feed here: http://feeds.feedburner.com/juxtaposeblog/KnIR
JUXtapose stands for Jeff on User Experience, and the podcast series is about exactly that. My thoughts on UX, and the tips and tricks you can use in your applications to make them more effective for your users.
I'm starting a whole set of videos on creating Silverlight 2.0 applications. These will center around creating a NCAA-tournament style site, with user management, a slick interface, and plenty of data and web services to make everything happen. I hope you'll check it out.
You can subscribe to my RSS feed here: http://feeds.feedburner.com/juxtaposeblog/KnIR
Labels: jeff blankenburg, JUXtapose, Silverlight, user experience
Thursday, February 28, 2008
Tonight at the Columbus .NET Developers Group (CONDG), they are having 8 lightning talks as their presentation. Lightning talks are basically 10-15 minute presentations that go one after another, with 1 minute breaks for setup/teardown.
Here are the subjects that were presented:
Steve Horn - ADO.NET
Matt Casto - Silverlight (consuming ADO.NET)
Amanda Laucher/James Bender - F#
Steve Harman - Rhino Mocks
Brian Sherwin - Log4Net
Jon Kruger - LINQ to SQL
John Vottero - PowerShell 4 Devs
These presentations were also videotaped, and will be made available on the CONDG website.
Also, in the early housekeeping, there were two major announcements made:
1) Brian Prince has accepted the Architect Evangelist role with Microsoft. He'll be working alongside me in the Heartland.
2) Carey Payette was elected the new president of CONDG. Congratulations Carey.
Here are the subjects that were presented:
Steve Horn - ADO.NET
Matt Casto - Silverlight (consuming ADO.NET)
Amanda Laucher/James Bender - F#
Steve Harman - Rhino Mocks
Brian Sherwin - Log4Net
Jon Kruger - LINQ to SQL
John Vottero - PowerShell 4 Devs
These presentations were also videotaped, and will be made available on the CONDG website.
Also, in the early housekeeping, there were two major announcements made:
1) Brian Prince has accepted the Architect Evangelist role with Microsoft. He'll be working alongside me in the Heartland.
2) Carey Payette was elected the new president of CONDG. Congratulations Carey.
Labels: ado.net, CONDG, F#, jeff blankenburg, lightning talks, linq, log4net, microsoft, powershell, rhino mocks, Silverlight, sql
Monday, January 28, 2008
JUXtapose - Episode 3: Popfly - Creating Your First Mashup
Labels: jeff blankenburg, JUXtapose, microsoft, popfly, Silverlight
Thursday, January 03, 2008
In an unfortunate turn of events, Jesse Liberty (Senior Program Manager, Silverlight Development Team) fractured his shoulder a few weeks ago. He and his doctor were optimistic that he would still be able to make the trip to CodeMash (like I'm sure all of you are). His surgeon is now extremely reluctant to have him in full-on travel mode just yet, so he has been forced to cancel his trip.
Due to these circumstances, there is a gaping hole in the Silverlight content at CodeMash. I have been fortunate enough to be asked by Jesse to replace him in his absence. I'm a bit honored, and a bit panicked (I wasn't on the slate to speak until now). So there you have it....I'll be the speaker in Jesse Liberty's stead. The topics will still be the same, there will be an Intro to Silverlight and an Advanced Silverlight session at the normally scheduled time.
So, if I haven't met you, and certainly if I have, here's when I will be speaking at CodeMash.
01/09/07 9:30 AM - Coding In Silverlight
01/10/07 2:10 PM - Advanced Silverlight
Head over to the CodeMash Session Scheduler (built in Silverlight) and get me on your agenda!
Due to these circumstances, there is a gaping hole in the Silverlight content at CodeMash. I have been fortunate enough to be asked by Jesse to replace him in his absence. I'm a bit honored, and a bit panicked (I wasn't on the slate to speak until now). So there you have it....I'll be the speaker in Jesse Liberty's stead. The topics will still be the same, there will be an Intro to Silverlight and an Advanced Silverlight session at the normally scheduled time.
So, if I haven't met you, and certainly if I have, here's when I will be speaking at CodeMash.
01/09/07 9:30 AM - Coding In Silverlight
01/10/07 2:10 PM - Advanced Silverlight
Head over to the CodeMash Session Scheduler (built in Silverlight) and get me on your agenda!
Labels: codemash, jeff blankenburg, jesse liberty, Silverlight
Tuesday, December 11, 2007
UPDATED: Here is the link to the presentation.
I'm heading up to Cleveland tonight for the .NET SIG meeting. They are deviating from their standard meeting type (speaker, pizza) to more of a holiday party style. I'll be bringing 3 XBoxes, projectors, and a decent selection of games to play, including Halo 3, Guitar Hero III, and Project Gotham Racing 4. But that's not really what I'm most excited about for tonight.
I'll be giving a short presentation on some of the cool things that Microsoft is working on. I've given this a few times in the past, but it always generates more discussion and "WOWs" from the crowd than any Silverlight or WCF presentation I'm going to give. The reason is because people haven't seen this stuff before. And it's amazing.
For those of you not coming to Cleveland for the meeting tonight, here's a rundown of what you're going to be missing:
Microsoft Popfly - A mashup engine. Imagine having the power to create a map with all of your Facebook friends on it. Oh yeah, and you didn't write a single line of code.
Tafiti - I call it a research engine. It's a new search engine interface, based on Windows Live Search, which is built entirely in Silverlight.
Microsoft Surface - a completely new model for computing. Take one coffee table, add 400% innovation, and you've got an amazing new way to interact with files, the internet, and more.
Photosynth - Let's say you wanted to take a virtual tour of Seattle. You could certainly look for pictures on the web, of if you really wanted to see a bunch, maybe you search on Flickr for Seattle. Photosyth allows you (eventually) to take a set of photos from the web, and visually "stitch" them together to create a 3-D model of the space. If you check nothing else out from this post, make this the one.
Seadragon - the technology that Photosynth is based on, Seadragon is primarily focused on showing immense amounts of image data at one time. Their philosophy is that the only thing [in this technology era] that should restrict your ability to view large [we're talking TB] sets of images should the be number of pixels on your screen.
Labels: jeff blankenburg, photosynth, Silverlight, surface, user experience, user interface
Friday, November 09, 2007
I had the opportunity to spend this past weekend in Memphis, TN. I was attending/speaking at the Memphis Day of .NET.
It started innocently enough. I arrived in Memphis (MEM), and drove to my hotel room. There, I joined up with Josh Holmes, where we headed to the speaker's pre-game dinner. It was at a location chosen by Colin Neller (the primary organizer of the event, though he had a very efficient team). We got to eat Memphis-style BBQ at a place called Central BBQ. It was outstanding. Seasoned, homemade potato chips, and some BBQ sauce to lick from your fingers. Excellent choice.
The next morning, I arrived at the FedEx Institute of Technology, and was immediately blown away by the facility. Open spaces, curves, glass & metal. Gorgeous. Then I got to see the room that the Charles Petzold's keynote would be delivered in (as well as my talk on Silverlight.) It's called The Zone, and it absolutely is. I was so inspired by what a conference facility should be that I took a short video just to show it off.
Click here to see my video tour of The Zone
Finally, after my talk, there was a GOURMET lunch provided. We're not talking about upscale sandwiches here, either. It was roast beef, potatoes, vegetables...in short, excellent.
My hat's off to the organizers of this event. Very well done. I wish you future success in next year's event as well. (Please let me know how I can assist, if you'd like.)
Included in this post are links to the slide decks and demos that I used during the presentation.
Thanks to everyone that attended!
Silverlight 301 Deck & Demos
Innovative Microsoft Stuff Slide Deck
Labels: fedex institute of technology, memphis day of .net, Silverlight, the zone
Several of you have had an opportunity to catch the first couple of episodes of my video series that I am calling JUXtapose. I'm working on the next few videos here, and was thinking that I'd like to make some of you famous.
If you've done something cool, something innovative, something that when you built it, you thought, "Man, that's awesome!," then I'd like to get you on camera talking about it.
I want to capture your passion on film. I want to help you tell the world about your ideas. If it has a user interface, let's talk about it. If you found a way to take an action in your application from 32 to 2 clicks, perhaps you've been hiding in the shadows too long.
Call me, email me, comment on this blog. Whatever. Just remember, if nobody raises their hand, I'm going to start calling on people.
JUXtapose Episode Guide
11/02/2007 - Episode 1: Simple Animation Using Expression Blend
11/05/2007 - Episode 2: ComponentOne Sapphire Interviews
Coming Soon - Episode 3: HTML Controls As Silverlight Tools
Coming Soon - Episode 4: Getting Web Service Data Into Your Silverlight App
Coming Soon - Episode 5: Expression Studio Overview (Design, Blend, Web)
If you've done something cool, something innovative, something that when you built it, you thought, "Man, that's awesome!," then I'd like to get you on camera talking about it.
I want to capture your passion on film. I want to help you tell the world about your ideas. If it has a user interface, let's talk about it. If you found a way to take an action in your application from 32 to 2 clicks, perhaps you've been hiding in the shadows too long.
Call me, email me, comment on this blog. Whatever. Just remember, if nobody raises their hand, I'm going to start calling on people.
JUXtapose Episode Guide
11/02/2007 - Episode 1: Simple Animation Using Expression Blend
11/05/2007 - Episode 2: ComponentOne Sapphire Interviews
Coming Soon - Episode 3: HTML Controls As Silverlight Tools
Coming Soon - Episode 4: Getting Web Service Data Into Your Silverlight App
Coming Soon - Episode 5: Expression Studio Overview (Design, Blend, Web)
Labels: jeff blankenburg, JUXtapose, Silverlight, user experience, user interface
1) Keynotes by Steve Ballmer and Scott Guthrie.
2) 3-4 days in Las Vegas, at the Venetian Hotel and Casino.
3) An opportunity to immerse yourself in the technologies that make up "The Next Web," and participate in a 72-hour conversation about the future of web technologies.
OK, since I'm sure that list appeals to very few of you, I'll be brief.
I'm describing Microsoft's MIX 2008 conference. I had the good fortune to attend last year, as an attendee, and had an amazing time. Silverlight was announced, for one. I had an opportunity to meet some incredible speakers, technologists, and Microsoft influentials those days. I had an opportunity to give over $200 of my own, hard-earned money to complete strangers at the poker tables.
In short, it was the best conference I have been to. My expectations are riding pretty high that v2008 will not disappoint. With that, registration is now open.
So, mull it over with your Manager. Blackmail your Boss.* Persuade your Project Manager. Discuss it with your Director. I'd love to have a posse to hang with in Vegas this year.
Are you going? Let me know!
* I do not, in any way, actually endorse blackmailing anyone. Please take it for the alliteration it was meant to provide, and nothing more.
Labels: microsoft, mix 08, mix conference, Silverlight
Monday, November 05, 2007
JUXtapose - Episode 2: ComponentOne Sapphire Interviews
Oh, and the timing is perfect...they just released the Alpha version of Sapphire today. Just register on their site, and download the installer!
http://labs.componentone.com/Sapphire/
Labels: componentone, jeff blankenburg, JUXtapose, microsoft, sapphire, Silverlight
Friday, November 02, 2007
So I'm sure I'll be posting these everywhere, but I want my blog to at least be the starting place.
JUXtapose is the name of my new webcast series, and it will be primarily focused on the technologies I am most passionate about. This includes user interface technologies like Silverlight and WPF, as well as more general stuff like Javascript and CSS. It will also feature interviews from notable (and soon to be notable) developers in the field that have an opinion to lend on user experience.
The name JUXtapose comes from the subtitle: Jeff on User Experience.
Please leave comments, I'd love your initial thoughts on this, as well as recommendations and volunteerism for future shows.
Labels: expression blend, jeff blankenburg, JUXtapose, microsoft, Silverlight
Friday, October 26, 2007
I had an opportunity to speak at the October CONDG meeting last night, and had a great crowd. It was a great talk on Silverlight and some of the other cool things that Microsoft is up to, including Popfly, Surface, and Photosynth.
We also cleaned out the "swag closet," giving away a total of 16 items. This included some rubberized, roll-up keyboards (for typing in the bathtub), some 32MB flash drives, some 128MB flash drives, a few books, and a copy of Vista (congrats to Aaron Ponzani!).
Included in this post are links to the slide decks and demos that I used during the presentation.
Thanks to everyone that attended!
Silverlight 301 Deck & Demos
Innovative Microsoft Stuff Slide Deck
We also cleaned out the "swag closet," giving away a total of 16 items. This included some rubberized, roll-up keyboards (for typing in the bathtub), some 32MB flash drives, some 128MB flash drives, a few books, and a copy of Vista (congrats to Aaron Ponzani!).
Included in this post are links to the slide decks and demos that I used during the presentation.
Thanks to everyone that attended!
Silverlight 301 Deck & Demos
Innovative Microsoft Stuff Slide Deck
Labels: CONDG, microsoft, photosynth, popfly, Silverlight, surface
Monday, October 22, 2007
I'm going to be talking on Thursday at the CONDG (Central Ohio .NET Developer's Group) meeting. I've been asked to speak on a higher level about Silverlight and the things you can REALLY do with it.
I'm going to be covering web service interactions, user controls, and event handling in Silverlight. In addition, we're going to be looking at some of the other cool stuff that we at Microsoft have been up to.
This includes: Popfly, Photosynth, SeaDragon, and even the new Surface. (No, we won't have an actual Surface device...at least NOT YET.)
I hope to see everyone there!
I'm going to be covering web service interactions, user controls, and event handling in Silverlight. In addition, we're going to be looking at some of the other cool stuff that we at Microsoft have been up to.
This includes: Popfly, Photosynth, SeaDragon, and even the new Surface. (No, we won't have an actual Surface device...at least NOT YET.)
I hope to see everyone there!
Labels: photosynth, popfly, Silverlight, surface
Wednesday, October 03, 2007
Some of you, my dear readers, have asked how I got over that magical step in my Silverlight Animation Tutorial. The step where I had an Adobe Illustrator file, and then, POOF!, I had the XAML to start working with it.No, I didn't recreate the logo in Expression Blend. Mike Swanson created an AI->XAML Exporter. You will need:
* Adobe Illustrator CS2
(I don't know how they did it, but every trial version of this software on the web has disappeared. There used to be a 30 day trial...now you can only find Illustrator CS3. This is why I save all of my installation files.)
* Mike Swanson's Export Plug-in
* The rest of his instructions.
One quick thing to remember, however, is that there are a couple of quirks with the XAML you get. The syntax is good. No issues there. But it is creating XAML for WPF, not Silverlight. WPF has a much larger set of tags to work with, and as such, most WPF XAML may not be directly compatible with Silverlight.
Not in a "these are totally different" way, more in a "the opening and closing tags for WPF are different than Silverlight." WPF uses <window> as its top level tag, and Silverlight uses the <canvas> tag. Window is meaningless to Silverlight, because you don't have a window for it. It's only part of a web page. You can see this illustrated below:
Default code generated for a WPF application:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UntitledApplication1.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Grid x:Name="LayoutRoot"/>
</Window>
Default code generated for a Silverlight application:
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
x:Name="Page"
>
</Canvas>
So, in order to use the XAML that is generated by this tool in Silverlight, you're going to have to chop the "middle" of the XAML out and paste it into your new Silverlight app. Everything else should be the same. Ta-da!
Labels: adobe illustrator, Mike Swanson, Silverlight, WPF, XAML
Monday, October 01, 2007
Silverlight has to be one of the easiest things I have ever worked with.
Last year, I was asked to put together a logo and site design for a new type of technology conference: CodeMash. (As a sidenote, registration just opened for the 2008 Codemash. For the price, it is by far one of the best conferences you'll attend this year.)
I designed the logo in Adobe Illustrator CS2, knowing that it would be used for print materials, the website, t-shirts, etc. It only made sense to create it using vector graphics. Little did I know at the time, it would also be the way that I turned that logo into an animation for CodeMash v2.0.0.8.
This post is meant to be a tutorial on what it really takes to create a simple Silverlight animation.
First, you are going to need to install some software (I am including links the newest stuff, but you should be able to do this with v1 of expression, and no Silverlight):
* Silverlight 1.1. Alpha
* Microsoft Expression Blend 2 September Preview (This version is good through June 1, 2008)
Once you've got those installed, you're also going to need some base XAML (eXtensible Application Markup Language) to work with. Download the CodeMash logo here. All this markup is at this point is the design. Just save this .txt file down, and we'll use it momentarily.
OK, now on to the tutorial:
1) Open Expression Blend 2, and create a new project.
2) Choose Silverlight Application (.NET)
3) By default, Page.xaml will be open. Choose the XAML view.
4) Cut and paste the contents of the logo.xaml file you downloaded earlier IN BETWEEN the <canvas> and </canvas> tags that are currently provided to you.
5) Flip back to the Design view, and you should now see the CodeMash logo on your canvas.
6) You're probably also noticing that the white canvas we started with isn't really big enough for our design. We should probably make that bigger as well. It needs to be 650px x 777px. We've got two options with this one. This first is just to edit the XAML directly. Take a look at that initial <canvas> tag we started with. It's got width and height properties, so we can just change the values. The second option is much better for those of you that don't want to edit your XAML directly. Click on the element named "Page" (that's our primary canvas) in the "Objects and Timeline" panel. Then, click on "Properties" in the top right. This shows you, much like Visual Studio, the Properties that are available to the element you've selected. Finally, you'll see the width and height properties in the list. You can type the values there, or you can use the innovative "slider" interface to get to the value you desire.
7) Take a look at the Objects and Timeline panel. You should see a well organized list of all of the elements that make up the logo. Gears, glasses, etc. Each one of these elements is defined in the XAML we imported. We are primarily going to be working in this panel the rest of the way.
8) Press F7 on your keyboard. This will take us into the "Animation Workspace." It's not any different from the "Design Workspace" (F6) we were in, except that the panels have been moved.
9) Expand the elements in the Objects and Timeline panel, and look for:
Page > Orange_Gear > Orange_Gear_Teeth. Click on that element once, highlighting it.
10) Under the "Objects and Timeline" panel header, there is a drop-down list with "(No Storyboard open)" as the selected value. Click the ">" button just to the right of that list. This will bring up the storyboard search dialog. Click the "+" symbol to create a new storyboard. Name your timeline/storyboard (it's named Timeline1 by default), and click "OK." Since we're gonna be animating the gears, I named my timeline "GearSpin."
11) You will now see that a timeline has appeared next to our list of elements. Each number (1, 2, 3, etc.) represents one second of time. We will use these times to "schedule" our animations. For those of you unfamiliar with animation software, we are going to be creating keyframes that will do most of the animation work for us. Basically, we define the states we want our elements to be in at certain keyframes, and the software figures out how to get it from Point A to Point B without any other instruction. Please also notice that your canvas now has a red line around it, and in the top right corner, now says, "Timeline recording is on." This means that all of our future actions will be recorded and animated. When we want to make a change that we don't want to be part of the animation, we need to make sure to turn recording off.
12) Make sure that the element "Orange_Gear_Teeth" is still selected. Just above where ZERO seconds is on the timeline, there is an icon with a green "+" in it. Click it. By clicking this, we are creating a keyframe at 0:00 of our animation. This means that it will start as soon as the application does. We could move this to 1 second if we wanted a 1 second delay before our animation began, but for this demo, we want it to start at the beginning.
13) Next, we need to create a new place for these gears to be. So let's say we want to have them rotate 90 degrees in 1 second. Drag the yellow timeline indicator to one second. Click the "+" to set another Keyframe at 1 second. In the "Properties" tab in the top right of Expression Blend, find the "Transform" section, and click the "Rotate" tab inside there. You will see that the current Angle is set to 0 degrees. Let's change that to 90 degrees. You can either click and drag the box to the right, until it says 90, or you can just click on the box, which will allow you to type 90.
14) Whoa! You may have noticed that your gear teeth have derailed from their hub. That's because we didn't define the center of those objects appropriately. Press CTRL + z on your keyboard, to undo the change you just made. Also, because we don't want to animate moving the center of these objects, we need to turn off recording. You can do this by clicking on the red circle in the top right corner of the canvas.
15) Because you have highlighted the "Gear_Orange_Teeth" layer, you should see a blue box surrounding those elements, but probably a bit bigger than just those elements need. You should also see a white dot that indicates where the center of that entire box is. We need to move that. Click on it and drag it to the blue center of the orange gear. That's the point we want our teeth to rotate around, right? To be more exact, I recommend zooming in and placing your center point that way.
16) Once you're confident in your center point, turn recording back on, modify that angle again, changing it to 90 degrees. Now you can click the "PLAY" button (it's right above the timeline) to see your orange gear spin.
17) We've got one other thing to take care of to make this look great. We don't want to have the gears stop after 1 second. We want them to continue spinning forever. This is a simple change. We had selected Orange_Gear_Teeth from the timeline earlier, and now we need to expand it. Inside it, you will see a RenderTransform element. This was created when we changed that rotation angle. Expand it all the way, and you will see an "Angle" element. Right-clicking on this will give you the option to "Edit Repeat Count." We can set this to 1, 2, 100, etc. There's also an "infinity" option. Choose that, and our gears will spin forever.
18) Now, we need to animate the other two gears. We are going to follow the same steps for the Blue and Green Gears. So take steps 9-17, rinse, lather, repeat. The only difference for the other two gears is that they rotate in the other direction. So instead of 90 degrees, they will be set to -90 degrees.
19) You should now have a working Silverlight application, that has the gears spinning. Press F5 to run your project!
Last year, I was asked to put together a logo and site design for a new type of technology conference: CodeMash. (As a sidenote, registration just opened for the 2008 Codemash. For the price, it is by far one of the best conferences you'll attend this year.)
I designed the logo in Adobe Illustrator CS2, knowing that it would be used for print materials, the website, t-shirts, etc. It only made sense to create it using vector graphics. Little did I know at the time, it would also be the way that I turned that logo into an animation for CodeMash v2.0.0.8.
This post is meant to be a tutorial on what it really takes to create a simple Silverlight animation.
First, you are going to need to install some software (I am including links the newest stuff, but you should be able to do this with v1 of expression, and no Silverlight):
* Silverlight 1.1. Alpha
* Microsoft Expression Blend 2 September Preview (This version is good through June 1, 2008)
Once you've got those installed, you're also going to need some base XAML (eXtensible Application Markup Language) to work with. Download the CodeMash logo here. All this markup is at this point is the design. Just save this .txt file down, and we'll use it momentarily.
OK, now on to the tutorial:
1) Open Expression Blend 2, and create a new project.
2) Choose Silverlight Application (.NET)
3) By default, Page.xaml will be open. Choose the XAML view.
4) Cut and paste the contents of the logo.xaml file you downloaded earlier IN BETWEEN the <canvas> and </canvas> tags that are currently provided to you.
5) Flip back to the Design view, and you should now see the CodeMash logo on your canvas.
6) You're probably also noticing that the white canvas we started with isn't really big enough for our design. We should probably make that bigger as well. It needs to be 650px x 777px. We've got two options with this one. This first is just to edit the XAML directly. Take a look at that initial <canvas> tag we started with. It's got width and height properties, so we can just change the values. The second option is much better for those of you that don't want to edit your XAML directly. Click on the element named "Page" (that's our primary canvas) in the "Objects and Timeline" panel. Then, click on "Properties" in the top right. This shows you, much like Visual Studio, the Properties that are available to the element you've selected. Finally, you'll see the width and height properties in the list. You can type the values there, or you can use the innovative "slider" interface to get to the value you desire.
7) Take a look at the Objects and Timeline panel. You should see a well organized list of all of the elements that make up the logo. Gears, glasses, etc. Each one of these elements is defined in the XAML we imported. We are primarily going to be working in this panel the rest of the way.
8) Press F7 on your keyboard. This will take us into the "Animation Workspace." It's not any different from the "Design Workspace" (F6) we were in, except that the panels have been moved.
9) Expand the elements in the Objects and Timeline panel, and look for:
Page > Orange_Gear > Orange_Gear_Teeth. Click on that element once, highlighting it.
10) Under the "Objects and Timeline" panel header, there is a drop-down list with "(No Storyboard open)" as the selected value. Click the ">" button just to the right of that list. This will bring up the storyboard search dialog. Click the "+" symbol to create a new storyboard. Name your timeline/storyboard (it's named Timeline1 by default), and click "OK." Since we're gonna be animating the gears, I named my timeline "GearSpin."
11) You will now see that a timeline has appeared next to our list of elements. Each number (1, 2, 3, etc.) represents one second of time. We will use these times to "schedule" our animations. For those of you unfamiliar with animation software, we are going to be creating keyframes that will do most of the animation work for us. Basically, we define the states we want our elements to be in at certain keyframes, and the software figures out how to get it from Point A to Point B without any other instruction. Please also notice that your canvas now has a red line around it, and in the top right corner, now says, "Timeline recording is on." This means that all of our future actions will be recorded and animated. When we want to make a change that we don't want to be part of the animation, we need to make sure to turn recording off.
12) Make sure that the element "Orange_Gear_Teeth" is still selected. Just above where ZERO seconds is on the timeline, there is an icon with a green "+" in it. Click it. By clicking this, we are creating a keyframe at 0:00 of our animation. This means that it will start as soon as the application does. We could move this to 1 second if we wanted a 1 second delay before our animation began, but for this demo, we want it to start at the beginning.
13) Next, we need to create a new place for these gears to be. So let's say we want to have them rotate 90 degrees in 1 second. Drag the yellow timeline indicator to one second. Click the "+" to set another Keyframe at 1 second. In the "Properties" tab in the top right of Expression Blend, find the "Transform" section, and click the "Rotate" tab inside there. You will see that the current Angle is set to 0 degrees. Let's change that to 90 degrees. You can either click and drag the box to the right, until it says 90, or you can just click on the box, which will allow you to type 90.
14) Whoa! You may have noticed that your gear teeth have derailed from their hub. That's because we didn't define the center of those objects appropriately. Press CTRL + z on your keyboard, to undo the change you just made. Also, because we don't want to animate moving the center of these objects, we need to turn off recording. You can do this by clicking on the red circle in the top right corner of the canvas.
15) Because you have highlighted the "Gear_Orange_Teeth" layer, you should see a blue box surrounding those elements, but probably a bit bigger than just those elements need. You should also see a white dot that indicates where the center of that entire box is. We need to move that. Click on it and drag it to the blue center of the orange gear. That's the point we want our teeth to rotate around, right? To be more exact, I recommend zooming in and placing your center point that way.
16) Once you're confident in your center point, turn recording back on, modify that angle again, changing it to 90 degrees. Now you can click the "PLAY" button (it's right above the timeline) to see your orange gear spin.
17) We've got one other thing to take care of to make this look great. We don't want to have the gears stop after 1 second. We want them to continue spinning forever. This is a simple change. We had selected Orange_Gear_Teeth from the timeline earlier, and now we need to expand it. Inside it, you will see a RenderTransform element. This was created when we changed that rotation angle. Expand it all the way, and you will see an "Angle" element. Right-clicking on this will give you the option to "Edit Repeat Count." We can set this to 1, 2, 100, etc. There's also an "infinity" option. Choose that, and our gears will spin forever.
18) Now, we need to animate the other two gears. We are going to follow the same steps for the Blue and Green Gears. So take steps 9-17, rinse, lather, repeat. The only difference for the other two gears is that they rotate in the other direction. So instead of 90 degrees, they will be set to -90 degrees.
19) You should now have a working Silverlight application, that has the gears spinning. Press F5 to run your project!
Labels: Expression, expression blend, microsoft, Silverlight, WPF
Tuesday, September 11, 2007
So, from time to time, I have been known to use the phrase "This Guy" while pointing at myself with my thumbs. Sure, it's tired. Sure, it's obnoxious. But it conveys my point effectively, and I use it only in the most appropriate instances:
"Who has two thumbs and loves him some Silverlight?"
--> THIS GUY <--
And that's the point of this post. I think this saying is worn out because people haven't had an effective way to communicate this electronically. Now you do. Go out into the world and use it, with discretion.
BTW, I cannot take credit for this syntax. The credit belongs to another brilliant blog.
Who loves reading Kiss Me Suzy?
--> This guy <--
"Who has two thumbs and loves him some Silverlight?"
--> THIS GUY <--
And that's the point of this post. I think this saying is worn out because people haven't had an effective way to communicate this electronically. Now you do. Go out into the world and use it, with discretion.
BTW, I cannot take credit for this syntax. The credit belongs to another brilliant blog.
Who loves reading Kiss Me Suzy?
--> This guy <--
Labels: Silverlight, this guy
Wednesday, September 05, 2007
While I was at Mix 07 as a guest of Microsoft, I had an opportunity to witness some amazing products that were coming in the near future. The one I found the most impressive was a technology called Silverlight. The "canned" answer to what Silverlight is, is: Microsoft® Silverlight™ is a cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web.For the three of you that I haven't told about it yet, here's some cool examples to see what's capable:
Tafiti - Silverlight Search Engine based on Live Search
Halo 3 Trailers
Major League Baseball Video Streaming
Anyways, the point of this post is to announce that Silverlight 1.0 has been released! You can go to http://silverlight.net/GetStarted/ now to download the final release of the runtime and development tools.
In addition, Microsoft has also announced a partnership with Novell, which will be building a 100% compatible Silverlight runtime implementation called "Moonlight".
Moonlight will run on all Linux distributions, and support FireFox, Konqueror, and Opera browsers. Moonlight will support both the JavaScript programming model available in Silverlight 1.0, as well as the full .NET programming model we will enable in Silverlight 1.1.
UPDATE: Here's plenty more information on Moonlight.
This is an exciting day for user experience. If you want help getting started on your first project, or just want to tell me about the cool way you're using Silverlight, drop me a line!
For all the nitty gritty details about this release, I don't think I can say it as well as Scott Guthrie, so check out his blog post on this as well.
Labels: linux, microsoft, moonlight, Silverlight
Monday, August 27, 2007
Just a reminder to all of you in the Southfield/Ann Arbor/Detroit area...I will be presenting the Silverlight DevCares event on Wednesday, August 29.
http://www.devcares.com to sign up.
See ya there.
http://www.devcares.com to sign up.
See ya there.
Labels: devcares, microsoft, Silverlight
Saturday, August 25, 2007
I just got an inside tip that Verio is offering free MS web hosting through 2010. So, if you've been meaning to get around to building the next killer app, here's your chance to do it for free.
They even support Silverlight, so if you've been meaning to try it out, GET TO IT!
I believe they are Windows Server 2003, with IIS 6. You don't even need a credit card.
All you have to do is call Verio’s 800-932-7483 to receive your free website. This offer is unfortunately not available online. Please pass it along.
They even support Silverlight, so if you've been meaning to try it out, GET TO IT!
I believe they are Windows Server 2003, with IIS 6. You don't even need a credit card.
All you have to do is call Verio’s 800-932-7483 to receive your free website. This offer is unfortunately not available online. Please pass it along.
Labels: microsoft, Silverlight, web hosting
Friday, June 01, 2007
They've already announced the dates for the Mix '08 conference. I'm really hoping to get an opportunity to go again. I'm still revelling in the knowledge and experience of the trip.
March 5-7, 2008. Venetial Hotel. Be there or be less than desirable.
March 5-7, 2008. Venetial Hotel. Be there or be less than desirable.
Labels: microsoft, mix, mix conference, Silverlight
Monday, April 30, 2007
So it's been hyped for the past few weeks that we were going to see many new things announced by Microsoft this morning. The hype didn't keep up with reality.
It was WAY better than sold.
THe biggest highlight of this conference is the combination of Silverlight with the .NET framework.
We can actually write C# code to function like you would normally expect Javascript to do.
We can create vector based animations to run in a cross-browser, cross platform environment, with all of the instructions stored in XAML.
Designers can completely control the look and actions of these elements in a graphical interface, but that design is then translated down to XAML, which can be edited, updated, etc as a file on the server. This allows the designer to control the looks, and the developer to control the functionality.
Two demos during the keynote were flooring, however.
First, the CEO from a company named Metaliq demoed a new AJAX/Silverlight/.NET application they call Top Banana. It is basically a content editing application, all within a browser. The URL is http://silverlight.metaliq.com/topbanana
It appears they have taken their demo down, but as soon as I can get access to it again. I will post it. It was truly unbelieveable.
The other struck close to home. I'm a huge baseball fan. Mondo big. And having grown up in Cleveland, I've been forced to suffer with the Indians my entire life. THe C-something-something from MLB.oom was here demoing their new MLB.TV application. It acted as I expected. Showed every possible statistic available in an interface that also shows the live games streamed over the internet. All great, all what I would expect. It include a feature that allowed you to add your favorite players (think fantasy baseball) and it would alert you every time your player did something in any of the games. It would also serve up the specific video clip of that notable performance. (On a sidenote, thsi guy said that they generate 10 DVDs worth of data with every pitch of every game. That seems like a little bit. :))
Anyways, even the fantasy player list wasn't the coolest part of this demo. Oh no. He then pulled out his cell phone, and showed us a Silverlight application running there. It showed stats, game scores, even live score updates, and runners on base. Think about the graphics that show up during a TV broadcast. Minus the actual game video. Well, with Silverlight, it appears they are going to be successful in streaming actually live video to your phone, and remember that fantasy player list, statistics, and video feeds? That was all demonstrated as well.
Man, this has been amazing thus far. Thanks again to Quick Solutions for sending me here.
It was WAY better than sold.
THe biggest highlight of this conference is the combination of Silverlight with the .NET framework.
We can actually write C# code to function like you would normally expect Javascript to do.
We can create vector based animations to run in a cross-browser, cross platform environment, with all of the instructions stored in XAML.
Designers can completely control the look and actions of these elements in a graphical interface, but that design is then translated down to XAML, which can be edited, updated, etc as a file on the server. This allows the designer to control the looks, and the developer to control the functionality.
Two demos during the keynote were flooring, however.
First, the CEO from a company named Metaliq demoed a new AJAX/Silverlight/.NET application they call Top Banana. It is basically a content editing application, all within a browser. The URL is http://silverlight.metaliq.com/topbanana
It appears they have taken their demo down, but as soon as I can get access to it again. I will post it. It was truly unbelieveable.
The other struck close to home. I'm a huge baseball fan. Mondo big. And having grown up in Cleveland, I've been forced to suffer with the Indians my entire life. THe C-something-something from MLB.oom was here demoing their new MLB.TV application. It acted as I expected. Showed every possible statistic available in an interface that also shows the live games streamed over the internet. All great, all what I would expect. It include a feature that allowed you to add your favorite players (think fantasy baseball) and it would alert you every time your player did something in any of the games. It would also serve up the specific video clip of that notable performance. (On a sidenote, thsi guy said that they generate 10 DVDs worth of data with every pitch of every game. That seems like a little bit. :))
Anyways, even the fantasy player list wasn't the coolest part of this demo. Oh no. He then pulled out his cell phone, and showed us a Silverlight application running there. It showed stats, game scores, even live score updates, and runners on base. Think about the graphics that show up during a TV broadcast. Minus the actual game video. Well, with Silverlight, it appears they are going to be successful in streaming actually live video to your phone, and remember that fantasy player list, statistics, and video feeds? That was all demonstrated as well.
Man, this has been amazing thus far. Thanks again to Quick Solutions for sending me here.
Labels: .net, AJAX, microsoft, Mix07, Silverlight