The cool thing first: Moonlight is also available in a 64 bit version, not just a 32 bit version as Silverlight does!

Find a list of features below:

• First preview release. First release of a full Mono VM in a browser plugin.
• Includes initial work on CoreCLR and metadata/instruction verification (preview 1 security status (http://www.moonlight-project.com/SecurityStatus))
• Includes the Microsoft MS-PL Controls.
• Negotiated layout, where controls can autosize themselves. We’ve also had big performance increase over recent svn in this department.
• Includes deepzoom functionality, so sites like Hard Rock Cafe Memorabilia (http://memorabilia.hardrock.com) and The Playboy Archive (nsfw) (http://playboy.covertocover.com) should work.
• Development tools for building xaps (if you build from source. stay tuned for a moonlight devel-esque rpm which will include them).

Also, there are some Silverlight 3 features:

• ng functions
• SaveFileDialog
• MultiScaleImage 3.0 API enhancements
• MediaStreamSource now supports PCM audio data, RGBA and YV12 video data.
• WriteableBitmap is supported.

Have a look at Moonlight’s Downloads page as a good starting point.

What the hell is that?

XAML Power Toys is a Visual Studio 2008 SP1 Multi-AppDomain Add-In that empowers WPF & Silverlight developers while working in the XAML editor.  Its Line of Business form generation tools, Grid tools,  DataGrid and ListView generation really shorten the XAML page layout time.

New features? Of course:

And here is a screenshot to see the power of this Visual Studio add-in:

Very cool. Thank you Karl.

Given is a very simple user interface: an InkCanvas control and some buttons for clearing the canvas, saving and loading data.

Here’s the markup:

<DockPanel>
    <StackPanel DockPanel.Dock="Bottom">
        <Button x:Name="ClearButton"
                Content="Clear"
                Click="ClearButton_Click"/>

        <Button x:Name="SaveButton"
                Content="Save"
                Click="SaveButton_Click"/>

        <Button x:Name="LoadButton"
                Content="Load"
                Click="LoadButton_Click"/>
    </StackPanel>
    <InkCanvas x:Name="DrawingPane"/>
</DockPanel>

All the drawings are strokes. They are stored in the Strokes-Collection. Using XamlWriter and XamlReader we are able to (de)serialize this collection easily:

private void SaveButton_Click(
    object sender,
    RoutedEventArgs e)
{
    using (XmlWriter xmlWriter =
                XmlWriter.Create("Strokes.xml"))
    {
        XamlWriter.Save(DrawingPane.Strokes, xmlWriter);
        xmlWriter.Flush();
    }

}

private void LoadButton_Click(
    object sender,
    RoutedEventArgs e)
{
    object tempObj = null;

    using (XmlReader xmlReader =
                XmlReader.Create("Strokes.xml"))
    {
        tempObj = XamlReader.Load(xmlReader);
    }

    if (tempObj != null && tempObj is StrokeCollection)
    {
        DrawingPane.Strokes.Clear();
        foreach (Stroke s in tempObj as StrokeCollection)
            DrawingPane.Strokes.Add(s);
    }

}

private void ClearButton_Click(
    object sender,
    RoutedEventArgs e)
{
    DrawingPane.Strokes.Clear();
}

That’s all you have to do.

To to able to play a bit with it, here’s the download of the whole solution:

Normally you have your source (Collection) which is bound to a list control. To enable sorting and filtering you have to use the CollectionViewSource as an decorator. This means: Provide your collection (e.g. within the resource section of your window) and create a CollectionViewSource. The property Source is bound to the collection. The CollectionViewSource provides mechanism for sorting, filtering and grouping data.

Let’s have a look at the sample. We use a class Person and a Collection of that type (both can be found in the sample application). Within the constructor of the collection some sample data is added (you won’t do that in reality, but it’s ok for a sample).

<Window x:Class="SortFilterDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SortFilterDemo"
    Title="Sort and Filter Sample"
    SizeToContent="WidthAndHeight">

    <Window.Resources>
        <local:PersonCollection x:Key="PersonList"/>
        <CollectionViewSource
            x:Key="PersonViewSource"
            Source="{Binding Source={StaticResource PersonList}}"/>

        <DataTemplate DataType="{x:Type local:Person}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=LastName}"/>
                <TextBlock Text=", "/>
                <TextBlock Text="{Binding Path=FirstName}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <StackPanel>
        <TextBlock Text="People" FontWeight="Bold" FontSize="18" Margin="5"/>
        <ListBox
            ItemsSource="{Binding Source={StaticResource PersonViewSource}}"
            Margin="5"/>
        <StackPanel Orientation="Horizontal">
            <Button x:Name="SortLastNameButton"
                    Content="Sort Lastname"
                    Click="SortLastNameButton_Click"
                    Margin="5"/>
            <Button x:Name="SortFirstNameButton"
                    Content="Sort Firstname"
                    Click="SortFirstNameButton_Click"
                    Margin="5"/>
        </StackPanel>
        <CheckBox x:Name="FilterCheckBox"
                  IsChecked="False"
                  Content="Filter List"
                  Click="FilterCheckBox_Click"
                  Margin="5"/>
    </StackPanel>
</Window>

As you can see in the markup, there are three things created within the resource section of the window:

• First there is the instantiation of the base collection
• Second there is an instantiation of the CollectionViewSource which has a binding to the base collection
• Third there is a data template declared. This describes the appearance of each entry.

The ListBox element has a binding to the CollectionViewSource. Furthermore there are two buttons which are used for defining the sorting. Last but not least there is a checkbox element for turning on or off the filtering. As you can see there is some code behind necessary. Let’s have a look on it:

private void FilterCheckBox_Click(object sender, RoutedEventArgs e)
{
    CollectionViewSource collSource =
        FindResource("PersonViewSource") as CollectionViewSource;
    if (collSource != null)
    {
        if (FilterCheckBox.IsChecked == true)
        {
            collSource.Filter += collSource_Filter;
        }
        else
        {
            collSource.Filter -= collSource_Filter;
        }
    }
}

void collSource_Filter(object sender, FilterEventArgs e)
{
    Person pers = e.Item as Person;
    if (pers != null)
    {
        if (pers.LastName.Equals("Eder",
            StringComparison.InvariantCultureIgnoreCase))
            e.Accepted = true;
        else
            e.Accepted = false;
    }
}

private void SortLastNameButton_Click(object sender, RoutedEventArgs e)
{
    Sort("LastName");
}

private void SortFirstNameButton_Click(object sender, RoutedEventArgs e)
{
    Sort("FirstName");
}

private void Sort(String propertyName)
{
    CollectionViewSource collSource =
        FindResource("PersonViewSource") as CollectionViewSource;
    if (collSource != null)
    {
        collSource.SortDescriptions.Clear();
        collSource.SortDescriptions.Add(new SortDescription(propertyName,
            ListSortDirection.Ascending));
    }
}

There are event handlers for the buttons which call a method called Sort. This method has one parameter defining the property we want to use for sorting. Within the Sort method we add an entry to the SortDescriptions collection of the CollectionViewSource. That’s all of the magic stuff.

For the filter functionality we use a CheckBox control which is used to turn the filtering on or off. If turned on, an event handler is added for the Filter event. If turned of, the event handler is removed.

The handler is called for each entry in the collection. There we can define our behavior. Use the Accecpeted property of the event arguments for setting the visibility of the entry.

Here’s a screenshot of the sample application:

And here is the download:

You own several computers and you want to edit your todos wherever you are. In fact you need a system where your data is stored at one place. Maybe you have Microsoft Exchange or something like that. But the possibilities are not the best ones and maybe you can use it just in combination with your job.

So, what’s an easy solution?

There is a very famous tool at The Code Project, called ToDoList. It’s a very cool tool with a lot of options.

It allows to have different data files for different projects, customers or whatever. So, what you can do is: Install Windows Live Mesh and this tool on every computer you own. Store all the data files of ToDoList within the Mesh folder and you have them available, independent which computer you use and where you are.

This is a very simple solution, cheap and you have a powerful tool for managing your todos.

Some of you may know my project wpf-blogger.com. It’s currently a feed aggregation system for WPF and Silverlight developers. Till now it was available in German, English and French language. Today I added a new language: Spanish. I was asked several times to do this but till now I didn’t know any blogs about WPF and Silverlight written in Spanish.

So, If there are some Spanish speaking people out there knowing another useful blogs, please leave a message.

• Use it as a simple property setter.
• Use the type markup extension to define the type

If you use the type markup extension in combination with an inner class you might run into the problem that your type won’t be found. Here is an example.

We use the following class:

public class Demo
{
    public class DataItem
    {
        public DataItem(string last, string first)
        {
            LastName = last;
            FirstName = first;
        }

        public string LastName { get; set; }
        public string FirstName { get; set; }

        public override string ToString()
        {
            return this.LastName + ", " + this.FirstName;
        }
    }
}

As you can see, there is an inner class called DataItem, which is the type we want to use for the DataType of an data template.

Now let us have a look on the data template definition. Your first try might be the following one:

<DataTemplate x:Key="DataItemTemplate"
              DataType="{x:Type local:DataItem}">

This won’t work, as the type couldn’t be found. Now you might use the complete indirection:

<DataTemplate x:Key="DataItemTemplate"
              DataType="{x:Type local:Demo.DataItem}">

You’ll also receive an error.

The solution is to use the type as you will receive it with a GetType().Name:

<DataTemplate x:Key="DataItemTemplate"
              DataType="{x:Type local:Demo+DataItem}">

That’s the trick.

• 100% WPF Component (no Windows Forms interop, no native code calls, etc.)
• Same property editing approach introduced by Visual Studio 2008 WPF Designer ("Cider") and Expression Blend, same steps for creating inline and dialog based editors
• Built-in property editors and support for editors customization, injection
• Property grouping, sorting and filtering, property display schemas based on multiple rule sets
• Several display modes for properties (Native CLR properties, Dependency properties, All properties)
• Optional display of Attached or Read-only properties
• Category initial mode configuration (expanded or collapsed by default)
• Property metadata (DisplayNameAttribute, CategoryAttribute, DescriptionAttribute, etc) and ICustomTypeDescriptor support
• All property metadata is accessible from custom editors, MetadataStore support
• Property "Search Box" with live view updates, possibility to hide/show search box
• Basic support for Windows Forms interopability, display of non-dependency objects, integration into Windows Forms application)

And there are more features.

How does it look like? Here are some screens:

Pretty cool control.

Project: http://www.codeplex.com/wpfpropertygrid

• How to animate list box items
• How to override the item focus
• How to style the selected item

First, let’s have a look at the result:

To display the data, objects of type of Person are used. This is a simple data class, having nothing special:

public class Person
{
    public String FirstName { get; set; }
    public String LastName { get; set; }

    public override string ToString()
    {
        return String.Format("{0}, {1}", LastName, FirstName);
    }
}

For getting sample data, there is a mock object called PersonMock:

public static class PersonMock
{
    private static PersonCollection people =
        new PersonCollection();

    public static PersonCollection GetPeople()
    {
        if (people.Count > 0)
            return people;

        for (int i = 0; i < 10; i++)
            people.Add
                (
                    new Person
                    {
                        FirstName = "FirstName" + i.ToString(),
                        LastName = "LastName" + i.ToString()
                    }
                );

        return people;
    }
}

As you can see, there is also a collection, which can be found in the attached sample application.

For the styling we have to create a DataTemplate. The DataTemplate will be the ItemTemplate of the ListBox element and declares how each item will be displayed:

<DataTemplate DataType="Person">
    <Border
        Cursor="Hand"
        Name="BorderControl"
        Background="WhiteSmoke"
        BorderThickness="0"
        CornerRadius="5"
        Padding="5">
        <TextBlock
            Name="TextControl"
            Grid.Column="0"
            Text="{Binding}"
            Background="Transparent"
            Padding="4">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger
                            Binding="{Binding ElementName=BorderControl,Path=IsMouseOver}"
                            Value="True">
                            <Setter Property="Foreground" Value="White"/>
                            <Setter Property="FontWeight" Value="Bold"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Border>
    <DataTemplate.Triggers>
        <EventTrigger
            SourceName="BorderControl"
            RoutedEvent="TextBlock.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="BorderControl"
                        Storyboard.TargetProperty="Background.Color"
                        To="DarkRed" Duration="00:00:00.2" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger
            SourceName="BorderControl"
            RoutedEvent="TextBlock.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="BorderControl"
                        Storyboard.TargetProperty="Background.Color"
                        To="WhiteSmoke" Duration="00:00:00.2" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

The data template itself is really simple. It just defines a border having a TextBlock element inside.

The most interesting parts are the used triggers. There is one data trigger for the TextBlock and some event triggers for the data template. What’s the difference between DataTrigger and EventTrigger:

A data trigger is bound to a property and watches if there are changes. If so, you can set other properties to change their values.

An event trigger is used to listen to events. If an event is raised the event trigger recognizes this and you are able to create an animation for example.

In the XAML markup above you can see that there are some event triggers listening to the MouseEnter and MouseLeave events. In case of the mouse enters the element, an animation is started. If the mouse leaves the element, another animation is started to reconstruct the original appearance.

If you haven’t used animations till now: there are many helpful articles on MSDN.

To style the selected items and to remove the focus rectangle we have to create another style which has to be set at the ItemContainerStyle of the list box.

<Style x:Key="GlowContainer" TargetType="{x:Type ListBoxItem}">
    <Setter Property="FocusVisualStyle">
        <Setter.Value>
            <Style>
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Border
                                Background="Transparent"
                                Opacity="0"
                                CornerRadius="0">
                                <Rectangle
                                    Margin="0"
                                    StrokeThickness="0"
                                    Stroke="Transparent"
                                    StrokeDashArray="1 2"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border Background="WhiteSmoke"
                            CornerRadius="5"
                            BorderThickness="2"
                            x:Name="ItemBorder"
                            Margin="6,3,6,3" >
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter
                            TargetName="ItemBorder"
                            Property="BitmapEffect">
                            <Setter.Value>
                                <OuterGlowBitmapEffect
                                    GlowColor="DarkRed"
                                    GlowSize="5" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The first setter of this style defines a control template for the FocusVisualStyle. In our case we define a transparent border. This results in an invisible focus for the selected item.

The second setter defines another control template: this includes a border and a trigger listening the IsSelected property. If an item is selected an OuterGlowBitmapEffect is applied to the border.

That’s all to get the list box you can see in the screenshot above. I recommend to have a look at control templates, data templates, triggers, effects and animations to get a whole picture of what is going on here, or try the sample application: