Silverlight Toolkit comes with a great control for quick building typical business application screens – DataForm, a sibling control to the DataGrid for showing and editing a single record. If you use its field autogeneration feature, you may be surprised when looking to the database after its first submit. All your ((n)var)char columns rendered as TextBoxes in the DataForm that had been empty have also empty string values in the database:

This is not what you usually want. If the field is left blank, I expect the database field be NULL instead of an empty string. So what to do to persuade the DataForm to send nulls in this case?

An IValueConverter, of course! First we define a suitable one which returns null when converting back an empty string:

public class SourceNullValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return value == null ? "" : value.ToString();
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (targetType != typeof(string))
            return value;

        if (value == null)
            return null;

        return value.ToString() == "" ? null : value.ToString();
    }
}

Secondly, we need to force the DataForm to use this value converter instead of its own default DataFormToStringConverter. We do this by handling AutoGeneratingField event where we get the already built binding, copy it (by using CreateCopy extension method from the Silverlight Business Application template) and set our new value converter:

private void EmployeeForm_AutoGeneratingField(object sender, DataFormAutoGeneratingFieldEventArgs e)
{
    if (e.Field.Content.GetType() == typeof(TextBox))
    {
        Binding binding = e.Field.Content.GetBindingExpression(TextBox.TextProperty).ParentBinding.CreateCopy();
        binding.Converter = new SourceNullValueConverter();
        e.Field.Content.SetBinding(TextBox.TextProperty, binding);
    }
}

Case closed, Poirot!

[digg]

[UPDATE 2010-08-28: I updated the sample to work with the final release of Silverlight 4. I also improved the design a little :-)]

Today I want to share with you my Audio Record sample using some new cool features coming in Silverlight 4. The sample demonstrates:

• recording audio using the AudioCaptureDevice and CaptureSource classes, and saving it using an AudioSink object,
• access to local folders on the computer,
• simple commanding model using the new Command properties and ICommand interface,
• changing appearance of a standard control (button) using its visual states.

Of course, full source code is attached at the end of the article.

The user interface is really simple:

What we want to achieve:

1. three state audio recorder with three buttons “Record”, “Stop” and “Save”,
2. the user first selects the “Record” buttons, the recorder will begin recording; the user clicks the “Stop” button when he is done with recording and finally selects the “Save” button to be prompted by a classic Save file dialog to save the record into a standard WAV file on his disc,
3. command buttons should have a correct enabled/disabled logic,
4. a status bar with text helping the user what to do or what is the recorder doing,

Disclaimer: Obviously I’m not the one gifted with graphical skills so don’t expect nifty animations here and there. It’s just a sample. :-)

Recording audio

An AudioCaptureDevice object represents a hardware device cable capturing sound. There may be more than one present and the user may select a default one in the new Silverlight 4 configuration tab:

You can get the default one through the CaptureDeviceConfiguration class:

var audioDevice = CaptureDeviceConfiguration.GetDefaultAudioCaptureDevice();

Then you use a CaptureSource object to capture any input from this source:

_captureSource = new CaptureSource() { AudioCaptureDevice = audioDevice };

Lastly, we need to connect a sink to the capture source. Sinks allow us to process incoming input from the source in any way we want – for example to store in a memory stream. For this we derive a new AudioSink (our is called MemoryAudioSink) and override the most important method – OnSamples:

protected override void OnSamples(long sampleTime, long sampleDuration, byte[] sampleData)
{
    // New audio data arrived, write them to the stream.
    _stream.Write(sampleData, 0, sampleData.Length);
}

To connect and start capturing the sound:

_sink = new MemoryAudioSink();
_sink.CaptureSource = _captureSource;
_captureSource.Start()

Writing a WAV file

CaptureSource sends the captured sound to its sinks as raw PCM data. We need to add a standard WAV header to be usable for a user. This is done by the SavePcmToWav method:

public static void SavePcmToWav(Stream rawData, Stream output, AudioFormat audioFormat)
{
    if (audioFormat.WaveFormat != WaveFormatType.Pcm)
        throw new ArgumentException("Only PCM coding is supported.");

    BinaryWriter bwOutput = new BinaryWriter(output);

    // Write down the WAV header.
    // Refer to http://technology.niagarac.on.ca/courses/ctec1631/WavFileFormat.html
    // for details on the format.

    // Note that we use ToCharArray() when writing fixed strings
    // to force using the char[] overload because
    // Write(string) writes the string prefixed by its length.

    // -- RIFF chunk

    bwOutput.Write("RIFF".ToCharArray());

    // Total Length Of Package To Follow
    // Computed as data length plus the header length without the data
    // we have written so far and this data (44 - 4 ("RIFF") - 4 (this data))
    bwOutput.Write((uint)(rawData.Length + 36));

    bwOutput.Write("WAVE".ToCharArray());

    // -- FORMAT chunk

    bwOutput.Write("fmt ".ToCharArray());

    // Length Of FORMAT Chunk (Binary, always 0x10)
    bwOutput.Write((uint)0x10);

    // Always 0x01
    bwOutput.Write((ushort)0x01);

    // Channel Numbers (Always 0x01=Mono, 0x02=Stereo)
    bwOutput.Write((ushort)audioFormat.Channels);

    // Sample Rate (Binary, in Hz)
    bwOutput.Write((uint)audioFormat.SamplesPerSecond);

    // Bytes Per Second
    bwOutput.Write((uint)(audioFormat.BitsPerSample * audioFormat.SamplesPerSecond * audioFormat.Channels / 8));

    // Bytes Per Sample: 1=8 bit Mono, 2=8 bit Stereo or 16 bit Mono, 4=16 bit Stereo
    bwOutput.Write((ushort)(audioFormat.BitsPerSample * audioFormat.Channels / 8));

    // Bits Per Sample
    bwOutput.Write((ushort)audioFormat.BitsPerSample);

    // -- DATA chunk

    bwOutput.Write("data".ToCharArray());

    // Length Of Data To Follow
    bwOutput.Write((uint)rawData.Length);

    // Raw PCM data follows...

    // Reset position in rawData and remember its origin position
    // to restore at the end.
    long originalRawDataStreamPosition = rawData.Position;
    rawData.Seek(0, SeekOrigin.Begin);

    // Append all data from rawData stream into output stream.
    byte[] buffer = new byte[4096];
    int read;       // number of bytes read in one iteration
    while ((read = rawData.Read(buffer, 0, 4096)) > 0)
    {
        bwOutput.Write(buffer, 0, read);
    }

    rawData.Seek(originalRawDataStreamPosition, SeekOrigin.Begin);
}

Simple commanding with a simple view model

I’m a fan of the new Model-View-ViewModel pattern as it allows you further properly structure your presentation layer while taking advantage of powerful WPF/Silverlight databinding. It wasn’t so simple to use it in Silverlight projects because it did not support commands as the full WPF stack did so you needed to resort to Prism or other frameworks.

However, with Silverlight 4 comes the ICommand interface:

    public interface ICommand
    {
        event EventHandler CanExecuteChanged;
        bool CanExecute(object parameter);
        void Execute(object parameter);
    }

and new Command properties on ButtonBase-derived controls and the HyperLink control.

With this you can create your own viewmodel wrapping all your code interacting with the user interface and application logic in a single unit-testable class. The user interface will hook into your viewmodel class though public ICommand and dependency properties by leveraging databinding. Your code-behind will be almost empty!

To simplify things I created a SimpleCommand because all of my commands will just call a method on the viewmodel class and I will set their executability directly through a property:

public class SimpleCommand : ICommand
{
    public Action ExecuteAction { get; set; }

    private bool _canExecute;
    public bool MayBeExecuted
    {
        get { return _canExecute; }
        set
        {
            if (_canExecute != value)
            {
                _canExecute = value;
                if (CanExecuteChanged != null)
                    CanExecuteChanged(this, new EventArgs());
            }
        }
    }

    #region ICommand Members

    public bool CanExecute(object parameter)
    {
        return MayBeExecuted;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        if (ExecuteAction != null)
            ExecuteAction();
    }

    #endregion
}

Let’s dig into the viewmodel class – the heart of the application. First some declarations:

public class RecorderViewModel : DependencyObject
{
    private SimpleCommand _recordCommand;
    private SimpleCommand _playPauseCommand;
    private SimpleCommand _saveCommand;

    private MemoryAudioSink _sink;
    private CaptureSource _captureSource;
    private SaveFileDialog saveFileDialog = new SaveFileDialog() { Filter = "Audio files (*.wav)|*.wav" };

    public SimpleCommand RecordCommand { get { return _recordCommand; } }
    public SimpleCommand PlayPauseCommand { get { return _playPauseCommand; } }
    public SimpleCommand SaveCommand { get { return _saveCommand; } }

    public static readonly DependencyProperty StatusTextProperty = DependencyProperty.Register("StatusText", typeof(string), typeof(RecorderViewModel), null);
    public string StatusText
    {
        get
        {
            return (string)GetValue(StatusTextProperty);
        }
        set
        {
            SetValue(StatusTextProperty, value);
        }
    }

The constructor initializes the three commands to just call their respective methods on the class:

    public RecorderViewModel()
    {
        _recordCommand = new SimpleCommand()
        {
            MayBeExecuted = true,
            ExecuteAction = () => Record()
        };

        _saveCommand = new SimpleCommand()
        {
            MayBeExecuted = false,
            ExecuteAction = () => SaveFile()
        };

        _playPauseCommand = new SimpleCommand()
        {
            MayBeExecuted = false,
            ExecuteAction = () => PlayOrPause()
        };

        var audioDevice = CaptureDeviceConfiguration.GetDefaultAudioCaptureDevice();
        _captureSource = new CaptureSource() { AudioCaptureDevice = audioDevice };

        GoToStartState();
    }

The last piece is to define the methods doing the hard work:

    protected void Record()
    {
        if (!EnsureAudioAccess())
            return;

        if (_captureSource.State != CaptureState.Stopped)
            return;

        _sink = new MemoryAudioSink();
        _sink.CaptureSource = _captureSource;
        _captureSource.Start();     

        // Enable pause command, disable record command
        _playPauseCommand.MayBeExecuted = true;
        _recordCommand.MayBeExecuted = false;
        StatusText = "Recording...";
    }

    protected void PlayOrPause()
    {
        if (_captureSource.State == CaptureState.Started)
        {
            _captureSource.Stop();

            // Disable pause command, enable save command
            _playPauseCommand.MayBeExecuted = false;
            _saveCommand.MayBeExecuted = true;
            StatusText = "Recording finished. You may save your record.";
        }
    }

    protected void SaveFile()
    {
        if (saveFileDialog.ShowDialog() == false)
        {
            return;
        }

        StatusText = "Saving...";

        Stream stream = saveFileDialog.OpenFile();

        WavManager.SavePcmToWav(_sink.BackingStream, stream, _sink.CurrentFormat);

        stream.Close();

        MessageBox.Show("Your record is saved.");

        GoToStartState();
    }

Putting it all together

I put three buttons and one textblock into the default MainPage.xaml:

<Button Command="{Binding RecordCommand}" Grid.Column="0" HorizontalAlignment="Left" Name="button1" Template="{StaticResource RecordCommandStyle}"/>        
<Button Content="Stop" Command="{Binding PlayPauseCommand}" Grid.Column="1" HorizontalAlignment="Left"  Name="button3" Width="75" Template="{StaticResource StopCommandStyle}"/>
<Button Content="Save" Command="{Binding SaveCommand}" Grid.Column="2" HorizontalAlignment="Left" Name="button2" Width="57" Margin="0,0,0,-1" Template="{StaticResource SaveCommandStyle}"/>
<TextBlock Text="{Binding StatusText}" Name="textBlock1" Margin="8,5,-32,8" Grid.Row="1" Grid.ColumnSpan="4" Foreground="#FF13E3BC" FontSize="12" />

Note the bindings to the Command properties of the buttons and Text property of the textblock element (but this is nothing special). The whole viewmodel is then set to the page’s DataContext which is the only thing we do inside the code-behind:

RecorderViewModel ViewModel;

public MainPage()
{
    InitializeComponent();

    ViewModel = new RecorderViewModel();

    DataContext = ViewModel;
}

That’s it. I didn’t show changing the appearance of the standard button controls using visual states here because this possibility has been with us long before the fourth version but it’s included in the project.

The floppy disk icon comes from the wonderful Crystal project.

Download full sources of the sample.

This article introduces a way to produce formatted strings with standard .NET formatting patterns (as used by the String.Format method) in data-binding on the Silverlight platform.

Oftentimes we require some kind of formatting when binding a value from a data source on the form. In ASP.NET many of the data-bound controls have the DataFormatString property in addition to the DataField property. But if you want to bind against more than one data field and concatenate their values into one formatted string, you usually need to create a template field. An example could be a Contact object from the AdventureWorks model with its FirstName and LastName properties which we want to concatenate and show in a single GridView column.

Windows Presentation Foundation features a more advanced framework for data-binding. However, there is no built-in support for formatting data-bound values. Fortunately, with extensibility in mind, WPF supports so-called converters which help to convert raw values coming from data sources into the final object consumable by the target property. They realize the IValueConverter interface:

public interface IValueConverter
{
    object Convert(object value, Type targetType, object parameter, CultureInfo culture);
    object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture);
}

or IMultiValueConverter interface for converters taking more than one input:

public interface IMultiValueConverter
{
    object Convert(object[] values, Type targetType, object parameter, CultureInfo culture);
    object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture);
}

To achieve our goal we can use one of the already built multi-value converters from the WPF Convertes project, FormatConverter:

...
<my:DataGridTextColumn Header="Name">
    <my:DataGridTextColumn.Binding>
        <MultiBinding  Converter="{cx:FormatConverter {}{0} {1}}">
            <Binding Path="Individual.Contact.FirstName" />
            <Binding Path="Individual.Contact.LastName" />
        </MultiBinding >
    </my:DataGridTextColumn.Binding>                    
</my:DataGridTextColumn>

However, multi-value converters are not supported on the Silverlight platform, so it is not the WPF Convertes package.

To perform a similar string formatting we must write our own value converter. We make use of the parameter parameter of the IValueConverter.Convert method which is filled with any string supplied by the user in markup (through the ConverterParameter attribute of the Binding markup extension). We will support any number of input data fields and also property paths (to enable binding against object graphs). Our converter will be able to process format specified as in this example:

<my:DataGridTextColumn Header="Number" Binding="{Binding Converter={StaticResource MultiStringConverter}, ConverterParameter='[Individual.Contact.FirstName] [Individual.Contact.LastName]'}"  />

Notice that data fields values of which we want to substitute, are enclosed in brackets (braces would reflect more nicely the syntax used by the String.Format method but we would need to escape them with a backslash – not so practical).

The code works by picking up all the property paths in the format string and assigning them unique index values. These indices are inserted to the rest of the format string. Then property paths are evaluated against the binding target (we use the code similar to the one in my article Binding object graphs to the ASP.NET GridView control) and passed to the String.Format method together with new format string. More detailed code description follows.

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    Dictionary<string  , paramvalueentity> paramValue = new Dictionary<string, ParamValueEntity>();

    string formatString = (string)parameter;
    StringBuilder realFormatString = new StringBuilder();

    int position = 0;
    string currentParam = "";
    int lastIndex = 0;

We will store all found property paths in the format string together with their assigned index in a ParamValueEntity object (justs a wrapper for this pair). realFormatString variable stores the new format string.

We’ll proceed in a while loop by looking at the characters of the original format string (TagStart constant refers to '['):

    while (position < formatString.Length)
    {
        if (formatString[position] == TagStart)
        {
            // We've just entered a parameter

… escaping is handled by repeating the left bracket…:

            // Handle escaping (double TagStart)
            if (position+1<formatString.Length && formatString[position+1] == TagStart)
            {
                realFormatString.Append(TagStart);
                position += 2;
                continue;
            }

… otherwise we found beginning of a property path and we pick it up…:

            position++;

            currentParam = "";
            int startPosition = position;

            while ((char.IsLetterOrDigit(formatString[position]) || formatString[position] == '.') && position < formatString.Length)
            {
                position++;
            }

            currentParam = formatString.Substring(startPosition, position - startPosition);

… we check if such property path has already been found. If so, we put its index in the new format string (we evaluate a single property path only once – both for performance reasons but more importantly the property getter could have side effects and its repeated evaluations could return different values). If this is the first occurrence of the property path, we assign a new index value… :

            // Have we met it already?
            ParamValueEntity pve;
            if (!paramValue.TryGetValue(currentParam, out pve))
            {
                pve = new ParamValueEntity();
                pve.Index = lastIndex++;
                paramValue[currentParam] = pve;
            }

… the we pick anything up to the finalizing right bracket (for example any formatting patterns – think of [Person.BirthDate:D])… :

            // Parse up to the finalizing ']'
            startPosition = position;
            while (formatString[position] != TagEnd && position < formatString.Length)
                position++;

            string rest = "";
            if (startPosition < position)
                rest = formatString.Substring(startPosition, position - startPosition);

            // Add to the string builder
            realFormatString.Append("{" + pve.Index.ToString() + rest + "}");

            // Pass the }
            if (position < formatString.Length)
                position++;

… all other characters are copied verbatim…:

        }
        else
        {
            realFormatString.Append(formatString[position++]);
        }

    }

… then we evaluate all property paths…:

    Type type = value.GetType();

    // Let's find values
    foreach (var pvde in paramValue)
    {
        pvde.Value.Value = GetValueFromPropertyPath(value, pvde.Key);
    }

… and call the String.Format method on the new format string and just evaluated values…:

    var q = from pve in paramValue.Values
            orderby pve.Index
            select pve.Value;

    return string.Format(realFormatString.ToString(), q.ToArray());

The GetValueFromPropertyPath method evaluates a property path against an object graph. It’s code is almost identical to the one described in my previous article (Binding object graphs to the ASP.NET GridView control)) but it uses pure Reflection instead of the TypeDescriptor and PropertyDescriptor wrappers as these are unavailable in Silverlight.

You can download the complete code together with a sample featuring a DataGrid showing some data from the AdventureWorks. Happy coding!

[digg]