Silverlight Roller Blind
The 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.
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.
As you can see the visuals for both the front and behind of the Blind are easy for you to customize in the XAML.
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();
}
}
}
Example Silverlight Roller Blind Control:
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!