Archive for March, 2010

Silverlight Elements: Custom PaletteColorPicker style

Tagged as Silverlight, Silverlight Elements

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.

Add your comments
Author icon

Posted by Jason on 31 March 2010

Released: Mindscape Silverlight Elements!

Tagged as News, Products, Silverlight, Silverlight Elements

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.

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.

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.

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.

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.

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.

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.

Add your comments
Author icon

Posted by Jason on 29 March 2010

LightSpeed and LINQPad: the perfect partners

Tagged as LightSpeed, Products

LINQPad is a justly popular tool for trying out LINQ queries — it’s a great way to quickly check how a query will behave or just to check what’s in your database. (Actually, it’s a great way to test quick code snippets whether LINQy or otherwise.) LINQPad version 2 has just shipped, and in addition to the familiar LINQ to SQL support, it allows you to plug in other LINQ providers — such as LightSpeed.

We’re pleased to announce the immediate availability of a LightSpeed driver for LINQPad. This means you’ll be able to test LightSpeed queries using your LightSpeed domain model with all the speed and convenience of LINQPad.

And of course, because the driver uses LightSpeed, you’ll be able to use all the facilities of LightSpeed — for example, to perform Lucene-based full-text search from within LINQPad, or to include or exclude soft-deleted entities from the query.

To get the LightSpeed driver, just go into LINQPad, click Add Connection in the data sources list, choose View more drivers…, and choose the LightSpeed driver from the list. LINQPad will automatically download and install it. Once this is done, you’ll see LightSpeed in the Add Connection dialog. Select LightSpeed and click Next.

Now all you need to do is configure the connection with details of your database and the assembly containing your LightSpeed model. You’ll need to tell LINQPad the following details:

What kind of database you’re talking to (SQLite, MySQL, SQL Server, etc.)
The connection string for the database
The assembly containing the LightSpeed model (your compiled EXE or DLL)
The strong-typed unit of work class in that assembly (don’t forget the namespace!)

To save time, you can also use the Infer from Model button to extract this configuration information from your .lsmodel file. (You’ll still need to have built the DLL or EXE though.)

You can also set up LightSpeed context properties such as whether table names in the database are pluralised and whether to quote identifiers in queries. If you’re planning to use LINQPad to do ad hoc inserts and updates, you can also specify the identity method and timestamp strategy.

That’s it! You’re ready to get querying!

(If you have any trouble with the automatic download of the LightSpeed driver, you can instead download it directly from Mindscape here and install it using the Browse button on the “Choose a Driver” screen.)

You can get LINQPad here. And if you don’t already have LightSpeed, you can get the free Express edition here. And if there are any more features you’d like to see in the driver, let us know in the LightSpeed forum!