Here’s a good looking, light-weight GroupBox control for Silverlight 2 RTW.
Download source code for VB.NET
Download source code for C#
Download the binary
According to Shawn Burke on the Microsoft Silverlight Toolkit Team, “groupbox is on the list but not in this control set“
So until then, here’s a fully functional and very simple GroupBox control that you might even want to use after the Toolkit includes the GroupBox for sake of the tiny runtime size (only 9 KB).
To use all you need is:
<groupbox:GroupBox Header=”Header goes here”>
<Button Content=”This is a placeholder for the content”/>
</groupbox:GroupBox>
In case anyone is interested, I did find one other groupbox control out there but it was created before the RTW and requires a little work to get it running on RTW and the spacing around the header was a bit off. Nevertheless, kudos to Lee for putting together something to use way back in March.
Dec 16, 2008: I added source code for C# and fixed a bug allowing the groupbox to be truely transparent by clipping the Border control where the header goes instead of relying on ZOrder to hide that portion of the border control.
[...] Tim Greenfield on a Silverlight GroupBox control [...]
Thanks, your control work really nice!
Thanks, your control works really nice!
Thanks Tim. I’m using the GroupBox in a prototype SL site. It’s just what I needed. I can’t wait to look at the code.
I need to be able to select child controls inside the groupbox.
Can anyone provide some guidance on implementing hit testing with this control?
Thanks
Let me elaborate a bit on my prior question regarding hit testing.
We want to drag and drop controls into the groupbox in order to achieve the same result as if we had placed the control inside the box using markup, e.g.,
When we try to drop the control into the groupbox, we perform a hit test, which returns the grid that is defined in the template rather than the groupbox itself. Does anyone know how to perform hit testing so that we detect a hit on the groupbox control rather than on its first templated child?
Very nice thank you
Thanks very much for sharing this control. It’s what I needed.
It works like a charm. Thanks for sharing Tim.
Thanks Tim. Your my new best friend. It does exactly what it says and worked first time without the need to jump through any hoops!
I’m liking th groupbox control, but I am having trouble setting the color of the header text. I was expecting to set the foreground value and have the header pickup this color, but it does not. Am I missing something here?
Still cannot believe that this control was left out of the SilverLight suite of controls!
I have a fix for the header color not updating if you are interested.
Thanks for sharing this Tim. It seems to work well in SilverLight 3. It is hard to believe that this is not included with Silverlight, the Silverlight ToolKit, Telerik, or anywhere!
Yeah, I’m interested in the fix for the header color not updating
To change the header appearance you can simply use the HeaderTemplate like this:
… content …
damn… like this and change { to <
{ns:GroupBox}
{ns:GroupBox.HeaderTemplate}
{DataTemplate}
{TextBlock Foreground="Blue" Text="Header text"}{/TextBlock}
{/DataTemplate}
{/ns:GroupBox.HeaderTemplate}
… content …
{ns:GroupBox}
Yeah, I figured that out after I posted the comment but thanks for the reply anyway
The Header property can take any UIElement, not just Strings. This is a lot like the content property of a Button. Therefore, to alter the color of the header text, just pass in a TextBlock and set the foreground property on it.
For example:
{groupbox:GroupBox}
{groupbox:GroupBox.Header}
{TextBlock Text=”My Header” Foreground=”Red”/}
{/groupbox:GroupBox.Header}
{Button Content=”Placeholder”/}
{/groupbox:GroupBox}
Thanks for the control. If you prototype with the MS Expression SketchFlow, you can find a sketchy style for Tim’s control here: http://blog.ondrejsv.com/post/How-to-Create-a-sketchy-Siverlight-GroupBox-in-BlendSketchFlow.aspx
Your control is great. However I have made a few tweaks to my copy which I thought I would mention in case anyone else finds it useful.
The problem I had was when tabbing through the controls on the page the group box itself was getting focus. Because it does not have any input, getting focus to the group box did not seem necessary, and was interfering with the intended tab sequence.
This are the changes in the generic.xaml file.
I set the control itself to IsTabStop=false
And also the content control.
Your control is great. However I have made a few tweaks to my copy which I thought I would mention in case anyone else finds it useful.
The problem I had was when tabbing through the controls on the page the group box itself was getting focus. Because it does not have any input, getting focus to the group box did not seem necessary, and was interfering with the intended tab sequence.
This are the changes in the generic.xaml file.
I set the control itself to IsTabStop=false
{Setter Property=”IsTabStop” Value=”False” /}
And also the content control.
{ContentControl x:Name=”HeaderContainer” … IsTabStop=”False”}
Good stuff,
Your control should be a candidate to be included in the SL toolkit, simple control but really useful.
Cheers
Braulio
How can you change the Width/Height of the groupbox. It seems like the border is set to a static width and height?
Kevin, the border size is resized in code so you can change the height and width of the groupbox to be anything you want and it will keep up. You can also (my preferred way) just let the groupbox determine it’s own size based on it’s container. It inherits ContentControl so it should behave just like it in this regard.