Silverlight Roller Blind
The free Roller Blind control is a simple control that lets you group related controls together and hides them from the display until the user hovers the mouse over the Blind. At this point the Blind rolls open automatically showing the controls for the user to manipulate. This control helps you build an easy to use and clutter free GUI and is especially useful for reducing screen space needed.
This Silverlight only Roller Blind Control is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.
To use the Roller Blind control you will need to add a reference to Liquid.dll in your project.
You need to login to Download the Roller Blind example, If you do not have a login you can register for free!
How to Use the Roller Blind Control
To use the Roller Blind on your Silverlight page:
<UserControl x:Class="RollerBlind.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<liquid:RollerBlind x:Name="currentStatus" Width="130" Height="80">
<liquid:RollerBlind.Content>
<StackPanel Orientation="Vertical" Margin="6">
<RadioButton Content="Employed" GroupName="main" />
<RadioButton Content="Unemployed" GroupName="main" />
<RadioButton Content="Career Break" GroupName="main" />
<RadioButton Content="Other" GroupName="main" />
</StackPanel>
</liquid:RollerBlind.Content>
<liquid:RollerBlind.CoverTop>
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#ffffffff" Offset="0.0" />
<GradientStop Color="#fff0f0f0" Offset="1.0" />
</LinearGradientBrush>
</Grid.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="Employment" />
</Grid>
</liquid:RollerBlind.CoverTop>
<liquid:RollerBlind.CoverBottom>
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#fff0f0f0" Offset="0.0" />
<GradientStop Color="#ffefefef" Offset="1.0" />
</LinearGradientBrush>
</Grid.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Text="Status" />
</Grid>
</liquid:RollerBlind.CoverBottom>
</liquid:RollerBlind>
</Grid>
</UserControl>
In your C# code behind file you can refer to the Roller Blind using currentStatus. In this example we create a simple Roller Blind containing a set of Radio Buttons.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
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 RollerBlind
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
}
}
As you can see the visuals for both the front and behind of the Blind are easy for you to customize in the XAML.
Example Silverlight Roller Blind Control:
Further Information
