Karsten Januszewski on 'silverlight 2'

Silverlight Carousel and WPF Training Site Ported To Beta 2

Karsten Januszewski — Fri, 20 Jun 2008 21:11:00 GMT

Both Yet Another Carousel (YAC) and the WPF training site (which uses YAC) have been ported to Silverlight Beta 2.

Interview With Effective UI

Karsten Januszewski — Tue, 06 May 2008 16:16:00 GMT

Effective UI has put together a site called the User Interface Resource Center. They were kind enough to interview me about WPF, Silverlight, Expression and more. As they put it:

In the 2008 whitepaper “The New Iteration,” Karsten Januszewski teams up with Jaime Rodriguez to spotlight what Microsoft has dubbed the XAML revolution. Based on interviews with early Windows Presentation (WPF) and Silverlight users, Januszewski drills into emerging Microsoft technologies and explores how the designer/developer collaborative process is undergoing change. But, what's the bigger picture? Why is Microsoft investing so heavily in UI Technologies? What are the business benefits that will drive adoption in a field traditionally dominated by rivals? These questions and others are answered here.

You can read the full article here or download the interview.

Using Silverlight Carousel For Video

Karsten Januszewski — Fri, 11 Apr 2008 22:25:00 GMT

I recently used the Silverlight 2 Carousel sample I wrote for the WPF Boot Camp application and encountered a gotcha that some others may hit. Each carousel contains multiple videos, between 5 - 10. Initially, the source of the video was coming from an mms:// URI, streamed from a Windows server. All worked no problem. But, the video quality was sub par and I had other videos that were better quality, but not streamed over mms://. I switched to the higher quality videos, which are buffered over http://. When I did that, the carousel would only display two videos at a time and the other panels would not display any video, even with each of the videos set with auto-play to false. I realized the reason was that the browser itself was throttling the ability of the Silverlight application to begin buffering the videos. It would only handle two at a time.

The solution? Rather than begin to buffer all the videos, I display screenshots of each video. Then, when the user clicks play, I actually load and play the video. If you want the code I used to built the site, you can download it here.

I also fixed a bug in the carousel code where layout wasn't centering the carousel, which is in the latest build of the carousel.

Tweaking The Default Styles For Silverlight 2 Controls

Karsten Januszewski — Tue, 01 Apr 2008 18:55:00 GMT

In WPF, when styling a control, Blend has a very handy feature which allows you to get at the default style and template for any control, simply by right clicking the control and selecting "Edit Control Parts (Template)" and then selecting "Edit a Copy..." These styles and control templates are great places to start when restyling controls.

Unfortunately, Silverlight 2 doesn't have the corrallary in Blend (yet). However, this is easy to get around once you get a hold of the generic.xaml file for all the Silverlight controls. I went ahead and posted it, although there are two other places you can get an "official" copy. First is the source code for the Silverlight Controls themselves. Second is by using Reflector, loading C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Client\System.Windows.Controls.dll and looking at its resources in the disassembler.

Once you have generic.xaml, restyling controls by tweaking the existing styles is simple. First, cut/paste the contents of generic.xaml (either all the styles or just the style of the control you want to restyle) into the resources of either app.xaml or one of your pages (depending on the scope you are seeking.) Second, give the style an x:Key value so that you can reference it later. Finally, add that style attribute to your control in XAML: Style="{StaticResource CustomButton}". That's it! Now you can tweak the style of the button, even changing the storyboards that get fired as a result of different states.

What To Do When Breakpoints Disappear and Debugging Dies In Silverlight 2

Karsten Januszewski — Tue, 01 Apr 2008 18:35:00 GMT

For some random reason, occasionally Silverlight 2 projects will suddenly no longer support debugging. Very frustrating. Fortunately, the fix is pretty simple:

Right click on the Web in the Solution Explorer pane. If you have a Web project, you will see "Property Pages", if you have a Web Application project you will see "Properties". Select that.

Under "Property Pages" select "Start Options" and make sure that both "Silverlight" and "ASP.NET" are checked, "Native Code" and "SQL Server" are unchecked.

Using A UserControl As A DataTemplate in Silverlight 2 and Blend 2

Karsten Januszewski — Mon, 31 Mar 2008 23:00:00 GMT

Recently learned a nifty trick from Pete Blois about how to use a UserControl as a DataTemplate in Silverlight 2. This is real handy, because it allows for a more WPF-like workflow, allowing a designer to create data templates in Blend. With this workflow, the designer can go ahead and build out the data template as a UserControl. He/she may need some help from the developer to wire up the data fields -- in fact, the recommendation would be that the developer maybe create a dummy project with all the fields for the designer and then the designer can party on. (I modeled this technique here for WPF and reskinning Flotzam.)

So, here's a real simple data template from a user control:

<UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="SilverlightApplication1.DataView"
    d:DesignWidth="149" d:DesignHeight="36" Width="153" >

    <Grid x:Name="LayoutRoot" Background="#FFFF0000" >
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top"
              Text="{Binding}" TextWrapping="Wrap"/>
    </Grid>
</UserControl>

Note the use of the {Binding} syntax, which will just default bind to the single property on my data class. You could of course name the property you are binding to in the more likely case that you had more properties in your class.

Then, the xaml file that actually uses this as a data template looks like this:

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" 
    xmlns:SilverlightApplication1="clr-namespace:SilverlightApplication1;assembly=SilverlightApplication1" 
    xmlns:d=http://schemas.microsoft.com/expression/blend/2008 
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 
    mc:Ignorable="d">
    <UserControl.Resources>
        <SilverlightApplication1:DataSource x:Key="DataSourceDS" d:IsDataSource="True"/>
    </UserControl.Resources> 
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox Margin="8,8,165,8" ItemsSource="{Binding Items, Mode=OneWay, 
            Source={StaticResource DataSourceDS}}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Background='Blue' HorizontalAlignment='Stretch'>
                        <SilverlightApplication1:DataView />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

Note that in the attribute where I register the namespace for the datasource, I explicitly refer to the assembly. This is a gotcha when doing this; normally you don't need to refer to the assembly if it is in the same class, but in this case you do.

And there you have it. Download the code here if you'd like.

Reading a file from the server in Silverlight 2

Karsten Januszewski — Mon, 31 Mar 2008 18:39:00 GMT

I recently was working on a Silverlight 2 project and needed to "phone home" from the .xap back to the server of origin to get a text file from the server. It wasn't completely obvious how to do this at first, so I figured I'd share the code I wrote if others need to do something similar. Note a couple things:

You'll need to add a reference to System.Net.dll and using statements for System.Net and System.IO.
The ASP.NET WebDev server used for development will run the project on a random port. You can change this behavior so you have a consistent port number. Click on the project node in Solution Explorer and open the properties window (press F4). Change the “Use dynamic ports” property from True to False and edit the port number.
If you try to go to a server other than the server of origin, you'll most likely run into cross site scripting issues.

    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            //you may need to change this path depending on your web server
            WebRequest request = WebRequest.Create(new Uri("http://localhost:4386/io_web/textfile.txt"));
            request.Method = "GET";
            request.ContentType = "text/plain";
            request.BeginGetResponse(new AsyncCallback(ResponseReady), request);
            
        }

        void ResponseReady(IAsyncResult asyncResult)
        {
            WebRequest request = asyncResult.AsyncState as WebRequest;
            using (WebResponse response = request.EndGetResponse(asyncResult))
            {
                using (Stream responseStream = response.GetResponseStream())
                {
                    StreamReader reader = new StreamReader(responseStream);
                    string s = reader.ReadLine();
                    System.Diagnostics.Debug.WriteLine(s);
                }
            }
        }        

    }