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

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: