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.
I’m not sure if you’ve tried this, but I added it in a control template for a ListBoxItem and the header isn’t displaying. Very odd. I’m trying to debug the issue, but have been banging my head on it for a bit too long.
I was able to trace my ListBox issue down to a sizing issue. For some reason, the header container had a width of 0. I simply forced it to be wide enough to support the Header. I should probably figure out why it was forced to be so small, but I don’t really have time to do that for the prototype I’m working on.
I’m adding the ability to center or right align the header as well as move it to the bottom. It was pretty easy to do that based on the simple code you provided. Thanks!
This control is great!
However in the latest toolkit’s Tabcontrol it throws a nullreferenceexception even in the VS2010 ide, if I put it into a tabcontrol second tabitem…
Strange, but it works in the firs tabitem, but not in the second, or third…
How to fix it, any hint???
John, I just tried it out in an SL4 project with the VS2010 RTM and the April 2010 toolkit and did not have a problem. Does it also throw an exception at runtime?
I can confirm the same issue as John in a VS2010 RTM project. Here’s the runtime exception I’m getting:
{System.Windows.Markup.XamlParseException: Set property ‘System.Windows.FrameworkElement.Style’ threw an exception. [Line: 101 Position: 86] —> System.Windows.Markup.XamlParseException: [Line: 0 Position: 0] —> System.TypeInitializationException: The type initializer for ‘Syncfusion.Silverlight.Shared.SkinManager’ threw an exception. —> System.Windows.Markup.XamlParseException: Cannot find a Resource with the Name/Key System.Windows.Controls.Panel [Line: 7 Position: 59]
at MS.Internal.XcpImports.CreateFromXaml(String xamlString, Boolean createNamescope, Boolean requireDefaultNamespace, Boolean allowEventHandlers, Boolean expandTemplatesDuringParse)
at MS.Internal.XcpImports.CreateFromXaml(String xamlString, Boolean createNamescope, Boolean requireDefaultNamespace, Boolean allowEventHandlers)
at System.Windows.Markup.XamlReader.Load(String xaml)
at Syncfusion.Silverlight.Shared.SkinManager.get_StandardSkinList()
at Syncfusion.Silverlight.Shared.SkinManager..cctor()
— End of inner exception stack trace —
at System.Runtime.CompilerServices.RuntimeHelpers._RunClassConstructor(RuntimeType type)
at System.Windows.DependencyProperty.QueryRegisteredProperty(String name, Type ownerType)
at MS.Internal.ManagedTypeInfoProviderRPInvokes.LookupDependencyProperty(Type type, String name)
at MS.Internal.ManagedTypeInfoProviderRPInvokes.ResolveDependencyPropertyName(XamlTypeToken sTypeToken, String inPropertyName, XamlPropertyToken& outProperty, XamlTypeToken& outPropertyTypeToken)
— End of inner exception stack trace —
at MS.Internal.XcpImports.CreateFromXaml(UnmanagedMemoryStream stream, String sourceAssemblyName, Boolean createNamescope, Boolean requireDefaultNamespace, Boolean allowEventHandlers)
at System.Windows.Controls.Control.GetBuiltInStyle(IntPtr nativeTarget, IntPtr& nativeStyle)
— End of inner exception stack trace —
at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
at Silverlight_BatteryTest5.Views.Settings.InitializeComponent()
at Silverlight_BatteryTest5.Views.Settings..ctor()}
John, your problem can be fixed:
public override void OnApplyTemplate()
{
try
{
base.OnApplyTemplate();
FullRect = (RectangleGeometry)GetTemplateChild(“FullRect”);
HeaderRect = (RectangleGeometry)GetTemplateChild(“HeaderRect”);
HeaderContainer = (ContentControl)GetTemplateChild(“HeaderContainer”);
HeaderContainer.SizeChanged += HeaderContainer_SizeChanged;
}
catch
{
}
}
Jarod: yes, it solves the problem. The exeption get throwed in base.OnApplyTemplate();.
Tim Greenfield:
Maybe this is a bug fixed in the April sdk.
I have currently this version:
C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Nov09\Bin\System.Windows.Controls.Toolkit.dll
I’ve figured out, that I needed some older dll-s from the Nov09 SDK and after installed it over the newer April10 SDK it modified the VS templates, so I used this older SDK for all of my projects…
After removing it and reparing the April10 SDK, everything seems ok….
So guys use this control with the latest SDK…
Maybe share your control with the Silverlight Toolkit group..
It’s great work!
Hi Tim,
Thank you for Silverlight GroupBox.
I am having an issue which I reported on the silverlight contrib codeplex page here:
http://silverlightcontrib.codeplex.com/WorkItem/View.aspx?WorkItemId=27159
Basically, it seems that nested GroupBoxes will result in a runtime exception “Element is already the child of another element.”.
For example:
{contrib:GroupBox Header=”GroupBox 1″}
{contrib:GroupBox Header=”GroupBox 2″}
{input:Label Content=”Hello from GroupBox 2″ /}
{/contrib:GroupBox}
{/contrib:GroupBox}
I also tried putting the nested GroupBox directly inside of a StackPanel but I get the same behavior.
I also tried putting the nested GroupBox inside of {contrib:GroupBox.Content } but I also get the same unexpected behavior.
Any ideas?
Thank you.
Rami, I just tried this with the version from programmerpayback.com (should be the same as SilverlightContrib) and it worked fine. I just took the test project that is included with my download and copied the xaml for the groupbox over the top of the xaml for the button (thereby creating a nested groupbox) and it worked great. The error you see means that the content of the groupbox was already added somewhere else in the visual tree. Please check that you are not programmatically adding any content that is already in the visual tree. If you’re still having trouble, maybe try the little test I described above and hopefully that will shed some light on the problem. Cheers, Tim
Oops, I don’t think this is an issue with the groupbox, sorry.
Hi Tim, thanks for the control. I am having an issue – I set the control’s visibility to collapsed when I load the page and set it to visible after the user chooses from a combo box. When the groupby box becomes visible the theme colors are not applied properly and everything looks white. Do you have any idea on how to fix this?
Very good!!!!! thanks!
Hello Tim,
If someone wants to use your control with silverlight toolkit themes, he should add Foreground=”{TemplateBinding Foreground}” in to inherit theme’s fore color.
Nice control, thank you for sharing!
Hi Tim. Thank you for your GroupBox control. It’s almost exactly what I want.
Greg Lusk asked a question and it does not seem to have been aswered.
When I use a Border control to enclose a couple of text boxes and loop through the Visual Tree, the text boxes can be accessed and manipulated. However, when I replace the Border control with your GroupBox control, which is how I want to form to look, and loop through the Visual Tree, the text boxes are not picked up and I cannot manipulate them. For example, one might want to clear both text boxes generically – I am wanting to do much more complicated things with the text box controls though.
The GroupBox control seems not to expose the child controls. Can the GroupBox be converted to do everything a Border control does as well as adding the label?
[…] フリーのGroupBoxライブラリを手に入れるか自分で作る […]
Is the tabindex problem solved ?
i have the same problem, i set the IsTabStop=”False” of groupbox but i still getting the focus on groupbox and tabing again it is going on control.
I’m using this magnificent lightweight Groupbox even in my WPF applications instead of the normal one, because it gives a way better performance in scenarios when the controls are being resized by the user. Great job!
i couldn’t put more than one control in group box suppose include one label, error arise when i put next control.
Hi i have used your groupbox in my application but it is throwing the undermentioned error and making my design window uneditable although on debugging it throws no error but as design window gets disabled its difficult to design further.
Object reference not set to an instance of an object.
at GroupboxControl.GroupBox.OnApplyTemplate() in C:\Documents and Settings\ICS718965\My Documents\Visual Studio 2010\Projects\Tachoweb Sign Up\GroupboxControl\Groupbox.cs:line 38
at System.Windows.FrameworkElement.OnApplyTemplate(IntPtr nativeTarget)
mail me the solution at swapnilsrivastav70@gmail.com
Hi
Thanks for your Article.
I have two concerns here
A)Will it work in WPF As well?
B)Iam getting error in ApplyTemplate as object reference not set to instance.
Am using silverlight 4 version here .
How to debug the above error and fix it?
@Balaji,
A) WPF comes with a GroupBox control already so I’d recommend using it instead.
B) I just tried the binary & c# source and they worked fine in SL4. Make sure you “unblock” the zip file before you extract the files and make sure you leave the entire Groupbox project intact. You need both Groupbox.cs & themes/generic.xaml. Also, if you rename the project you’ll have to update the generic.xaml.
Hope that helps, Tim
Hi Tim,
Thanks for Your Reply.
1)My Aim is to create a common code base and apply in different Versions that is Silverlight and WPF.
All my views will be in a common place.That is why i was asking you that will it work in WPF?
2)Iam Getting Error Like the object Reference not set to instance as obvious that that the controls are null
private RectangleGeometry FullRect;
private RectangleGeometry HeaderRect;
private ContentControl HeaderContainer;
The Above Three controls are in null thats why i think we are getting this error.
Can you pls suggest indeed i had used all the files that you said.
Thanks.. but isEnabled doesnt work,
anyway god bless you
I’m really impressed with your writing skills as neatly as with
thee structure for your blog. Is that this a paid topic or did you customize it your self?
Anyway keep upp the excellent quality writing, it’s uncommon to look a great
weblog like this one these days..
No, I’m not asking you to guess, I mean getting your body to guess.
If you have a desk job and you know that you are sitting for the majority of the
day at work and then sitting at home be up front
with this information. Also new, is a twice annual fee in January and July for $25 listed as
club maintenance fee on the contract. Steam
Saunas can significantly help individuals in losing weight by increasing the rate of burning
their calories.
If you are looking to buy a desktop PC for your home it is likely you
will want it to perform a variety of tasks from basic things like sending emails and word processing to more complex tasks like downloading music and streaming video from the internet.
with this special “Twiathlon” ticket, you are sure to be one of the first to see this epic saga continue unfolding.
Wine and beer is served on Saturdays and Sundays beginning when the Cinema opens its doors,
which is generally at 11:30 a.
Peacock Parfumerie is an artisan fragrance jewelry house impressed by art nouveau glamour and bohemian relationship.
The company’s strong perfumes contain necessary natural oils and priceless perfume accords.
Fragrance comes with the capacity to evoke a storage and to create or improve a state of mind, thus envelop all
by yourself within one of these perfumes and experience determined of the sensation it creates.
They invite customers to carry their fragrance near to their cardiovascular system in one single of
the stylish crystal pendants. On top of that, they also endorse
clients order using their site as it’s the essential correct, fast
and protected method for inserting an order together with them.
Admiring the time and energy you put into your site and in depth
information you provide. It’s good to come across a blog every once in a
while that isn’t the same old rehashed material. Excellent read!
I’ve saved your site and I’m including your RSS feeds to my Google account.
It was an old friend who I hadn’t seen for a while, and I could just tell that something was wrong.
It is always of the utmost importance in business to treat each and every customer as if they
are the most important. They allow you to access these
private networks for privacy and security online, whether
it be for bypassing internet censorship in China, Vietnam, and
Iran, or increasing the security of your connection on shared wifi.
Appreciating the dedication you put into your website and detailed information you provide.
It’s great to come across a blog every once in a while that isn’t the same old
rehashed material. Excellent read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.
Hello There. I found your blog using msn. This is a really
well written article. I’ll make sure to bookmark it and come back to read
more of your useful information. Thanks for the post. I’ll certainly comeback.
Hi there! This is my first visit to your blog! We are a team
of volunteers and starting a new project in a community
in the same niche. Your blog provided us useful information to work on. You have done a extraordinary job!
You could definitely see your enthusiasm within the article you write.
The sector hopes for even more passionate writers such as you who aren’t afraid to mention how they believe.
Always follow your heart.
Build an effective list of loyal followers and then send out an email whenever you have a great offer.
Locket – Locket is a relatively new system available to Android phone users.
If they bought from you and are not satisfied, they’ll want an instant refund.
Hi! Would you mind if I share your blog with my myspace group?
There’s a lot of people that I think would really enjoy your
content. Please let me know. Thanks
I don’t even know how I finished up here, however I assumed
this publish was once great. I don’t recognize who you are however certainly you’re going to a well-known blogger if you
happen to are not already. Cheers!
We stumbled over here different website and thought I should check things
out. I like what I see so i am just following you.
Look forward to looking at your web page again.
We are a bunch of volunteers and opening a new scheme in our community.
Your web site provided us with useful info to work on. You’ve done an impressive task and our whole group
shall be grateful to you.
Howdy would you mind letting me know which webhost you’re working with?
I’ve loaded your blog in 3 different web browsers and I must
say this blog loads a lot faster then most. Can you suggest
a good web hosting provider at a fair price? Kudos, I appreciate it!