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">
<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:

image

image

kick it on DotNetKicks.com [digg]

Tags: ,

Comments (2) -

1/19/2010 11:25:37 PM #

Tim Greenfield

I love it! Way to complete the circle.

Tim Greenfield United States |

3/26/2010 9:11:15 AM #

Max Paulousky

Thank you for the article. I started my WPF Groupbox sketching control a bit later than you.
As I see, there is a small issue in your implementation. Groupbox header is not rendered correctly if you change header&#39;s font size. My implementation takes into account this issue. www.maxpaulousky.com/.../...tions-using-blend.aspx

Cheers!

Max Paulousky |

Pingbacks and trackbacks (3)+

Comments are closed