Introducing Silverlight Elements 1.1

Mindscape Silverlight Elements Logo

We are proud to announce the release of Silverlight Elements 1.1. In this version we have added a whole bunch of interesting new controls to add an even richer user experience to your applications. All five of our current Silverlight themes have been updated to include all these new controls. We have also added new features to a few of the existing controls. The TimePicker and TimeSpanPicker controls now have up/down functionality and have the option to hide the drop down button. The Scheduler now supports custom schedule items which can be easily templated and added to the control.

Slider and Dual Slider

The Mindscape Slider control includes tick mark support as well as the usual Slider functionality. Tick marks can be displayed above or/and below the slider track, and the spacing between the tick marks can be changed. You can also specify whether or not the slider thumb should snap to the tick marks. The Slider can also be oriented vertically as well as horizontally.

The Mindscape DualSlider control includes all the features that we have put into the Slider, and also contains an additional slider thumb. This control is useful for selecting the start and end values or some kind of range. The thumbs can be moved either individually or at the same time by dragging the area between them. Various properties allow you to specify a minimum and maximum range, and also whether or not the thumbs are able to pass through each other.

Slider

You can read more information about the Slider and Dual Slider here, or play with them in our online demo.

Dock Panel

The DockPanel provides a layout strategy that arranges its children around the inside of its edges, like the WPF DockPanel. Individual items can be told which edge to be aligned against, and you can specify whether or not the last item should fill the remaining space or not. Have a look at the online demo where you can experiment with changing the width, height and dock properties of each of the items in the DockPanel.

Progress Bar

The Mindscape DualProgressBar can display the progress of individual sub-operations at the same time as the overall progress. If you don’t need to show the progress of an individual sub-operation, then you can still use this control as an enhanced version of a normal ProgressBar. Custom content can be displayed at the start, center and end of this control which can be text, images, bindings to the current progress or anything you fancy.

Read more information about the progress bar here, and have a look at it in the online demo.

Menu

The Menu control organises application commands into one easy to access location. This control is based on the familiar Windows menu component and makes is simple for users to discover what your application can do. Menus can include icons, checkable items and separators, and can be nested to provide a cascading menu effect. You can also set up particular menu items to remain open after the user has clicked on them.

You can read more information about the Menu control here, and see it in action with our online demo.

Split Button

This control is both a button and a menu combined. This control is useful when you have multiple related commands where one of the commands can be used as a default. The SplitButton acts like a button by raising an event when the user clicks on it. Further commands can be accessed from the drop down menu part of this control. Menu items can be added to the SplitButton in the same way they are added to a menu, and just like a menu the SplitButton supports cascading menus, icons and separators.

You can read more information about the SplitButton here, and see it in action with our online demo.

Expander

The Expander can tuck away its content and then display it only when the user wants to see it. This control is similar to the Expander seen in WPF and can accept any kind of visual content. You can also set it up to expand its content in an upward direction.

Outlook Bar

This control is a replica of the tab system seen in the Microsoft Outlook application. It displays a stack of tabs which can be used to select what content it should display. The thumb in this control can be dragged up and down to change the number of tabs that are visible. Tabs that have been collapsed can be seen in a smaller form in the tray at the bottom of the control. While collapsed, a tab can still be clicked to display its content. All the content and header content of each tab can be whatever you want it to be.

You can read more information about the OutlookBar here, and see it in action with our online demo.

Numeric Up Down

This is an ideal control for selecting a decimal value. The NumericUpDown displays a value which can be edited in a few different ways. The control is styled with a pair of buttons that can be used to increase or decrease the value by a specified magnitude. Clicking on the control and then using the up or down arrow keys will also increase or decrease the value. The user can even type directly into the control to input what ever number they need. This control can limit the users input by setting the minimum and maximum values, and the number of decimal places to display can also be set.

What do you think?

Looks useful? Try out the online demo and download the free trial version to give it a spin. And if there’s a new feature or control that would be useful for you, why not let us know in the forums? And you can get more information about Silverlight Elements here.

kick it on DotNetKicks.com

Silverlight Elements: Scheduler Control

One of the larger controls that you will find in Silverlight Elements is the scheduler. This control is based on the calendar seen in Microsoft Outlook and allows users to manage all of their appointments. It could be used by students to record their class timetable details, it could be used in the office to remind you of up comming meetings, or it could be used by anyone who just wants a personal scheduler. Today we take a tour of the main features that make the scheduler control easy to use.

View Navigation

The scheduler allows the user to view appointments that occur across a particular day, week, or month. The user can navigate between each of these views in a number of different ways. The most basic way is by using the labeled buttons at the top left of the control. These will navigate to a day, week or month that is close to what the user is currently viewing. Just below the labeled buttons is a pair of left / right navigational buttons. These allow the user to stay within the same view, but switch to the next / previous day, week or month.

Within month view you will also find buttons to the left of each week, and above each day which allow easy navigation to the appropriate views. Finally, if the user finds themself looking at a view that has no appointments to display, buttons appear on the control to navigate instantly to the next or previous appointment no matter when it occurs.

Creating appointments

There are a few different ways that a user can add an appointment to the schedule:

1. One way is to first make a selection across some number of days or time slots, and then press the “Add Appointment” button at the top right of the control.

2. Hovering the mouse over a time slot for a couple of seconds will result in a button appearing that can be used to add an appointment. After clicking the button, the user can give a name to the appointment, and then press enter or click some where else with the mouse to complete the operation.

3. Double clicking on a time slot can also be used to create appointments.

During all these different ways of creating an appointment, a dialog is displayed that allows the user to set its name, start/end time, or set up a recurrence pattern. Once an appointment has been added, the user can then change its start and end times by dragging the thumbs found at each of its ends.

Customization

Silverlight Elements comes with 5 standard styles for the scheduler control. Creating your own style allows you to customize the scheduler to meet the unique requirements of your application. You could remove features such as the “Click to add item” button, or add features such as new ways to navigate between views. We have also provided ways to control the scheduler programatically, and listen for when the user interacts with the scheduler making it easy to integrate it into your application. For example, adding an appointment can be done by going through the controls Schedule property and calling the AddItem method as follows.

Scheduler schedulerControl = new Scheduler();
schedulerControl.Schedule.AddItem(new ScheduleItem
{
  StartTime = new DateTime(2010, 4, 12, 9, 0, 0),
  EndTime = new DateTime(2010, 4, 12, 9, 30, 0),
  Name = "Kick start meeting"
});

You can also remove a particular schedule item, get a list of all the items, check the currently selected item and more. If you want to know how to make your own Scheduler style, or more information about how to use the Scheduler then you can contact us through our forums or put a comment on this post.

Download a free trial version of Silverlight Elements or try out the online demo (if you have Silverlight 3.0 installed).

Want more features in the scheduler or any of the other controls? We’d be happy to hear from you in our forums, or simply put a comment on this post.

Silverlight Elements: Custom PaletteColorPicker style

Mindscape Silverlight Elements Logo

A few days ago we released our Silverlight Elements suite of Silverlight controls. Today we look at how to create a custom style for the Silverlight PaletteColorPicker control. The PaletteColorPicker allows users to select colors from a pre-defined palette. The styles we have provided for this control are similar to the basic color picker seen in Microsoft Office. The custom style that we will create here will resemble another color picker from Microsoft Office where the colors are aranged in a hexagonal layout shown below.

The PaletteColorPicker control has a property called “Palette” which we can use to fill it with what ever colors we want. There are no limitations to how many colors we can add, and the order of the colors is compleatly up to how we want to style it. For our style, the colors will be added following the rows of hexagonal shape from left to right and top to bottom. Since the Palette property is of type ReadOnlyCollection, we need to setup the palette in code behind, and then simply give it to the control. The items we add to the palette are ColorPickerItem objects. These can have a Color and a name. The Name property is useful for putting tooltips on each of the colors, but for the purposes of this blog we will only be setting the colors.

The hexagonal structure

There are various ways that we can achieve the hexagonal arangement of the colors. One way could be to use a single ListBox control, and then set it’s ItemsPanel property to be some kind of custom canvas that provides a hexagonal layout scheme. An easier way which we will use is to split the hexagonal shape into 13 rows and let each row be a horizontal ListBox. This approach however has a small problem. Our style will be made up of 13 ListBox controls, but all the colors are in a single collection within the palette property. We want to be able to set the ItemsSource of each ListBox to be a sublist of the overall palette. This is easily achievable using the ListToSubListConverter provided in the Silverlight Elements assembly. This converts a collection into another collection based on the StartIndex and Length properties. So we can create 13 of these for our style, keeping in mind the order of the colors that we have decided for the palette property.

<elements:ListToSubListConverter x:Name="Row01" StartIndex="0" Length="7" />
<elements:ListToSubListConverter x:Name="Row02" StartIndex="7" Length="8" />
<elements:ListToSubListConverter x:Name="Row03" StartIndex="15" Length="9" />
...
<elements:ListToSubListConverter x:Name="Row12" StartIndex="112" Length="8" />
<elements:ListToSubListConverter x:Name="Row13" StartIndex="120" Length="7" />

So overall, to create the hexagonal layout we need a vertical StackPanel containing our 13 ListBox controls. Each ListBox will have their HorizontalAlignment set to Center, their Background set to Transparent, and their BorderThickness set to zero. Another important thing is to set their margin to be negative 5 along the top so that they all overlap appropriatly. The ItemsSource of each ListBox can be set using the ListToSubListConverters as follows: ItemsSource=”{Binding Palette, Converter={StaticResource Row01}, RelativeSource={RelativeSource TemplatedParent}}”

ListBoxItem style

Now that we have a way to arange all the colors in a heaxagonal manner, all we need now is to make the style for the ListBoxItems. This is quite simple and can be seen here:

<elements:BooleanToVisibilityConverter x:Key="bvc" />
<elements:ColorToSolidColorBrushConverter x:Key="ColorToSolidBrush" />
 
<Style x:Name="ColorPickerListBoxItemStyle" TargetType="ListBoxItem">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <ToggleButton elements:Click.Command="{Binding Content.SelectCommand, RelativeSource={RelativeSource TemplatedParent}}"
                  Style="{StaticResource ColorPickerToggleStyle}">
          <Grid>
            <Path Data="M 0 3 L 6 0 L 8 0 L 13 3 L 13 11 L 8 14 L 6 14 L 0 11 Z"
                  Fill="{Binding Content.Color, Converter={StaticResource ColorToSolidBrush}, RelativeSource={RelativeSource TemplatedParent}}" />
            <Border Width="12" Height="12" CornerRadius="5" VerticalAlignment="Center" HorizontalAlignment="Center"
                     Visibility="{Binding Content.IsSelected, Converter={StaticResource bvc}, RelativeSource={RelativeSource TemplatedParent}}"
                     BorderThickness="1" BorderBrush="White"
                     >
              <Border Width="10" Height="10" CornerRadius="5" BorderThickness="1" BorderBrush="Black" />
            </Border>
          </Grid>
        </ToggleButton>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Here you can see that to display the color, we are using a Path with it’s Fill property set to be a binding to Content.Color. Remember that the content of each ListBoxItem will be one of the ColorPickerItem objects from the palette. On top of the Path is a rounded Border used for showing if the color is selected or not. The visibility of this is a binding to Content.IsSelected and uses a BooleanToVisibilityConverter. The final piece to this style is the ToggleButton. This is used to raise events to the PaletteColorPicker control whenever the item has been clicked on. To do this we write: elements:Click.Command=”{Binding Content.SelectCommand, RelativeSource={RelativeSource TemplatedParent}}”. Note that ‘elements’ here is the Silverlight Elements namespace. You will also see that we have set the style of the ToggleButton. This style simply contains a ContentPresenter to display the Path and the selection border. It could also be used to provide some nice mouse-over interactivity.

And there you have it

The flexibility of the Palette property and the use of the ListToSubListConverter can allow you to create any kind of palette arangement that you can come up with. Simply changing the colors in the palette but using the same style gives you interchangable palettes for your applications allowing for a more customizable feel. Another thing to note is that even though the PaletteColorPicker provides support for showing the palette in a dropdown, they can easily be styled to show them straight in a dialog or wherever you want. All the source code for this custom style and filling the palette can be found here. Before running this sample, just include a reference to your copy of Silverlight Elements (you can grab a trail copy if you’re not yet a customer). Take a look and see what kind of PaletteColorPicker style you can come up with.

If you need further advice on how to make your own style for the PaletteColorPicker or any of the other Silverlight Elements controls, let us know using our forum, or leave a comment on this blog post.

Released: Mindscape Silverlight Elements!

Mindscape Silverlight Elements Logo

We have now released our very first Silverlight product: Silverlight Elements, a suite of controls to add a richer user experience to your silverlight applications. Along with the controls we have included 5 themes based on the look of Microsoft Office and Expression Blend for the Elements controls so that your users have a familiar look and feel while also saving you time in delivering a fantastic user experience.

Click here to download a free trial

Scheduler Control

Similar to the scheduler seen in Microsoft Outlook, the scheduler control stores appointment information and displays them nicely across 3 different viewing modes. Buttons make navigating between day, week and month view very easy. Adding appointments to the scheduler can be done in multiple ways such as double clicking on the appointment surface, or making a selection across time slots and hitting the Add Appointment button. Appointments can even be set up to follow a daily, weekly, monthly or yearly recurrence pattern. Recurring appointments can stop by a specific date, a certain number of occurence, or just keep going forever. An appointment dialog is provided to allow the user to easily create appointments by setting its title, start/end times and apply a recurrence pattern if desired.

Scheduler control in month view

Read more about the Scheduler control here.

HTML Editor

This control can generate HTML based on rich text entered by the user. The HTML Editor supports all the following text formatting:

  • Bold, Italic and Underlined
  • Font and font size
  • Foreground and background text color
  • Left, right and centre alignment
  • Ordered and unordered lists
  • Hyperlinks can be easily created, edited or removed

A default tool bar is provided for formatting selected text and adding or removing lists. Ordered lists can be numbered in different ways including numbers, letters and roman numerals. Round, square and disc bullets are also available for unordered lists.

Other features include basic copy/paste and easy caret manipulation using the mouse and various keys as in all text editors.

Html Editor

Read more about the Silverlight HTML Editor here

Multicolumn controls

The ListView control is useful for displaying tabular data in a simple and easy to read manner. Tabular information that needs to be displayed against hierarchical data is also possible using the MulticolumnTreeView. Both controls allow the user to resize and reorder the columns to view the data however they feel. Various properties make it easy to apply a different template to the cells based on the data they contain.

MulticolumnTreeView

Read more about the multicolumn controls here

CoverFlow

CoverFlow presents your application data in style! CoverFlow provides a fluid, animated user interface for selecting from lists, especially suited to rich media applications such as graphics or video. You can use it to rapidly create attractive, polished selection user interfaces.

CoverFlow

Read more about the CoverFlow control here

ColorPicker

The ColorPicker control gives users multiple ways of selecting colors. Colors can be picked from a list of standard named colors, selected from a configurable color palette, or customized using the color sliders. A seperate control called the PaletteColorPicker only displays the palette of colors in its drop down.

Read more about the ColorPicker controls here

Time Pickers

The TimePicker control allows selection of a time containing an hour and a minute part. A configurable list of suggestion times can be given to the control which appear in a dropdown box. The selected time can also be directly edited by the user. A similar control is the TimeSpanPicker for selecting a TimeSpan object. This control displays time spans nicely as a number of minutes, hours, days or weeks as appropriate.

TimeSpanPicker and TimePicker controls

Read more about the Time Picker controls here

To try out these controls you can download a trial install here, or play with the live demo (requires Silverlight 3.0)

So…. how much?

Mindscape Silverlight Elements is priced at $199 USD per developer and includes 12 months worth of updates (there will be more controls to come). There is source code is available for $499 USD (for all developers on that account). You can purchase Mindscape Silverlight Elements in our online store now.

Of course, if you’re a Mindscape Mega Pack customer, you just had Silverlight Elements added to your subscription free of charge and can download it immediately from our online store :-)

If there are any features that you would like to see in these controls, or if you have ideas for more controls that your looking for then let us know in our forum.

Silverlight Elements now available for preview

We’re pleased to announce a technical preview release of our Silverlight Elements suite, a pack of controls for Microsoft’s Silverlight Rich Internet Application platform. Silverlight is becoming an increasingly popular solution for building business applications as well as graphically rich media-oriented applications, and Silverlight Elements builds on that.

The Silverlight Elements suite includes six main controls:

CoverFlow

CoverFlow provides an animated, pseudo-3D selection control in which elements “flow” across the screen around a focal selected element. It makes an attractive alternative to conventional list controls for rich media applications, allowing users to quickly browse a gallery of images or even interactive components.

ListView and MulticolumnTreeView

Silverlight doesn’t have multicolumn controls like the ListView built in, but they’re really handy for displaying tabular data in a less heavyweight form than a full-on data grid. In addition, we know a lot of people need to be able to display tabular information against hierarchical data, so we’ve also provided a MulticolumnTreeView (or “tree list view”).

Scheduler

Time-based display is a common requirement for business applications. The Scheduler control supports displaying items in a similar way to the Outlook calendar, with options for daily, weekly and monthly summary views. Use it for appointments, bookings, task management, equipment utilisation or whatever your time-based requirement is.

RichTextEditor

The Silverlight Elements RichTextEditor supports the most common HTML editing requirements and is suitable for rich text notes, forums-type software, etc.

ColorPicker

The last control in the suite is a compact selection tool for colours. Users can choose from standard colours, including an attractive Office-style palette or a custom palette, or mix their own. There’s also a PaletteColorPicker for when you want to keep users to a specific set of “theme” colours.

Where can I get it?

Silverlight Elements is currently available in preview form to all customers. The components are currently of beta quality so please let us know when you run into bugs or if you have ideas about how things could be made easier or more convenient. The preview is free to all existing customers, so jump into the store and give it a spin!

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top