Feed Subscribe
Exception has been thrown by the target of an invocation.

How to: Create a sketchy Siverlight GroupBox in Blend/SketchFlow

by ondrejsv 17. January 2010 18:17

Silverlight does not come with a groupbox control in its standard set of controls. Fortunately, it’s not so difficult to create a new one or you may grab Tim Greenfield’s Silverlight GroupBox control.

Having Tim’s control referenced, open the SketchStyles.xaml file in your screen mocks project, switch to the XAML view and at the end of the file before the final </ResourceDictionary> tag append this new style:

<Style x:Key="GroupBox-Sketch" TargetType="Groupbox:GroupBox">
<Setter Property="Background" Value="{StaticResource BaseBackground-Sketch}"/>
<Setter Property="Foreground" Value="{StaticResource BaseForeground-Sketch}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource BaseBorder-Sketch}"/>
<Setter Property="Template">
<ControlTemplate TargetType="Groupbox:GroupBox">
<Grid Background="{TemplateBinding Background}">
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<SketchControls:SketchRectangleSL Grid.Row="1" Grid.RowSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<GeometryGroup FillRule="EvenOdd">
<RectangleGeometry x:Name="FullRect" Rect="0,0,300,200"/>
<RectangleGeometry x:Name="HeaderRect" Rect="6,0,100,100"/>
<ContentPresenter Margin="{TemplateBinding Padding}" Grid.Row="2" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
<ContentControl x:Name="HeaderContainer" HorizontalAlignment="Left" Margin="6,0,0,0" Grid.Row="0" Grid.RowSpan="2">
<ContentPresenter Margin="3,0,3,0" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
<Setter Property="FontFamily" Value="{StaticResource FontFamily-Sketch}"/>
<Setter Property="FontSize" Value="{StaticResource SizeDouble-Sketch}"/>
<Setter Property="FontWeight" Value="{StaticResource FontWeight-Sketch}"/>

At the beginning of the file add this new namespace declaration:


Done! You may now create a sketchy groupbox:



kick it on DotNetKicks.com [digg]

Tags: ,

How to: Create a new format for sample data in Blend/SketchFlow

by ondrejsv 17. January 2010 14:04

Microsoft Expression SketchFlow (part of the Expression Blend Product) is a great tool for quickly creating interactive low-fidelity prototypes. One of its features is sample data. You can either import data from an XML file, type in it manually within the SketchFlow user interface or let it populate automatically from the Blend sample data collection. The last option is very effective if you are experimenting with many screen mocks.

Note: You may use sample data feature equally well in the SketchFlow as well as in the Blend itself.

Blend supports four data types in sample data: string, number, boolean and image. If you create a new string property you can tell Blend what format you want to have the property in – e.g. name, url address, e-mail or color. Blend then create a sample data based on this (in our case it may be “Jamison, Jay”, http://www.graphicdesigninstitute.com/, someone-3@adventure-works.com, #FFFFED6F).

You can also create a new format if you often create screen mocks with some specific data. For example let’s say that I often mock administration module prototypes and I would find useful to have a login name format to let Blend create sample data for me.

All sample data is stored in the C:\Program Files\Microsoft Expression\Blend 3\SampleDataResources\en\Data\SampleStrings.csv.

Tip: If you are running Blend in other language than English, you may create a subfolder with your language code (instead of the en) and it takes precedence over the en folder.

This file is nothing more that a comma separated data file. I can add a new column to the header and then new columns do data rows (new columns are last):

Name,Phone Number,Email Address,Website URL,Address,Company Name,Date,Time, Price, Colors,Login
"Aaberg, Jesper",(111) 555-0100,someone@example.com,http://www.adatum.com/,"4567 Main St., Buffalo, NY 98052",A. Datum Corporation,"November 5, 2003",8:20:14 AM,$100,#FF8DD3C7,jesper.aaberg
"Adams, Ellen",(222) 555-0101,user@adventure-works.com,http://www.adventure-works.com/,"1234 Main St., Buffalo, NY 98052",Adventure Works,"December 29, 2006",7:06:05 AM,$29.99,#FFFFFFB3,ellen.adams
"Adams, Terry",(333) 555-0102,someone@adventure-works.com,http://www.adventure-works.com/ ,"2345 Main St., Buffalo, NY 98052",Adventure Works,"January 19, 2004",4:26:00 PM,$249.99,#FFBEBADA,terry.adams

and so on. Just remember to restart Blend if you finish modifying the sample dataset.

Note: You don’t need to supply a sample value for all rows but be sure to include a comma then. Otherwise Blend won’t load the file correctly.

After restart I can create a new string property with my new Login format:


and bind it to a DataGrid or any other control:


Happy mocking! :-)

kick it on DotNetKicks.com [digg]

Tags: ,

Audio recorder Silverlight 4 sample

by ondrejsv 12. December 2009 14:48

[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.

kick it on DotNetKicks.com [digg]


Globalization is not an enemy

by ondrejsv 9. December 2009 18:36

System.FormatException: Input string was not in a correct format. The exception I see again and again because I’m running an English Windows 7 with Slovak regional settings and some developers just can’t imagine there are regions in the world where the decimal separator is not a period (.) but a comma (,) or where they use more than 12 hours a day. It’s unfortunate for them because many more people live outside the USA so reach of their application is far less than it could be.

Today I want to build a demonstration utilizing a Ribbon bar in my Silverlight application and I found one. A sample was attached but it crashed immediately after start with the aforementioned exception. The Ribbon control stores some default brushes in an XML file and parses on its own with code like this:

string xStr = pointAsString.Substring(0, pointAsString.IndexOf(","));
string yStr = pointAsString.Substring(pointAsString.IndexOf(",") + 1);

return new Point(double.Parse(xStr), double.Parse(yStr));

If we take a look at a fragment of the XML:

<LinearGradientBrush Name="GroupedButtonSemiHighlight" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FFFEF7" Offset="0.0" />
<GradientStop Color="#FFF7DF" Offset="0.5" />
<GradientStop Color="#FFEEBE" Offset="0.6" />
<GradientStop Color="#FFF6DD" Offset="1.0" />

we see that it cannot succeed on any client configuration which does not use a point as decimal separator because the double.Parse method without providing an IFormatProvider would parse the string using the current regional settings.

If you write code that parses numbers from a content not edited or viewable directly by users and don’t want to take regional settings into account, always use the Invariant Culture as your IFormatProvider.

So I fixed the code:

string xStr = pointAsString.Substring(0, pointAsString.IndexOf(","));
string yStr = pointAsString.Substring(pointAsString.IndexOf(",") + 1);

return new Point(double.Parse(xStr, CultureInfo.InvariantCulture), double.Parse(yStr, CultureInfo.InvariantCulture));

More detailed information on internationalization, globalization and localization issues can be found on the Globalization Step By Step Microsoft site.

kick it on DotNetKicks.com [digg]


Fighting the spam

by ondrejsv 22. November 2009 15:58

My blog is not immune to those pesky individuals sending their junk throughout the Internet universe. As the blogging engine I use (BlogEngine.NET) has no native way to block them, I was happy to find the Commentor plugin. Once installed, it will automatically check all incoming comments against the Akismet database (in order to use it you must register on the Wordpress and get their API key). You may also easily delete all junk comments posted by spammers before installing Commentor in its administration interface.

I highly recommend to install the Commentor or take another steps to remove spam from your blog because site with junk/regular post ratio 10:1 looks that its author lost all his interest in the site.