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">
        <Setter.Value>
            <ControlTemplate TargetType="Groupbox:GroupBox">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <SketchControls:SketchRectangleSL Grid.Row="1" Grid.RowSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <SketchControls:SketchRectangleSL.Clip>
                            <GeometryGroup FillRule="EvenOdd">
                                <RectangleGeometry x:Name="FullRect" Rect="0,0,300,200"/>
                                <RectangleGeometry x:Name="HeaderRect" Rect="6,0,100,100"/>
                            </GeometryGroup>
                        </SketchControls:SketchRectangleSL.Clip>
                    </SketchControls:SketchRectangleSL>                            
                    <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}"/>
                    </ContentControl>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="FontFamily" Value="{StaticResource FontFamily-Sketch}"/>
    <Setter Property="FontSize" Value="{StaticResource SizeDouble-Sketch}"/>
    <Setter Property="FontWeight" Value="{StaticResource FontWeight-Sketch}"/>            
</Style>

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

xmlns:Groupbox="clr-namespace:Groupbox;assembly=Groupbox"

Done! You may now create a sketchy groupbox:

[digg]

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! :-)

[digg]