This is a very simple animation that can be used just about anywhere.

[[ If you're viewing this post through an RSS reader, you won't be able to see the Silverlight example ]]

Following is my Page.xaml for this example.  There was no code needed.

<UserControl x:Class="AnimationSample.Page"

    xmlns="http://schemas.microsoft.com/client/2007" 

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

    Width="300" Height="150">

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

    <Grid.Triggers>

      <EventTrigger RoutedEvent="Grid.Loaded">

        <EventTrigger.Actions>

          <BeginStoryboard>

            <Storyboard x:Name="CrawlingBorder" RepeatBehavior="Forever">

              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rectangle" 

                Storyboard.TargetProperty="(Shape.StrokeDashOffset)" BeginTime="00:00:00">

                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />

                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="5" />

              </DoubleAnimationUsingKeyFrames>

            </Storyboard>

          </BeginStoryboard>

        </EventTrigger.Actions>

      </EventTrigger>

    </Grid.Triggers>

    <Rectangle Stroke="Green" StrokeThickness="6" StrokeDashArray="3,2" StrokeDashCap="Round" 

               Margin="20" StrokeDashOffset="0" StrokeLineJoin="Round" x:Name="rectangle">

    </Rectangle>

    <TextBlock FontFamily="Lucida Sans Unicode" FontSize="24" 

               Text="Crawling Border" FontWeight="Bold" 

               HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFDE680A"/>

  </Grid>

</UserControl>

I gave a talk at the Central Ohio Day of .NET last Saturday about Silverlight 2.  The presentation was written in Silverlight 2 Beta 1 and included examples of functionality built into Silverlight versions 1 and 2, and the beginning steps in creating the presentation itself.

I have much more planned to be added to the presentation, so I created a CodePlex project called PresentLight.  I'm hoping that other people will like the idea of giving a presentation in the technology that they're speaking about, and maybe they'll use the framework or even add their own content!

I uploaded a slightly older version than the one I gave at CODoDN to silverlight.live.com, check it out by clicking on the following preview image.  The XAP is 14 MB so expect a decent wait for everything to load ... I need to reduce the size.  I'll update this post with a better example as soon as I have it available.

Much thanks goes out to Jeff Blankenburg for building the original slide deck that I based this presentation on.  Also, I got the idea from David Sleeckx's WPF presentation, which is an excellent way to get an overview of WPF.

Using the Presentation

You can navigate the slides through the menu on the left, or move forward one slide by clicking on the header area.  A few of the slides don't have much at first, but clicking in the slide area will show text which was talking points for that part of the presentation.  The interactive slides in the middle should be pretty self explanatory - you can modify the XAML in most of the examples to see changes in real time.

The screen shots at the end can be clicked on to view the full size.  I wanted to keep the entire presentation in Silverlight, so I was trying to use screen shots instead of jumping into Visual Studio.  These slides were taking over an hour each to prepare, because I was trying to give each one a different type of animation.  I think they ended up being a little disjointed though - its much more natural to see someone working with the environment than seeing screen shots of some code, then the solution explorer, then XAML.  I'm definitely going to have to give more thought to that area.

Plans for the Future

I plan to have the slides stored in data rather than hard coded in the page code behind.  I'm going to integrate more examples, such as Isolated Storage, Communications with web services and through sockets, and dynamic languages integrated directly into the slides, like I did with the XAML examples.

Also, I'm going to expand more on some of the user controls that I created as part of the application.  I already went into the scrolling textbox control in my last post, so there will be more of that on the way.

The TextBox control included with Silverlight 2 Beta 1 is a welcome addition.  There was no such control in previous versions of Silverlight, including the alpha.

Unfortunately, the TextBox control is very limited at this point.  It does not support scrollbars when it's content is larger than it's size.  You can "scroll" the next by moving the cursor, but that's just enough to make it functional.  Selecting text past what's visible doesn't automatically scroll to the cursor.  Also, there's no text wrapping, although setting the AcceptsReturn property to True will allow line breaks in the text.

I wanted to have a text box with a little more functionality for my projects, so I decided to see what I could do.  What follows is the simple ScrollingTextBox control that I created.  I didn't spend a ton of time on this because I fully expect this "missing" functionality to be included by Beta 2, or at least by the time Silverlight 2 is released.

To build this, I first created a Silverlight application project and added a Silverlight control called ScrollingTextBox.

<UserControl x:Class="PresentLight.ScrollingTextBox"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid x:Name="LayoutRoot">
    <ScrollViewer x:Name="sv" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
      <TextBlock x:Name="hiddenTextBlock" Opacity="0" />
      <TextBox x:Name="tb" AcceptsReturn="True" TextChanged="tb_TextChanged" />
    </ScrollViewer>
  </Grid>
</UserControl>

The internal TextBlock control is only there to serve as a way to get the actual size of the text.  TextBlock controls will automatically resize to fit their contents, so if I keep it's text the same as the internal textbox control, it will resize accordingly.  The default value for Width and Height dependency properties in Silverlight is Auto, which causes this resize behavior.

Since the ScrollViewer control automatically set's it's scrollable region to fit it's contents, it will be resized to fit the internal textblock.  The internal textbox control will automatically resize to fit it's container, since I haven't set any width or height on it.

Then I added a dependency property for setting the control's Text, which takes care of setting the textbox's text value.  Finally, I handled the TextChanged event on the internal TextBox control to resize based on my internal TextBlock's size.

using System.Windows;
using System.Windows.Controls;

namespace PresentLight
{
    public partial class ScrollingTextBox : UserControl
    {
        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set
            {
                SetValue(TextProperty, value);
                tb.Text = value;
            }
        }

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), 
                               typeof(ScrollingTextBox), null);


        public ScrollingTextBox()
        {
            InitializeComponent();
        }

        private void tb_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (hiddenTextBlock != null)
            {
                hiddenTextBlock.Text = tb.Text;
                tb.Width = hiddenTextBlock.ActualWidth;
                tb.Height = hiddenTextBlock.ActualHeight;
            }
        }
    }
}

The result is a marginally better control.  There are a lot of possible improvements for me to make, such as possibly handing the selection changed event on the textbox to scroll the ScrollViewer to the cursor's position.  That will have to wait for a future post.

I haven't been posting much lately because I've been very busy preparing for my session at the Central Ohio Day of .NET.  I'm creating a presentation about Silverlight 2.0 Beta 1, but with a twist - the presentation is actually a Silverlight application!

Templates

For the last day or so I've been working on getting my application's main control to use templates to define the interface.  This gives me the option to create multiple "skins" for the application.

To accomplish this, I've been referencing two very excellent tutorials by Jesse Liberty and Shawn Burke.  But, as usual for me, I ran into a problem that sucked up a ton of time.

The Problem

I was trying to set up my template to include buttons for navigation between slides.  I started by building a simple XAML interface for the buttons, like so.

<StackPanel Orientation="Horizontal">
    <Button Height="75" Width="75" Margin="0,0,8,0">
        <TextBlock Text="First" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Button>
    <Button Height="75" Width="75" Margin="0,0,8,0">
        <TextBlock Text="Prev" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Button>
    <Button Height="75" Width="75" Margin="0,0,8,0">
        <TextBlock Text="Next" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Button>
    <Button Height="75" Width="75">
        <TextBlock Text="Last" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Button>
</StackPanel>

And that looks good enough for this example.

Then I took that same XAML and put it into a template stored in the application resources (in App.xaml).

<Application.Resources>
  <Style x:Key="TestTemplate" TargetType="pl:Presentation">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="pl:Presentation">
          <StackPanel Orientation="Horizontal">
            <Button Height="75" Width="75" Margin="0,0,8,0">
              <TextBlock Text="First" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
            <Button Height="75" Width="75" Margin="0,0,8,0">
              <TextBlock Text="Prev" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
            <Button Height="75" Width="75" Margin="0,0,8,0">
              <TextBlock Text="Next" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
            <Button Height="75" Width="75">
              <TextBlock Text="Last" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
          </StackPanel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Application.Resources>

And modified my Page.xaml to have my Presentation UserControl class (modeled after Shawn Burke's tutorial) with the template applied as a style.

<local:Presentation x:Name="PresentationControl" Style="{StaticResource TestTemplate}" />

But running this treated me to a browser window that's stuck loading.  My break point in OnApplyTemplate in my Presentation class never got hit.  Pausing Visual Studio didn't tell me anything, so I knew it wasn't stuck in a loop.  This had me stuck for several hours.

The Solution

What I eventually found was that certain things that are perfectly acceptable XAML in a user control won't work in a template.  Furthermore, if Silverlight encounters these elements in the template it just hangs.

The problem XAML was the buttons.  Instead of including your actual buttons in your template, you should instead create a separate template for the buttons, and reference that as your button style.

<Style x:Key="TestButton" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Button Width="75" Height="75">
          <Button.Content>
            <ContentPresenter Content="{TemplateBinding Content}" 
                              HorizontalAlignment="Center" 
                              VerticalAlignment="Center" />
          </Button.Content>
        </Button>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Then modify the previous template to use the new button template.

<Application.Resources>
  <Style x:Key="TestTemplate" TargetType="pl:Presentation">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="pl:Presentation">
          <StackPanel Orientation="Horizontal">
            <Button x:Name="FirstButtonElement" Content="First" 
                    Style="{StaticResource TestButton}" Margin="0,0,8,0" />
            <Button x:Name="PreviousButtonElement" Content="Prev" 
                    Style="{StaticResource TestButton}" Margin="0,0,8,0" />
            <Button x:Name="NextButtonElement" Content="Next" 
                    Style="{StaticResource TestButton}" Margin="0,0,8,0" />
            <Button x:Name="LastButtonElement" Content="Last" 
                    Style="{StaticResource TestButton}" />
          </StackPanel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Application.Resources>

Finally, this works.  It looks the same, but now I can take the template and make it look much nicer if I want.

Hopefully this tip will help others working on templating in Silverlight avoid the pitfalls I ran into.

I arrived at work this morning only to find that the Silverlight 2.0 Beta 1 plugin and some documentation was discovered and available for download.  A few hours later the SDK and documentation was available, then after the keynote at Mix that whole lot was officially released.  I couldn't wait to try it out when I got home.

Unfortunately, the install experience hasn't been good.  I've got the Silverlight 2.0 plugin and SDK installed, but I can't get the tools for Visual Studio 2008 installed.  Here's step by step what I've done so far.

1. Downloaded and installed the Silverlight 2 Beta 1 plugin (runtime) without a hitch.
2. Downloaded Silverlight 2 Beta 1 SDK, Silverlight 2 Beta 1 Tools for Visual Studio 2008, and Expression Blend 2.5 March Preview.
3. Uninstalled Silverlight 1.1 Alpha Tools for Visual Studio 2008 and Expression Blend 2 December Preview.
4. Installed Silverlight 2 Beta 1 SDK.
5. Tried to install Silverlight 2 Beta 1 Tools for Visual Studio but got the following error message:

An Error Has Occurred:
Silverlight Tools cannot be installed because one or more of the following conditions is true:

1. Visual Studio 2008 RTM is not installed.
2. The Web Authoring feature of Visual Studio is not installed.
3. A previous version of the Silverlight Runtime is installed.
4. A previous version of the Silverlight SDK is installed.
5. The Visual Studio Update KB949325 is installed.
6. A previous version of Silverlight Tools is installed.

To continue, please install or uninstall the appropriate products and run this installer again.

6. Verified what I had installed.  I've got Visual Studio Team System 2008 RTM, Microsoft Visual Studio Web Authoring Component, Silverlight runtime, Silverlight 2 SDK, Silverlight 1.0 SDK.  Oops, maybe that's the problem?  Also, I didn't uninstall Silverlight 1.1 Alpha runtime before installing Silverlight 2.0 runtime, but that shouldn't be a problem.
7. Uninstalled Silverlight runtime and both SDKs, then rebooted for good measure.
8. Installed Silverlight runtime, 2.0 SDK, ran silverlight_chainer.exe again and got the same error.
9. Did a web search and found http://blog.steeleprice.net/archive/2008/03/05/1362.aspx which mentions a registry key that needs to be removed, but I don't have that registry key on my system.

At this point I can't find any more information through web searches or in the Silverlight.Net forums.  I'm posting this problem in the forums with a link here for a complete description of the problem.

I was really hoping to get few things done in Silverlight 2.0 and posted online tonight, but I'm kind of stuck and frustrated at this point.

UPDATE

Chad Campbell responded to my Silverlight.net forum post with a solution.  The solution definitely isn't something that I'd say is obvious, but hey, do whatever works.  I'm just a little surprised that I'd have more trouble with the beta than the alpha.

A big thanks goes out to Chad for his quick reply.  I'm definitely going to have to buy his book now!

Oops!

Even though the tools are now installed, something is still wrong.  Here's what I get when I try to create a Silverlight project in Visual Studio 2008.

Resolution

It turns out that the Silverlight 2 Tools Beta 1 for Visual Studio 2008 installs the Silverlight 2 Beta 1 runtime and SDK as part of the package.  This causes a problem if you already installed the plugin or the SDK.  I uninstalled everything Silverlight related, then installed silverlight_chainer.exe, this time successfully.  I'm now ready to go.

Labels: silverlight, SilverlightDevCamp

Labels: silverlight, sprint

Labels: silverlight, sprint

Labels: silverlight

Labels: silverlight

This package contains sample source code for some common
UI controls for the Silverlight managed code framework.

You may customize these controls and use them in your
Silverlight applications.

In this package, you will find a functional solution
with C# code files representing control behavior and XAML
markup files representing the visual aspects of the control.
Also included in the solution is test code that demonstrates
usage of the controls, how events can be hooked up and
handled, etc.

The following sample controls are included:
* Button
* Slider
* ScrollBar
* ScrollViewer
* ListBox

Labels: silverlight, sprint

Labels: silverlight, sprint

The 1.1 refreshes from MIX to now have mainly just been updates to keep in sync with the Silverlight 1.0 code-base. Now that Silverlight 1.0 has shipped, the upcoming refreshes of 1.1 will be feature updates with more functionality. So you'll start to see more functionality appear soon.

Labels: silverlight

Labels: silverlight

Labels: silverlight, sprint

Labels: silverlight, sprint

Labels: silverlight, sprint

Labels: silverlight, sprint

• Visual Studio 2008 Beta 2 using Microsoft Secure Content Downloader
  
• Silverlight 1.0 RC.
• Visual Studio Silverlight Tools Alpha.
  
• Expression Blend 2 August Preview.

Labels: silverlight,