Fieldset Control

Silverlight Fieldset Control

The free 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>

 

The above example will place a fieldset control and a text label on to your xaml page.  Silverlight elements can be added to the control by setting the Content property.

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();

        }

    }

}

 

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.

Example FieldSet Control:

 

 

 

Silverlight FieldSet Reference

The FieldSet exposes several properties for controlling various aspects of the FieldSet and its behaviour.

Properties for Liquid.FieldSet

Below are the available properties complete with descriptions.

Property Name	Type	Description
IsExpanded	Boolean	Gets or sets whether the fieldset is collapsed or not.
Text	String	Gets or sets the label text for the fieldset.
EnableCheckbox	Boolean	Gets or sets whether to display a checkbox.
IsChecked	Nullable`1	Gets or sets the checked state of the checkbox if enabled.
ExpandSpeed	Double	Gets or sets the rate the fieldset expands.
CollapseSpeed	Double	Gets or sets the rate the fieldset collapses.
ExpandRoundness	Double	Gets or sets the Roundness of the expand icons.

 

Methods for Liquid.FieldSet

Below are the available methods, complete with parameters and descriptions.

Method Name	Description	Parameters
OnApplyTemplate()	This is called when the template has been bound to the control.