Silverlight Fieldset Control

The vectorlight.net Fieldset control for Microsoft's Silverlight is a collapsable container for other vectorlight.net Controls and standard Silverlight elements such as TextBlocks, Rectanges etc. The Fieldset control allows related controls to be grouped together in an easy and nicely presentable manner.

To use the FieldSet control you will need to add a reference to Liquid.TreeView.dll in your project.

How to Use the Fieldset Control

In your XAML ensure you have a reference to the Liquid.TreeView.dll in the UserControl tag at the top. To use it on your Silverlight page:

<UserControl x:Class="FieldSet.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquidTreeView="clr-namespace:Liquid;assembly=Liquid.TreeView"
    Width="400" Height="300">
     <Canvas>
          <ScrollViewer Width="204" Height="250" Canvas.Left="10" Canvas.Top="145">
               <StackPanel Width="204" Orientation="Vertical">
                    <liquidTreeView:FieldSet x:Name="skills" Width="174" HorizontalAlignment="Left" IsExpanded="True" Text="Your Skills">
                         <StackPanel>
                              <CheckBox x:Name="aiprogrammer" Content="A.I. Programmer" TabIndex="4" />
                              <CheckBox x:Name="graphicsdesigner" Content="Graphics Designer" TabIndex="5" />
                              <CheckBox x:Name="systemsengineer" Content="Systems Engineer" TabIndex="6" />
                              <CheckBox x:Name="tester" Content="Tester" TabIndex="7" />
                              <CheckBox x:Name="webdeveloper" Content="Web Developer" TabIndex="8" />
                         </StackPanel>
                    </liquidTreeView:FieldSet>
                    <liquidTreeView:FieldSet x:Name="qualifications" Width="174" IsEnabled="False" HorizontalAlignment="Left" IsExpanded="False" Text="Microsoft Qualifications">
                         <StackPanel>
                              <CheckBox x:Name="mcp" Content="MCP" TabIndex="10"/>
                              <CheckBox x:Name="mvp" Content="MVP" TabIndex="11"/>
                              <CheckBox x:Name="mcad" Content="MCAD" TabIndex="12"/>
                              <CheckBox x:Name="mcsd" Content="MCSD" TabIndex="13"/>
                              <CheckBox x:Name="otherQualification" Content="Other" TabIndex="14"/>
                         </StackPanel>
                    </liquidTreeView:FieldSet>
                    <liquidTreeView:FieldSet x:Name="interests" Width="174" HorizontalAlignment="Left" IsExpanded="False" Text="Your Interests">
                         <StackPanel>
                              <CheckBox x:Name="cinema" Content="Cinema" TabIndex="10"/>
                              <CheckBox x:Name="football" Content="Football" TabIndex="11"/>
                              <CheckBox x:Name="holidaying" Content="Holidaying" TabIndex="12"/>
                              <CheckBox x:Name="surfing" Content="Surfing" TabIndex="13"/>
                              <CheckBox x:Name="tv" Content="TV" TabIndex="14"/>
                         </StackPanel>
                    </liquidTreeView:FieldSet>
                    <liquidTreeView:FieldSet x:Name="years" Width="174" HorizontalAlignment="Left" IsExpanded="False" Text="Years experience?">
                         <StackPanel>
                              <RadioButton x:Name="sixmonths" Content="Less Than 1 Year" Cursor="Hand" TabIndex="30" GroupName="years" />
                              <RadioButton x:Name="twoyears" Content="Between 1 and 2 Years" Cursor="Hand" TabIndex="32" GroupName="years" />
                              <RadioButton x:Name="threeyears" Content="More Than 2 Years" Cursor="Hand" TabIndex="33" GroupName="years" />
                         </StackPanel>
                    </liquidTreeView:FieldSet>
               </StackPanel>
          </ScrollViewer>
     </Canvas>
</UserControl>
 

You will need to include the following using statement in order to reference the vectorlight controls:

using Liquid;
 

The above example will place a fieldset control and a text label on to your xaml page. Controls (both vectorlight and Silverlight) can then be added to the fieldset by calling the AddChild() method.

In our C# below we declare some calendar controls and Silverlight labels and add them to our fieldset. Any standard or vectorlight control can be added, though caution needs to be taken when adding certain standard Microsoft controls such as the Calendar which need a Width and Height setting applied before they are added.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace FieldSet
{
     public partial class Page : UserControl
     {
          public Page()
          {
               InitializeComponent();
          }
     }
}
 

Example vectorlight.net FieldSet Control:

Silverlight FieldSet Control
  • Written in Client-Side C# .NET 3.5
  • Microsoft Silverlight Only
  • Easy to Add Child Elements
  • Customizable Visual Feel

Your Comments and Questions Answered

 You are not logged in. You need to login to post new messages, if you do not have a login you can register for free!

dan said:

Hi RBC,

Yes, the DLLs are not included in the example downloads, to get these you need to download from the main Downloads page. Thanks!

05/14/2009 08:10
 
RBC said:

Hi,

Liquid.dll

I have the same problem; when I download the project, I am missing reference to the Liquid.dll and Liquid.ThreeView.dll

I found them under the green button for free download...

Thank you,
Rune

04/29/2009 10:19
 
dan said:

Hi mwieder,

Thats a good question, in terms of functionality the two controls are similar, there are cases where controls in the Liquid controls library will cross with the toolkit ones, the differences are cosmetic at the moment, though we are looking to extend it's functionality in the future. Thanks!

01/14/2009 02:23
 
mwieder said:

How does this differ from the Toolkit Expander control?

01/14/2009 01:24
 
dan said:

Hi,

At the moment it is not possible to restrict the expanded height, we will look to implement something like this in a future version.

With regards to adding child elements, this control has been simplified to make accessing its child elements much easier. To add an element you would use something like the following:

((Canvas)fieldset.Content).Add(myElement);

Obviously if you are using something else as a base container such as a Grid or StackPanel you will need to change the cast.

Hope this helps!

11/10/2008 04:15
 
torobcheh said:

I've downloaded the actual version and cannot find the method AddChild anymore - where is it ???

11/10/2008 12:18
 
torobcheh said:

Hi,
is it possbile to limit the expanded size of the fieldset and show a scrollbar ?

TIA
Oliver

11/10/2008 12:07
 
dan said:

Hi Khruel,

To keep you up-to-date, this has been implemented and can be found in version 5.1.0 of the controls library.

10/16/2008 03:02
 
dan said:

Hi Khruel,

Thanks for the post, at the moment the FieldSet cannot be set to auto expanded when first loaded, I have passed this to the list of improvements and I'm sure we'll get this implemented soon!

09/27/2008 10:29
 
Khruel said:

I am using the FieldSet control to display a list of objects. I created the FieldSet controls dynamically in C# and would like the first FieldSet control to display all the children in the FieldSet when the page has finished loading. The other FieldSet controls will stay closed until the expander is clicked.

I have tried setting various properties on the first FieldSet control such as Expanded = true;    AutoExpandedHeight = true and can't seem to get the FieldSet to display expanded on the intial page load.

Have any ideas or example code?

09/17/2008 05:47
 
dan said:

Hi Tom,

We aim to get Version 2.2 out for the 16th, if not earlier. We will drop you an email at the address you provided below when it's ready.

01/12/2008 02:11
 
Tom2Net said:

Hi Dan,

Thanks for the infos.

Do you have a planned date for version 2.2 ? :)


Bye


Tom

01/12/2008 05:27
 
dan said:

Hi Tom,

You're right, it is a bug, the text does render but in White! Which is not much good on a White background, It's on the list for Version 2.2 to give some options to control the text color/font etc from the control but for now this property can be left empty and a seperate TextBlock used.

Sorry about this, most of this code came straight from our CMS demo which has Black backgrounds and for some reason never changed. A fix is on the way...

01/11/2008 11:55
 
dan said:

I've just finished an example for this control, it should be easy to modify to embed your textboxes. As in the above example these should be added programically in the Page_Loaded event.

As ever, we are slowly in the process of getting examples of all these controls on to the site as soon as possible.

01/11/2008 03:59
 
Tom2Net said:

Hi Dan,

Thanks for the example. I've having a little issue with the control. If I try to set the property Text (this is the one used for the Header if I'm right), nothing appears (like on your screenshot). Is it normal ? Is it a known bug ?


Thanks !

01/11/2008 10:21
 
Tom2Net said:

Hello Dan,

Can you provide an example on how to use this control ? I've version 2.1 of the library but I've not been able o used it: every time I try, nothing appears :(
I'm trying to use this control to "embed" a textbox and 2 buttons.

You can reply me here or by mail (if you can as I'm prefered this way): lebrun_thomas@hotmail.com@nospam (remove @nospam)


Thanks !

01/11/2008 02:26
 
dan said:

All the controls can be downloaded by clicking on the Downloads menu option at the top of the screen. You need to be logged in to download the controls, the Liquid.dll is included in the download zip file and should be copied to the ClientBin folder of your Silverlight application.

01/03/2008 12:57
 
jf said:

Free DownLoad,Where??????
this 'Liquid.dll' source file??

01/01/2008 07:54

Silverlight 3

Latest News

  • Silverlight 2 Controls V5.2.1 Released
    Jul, 03 2009

    After several months since the last release we have implemented many fixes to the controls library. The Rich TextBox has been improved with Links...

  • Silverlight 3 BETA Controls Released
    Mar, 30 2009

    As Silverlight 3 BETA is available now to test we thought we would present the Liquid Controls library for Silverlight 3. This BETA...

Silverlight 2 Controls

  • Rich TextBox

    Create and edit rich content with this slick and expandable Rich TextBox...

  • TreeView

    This easy to use TreeView comes with drag and drop, sorting, searching and much more...

  • Context Menu

    You too can have cool popup context menus in your Silverlight applications...

  • Resizable Dialog

    Draggable and resizable popup dialogs are what serious Silverlight developers need...

  • Spell Checker

    Real-time spell checking in Silverlight? We did it first here...