The Problem Solver

In my previous post I created a horizontally scrolling ListBox. Nice but sometimes I want to have the items wrap around. Sort of a multi column flow ListBox. Turns out this was quite a bit harder because unlike WPF Silverlight didn’t have a WrapPanel. However the Silverlight Toolkit, recently released does contain the required WrapPanel,

So remember the code was like this:

Partial Public ClassPage
    InheritsUserControl

    Public Sub New()
        InitializeComponent()
    End Sub

    Private SubUserControl_Loaded(ByVal sender AsSystem.Object, ByVal e AsSystem.Windows.RoutedEventArgs)
        For Eachnumber InEnumerable.Range(1, 100)
            DemoList.Items.Add(number)
        Next
    End Sub
End Class

If we replace the horizontal StackPanel with a WrapPanel we should be done right? Well unfortunately not quite. If we use the following XAML (changes in bold):

<UserControl x:Class="SilverlightApplication1.Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls" 
    Loaded="UserControl_Loaded" 
    Width="400" Height="300"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
        <ListBox x:Name="DemoList"> 
            <ListBox.ItemsPanel> 
                <ItemsPanelTemplate> 
                    <controls:WrapPanel /> 
                </ItemsPanelTemplate> 
            </ListBox.ItemsPanel> 
        </ListBox> 
    </Grid> 
</UserControl>

we end up with the following Silverlight application:

The problem is that the ListBox will lets its contents grow both horizontally and vertically so we need to stop its contents from growing horizontally so it can wrap around as we want. What we need to do is add a ListBox template with a slightly different content like this:

<ListBox.Template> 
    <ControlTemplate> 
        <Grid> 
            <ScrollViewer> 
                <ItemsPresenter /> 
            </ScrollViewer> 
        </Grid> 
    </ControlTemplate> 
</ListBox.Template>

The grid will make sure the contents do not become to wide. The result looks like this:

Nice

So just to make it a little but nicer by formatting the number to display by adding a ItemTemplate like this:

<ListBox.ItemTemplate> 
    <DataTemplate> 
        <TextBlock Text="{Binding}" 
                   TextAlignment="Right" 
                   Width="25" /> 
    </DataTemplate> 
</ListBox.ItemTemplate>

The result is a nice flow layout:

If I make the Silverlight app take up the full browser window we can see the wrap around in action as we resize the browser window

The full XAML is like this:

<UserControl x:Class="SilverlightApplication1.Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls= 
     "clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls" 
    Loaded="UserControl_Loaded"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
        <ListBox x:Name="DemoList"> 
            <ListBox.ItemsPanel> 
                <ItemsPanelTemplate> 
                    <controls:WrapPanel /> 
                </ItemsPanelTemplate> 
            </ListBox.ItemsPanel> 
            <ListBox.Template> 
                <ControlTemplate> 
                    <Grid> 
                        <ScrollViewer> 
                            <ItemsPresenter /> 
                        </ScrollViewer> 
                    </Grid> 
                </ControlTemplate> 
            </ListBox.Template> 
            <ListBox.ItemTemplate> 
                <DataTemplate> 
                    <TextBlock Text="{Binding}" 
                               TextAlignment="Right" 
                               Width="25" /> 
                </DataTemplate> 
            </ListBox.ItemTemplate> 
        </ListBox> 
    </Grid> 
</UserControl>

Enjoy

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

Given the following XAML:

<UserControl x:Class="SilverlightApplication1.Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Loaded="UserControl_Loaded" 
    Width="400" Height="300"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
        <ListBox x:Name="DemoList"></ListBox> 
    </Grid> 
</UserControl>

with the following code:

Partial Public Class Page
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        For Each number In Enumerable.Range(1, 100)
            DemoList.Items.Add(number)
        Next
    End Sub
End Class

No big deal but suppose we want to have the list scroll horizontally instead of vertically?

Turns out this is quite easy but, at least to me, not all that obvious. The problem is that we need to update the ItemsPanelTemplate and Blend doesn’t seem to let me do that. However using Visual Studio its a breeze.

All we need to do is change the XAML a bit like this. The bold lines are the newly added ones.

<UserControl x:Class="SilverlightApplication1.Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Loaded="UserControl_Loaded" 
    Width="400" Height="300"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
        <ListBox x:Name="DemoList"> 
            <ListBox.ItemsPanel> 
                <ItemsPanelTemplate> 
                    <StackPanel Orientation="Horizontal" /> 
                </ItemsPanelTemplate> 
            </ListBox.ItemsPanel> 
        </ListBox> 
    </Grid> 
</UserControl>

And we get the following layout:

Easy right

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

Yesterday I uploaded a new version of the SQL Server Compact Workflow Persistence Service to code.msdn.com. No major changes this time just two new features to get it more in line with the standard SqlWorkflowPersistenceService.

1. I added a GetAllWorkflows() function that returns all persisted workflow's in the database.
2. I added a LoadExpiredTimerWorkflowIds() function that will return a list of workflow instanceId's of all workflow's with an expired timer.

Both new functions should help make the SqlCeWorkflowPersistenceService even more like the out of the box SqlWorkflowPersistenceService. And as before it is completely free .

You can download the source code for the SqlCeWorkflowPersistenceService here: http://code.msdn.microsoft.com/SqlCeWFPersistence.

PS should you need to develop a custom WorkflowPersistenceService for some other database this would be a good starting point!

Enjoy.

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

In the next version of workflow we are going to leave the XOML extension behind us. Creating workflow's or custom activities using markup will create a XAML file instead of the now familiar XOML file. That doesn't mean we are moving to exactly the same same format as WPF as WF is quite different in its nature.

But at the same time we seem to getting a new file extension named XAMLX. So what is this XAMLX all about? Well it turns out this is a markup file containing both the WCF service declaration as well as the WF service implementation. Is this a good thing? Well I am really not sure yet. XAML markup works great for hierarchical items like WPF forms or nested WF activities but a service interface is a different thing.

Guess I will have to think about this one some more.

Enjoy the CTP!

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

The PDC wasn't all hard work, we sure had some fun too .

As always there where a number of product group dinners. This year the C#, VB and F# product groups joined up and had a dinner together. I am at the right bottom, check Anders sitting at the left back end of the table. Lots of other team members and MVP's where there and we had a great time!

The party this year was at Universal Studio which is always a nice place to go to. Before we went there was another product group dinner to attend and afterward I drove with Beth and Alan to Universal Studio.

Last time Beth was in the Netherlands for the SDC I drove her around and this time she got to drive me around. The drive over was fun and fast, Beth drives like the Italian in her and this was with her "slow" car as she also has a tuned Subaru. This is Beth getting chased by a zombie.

Some of the creatures in Universal Studio where really creepy and well done.

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

Want to download and watch all PDC content? Then there are a couple of ways to get at them. The official way if to go through the session agenda at the conference site. See https://sessions.microsoftpdc.com/public/timeline.aspx. You see all sessions but it takes a bit of work. Another nice way is through Channel 9 by using the following feed: http://channel9.msdn.com/posts/pdc2008/RSS/?tag=videos.

But the best as far as I am concerned is using the list compiled by Greg Duncan. Check this list http://coolthingoftheday.blogspot.com/2008/10/pdc2008-quick-video-link-list.html. And it even has the Visual Basic source code used to generate the list

Enjoy the videos!

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu