Jeff Blankenburg is a passionate technologist with a wide range of interests.
This website is dedicated to discussing the ideas that pass through his head.

The main header for this website was created using Microsoft Silverlight.
Install it to see what you're missing!

Get Silverlight to see the whole site!

TUTORIAL #11: Creating a Navigation In Silverlight

Thursday, January 15, 2009

A navigation is always a tricky project for every application. It seems to be in a constant state of flux, up until the minute the site goes live. With Silverlight, some of that becomes easier. This post will show you how to create a simple navigation in Silverlight.

Before I start through the steps, I want to point out that the navigation on my site is actually the ONLY part of my site done in Silverlight. The rest of the page is standard ASP.NET. I don't recommend creating your entire site in Silverlight, but rather, using it where it's appropriate: like a navigation. OK, having said that, here we go.

1. Create a new project in Visual Studio.

For many of you, this may seem remedial, but I want to make sure that I am documenting all of my steps. There's something frustrating to me about tutorials that assume you know the first few steps.

Create a new project in Visual Studio.

2. Add the web project it asks you about.

After you create a Silverlight project, Visual Studio will prompt you to create a Web Project to accompany it. Silverlight projects have to be hosted in a web page, so go ahead and create it.

Add the web project it asks you about.

3. Make your XAML document larger.

Open the Page.xaml file in your Silverlight project. By default, your UserControl tag is set to 400 x 300, though I don't know why that was the dimensions that were picked. IN our case, we're going to make our navigation 800 x 200. So your XAML should look like this now:

<UserControl x:Class="NavigationSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="200">
<
Grid x:Name="LayoutRoot" Background="White">

</
Grid>
</
UserControl>

4. Open your solution in Expression Blend.

I would ALWAYS recommend using Expression Blend for any kind of Silverlight or WPF layout work, because you have the ability to drag and drop your shapes and colors. The next few steps will be shown in Blend.

The first thing I did was open my solution files in Blend.



5. Draw your navigation in Page.xaml.

I am going to be creating a nav similar to the one on my site at http://jeffblankenburg.com.



Before I create anything, I want to change the default Grid control to a Canvas. You can do this simply by changing the work "Grid" to the word "Canvas" in the XAML. Make sure to get the closing /Grid tag too. If you want to understand the differences, I have posts on Canvas, Grid, and StackPanel respectively.

Looking at it, the first thing I want to create is that silverish outer border. That's simply a rectangle with some rounded edges. I've also applied a gradient to it, so it looks a little metallic. Finally, I just made the StrokeThickness = 2. Here's how it looks in Blend (click to enlarge):



Also, here's how our entire XAML looks now:

<UserControl x:Class="NavigationSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="200">
<
Canvas x:Name="LayoutRoot" Background="White">
<
Rectangle Width="780" Height="100" Stroke="#FF666666" RadiusY="15" RadiusX="15" StrokeThickness="2" Canvas.Top="50" Canvas.Left="11">
<
Rectangle.Fill>
<
LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<
GradientStop Color="#FFC4C4C4" Offset="1"/>
<
GradientStop Color="#FFFFFFFF" Offset="0"/>
</
LinearGradientBrush>
</
Rectangle.Fill>
</
Rectangle>
</
Canvas>
</
UserControl>

6. Create the background for the buttons.

There are probably many different ways to approach this problem, so we'll have to live with my simplified solution. Each button on the navigation is orange, with a subtle gradient. It was created the same way that we created the previous rectangle, so here's the XAML for it:

 <Rectangle Height="80" Width="760" RadiusY="7" RadiusX="7" StrokeThickness="2" Stroke="#FFB1B1B1" Canvas.Left="21" Canvas.Top="60">
<
Rectangle.Fill>
<
LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<
GradientStop Color="#FFF7D599" Offset="1"/>
<
GradientStop Color="#FFE8AF34"/>
</
LinearGradientBrush>
</
Rectangle.Fill>
</
Rectangle>
All we need to do is take that XAML, and place it immediately after the rectangle we've already got there. Here's what your design view should look like now:



7. Position your TextBlocks.

We've now reached the step for why I wanted to be using a Canvas as our outer container. We're going to position each of our text elements, and we're looking for pixel by pixel accuracy. The Canvas provides us that.

One of the other things you'll notice about my navigation is that I am not using one of the standard 8 fonts that come with Silverlight. Thankfully, I've written a post on embedding fonts in Silverlight as well. Make sure you read that if you want something different than Arial, Times New Roman, or Courier. If you use Comic Sans, call me so I can smack you. :)

Anyways, I have 6 navigation elements that I want to create. I am simply using TextBlock controls to show text...they're not actually going to do anything. They just have to look pretty. All I did was create the first one, copy it 5 times, and drag each one to their positions. You should notice that Blend provides some nice guides for alignment purposes. It makes life easy. Here's how I have laid them out:



And here's the XAML document in its entirety, thus far:

<UserControl x:Class="NavigationSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="200">
<
Canvas x:Name="LayoutRoot" Background="White">
<
Rectangle Width="780" Height="100" Stroke="#FF666666" RadiusY="15" RadiusX="15" StrokeThickness="2" Canvas.Top="50" Canvas.Left="11">
<
Rectangle.Fill>
<
LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<
GradientStop Color="#FFC4C4C4" Offset="1"/>
<
GradientStop Color="#FFFFFFFF" Offset="0"/>
</
LinearGradientBrush>
</
Rectangle.Fill>
</
Rectangle>
<
Rectangle Height="80" Width="760" RadiusY="7" RadiusX="7" StrokeThickness="2" Stroke="#FFB1B1B1" Canvas.Left="21" Canvas.Top="60">
<
Rectangle.Fill>
<
LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<
GradientStop Color="#FFF7D599" Offset="1"/>
<
GradientStop Color="#FFE8AF34"/>
</
LinearGradientBrush>
</
Rectangle.Fill>
</
Rectangle>
<
TextBlock Text="Home" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="49" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="Archive" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="168" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="About" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="312" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="Code" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="443" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="Slides" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="570" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="Contact" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="684" Foreground="#FF6D6D6D" FontWeight="Normal"/>
</
Canvas>
</
UserControl>

8. We need to make the buttons change color.

Before, I said that the TextBlocks don't actually do anything, and that's true. What I am going to do instead is cover each of those TextBlocks with a semi-transparent Rectangle, and that's the XAML element that is going to do all of the work. I'm also going to add the vertical gray seperators between each TextBlock, but those are just Rectangles. Nothing very exciting. You'll see it in the XAML. Here's my rectangles:

 <Rectangle Height="76" Width="109" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="23" Canvas.Top="62" x:Name="Home"/>
<
Rectangle Height="76" Width="139" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="133" Canvas.Top="62" x:Name="Archive"/>
<
Rectangle Height="76" Width="132" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="273" Canvas.Top="62" x:Name="About"/>
<
Rectangle Height="76" Width="126" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="406" Canvas.Top="62" x:Name="Code"/>
<
Rectangle Height="76" Width="122" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="533" Canvas.Top="62" x:Name="Slides"/>
<
Rectangle Height="76" Width="122" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="656" Canvas.Top="62" x:Name="Contact"/>

There are two things special about these rectangles. The first is that I have actually named them. Each one has an x:Name property, with an indication of which TextBlock it is covering. The second thing you should notice is that they have an opacity set to ZERO. This means that they are completely transparent. An opacity of 1 means that you can't see through them at all. This is the property we are going to manipulate with some code. Here's what the nav looks like now, and the XAML will follow it.



<UserControl x:Class="NavigationSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="200">
<
Canvas x:Name="LayoutRoot" Background="White">
<
Rectangle Width="780" Height="100" Stroke="#FF666666" RadiusY="15" RadiusX="15" StrokeThickness="2" Canvas.Top="50" Canvas.Left="11">
<
Rectangle.Fill>
<
LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<
GradientStop Color="#FFC4C4C4" Offset="1"/>
<
GradientStop Color="#FFFFFFFF" Offset="0"/>
</
LinearGradientBrush>
</
Rectangle.Fill>
</
Rectangle>
<
Rectangle Height="80" Width="760" RadiusY="7" RadiusX="7" StrokeThickness="2" Stroke="#FFB1B1B1" Canvas.Left="21" Canvas.Top="60">
<
Rectangle.Fill>
<
LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<
GradientStop Color="#FFF7D599" Offset="1"/>
<
GradientStop Color="#FFE8AF34"/>
</
LinearGradientBrush>
</
Rectangle.Fill>
</
Rectangle>
<
TextBlock Text="Home" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="49" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="Archive" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="168" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="About" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="312" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="Code" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="443" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="Slides" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="570" Foreground="#FF6D6D6D" FontWeight="Normal"/>
<
TextBlock Text="Contact" FontFamily="ROCK.TTF#Rockwell" FontSize="20" Canvas.Top="91" Canvas.Left="684" Foreground="#FF6D6D6D" FontWeight="Normal"/>

<
Rectangle Height="77" Width="1" Fill="#FFB1B1B1" Stroke="{x:Null}" Canvas.Top="62" Canvas.Left="132" x:Name="Divider1"/>
<
Rectangle Height="77" Width="1" Fill="#FFB1B1B1" Stroke="{x:Null}" Canvas.Top="62" Canvas.Left="272" x:Name="Divider2"/>
<
Rectangle Height="77" Width="1" Fill="#FFB1B1B1" Stroke="{x:Null}" Canvas.Top="62" Canvas.Left="405" x:Name="Divider3"/>
<
Rectangle Height="77" Width="1" Fill="#FFB1B1B1" Stroke="{x:Null}" Canvas.Top="62" Canvas.Left="532" x:Name="Divider4"/>
<
Rectangle Height="77" Width="1" Fill="#FFB1B1B1" Stroke="{x:Null}" Canvas.Top="62" Canvas.Left="655" x:Name="Divider5"/>
<
Rectangle Height="76" Width="109" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="23" Canvas.Top="62" x:Name="Home" MouseEnter="MouseOver" MouseLeave="MouseOut" MouseLeftButtonDown="MouseClick" />
<
Rectangle Height="76" Width="139" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="133" Canvas.Top="62" x:Name="Archive" MouseEnter="MouseOver" MouseLeave="MouseOut" MouseLeftButtonDown="MouseClick" />
<
Rectangle Height="76" Width="132" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="273" Canvas.Top="62" x:Name="About" MouseEnter="MouseOver" MouseLeave="MouseOut" MouseLeftButtonDown="MouseClick" />
<
Rectangle Height="76" Width="126" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="406" Canvas.Top="62" x:Name="Code" MouseEnter="MouseOver" MouseLeave="MouseOut" MouseLeftButtonDown="MouseClick" />
<
Rectangle Height="76" Width="122" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="533" Canvas.Top="62" x:Name="Slides" MouseEnter="MouseOver" MouseLeave="MouseOut" MouseLeftButtonDown="MouseClick" />
<
Rectangle Height="76" Width="122" Opacity="0" Fill="#FFFFFFFF" Stroke="{x:Null}" Canvas.Left="656" Canvas.Top="62" x:Name="Contact" MouseEnter="MouseOver" MouseLeave="MouseOut" MouseLeftButtonDown="MouseClick" />
</
Canvas>
</
UserControl>


9. We need some event handlers.

Each of the Rectangles that we just created need event handlers so that we can do things when the user rolls over them, as well as clicks on them. All we need to add to each of those 6 Rectangles is this code:

MouseEnter="MouseOver" MouseLeave="MouseOut" MouseLeftButtonDown="MouseClick"

I actually already added them for you in the XAML from step #8, but I want to make sure you know why they are there. We're going to define the methods in our next step.

10. Let's write some event handler methods!

So our XAML is technically done. If our designer wanted to change stuff later, he/she can do whatever he/she wants. We just need to write some methods in the Page.xaml code-behind file, and we're done with this little project.

Before we do that, however, I've got one small task for you. In order to do this efficiently, we're going to need to add a reference to this Silverlight project. We're adding System.Net. To add a reference, just right click on the "References" folder in your project, and choose "Add Reference..." In the box that appears, just choose System.Net, and click "OK."



The reason we're doing this is so that we have access to the HtmlWindow and HtmlPage classes. We'll be using those in a method to redirect our user to another page.

Our MouseOver and MouseOut methods are very similar. One is going to add some opacity to our Rectangles, and the other will remove it again. This will give us a very nice rollover effect when the user's mouse moves over each nav element. Here's what those methods look like:

 private void MouseOver(object sender, MouseEventArgs e)
{
Rectangle activebox = sender as Rectangle;
activebox.Opacity = .2;
}

private void MouseOut(object sender, MouseEventArgs e)
{
Rectangle activebox = sender as Rectangle;
activebox.Opacity = 0;
}


Our (kinda) final method is the one to handle clicking on the nav. Ideally, when a user clicks on a nav element, they expect to be whisked away to a new page. And that's the experience we are going to provide them. Here's the method:

 private void MouseClick(object sender, MouseButtonEventArgs e)
{
Rectangle activebox = sender as Rectangle;
if (activebox != null)
{
switch (activebox.Name.ToString().ToUpper())
{
case "HOME":
LaunchNewPage("http://jeffblankenburg.com/default.aspx");
break;
case "ARCHIVE":
LaunchNewPage("http://jeffblankenburg.com/archive.aspx");
break;
case "ABOUT":
LaunchNewPage("http://jeffblankenburg.com/aboutjeffblankenburg.aspx");
break;
case "CODE":
LaunchNewPage("http://jeffblankenburg.com/code.aspx");
break;
case "SLIDES":
LaunchNewPage("http://jeffblankenburg.com/slides.aspx");
break;
case "CONTACT":
LaunchNewPage("http://jeffblankenburg.com/contact.aspx");
break;
}
}
}

private void LaunchNewPage(string URI)
{
{
HtmlWindow window = HtmlPage.Window;
Uri uri = new Uri(URI);
window.Navigate(uri);
}
}


You'll see that the cases in the switch statement should exactly match the names of the 6 Rectangles that we are using, but capitalized. Since I'm never certain exactly which way I capitalized my names, I find it easier just to compare those names converted to all capital letters. That's what the .ToUpper() is for in the switch statement.

You should also see that we call a method named "LaunchNewPage()" in each case. I have extracted the page redirect into its own function. The reason for this, at least initially, was because I wasn't sure if I wanted to open new windows for each click, or if I just wanted to redirect the user in the same browser window. By extracting this functionality, I can easily change it later for all of them, without having to touch each individual case. I do this for things like alert() in javascript as well. That way, if later, I want to make those alert boxes something nicer, like a popup DIV or even another window, I can do it easily.

So there you go! We've got a working navigation!

Click here to see the Silverlight Navigation working...

Click here to get the source code for this entire solution...

kick it on DotNetKicks.com

Labels: , , , , , , ,

posted by Jeff Blankenburg, 9:46 AM | link | 5 comments |

Blankenthoughts: A Popular History Tour

Wednesday, October 22, 2008

Inspired by the most recent post over at Advergirl (a friend of mine), I have decided to list out links to the 10 most popular posts from the entire 2+ year history of my blog. The reason for this is to introduce some of my older (but still useful) articles to some of my newer readers. So here goes:

10) Calling Javascript From Silverlight 2

This is another in my series of tutorial posts, which walks you through creating a Silverlight application that can both call, pass values to, and retrieve values from a Javascript method in the web page host. An invaluable read for any Silverlight developer.

9) Extraordinary Nut Snack

This is a commentary on the commercials from Frito-Lay on their new line of snacks. It includes a video of their first try at commercials. Beautifully done in CGI, the almonds fall like dominoes. And then they say the title of this post. Your mind will wander.

8) CAPTCHA the Flag

This is a complete walkthrough on implementing Asirra, a new CAPTCHA control (of sorts) from Microsoft Research. It's incredibly easy to add to your application, and might even result in an adoption!

7) 6 Tips For Making Website Registration User Friendly

There are a million different websites out there, and there's a million different ways to register for an account on them. This is a list of simple suggestions for the next time you head down the "registration" path. Best tip? Make it easier for your users, not for the developer building the pages.

6) Top 10 Things New Twitter Users Need To Know To Get Followers

You only get one real chance to impress upon someone why they should follow you on Twitter. Following these rules will help you immensely.

5) Simple Resizing In Silverlight

One of the beauties of Silverlight is that it is based on vector graphics. This means that no matter what size you display them, they don't get pixelated and blurry. Vector graphics can grow or shrink to any size, and this tutorial shows you the simple way to make it happen.

4) Creating A Simple Silverlight Animation

As the creator of the CodeMash logo, I was excited when I found out I could convert my Adobe Illustrator file to XAML. Once that was completed, the next logical step was to animate the gears. This tutorial shows you how to do that, as well as a quick tour around Expression Blend.

4) Left Outer Join In LINQ

As someone who has a hard time getting out of a traditional SQL mindset, when I started using LINQ, the question of how to emulate a left outer join immediately confronted me. This outlines the simple way to do just that.

3) I Hate Windows, I'm Moving To Windows Mojave

This was briefly written to announce the Windows Mojave website and advertising campaign. It has certainly has its praises and criticims, but this post got more traffic in one day than any other post has ever gotten.

2) TUTORIAL: Creating a WCF Service for Silverlight 2 and SQL

One of my first "tutorial" posts, this hit the ground running, and hasn't looked back. It's an excellent beginning example of how to get Silverlight talking to a web service that accesses a SQL database.

1) General Ionics: Fake or Fab?

This article was written while I was buying a water filtration system for my home. While not technical in nature, this has been, by far, my most popular post to date.

Labels: , , , ,

posted by Jeff Blankenburg, 8:35 PM | link | 0 comments |

My Indianapolis 500

Thursday, October 09, 2008

Today I am excited about speaking at the Indianapolis .NET User Group meeting. The reason I call it my Indianapolis 500 is because that's how many miles I'm going to be driving to get there and back today. According to Live Maps, it's 231 miles each way. Count in the fact that I am certain to make a wrong turn at some point, and that adds up to around 500 miles total. Now if only I could drive 200 miles/hour...

Anyways, I'm going to be presenting a completely revamped version of my "Amazing Things You Need To See" talk for them, and even plan to Photosynth the room/building we're having the meeting in during the talk. Should be a great night.

Here's a link to the slide deck for those of you that are interested...

Labels: , , , ,

posted by Jeff Blankenburg, 10:26 AM | link | 4 comments |

.NET University in Columbus, OH - November 8, 2008

Monday, September 22, 2008

If you are a regular reader of my blog, I need your help.

Jim Holmes and I are putting on a .NET University-style event on November 8, 2008. It will be held at the Columbus Microsoft office (it's right next to Polaris Mall).

Here's where I need your help. I don't need you to register. I don't need you to attend. I need you to tell the junior developers at your company about this. I need you to tell your friends that have been curious about .NET development about it. You are welcome to attend as well, but if you're using these technologies regularly, it will probably be a refresher.

This event is going to be covering the basics. Web services, C# and VB.NET 3.5, Visual Studio 2008. AJAX 101, Silverlight 101, and WPF 101.

We want to give developers an opportunity to get up to speed on all of the new development technologies that have come out of Microsoft in the past year or so, and this seems to be a great way to do it.

As soon as registration opens for this event, I will posting that information here as well. If you're interested in speaking on one of the subjects listed above in a 100-level presentation, please contact me ASAP so we can get everything arranged.

Labels: , , , , ,

posted by Jeff Blankenburg, 9:32 AM | link | 3 comments |

Silverlight Layout Options - Stack Panel (Part 2 of 3)

Friday, June 06, 2008

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

Labels: , , , , ,

posted by Jeff Blankenburg, 8:35 AM | link | 2 comments |

Day of .NET Events Near You! (and details about poker this weekend)

Monday, April 14, 2008

There are three opportunities for you to get your "learn on," for FREE, in the next month.

April 19 - Central Ohio Day of .NET - Wilmington, OH
Registration has already maxed out for this one at 250 people! A great number for the third year of this event! They will have 27 different sessions to choose from, and on top of being a great day of learning, I am putting together a little event afterwards for anyone that is sticking around at the Roberts Centre that night. More on that at the end of this post.


May 10 - West Michigan Day of .NET - Grand Rapids, MI
The second year for this event, in Grand Rapids, MI. The day will focus on the future of .NET an cover all the world-class technology Microsoft has or will release this year. In addition, the day will consist of breakout sessions with breakfast and lunch included!



May 17 - Cleveland Day of .NET - Cleveland, OH
Cleveland Day of .NET is a free one day conference targeted at developers using the Microsoft .NET platform. It is a collaborative effort among the various local user groups and is open to all developers, local or otherwise. This event is occurring on Saturday, May 17, 2008 from 8:00 AM to 5:30 PM.

There will be numerous sessions to choose from covering a variety of topics. The exact session list will be coming in a few weeks but you can look forward to topics such as:

ASP.NET
Silverlight
DLR / IronRuby / IronPython
SharePoint / MOSS
SQL Server 2008
... many more





Poker .NET (Newbies Encouraged to Try)
I am hosting a Texas Hold'Em Poker Tournament for the first 20 responding attendees of the Central Ohio Day of .NET. It will be held at the Robert Centre, the evening of the CODODN. I've reserved a "parlor suite" that will accomodate us with a full (unstocked) wetbar, refrigerator, and furniture for hanging out. You are welcome to bring anything you'd like to eat and drink while you're there.

We will get started with the tournament at 8:00 PM...plenty of time to hang out with folks after the CODODN and still have some fun in the evening playing cards with your geek friends. The hotel room also has accomodations for sleeping, so if you were looking for a place to crash after the event, I can provide that for a few travelers as well.

The buy-in will be $20, and all of the rules, etc. will be provided when you arrive. Expect your standard Hold'em rules to apply. Please contact me directly at jeffrey.blankenburg@microsoft.com to "register."

Labels: , , , , , , ,

posted by Jeff Blankenburg, 2:17 PM | link | 0 comments |

Want a free copy of Visual Studio 2008 Pro?

Tuesday, November 27, 2007



So some of you may have heard rumblings about some piece of software being released recently, and some of you even chided me for not having a super mega blog announcement about it.

Visual Studio 2008 has RTMed!


Now, in other news, we have put together a few events to give away copies of Visual Studio 2008 Pro to y'all. (I'm currently in Texas...my apologies.)

We will be holding a Holiday Bowl-O-Rama & InstallFest event in Nashville, TN on December 3rd, and another one in Detroit, MI on December 7th. These events MUST be registered for in order to get the free bits, so here's the links to these events:

Nashville, TN - December 3
Detroit, MI - December 7

We will be handing out Visual Studio 2008 Pro (90-day trial) disks to everyone that attends. However, we are only able to give away a full version (available in early 2008) to those individuals that register using the links above, AND attend. Registration alone is not going to be enough.

As some of you loyal readers know, I went bowling a few weeks ago, and declared myself the best bowler that reads this blog. This is your opportunity to prove me wrong. These events will be held at bowling alleys, and we'll be picking up the costs of bowling and shoes, and food will be provided as well. All you need to do is show up, and hurl that ball down the alley.

If you can beat my 2-game average, I will have a special gift for you. (This is above and beyond the Visual Studio software you're going to receive). I'm not going to be promoting this contest at the events, so you'll have to come find me with your proof of score. It's one of the many benefits of being a regular reader of this blog.

So, go register for your event. Tell your colleages to register. It's gonna be a blast. We'll also have XBoxes with Guitar Hero III and Halo 3 available for playing.

Labels: , , ,

posted by Jeff Blankenburg, 10:13 AM | link | 6 comments |

.NET Framework, now available in large print

Wednesday, October 03, 2007

This post is part of a large announcement today. Microsoft is releasing the source code for the .NET framework libraries under the Microsoft Reference License. This license allows viewing of source code, but not modification or redistribution. The source code will be downloadable and viewable by anyone who accepts the license agreement.

This is a very exciting announcement. You'll be able to download a package with all of the source, and then be able to install and browse it locally.

I can continue gushing about this, or I can send you to the official announcement locations:

Scott Guthrie's blog has the primary announcement, with screenshots of the Visual Studio experience.

Also, there is a 30-minute podcast interview with Shawn Burke on Hanselminutes.

Labels: , ,

posted by Jeff Blankenburg, 11:12 AM | link | 0 comments |

Day 1: Holy Cow.

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.

Labels: , , , ,

posted by Jeff Blankenburg, 6:34 PM | link | 1 comments |

.NET Users Group!

Monday, April 23, 2007

In a pinch, I have been asked to present my Google APIs talk for the Central Ohio .NET User's Group. It'll be this Thursday!

If you were teetering on attending, this talk will be overhauled. I am abandoning AJAX search (except maybe as a casual reference at the end) because I lack a practical application for it.

I will be covering:

Google Maps
Google Checkout
Google Calendar
Google Spreadsheets (I hope)

See you there!

UPDATE: Here's the presentation! Office 97 - 03

Labels: ,

posted by Jeff Blankenburg, 1:32 PM | link | 0 comments |

Day of .NET...I'm Speaking!

Thursday, April 05, 2007

Day of .Net May 5, 2007 - I'll be there!

After returning from Vegas on May 3rd, I'll be heading up to Ann Arbor for the Day of .NET. I was selected as a speaker for the event, and I will be presenting my talk on Google's APIs.

Hopefully, I'll see you there!

Labels: , ,

posted by Jeff Blankenburg, 2:39 PM | link | 1 comments |

Search

My Sponsor


My Badges



Follow Jeff Blankenburg on Twitter