Bryant Likes's Blog

Faking the Initialized Event in Silverlight

bryantlikes — Wed, 25 Mar 2009 00:24:00 GMT

This is another nugget of gold gleaned from the Climbing Mt Avalon workshop, although I believe this one came from Jonathan Russ. He was talking about a bunch of threading tricks in WPF and showed how if you wanted to run some code after everything was initialized you could use the BeginInvoke method of the Dispatcher object. Since there are many places in my code where I want to execute something when the control loads, but only once (since the loaded event gets fired whenever the object gets re-added to the visual tree) I end up writing a lot of code like:

public partial class Page : UserControl
{
    private bool initialized = false;

    public Page()
    {
        InitializeComponent();
        Loaded += new RoutedEventHandler(Page_Loaded);
    }

    void Page_Loaded(object sender, RoutedEventArgs e)
    {
        if (!initialized)
        {
            // do some initialization work
            initialized = true;
        }
    }

}

This works, but it isn’t perfect and there seems to be a lot of issues with the timing of the loaded event. So based on what Jonathan was saying, you could instead just put a call into BeginInvoke in the contructor like so:

public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
        Dispatcher.BeginInvoke(Initialized);
    }

    private void Initialized()
    {
        // do some initialization work
    }
}

So what is this actually doing? BeginInvoke puts a message in the message pump that is running under the covers of everything (note: I’m not a C++ programming so I don’t really fully understand message pumps so this is an over simplification). Because it is last in line in the queue of messages to process, it gets executed after all the other initialization code which has already lined up. If you debug this you will see it actually gets called after the Loaded event gets called. However, this code is the first thing to execute once everything has been loaded and setup which is usually when I want my code to execute.

So this is a much better way to handle initialization code since you aren’t adding event handlers that really only need to fire once and it executes once everything is fully initialized.

Animation Hack Using Attached Properties in Silverlight

bryantlikes — Mon, 23 Mar 2009 22:27:00 GMT

In my last post I blogged about using Attached Properties to get around the limitation that only Dependency Properties can be animated. One astute commented noted that he was guessing this could be applied to animations as well and the answer is yet it can. However, it requires one extra step that makes it a little less appealing.

Also I mentioned in my last post, I got this idea from the Climbing Mt Avalon workshop at MIX which has now been posted online and I would recommend watching if you’re doing Silverlight or WPF work. And now on to the code…

Typically if you want to animating something like the width of a grid in a column that isn’t animatable either because it isn’t a double, color, or another easily animatable type, then you would declare a dependency property on your own host class, usually a UserControl, and then animate that instead. A good example is this blog post on the subject which is what I’ve referred to many times.

However, if we take the attached property route instead of putting the code in our user control, we could declare our own attached property to do the work for us. Here is a simple example:

public static class Attachments
{

    public static readonly DependencyProperty ColumnWidthProperty =
            DependencyProperty.RegisterAttached("ColumnWidth", 
            typeof(double), typeof(Attachments), 
            new PropertyMetadata(
                new PropertyChangedCallback(OnColumnWidthChanged)));

    public static void SetColumnWidth(DependencyObject o, double value)
    {
        o.SetValue(ColumnWidthProperty, value);
    }

    public static double GetColumnWidth(DependencyObject o)
    {
        return (double)o.GetValue(ColumnWidthProperty);
    }

    private static void OnColumnWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((ColumnDefinition)d).Width = new GridLength((double)e.NewValue);
    }

}

Once we have this code we can now simply animate the attached property like so:

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SilverlightApplication1"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <Storyboard x:Name="expandBlue">
                <DoubleAnimation Storyboard.TargetName="blue"
                                 To="300" Duration="0:0:1" />
                <DoubleAnimation Storyboard.TargetName="red"
                                 To="100" Duration="0:0:1" />
            </Storyboard>
            <Storyboard x:Name="expandRed">
                <DoubleAnimation Storyboard.TargetName="red"
                                 To="300" Duration="0:0:1" />
                <DoubleAnimation Storyboard.TargetName="blue"
                                 To="100" Duration="0:0:1" />
            </Storyboard>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="blue" local:Attachments.ColumnWidth="200" />
            <ColumnDefinition x:Name="red" local:Attachments.ColumnWidth="200"/>
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0" Fill="Blue" MouseLeftButtonDown="Blue_MouseLeftButtonDown" />
        <Rectangle Grid.Column="1" Fill="Red" MouseLeftButtonDown="Red_MouseLeftButtonDown"/>
    </Grid>
</UserControl>

Unfortunately if you try the above code (after adding in the mouse event handlers) it won’t work. Why not? Well there seems to be an issue with animating custom attached properties when setting the target property directly in code (actually you’ll notice I left that out above. However, there is a way around it which I found over on Ed’s blog which is to set the target property in code. So here is the code behind with the work around:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        Storyboard.SetTargetProperty(expandBlue.Children[0], new PropertyPath(Attachments.ColumnWidthProperty));
        Storyboard.SetTargetProperty(expandBlue.Children[1], new PropertyPath(Attachments.ColumnWidthProperty));
        Storyboard.SetTargetProperty(expandRed.Children[0], new PropertyPath(Attachments.ColumnWidthProperty));
        Storyboard.SetTargetProperty(expandRed.Children[1], new PropertyPath(Attachments.ColumnWidthProperty));
    }

    private void Blue_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        expandBlue.Begin();
    }

    private void Red_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        expandRed.Begin();
    }
}

Once we set the target property via code, then everything works great. However, that is a pain and makes things a lot less clean. But still I think this is a useful approach to animating the properties that are not easily animatable.

Styling Hack Using Attached Properties in Silverlight

bryantlikes — Thu, 19 Mar 2009 00:08:00 GMT

I need to find the forum post where this question was asked, but I’ll have to do that later since I’m at MIX09 and searching the forums is low on my list. But I wanted to share a cool hack that I came across in the Climbing Mt Avalon (it was definitely a climb, not a hike). One of the many cool things that was shared was a tidbit by Jaime Rodriguez about using Attached Properties.

The question in the forums was how you can style the VerticalScrollBarVisibility property on a TextBox. The problem is that since this property isn’t a DependencyProperty so it can’t be styled. You can test this out by trying the following Xaml:

<UserControl x:Class="Attachment.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

    <UserControl.Resources>

        <Style TargetType="TextBox" x:Key="test">

            <Setter Property="FontSize" Value="24" />

            <Setter Property="VerticalScrollBarVisibility" Value="Visible" />

        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

     <TextBox Text="This is a test" Style="{StaticResource test}" />

    </Grid>

</UserControl>

If you try to run this it will fail. So how can we set this property in style? Well, a trick you can use is to set your own attached property and then have the property set the VerticalScrollBarVisibility property on the TextBox for you. Here is a very quick example that I cooked up (using Robby’s code snippet):

namespace Attachment

{

    public static class Attachments

    {

        public static readonly DependencyProperty MyVsbvProperty =

            DependencyProperty.RegisterAttached("MyVsbv", 

                typeof(ScrollBarVisibility), 

                typeof(Attachments), 

                new PropertyMetadata(OnMyVsbvChanged));

  

        public static void SetMyVsbv(DependencyObject o, ScrollBarVisibility value)

        {

            o.SetValue(MyVsbvProperty, value);

        }

  

        public static ScrollBarVisibility GetMyVsbv(DependencyObject o)

        {

            return (ScrollBarVisibility)o.GetValue(MyVsbvProperty);

        }

  

        private static void OnMyVsbvChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

        {

            ((TextBox)d).VerticalScrollBarVisibility = (ScrollBarVisibility)e.NewValue;

        }

    }

}

Very unintuitive name and my casts could be bad since there are no type checks, just an example. So here when the attached property is changed we change the property on the TextBox that the property is declared on. So if we change our style to use the attached property instead of the actual property it will work:

<UserControl x:Class="Attachment.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="clr-namespace:Attachment"

    Width="400" Height="300">

    <UserControl.Resources>

        <Style TargetType="TextBox" x:Key="test">

            <Setter Property="FontSize" Value="24" />

            <Setter Property="local:Attachments.MyVsbv" Value="Visible" />

        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

                <TextBox Text="This is a test" Style="{StaticResource test}" />

            </Grid>

</UserControl>

So there you have it. If you need to style a property on a control that isn’t a dependency property you can use this method to get around that limitation. There are a bunch of other uses for this that I’ll be blogging when I have another minute.

Enjoy!

Silverlight Streaming Utility Classes

bryantlikes — Wed, 11 Mar 2009 23:36:53 GMT

Yesterday I was working through another question in the Silverlight Forums about how to upload video to Silverlight Streaming via code. At first I tried to reference the Video.Show application, but there is a lot of code there and it doesn’t help if you just want to upload a bunch of videos to the same application. So I ended up taking some of the code from Video.Show and some of the code from the SDK/API and created a very simple Utility class to help with the process.

You can download the code on the Code Gallery site. It is very simple in that there is no error handling and I didn’t create a Silverlight version yet. I did implement GET, POST, PUT, MKCOL, and DELETE as well as creating the functionality to package a bunch of videos into a single zip which can be posted all at once.

A few examples from the code, first creating a directory and PUTting a file in it:

WebDavClient client = new WebDavClient("Your AppID", "Your Key"); 
// get those from http://silverlight.live.com
 
client.CreateFolder("MyVideos");
client.PutFile("MyVideos","C:\\videos\reallyCoolVideo.wmv");

Next, packaging up a bunch of videos and POSTing the zip as an application:

WebDavClient client = new WebDavClient("Your AppID", "Your Key"); 
// get those from http://silverlight.live.com
 
client.PackageAndPostFiles("MyVideos","C:\\videos\firstCoolVideo.wmv","C:\\videos\anothercoolVideo.wmv");

Let me know if you’d like to see a Silverlight version (be easy to implement) or if there are any other features you’d like added.

Enjoy!

This work is licensed under a Creative Commons Attribution By license.

Debugging a Remotely Hosted Silverlight App

bryantlikes — Tue, 10 Mar 2009 18:32:14 GMT

This question has come up in the forums a few times so I thought it would be worth a blog post. Most people are pretty familiar with debugging a Silverlight application running locally during development, but what people many times don’t realize is that you can also attach your debugger to a xap file that is hosted remotely. This MSDN article touches on this briefly, but doesn’t really go into details on how it works.

The important thing to understand about Silverlight is that it runs the .NET code on the client machine, not on the server. The code runs in the browser process, so if you’re going to debug it you need to attach to that process. The one caveat is that the xap on the server must be the same as the compiled xap on your development machine. In other words, you can’t debug the remote xap after you’ve made changes locally and haven’t deployed them.

As an example I will demonstrate remotely debugging the Twilight badge on my blog.

First I open the Twilight.sln and since I’ve made a few changes in the last week I’ll deploy the latest xap file from my project to my server at http://blogs.sqlxml.org/wpfe/twilight.xap.

Next, now that I am sure the xap file on the server has the same code as my solution, I can set a breakpoint on Line 36 (using version 1.5.2) where the Twitter javascript callback calls into Silverlight with the latest list of tweets:

Now instead of hitting F5 to start debugging my application, I’ll open a new instance of Internet Explorer (or you could use Firefox to debug that as well) and navigate to my blog since that is where the xap shows up. Back in Visual Studio I click Debug –> Attach to Process and select the iexplore.exe process which is Internet Explorer (or firefox.exe if you’re debugging Firefox).

NOTE: Make sure you click highlight iexplore.exe or firefox.exe and then click the Select button and choose Silverlight as the type of code you wish to debug.

Once I click attach I can go back to my Internet Explorer window and hit refresh to force the breakpoint to get hit. If everything was setup correctly you should get taken back to Visual Studio where your breakpoint is highlighted and you can now step through your Silverlight code.

So why is this useful? Well a lot can change in your application when you start hosting it on a real server instead of in your localhost. For one, you now have to access services running on the server and you are subject to a lot more security checks that were ignored on your localhost. So I find this to be a useful tool for troubleshooting things when they work locally but break once I deploy out to a server.

One last thing, you can also set this up to remotely debug code running on the Mac.

This work is licensed under a Creative Commons Attribution By license.

Twilight 1.5: Multiple Views with MVVM

bryantlikes — Thu, 26 Feb 2009 19:15:00 GMT

You may have noticed the new look for the Twilight Twitter Badge on my blog a few weeks ago. I wanted to add a few new looks for the badge and got one of them done but then decided I need to spend some more time on it before releasing it because I didn’t like the way the code was turning out. There were a couple of things I didn’t like:

The code was too tightly coupled to the views/skins. This made it hard to add new views/skins without duplicating code.
The views/skins weren’t blendable at all.

To start my rework I began with this post by the Expression Blend/Design team on simulating sample data in Blend. The post is a very simple yet workable solution for displaying design time data in Blend so that you can work on the layout of your application. The only change I made was how I detected design mode. After playing around with that sample I decided that to implement this in Twilight I would need to switch to a Model-View-ViewModel approach so I started doing some research into using this approach with Silverlight. In my research I came across this post by Ryan Keeter on using MVVM in Silverlight. It was a nice simple explanation that made sense to me so I set out to combine the expression team example and this MVVM example.

What I ended up with is pretty close to MVVM. I say pretty close because I don’t think it fully fits since the ViewModels hook into some of the Views Storyboard events and also control the Views VisualState transitions. Maybe that fits into MVVM, but it probably breaks some of the rules. However, for this tiny application it makes things a lot easier. I still have multiple Views per ViewModel and the Views have zero code which is what I really wanted.

There are two ViewModels that I’m using: ListViewModel and RotatingViewModel. Then on top of these two ViewModels are four Views: Default, Large, Small, and Tiny.

ListViewModel Views

Default View	Large View

The ListViewModel is for views where there is just a list of tweets while the RotatingViewModel is for views that display a single tweet at a time.

RotatingViewModel Views

Small	Tiny

You can switch between these views by setting the mode initParam equal to the view you want (example: mode=tiny). The Tiny view looks like the twitter counter badge but then pops the bubbles over the surrounding content. This is done using the windowless = true parameter and absolute positioning. Right now the Silverlight will float over the content below it even when the bubble isn’t showing, so you won’t be able to click through to that content. I might be able to figure out a better way to handle it, but for now that is a known limitation.

Since now all the view logic is in the ViewModel, writing tests is a lot easier. I’m still using the same Silverlight test framework, but thanks to this post by Justin Angel I added a few more complex tests using his WaitFor extension. The test coverage is still very light and I’m not testing the views at all, but I feel like I’m starting to get testing in Silverlight.

I’ve also added another option for hosting Twilight on your blog. You can now host it via Silverlight Streaming using an iframe. Add the following HTML to your page:

** Hosting it via Silverlight Streaming doesn’t support the Tiny mode since the Silverlight won’t be able to expand outside of the iframe.

In addition to hosting it via Silverlight Streaming, you can always self-host it or use the xap I have hosted on dreamhost at http://twilight.bryantlikes.com/twilight.xap. If you’re already using the hosted version, you can switch the mode by using the mode initParam as I mentioned above.

Hopefully this will serve as a great twitter badge for your blog and also a decent example of MVVM in Silverlight along with some unit testing examples as well. Feel free to join the project on Codeplex and create your own views. I am still working on at least one more version that will make the colors tweakable and maybe even detect what colors should be used based on the surrounding html.

Detecting Design Mode in Silverlight

bryantlikes — Wed, 25 Feb 2009 17:46:32 GMT

One of the things I’ve been trying to getting a better understanding of is how to make the Silverlight projects I work on more blendable:

In general, WPF and Silverlight controls should be "blendable". ItemsControls need to display representative data within the design surface.

The problem, at least for me, is that every example out there to detect design mode uses:

var designMode = !HtmlPage.IsEnabled;

Since the Html Bridge is disable inside of Blend, this does work for the most part, but what about when your xap is hosted on another server? In this case the Html Bridge is disabled by default so if someone doesn’t configure it correctly they will get your design time data.

Mode	HtmlPage.IsEnabled
Blend	false
Visual Studio	false
Local Xap	true
Remote Xap	false*
Streaming Silverlight	true**

* This can be changed to true, but it is disabled by default.
** Enabled by default

So I was trying to come up with another method to detect design mode in Silverlight and here is the best I have come up with so far:

public bool IsDesignTime()
{
    try
    {
        var host = Application.Current.Host.Source;
        return false;
    }
    catch
    {
        return true;
    }
}

What happens is that Application.Current.Host.Source works great when the plugin is hosted in a web page and will return the path to the xap file, but in design mode trying to access that property throws an exception. So if you hit the exception then you’re in design mode, otherwise you’re in a web page. Not super elegant but it feels better to me than checking if the Html Bridge is enabled since that isn’t a true check.

Update: As Tom mentions in the comments, you can also use DesignerProperties.GetIsInDesignMode. But if your goal is to make your project more blendable then Visual Studio support might not be important.

Mode	DesignerProperties.GetIsInDesignMode
Blend	true
Visual Studio	false
Local Xap	false
Remote Xap	false
Streaming Silverlight	false

So with this check worst case you get no data in the Visual Studio designer, but the Visual Studio designer isn’t that great anyway. Blend is the real goal. So instead instead of the above code you can use this code instead:

public bool IsDesignTime()
{
    return DesignerProperties.GetIsInDesignMode(Application.Current.RootVisual);
}

Thanks for the tip Tom!

This work is licensed under a Creative Commons Attribution By license.

Running a Home Office Web Server with a Dynamic IP

bryantlikes — Tue, 10 Feb 2009 18:19:00 GMT

I’ve blogged about my server closet in my home office before. I used to have three servers running in my home office and for Internet service I had AT&T DSL with 5 static IP addresses. That all changed by accident when I was looking into current pricing and found I could upgrade my speed and I would get a lower cost. However, someone over at AT&T DSL misread my order and changed me from static to dynamic, so yesterday morning I got knocked offline. I spent over 2 hours on the phone with them and they told me it could take up to 48 hours before they could get me static IP addresses again. So I started looking into getting my blog back online with a dynamic IP.

One of my goals for last year was to outsource most of my home network to external servers because I didn’t like dealing with it. So last year I did outsource email to Google Apps, DNS and some websites to Godaddy, and Subversion to Dreamhost. Because of that I was able to downsize to a single server which I run a few websites on. I also had been having network speed issues so I had just purchased a new router+dsl modem, the D-Link DSL 2540B which happens to support Dynamic DNS.

Setting it up:

You need to make sure your router supports Dynamic DNS and you need an account with a Dynamic DNS service. I used dyndns.com since they have free accounts. I setup mine to be bryantlikes.dyndns.org.
Delete the A record for your DNS (if you have one) and then create a new CNAME for your domain that points to the Dynamic DNS name. So, for example, blogs.sqlxml.org has a CNAME that points to bryantlikes.dyndns.org. If you have other CNAME records already (for example, www), then point those to your dynamic DNS entry as well.
Forward port 80 to your web server in your router settings. This is different for each router, D-Link calls it Virtual Servers under the advanced tab.

At this point your website should be available from the Internet. However, internally you won’t be able to hit it. The port forwarding only happens from the WAN interface and not the LAN one. In order to get it working internally you have to take a couple more steps.

Setup DNS on your web server if it isn’t already on there. Then add a new domain for the domain that you used in your dynamic DNS. For example, I added the bryantlikes.dyndns.org domain and then created an A record for the root that points to my web server’s local IP address.
Make sure your DHCP clients all point to your web server as their DNS. It is the only DNS Server that redirects the dynamic DNS entry to your local server.

That’s it! You should now have your dynamic IP serving up web pages both internally and externally. This caused me a bunch of headaches and googling yesterday so I thought it was worth blogging about. I glossed over lots of setup in each of the steps so if you want more information let me know and I’ll try to add it.

A Year of Climbing Mountains

bryantlikes — Wed, 04 Feb 2009 19:54:00 GMT

This post is actually about cycling more than coding, but as I thought about it I realized that being a Software Developer is often much like mountain climbing. Each time I get to what I think is the peak (or close to the peak) I see that there is another even higher peak up ahead. For instance, I’m finally getting comfortable with Silverlight 2 and just starting to get a glimpse of Silverlight 3. A Software Developer can never stop learning (especially if you’re a web developer). I still remember my first glimpse of the .NET/FX mountain range at PDC 05 which we now know to have peaks such as WPF, WCF, and even Silverlight. It was very overwhelming at the time, but now it is fun to look back at where I was then. Quite a view from up here. With all the new stuff coming this year, Win7, Silverlight 3, VS 2010 (betas at least), it will be a year of climbing for sure.

But the real climbing that inspired this post is climbing on my bike. Last year I got serious about riding my bike and did three big rides: 62.5 mile ADA Ride, 100 mile Coolbreeze Century, and the 175 mile MS Socal Ride. At the start of the season I rode mostly flats with a few hills but pretty much hated climbing. During the ADA ride I kept up with a pack of riders that were much faster than me but I would quickly get dropped every time we hit any kind of a climb. After that I started riding Rockstore once a week during the Wins Wheels shop ride and would ride Santa Susana once or twice a week. I did enough climbing prior to my century that I didn’t get passed a single time on any climbs and I was the one dropping the pack. On the MS ride I did get passed on one climb (by a girl), but that was because I was resting the in the shade so that I didn’t pass out from heat exhaustion. :)

I’ve actually started to enjoy climbing and so this year I’m planning on doing two rides: Cruising the Conejo and Ride Around the Bear. Both are century rides, but both have a lot of climbing. Cruising the Conejo has 6,000 feet of climbing while Ride Around the Bear has 10,000 feet of climbing. I just started to train for them in earnest this week and sometimes I wonder if I’m crazy to attempt these rides. Right now I know I couldn’t do it, but that is how you get to a place you want to be. You plan to get there at a later date and set that date in stone, otherwise you’ll never get there.

So this year is a year of climbing for me, both in cycling and in software. Hope to see you on one of the peaks!

Twilight 1.1: Using a Yahoo Pipes Proxy

bryantlikes — Tue, 27 Jan 2009 22:54:00 GMT

I just pushed a minor update to Twilight that you can now download on the codeplex site (version 1.1). I really wanted to allow the xap file to be hosted on other servers since many bloggers don’t have the ability to host their own xap files. After reading Scott Barnes’ post about replacing his header with Silverlight I decided I would take a similar approach. Instead of using a callback or trying to get the data directly, Scott followed Jonas’ post on using Yahoo Pipes to proxy data to Silverlight. I took the same approach and during the process refactored some of the code by moving all the data logic out to a separate set of classes. Now when the xap loads it checks to see if it can access the Html Bridge and makes sure it is on the same domain. If it is then it will just use the standard Twitter callback method, otherwise it uses the yahoo pipes proxy I created.

The pipe I created simple takes a username and the number of tweets to return and grabs the twitter xml. I then use an HttpRequest in my code to get this xml from yahoo formatted as json which matches up to the json that I was getting from Twitter with the exception that there are a few wrapper objects I have to go through to get the tweets. I also moved all the update logic out of the page class and into the base data provider class since that made a lot more sense.

I think the new code makes it much cleaner and the end result is you can now just stick the object tag up on your blog and leave the xap hosted on my server if you’d like. Here is the html you can use for the hosted version:

<div id="silverlightControlHost">
<object id="TwitterBadge" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="200" height="400">
    <param name="source" value="http://twilight.bryantlikes.com/Twilight.xap"/>
    <param name="minRuntimeVersion" value="2.0.31005.0" />
    <param name="initParams" value="username=bryantlikes,count=10" />
    <div style='position:relative;'>
      <a style='z-index:0;' href='http://go.microsoft.com/fwlink/?LinkID=124807' style='text-decoration: none;'>
      <img src="http://twilight.bryantlikes.com/twilightNoSilverlight.png" alt="Get Microsoft Silverlight" style='border-style: none'/> </a>
     <div style='font-family:Arial;font-size:10px;position:absolute;top:230;left:10;width:175px;'>
      by clicking "Install Microsoft Silverlight" you accept the <br />
    <a href="http://www.microsoft.com/silverlight/resources/License.aspx?v=2.0">Silverlight license agreement</a>
</div>
</div>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'>
</iframe>
</div>

Today I had my first sighting of Twilight in the wild over at Denny Boynton’s Blog. Very cool!

Twilight Source Code Published

bryantlikes — Tue, 27 Jan 2009 02:21:00 GMT

This afternoon I put the Twilight source code up on CodePlex. Twilight is the Silverlight Twitter Badge that I created from my AgFeedReader Mix 10k contest entry. You can download the source and I also packaged up the Xap file along with support files if you don’t want to bother with the code.

I haven’t been able to get it to work when the xap isn’t hosted on the same server as the page itself, so for now there is no hosted scenario. Perhaps I’ll have to create some other proxy like Silvester uses. If you have any good ideas feel free to suggest them or better yet contribute to the project.

In my previous post on the subject I wrote that I was using the LinkLabel control to create the text with the linked embedded in it. There was also an external WrapPanel control that came with the LinkLabel source. However, in the end I switched to using a custom wrap panel that was based on the Silverlight Toolkit WrapPanel but was a much lighter version (I only need horizontal wrapping). I also found another issue with the LinkLabel control and after spending some time trying to fix it I decided that it also was overkill for what I needed. So while I used some of the same ideas I ended up writing some new code to handle this (I did credit both of these projects in both the source code and on the codeplex page).

I also gave the Silverlight Unit Test Framework a try and the source code includes a test project. This was my first real experience with the framework and I definitely found it very useful. If you haven’t used it before I highly recommend Jeff Wilcox’s introduction post on the framework. It was very easy to use and I actually found a few bugs in my code through my tests (I didn’t do full TDD on this project but next time I think I will). When you run the test project it loads up right in the browser and runs the tests. I didn’t do very much UI testing, but I did test my wrap panel implementation by using the TestPanel that is part of the framework. That allowed me add TextBlocks and measure their size to determine how big my panel should be. Then I added an instance of my panel to the TestPanel to test it. This feature is very nice since measuring doesn’t work right unless the child is actually in the control tree, that that alone makes the test framework worthwhile. Even better was the fact that I didn’t have to modify a single line of code in my real project in order to allow the test framework to work. Well done!

I also did some work to create a decent install experience after reading Tim Heuer’s several posts on the subject. If you don’t have Silverlight installed you will get an image that looks like the actual application but has a prompt to install Silverlight. I didn’t spend much time on this part, but it is a lot better than the big giant button you normally would get.

There is still lots of room for improvement and I would like to figure out the remote hosting option as well as create some cool animation for loading. But for now it is a very light weight (13k) Silverlight Twitter Badge.

Enjoy!

Twilight: A Silverlight Twitter Badge

bryantlikes — Sat, 24 Jan 2009 06:27:00 GMT

When Twitter first came out I signed up but never really caught on until recently. I finally figured out that you really need to follow some people first to get the hang of it. Now I enjoy using Twitter and read peoples tweets using Witty, a WPF Twitter client. Even though I only have a few followers, it still feels like you’re part of a bigger conversation since your own posts get mixed in with the posts of people you’re following.

So now that I’m using Twitter I wanted to put my latest tweets on my blog. Twitter provides a flash based Twitter badge and an HTML version as well, but since I’m a Silverlight developer I thought it would be cool to use Silverlight. I came across Silvester which is a Silverlight Twitter Widget and looks great, but I wanted to create a widget/badge that didn’t require a proxy server.

For my entry in the MIX 10K contest I created a Silverlight feed reader that would allow you to subscribe to a bunch of feeds and it would keep them updated and stored your subscriptions in isolated storage. Since you can’t actually access most feeds directly (unless the host has a client access file which most don’t) I used the Google Ajax Feed proxy to grab all my feeds. This worked great because Google has a client access policy that allows you to get the content plus it puts it all into a single format and returns it as json. All I had to do was generate classes in my application to mirror the object structure of the json and then use a DataContractJsonSerializer to deserialize the json into objects.

So when I started on my Twitter badge I basically took the AgFeedReader project and removed the isolated storage and the feed subscription interface. I really only needed a single feed which I would set using an InitParam. I was able to get my twitter feed using the Google Ajax Feed Proxy, but that proxy only returns the last four items from the feed and omits a lot of the rich data that Twitter provides. So I decided to try another approach.

I started by looking at the script that is part of the Twitter HTML badge. The key was the script they provide to get the feeds which includes a callback parameter. You call the json script and add a callback=YourJavascriptFunction. So in my Silverlight application I add two scripts to the page: the first is the Twitter Json script and the second is a stub javascript function that calls back into my Silverlight application. This gets around the security issue which prevents you from downloading the json directly.

Now back in my Silverlight application I get passed in a ScriptObject which is the json. This ScriptObject is really just an array of Tweets, but since it is an array I actually have to manually convert it to my .Net objects. There is a good MSDN page here that describes all the rules for the interop between javascript objects and .Net objects. Below is my method that gets called from BLOCKED SCRIPT

[ScriptableMember]
public void TwitterCallback(ScriptObject json)
{
    twitList.ItemsSource = json.ConvertTo<Tweet[]>();
}

The twitList is my ListBox and the Tweet class is a .Net class that I created that mirrors the json returned by Twitter.

In order to display the Tweets I wanted to not just have text but have clickable links. The Silvester Twitter Gadget has a very nice LinkLabel control that will allow you to have a text area with clickable links. So instead of reinventing the wheel I just used that in place of my normal TextBlocks from the AgFeedReader project. I did change one line of code but for the most part it worked perfectly.

Anyhow, it is a pretty standard Twitter Badge right now, but that is only a few hours of work and I’m hoping to add a few more features to it. I’m hoping to put the xap along with some javascript helper files up on a server somewhere so that anyone can add it to their blog, but if you’re interested let me know and I’ll try to get it done this weekend. If you’re reading this through a feed reader, head over to my blog and you will be able to see the Twitter Badge in action.

Switching XAP Files on the Client Side

bryantlikes — Tue, 23 Dec 2008 04:15:00 GMT

qingquan126778 asked the question in the Silverlight forums about how to switch between pages in Silverlight if the pages are in different xap files. First I pointed to Jesse Liberty’s post on multi-page applications (qinqquan wanted different xap files, not just pages) and then Mike Snow’s post on swapping between xap files using the ASP.NET server control (qingquan wanted client side only).

So since neither one was quite right, I coded up an example of my own that is based off Mike’s example but uses client side scripting instead of server side. Basically you grab a reference to the Silverlight plugin control via the onLoad event and then just set the Source property to the new xap.

function App2()
{
slCtl.Source = "ClientBin/SilverlightApplication2.xap";
}

Download Source Here

BTW – Did you vote on my 10k Content Entry yet? :)

MIX 10k Challenge Entry

bryantlikes — Mon, 22 Dec 2008 23:35:00 GMT

So my entry in the Mix 10K challenge is up in the gallery. It was a fun little project to create and I went well over 10k many times during the project and then had to whittle it back down each time. It is a feed reader that allows you to subscribe to feeds and it stores your subscriptions in Isolated Storage. I thought it was somewhat original, but then I watched this video on the contest and Adam even mentions an RSS reader, so I guess it was little obvious. :)

If you’re looking to enter the contest a few good posts on the subject are Adam’s post and Bill Reiss’ post.

Anyhow, check out my feed reader and be sure to vote!

Silverlight Dependency Properties

bryantlikes — Mon, 15 Dec 2008 18:08:00 GMT

I’ve seen this question a number of times in the Silverlight Forums, so instead of just answering it one more time I decided to answer it here so I can refer back to this. The question generally looks like this:

I have create a dependency property and the setter isn’t getting called during data binding. My dependency property is declared as follows:

public class MyClass : Control
{
 
 
    public int MyProperty
    {
        get { return (int)GetValue(MyPropertyProperty); }
        set 
        { 
            SetValue(MyPropertyProperty, value); 
            // some custom code here
        }
    }
 
    // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MyPropertyProperty =
        DependencyProperty.Register("MyProperty", typeof(int), typeof(MyClass), new PropertyMetadata(0));
 
 
}

The reason why the setter isn’t called here (at least the way I understand this), is that when data binding sets this value it isn’t calling the public property. Instead it is using the SetValue on the dependency object instead. So the custom code is never called. What you need to do is add a PropertyChangedCallback to the DependencyProperty registration as follows:

public int MyProperty
{
    get { return (int)GetValue(MyPropertyProperty); }
    set 
    { 
        SetValue(MyPropertyProperty, value); 
    }
}
 
// Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty MyPropertyProperty =
    DependencyProperty.Register("MyProperty", typeof(int), typeof(MyClass), new PropertyMetadata(0, MyPropertyChanged));
 
private static void MyPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
    ((MyClass)o).OnMyPropertyChanged((int)e.NewValue);
}
 
private void OnMyPropertyChanged(int newValue)
{
    // custom code goes here instead
}

Now whenever the property changes the OnMyPropertyChanged method will get called. Notice that this is where you put your custom code to handle the property changing. This code will get called when the public property setter is called or when the property is changed using the SetValue method.

More information on Dependency Properties can be found here.