So what’s in the box?

Coverflow
Coverflow is great for getting rid of a dreary old ListBox control. It’s fun, fast and very configurable. You can adjust the way the covers sit, their spacing and more with easy to use properties. But that’s not all of course, we’ll throw in the automatic reflections free of charge as well! So the next time your users want to be able to flip through data in style consider the free Silverlight Coverflow control.

You can play with a demo of the Coverflow control here.

Book
The book control is a beautiful way to present data to users in certain situations. Pictures don’t do justice to the Book control – it has full virtualisation to make sure your app stays performing well even with thousands of pages and then there’s the stunning smooth animations when users turn the page. The really great thing about this control though is the flexibility – you’re not limited to just text data or images. Want to put a hyperlink on? or a button? or a 3D spinning teapot? We’ve got your back.

You can play with a demo of the Book control here.

Expander
Well this wee guy isn’t as sexy and alluring as the Book or Coverflow controls but he is handy in a lot more places. The expander is a great addition to your toolbox as it can be used to help declutter user interfaces by tucking away non-essential elements.

You can play with a demo of the Expander control here.

And they’re all free!

We really hope you enjoy these free controls and that you’ll see the benefits of working with Mindscape controls. We’ve put in a lot of work so that you don’t have to. We hope you can wow your coworkers and customers. And if you really do put a 3D spinning teapot in your book — you’ll wow us too!

You can visit this special page to download the controls for yourself. We’d love it if you helped spread the good word and have some twitter buttons and facebook buttons for you on the page to help — thanks!

The color palettes in both of these controls can be customized by a developer by changing the colors it displays, adding more colors and providing a custom layout. We are pleased to announce that Mindscape Silverlight Elements now comes with 41 predefined color palettes to get you started. These new color palettes display a beautiful range of colors and will be familiar to Microsoft Office users. Each and every color has also been given a name which gets displayed in a tooltip.

The color palettes can be found in the StandardPalettes class. Each palette has its own static property which has been named after the equivelent theme in Microsoft Office. For example, GrayscalePalette, ApexPalette, FlowPalette and so on. To use one of the palettes with a color picker control, you simply need to use this code:

PaletteColorPicker cp = new PaletteColorPicker();
cp.Palette = StandardPalettes.FlowPalette;

These new color palettes are available through the latest nightly build (trial version here, customers can download from their account). If there are any features or controls that you would like to see in Mindscape Silverlight Elements, then let us know by leaving a comment on this blog post or drop by our forum.

This comment has caused considerable concern in the Silverlight community. (Especially those who went into fainting fits at “Windows Phone 7″ and didn’t see that Bob Muglia went on to talk about all the other areas that Microsoft are still backing Silverlight for.) As usual with a new technology, Microsoft went into marketing overdrive with Silverlight and sold it as the solution to everything from Web development to stubborn stains. Which of course it never was. Silverlight was, and is, a great platform for certain kinds of application. If you’re building rich media apps, intranet applications or certain kinds of Internet application, then Silverlight is still in the sweet spot. But Microsoft are saying that for building Internet-facing, cross-platform Web sites with maximum reach, they’re shifting their backing to HTML5.

So what does this mean for Mindscape customers? It means the same great support and investment in Silverlight, and a continuing focus on the Silverlight sweet spots. As you’ll know, we’ve got a great suite of controls for Silverlight – we’re on the Silverlight bandwagon and have many customers delivering fantastic solutions with the help of our products. We are committed to improving our Silverlight Elements product and have a release planned shortly for a major new version that includes some of the best chart controls ever built for Silverlight. We will continue to support Silverlight Elements and to actively invest in it; in other words – it’s business as usual for us! :-)

Further to this investment, we are not ignoring Windows Phone 7. We have Windows Phone 7 hardware and our developers have been working on testing the capabilities of Silverlight on WP7. We will be releasing an update for our Silverlight controls that fully supports the Windows Phone 7 environment. This will go beyond just making sure the controls run, but making sure we ship with native themes to create an excellent experience for end users and developers alike.

In short, just as we’ve always done, we’re investing in Silverlight for the development of some rich web applications, Intranet applications and Windows Phone 7 development — exactly the areas where Microsoft recommends it.

What about HTML 5?

We’re not technology zealots. We know that every technology has its place: Silverlight, HTML 5, Flash, even ActiveX. (Well, okay, not ActiveX. But every other technology.) And we’ll always be working hard to deliver what our customers need to create the best solutions possible — using whatever technology is right for the job.

We think HTML 5 is pretty awesome — a huge step forward from what was possible in the previous generation of browsers. But the reality is that there’s going to be a big lag in adoption. (Let’s face it, it’s hard getting some people to move on from creaky old IE6.) Even ignoring consumer adoption, HTML 5 developer tooling doesn’t come close to what developers are used to on the Silverlight or .NET platforms.

Right now, we’re watching HTML 5, taking notes, kicking around ideas, planning and seeing what value we can add which would aid in the delivery of kick-ass solutions. We don’t have any news for you yet, but keep watching for announcements — HTML 5 is going to be big and we’re going to be there!

Some of the new features include:

• Legend placement improvements to make it easier to place the legend
• Logarithmic axis scale support
• Pie chart selection options (light one part, pull it out, expand all slices, etc)

And of course the new charts which, I think, are best described with visuals…

Bubble charts:

Multiple bubble series:

Stacked line area charts:

Stacked bar series:

Stacked bar series with a custom bar style:

Stacked bar series in horizontal orientation:

Scatter charts:

Multiple scatter charts:

Stacked line charts:

Spline charts (Smooths the line):

Stacked spline charts:

Stacked spine area charts:

Phew – not bad for a weekly update I don’t think! :-) We have been asked if using the charting is currently supported – absolutely. They’re not completely finished, but if you do use them and have feedback or find bugs then we’ll be there to help you out so please – dig in :-)

You can try the charts with the trial of Silverlight Elements or if you’re a customer, grab your nightly build from the store here.

What would you like to see next?

Here’s some pretty pictures:

Standard view of the book open at pages 6 & 7.

Turning a page in the book control is visually beautiful, feeling like a real book. Either drag pages over or simply click to flip fast.

Turning a page backwards. The pages are complete databindable, supporting any content you may want to show in the book.

Jason started developing this control some months ago in the evenings for fun and we loved it so much that it’s now being included in our official Silverlight control suite!

Check out the whole Silverlight Elements suite here which includes many other controls to make your applications sing and dance.

Note: The book control is in the current nightly builds so you will need to grab it from the nightly build page, or if you’re one of our much loved customers, you can grab it from your store page here.

So what’s in the box at the moment?

Bar charts:

Line charts:

Pie & doughnut charts:

Remember: You can alter and customise the look and feel of the charts to your hearts content. Axis labels, data labels, colours, background grids, absolutely everything is customisable. If you make a particularly sexy chart then let us know, we’d love to see what users are building! :-)

As we are rolling out the charting beta in the nightly builds, you can expect new features and chart types every day. In the current nightly we’re shipping a Charting QuickStart sample and XML documentation, but we’re working on more detailed samples and improved documentation, and plan to ship those over the next couple of weeks. It is however a great time to provide feedback on the charts by telling us if there’s features you’d like to see, particular chart types you’d like us to prioritise or if you find the samples are not providing enough guidance — that sort of thing.

If you’re working with Silverlight and are curious about not only charting, but what else you get with Silverlight Elements you can read more on the Silverlight Elements site.

You can grab the latest nightly build of Silverlight Elements trial edition from the nightly build page, or get the full version from your account page in the store if you’re an existing customer.

Here’s some examples of what will be possible. Note that these are early screen grabs from our simple test harness – it’s only part of the story, and we’ll have more to say in the future as we get closer to a release. Obviously charting is about much more than just the visuals so we’re working hard to ensure that developers have a great experience with the controls – databinding support through out, infinite restyling and templating ability, animation support and more. Everything you would expect from tools designed and built specifically for the platform.

A simple line series graph showing various styles for lines and automatic legend generation for the various series.

A simple bar graph with category axis support in use.

3D bar graph – customising and styling the look and feel of your charts is easy with the flexibility of styles and templating in Silverlight and WPF.

Data labels can be displayed to make values more clear for the consumer. Data labels can be trigger to display on mouse over, all at once or however you would like. The display style is completely customisable.

A simple pie chart with lighting effects applied.

Doughnut charts are supported. They’re also delicious when consumed fresh from the bakery with sugar on top.

This marks the end of a short glimpse of what’s under development for the WPF Elements and Silverlight Elements products. We appreciate any feedback as it will directly impact the product development. As mentioned earlier, these are alpha screenshots and you can customise the look and feel considerably more than we have shown here (as they’re all being rendered from our test harness the legend, title, etc is all displayed in the same place with the same colours – this isn’t necessary! :-)

So when can I get my hands on this?

If you’re a Silverlight Elements customer, we’ll be rolling out the charts into the nightly builds soon. We’ve elected to start with supporting Silverlight as the Silverlight API is far more primitive than WPF and it will make releasing the WPF version shortly after we finalise the Silverlight version much easier. We will be posting updates to the blog in future when parts become available to play with (you can subscribe to the blog here if you use an RSS reader).

C# String format for double

Most format strings for double values are comprised of some numbers or symbols followed by a decimal point followed by some more numbers or symbols. The most common string format for formatting a double value is to specify the number of decimal places. As seen in the examples below, the number of following zeros define the exact number of decimal places to display. The number of “#” symbols can be used to define a maximum number of decimal places while only displaying digits if they are not zero. The last example below shows how “0.0#” can be used to specify that at least one decimal place is always shown, but only a maximum of two decimal places.

// exactly two decimal places
String.Format("{0:0.00}", 123.4567);      // "123.46"
String.Format("{0:0.00}", 123.4);         // "123.40"
String.Format("{0:0.00}", 123.0);         // "123.00"
 
// at most two decimal places
String.Format("{0:0.##}", 123.4567);      // "123.46"
String.Format("{0:0.##}", 123.4);         // "123.4"
String.Format("{0:0.##}", 123.0);         // "123"
 
// one or two decimal places
String.Format("{0:0.0#}", 123.4567);      // "123.46"
String.Format("{0:0.0#}", 123.4);         // "123.4"
String.Format("{0:0.0#}", 123.0);         // "123.0"

C# String format for DateTime

Format strings for DateTime objects are built up as a sequence of grouped letters. Each letter targets a particular part of the DateTime such as the year, day or hour. The number of letters in each group defines how that part should be formatted. Below is a list of some of the letters and the results of applying them to a DateTime.

DateTime dt = new DateTime(2008, 3, 9, 16, 5, 7, 0);
 
String.Format("{0:y yy yyy yyyy}", dt);  // "8 08 008 2008"      year
String.Format("{0:M MM MMM MMMM}", dt);  // "3 03 Mar March"     month
String.Format("{0:d dd ddd dddd}", dt);  // "9 09 Sun Sunday"    day
String.Format("{0:h hh H HH}",     dt);  // "4 04 16 16"         hour 12/24
String.Format("{0:m mm}",          dt);  // "5 05"               minute
String.Format("{0:s ss}",          dt);  // "7 07"               second
String.Format("{0:t tt}",          dt);  // "P PM"               AM or PM

By using any combination of these letter groups within a format string, you can display a DateTime in any possible way you need. Between each letter group, you may also want to include a symbol such as a comma, colon or slash. The slash and colon symbols are special characters known as the date separator and time separator respectively. One thing to keep in mind is that the date and time separator characters may be displayed differently depending on the current culture of the application. Month and day names will also be displayed in different languages based on the culture.

// DateTime format examples
 
String.Format("{0:MM/dd/yy}", dt);            // "03/09/08"
String.Format("{0:dddd, MMMM d, yyyy}", dt);  // "Sunday, March 9, 2008"
String.Format("{0:d/M/yyyy HH:mm:ss}", dt);   // "9/3/2008 16:05:07"

Format strings in XAML

If you ever come across a situation where you need to set a property of an object in XAML to be a format string, you may notice a small problem. Format strings such as the ones described in this blog post start and end with the curly bracket symbols. So the following code will fail to compile because the curly bracket is a special character which XAML will interpret in its own way rather than using it as a string.

<MyFormattingObject FormatString="{0:0.0}" />

To get around this issue, all we need to do is place an empty pair of curly brackets before the format string to tell XAML to interpret it as a string value.

<MyFormattingObject FormatString="{}{0:0.0}" />

More information

For a more extensive list of format string tips and tricks, you can follow this link to find DateTime formats, and check here to find string formats for doubles.

The first thing to do when making control templates for Silverlight is to include the following namespace reference at the top of the xaml file that will contain the templates.

xmlns:vsm=”clr-namespace:System.Windows;assembly=System.Windows”

Now, lets look at a very simple example of a style that can be applied to a Silverlight button.

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Grid>
            <Border Background="{StaticResource ButtonBackground}"
                    BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}"
                    BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
            <Border Name="MouseOverBorder" Background="{StaticResource MouseOverButtonBackground}"
                    BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}"
                    BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" />
            <Border Name="MousePressedBorder" Background="{StaticResource PressedButtonBackground}"
                    BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}"
                    BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" />
            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5,0,5,0" />
            <vsm:VisualStateManager.VisualStateGroups>
              <vsm:VisualStateGroup x:Name="CommonStates">
                <vsm:VisualState x:Name="Normal" />
                <vsm:VisualState x:Name="MouseOver">
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:00.200" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverBorder" To="1" />
                  </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Pressed">
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:00.000" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MousePressedBorder" To="1" />
                  </Storyboard>
                </vsm:VisualState>
              </vsm:VisualStateGroup>
            </vsm:VisualStateManager.VisualStateGroups>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

This style provides interaction visuals for the mouse over and mouse pressed actions of a button. Here you will see that the root element of the control template is a Grid. Within this grid are 3 Border objects. Each Border corresponds to one of the button states and have different background brushes. The first border defines the neutral look of the button and the remaining ones have zero opacity making them invisible. Below the Borders and the ContentPresenter are some lines of code that are using the vsm namespace. The first tag is the VisualStateManager.VisualStateGroups. Within this are the VisualStateGroups containing the VisualStates that we need. The content of a VisualState is a Storyboard object which can contain any number of various animations. The most common animation to use here is the DoubleAnimation as seen in the above style. The double animations here are changing the opacity of the appropriate Border object to 1. This makes the border visible and covers up the neutral border, thus changing the appearance of the button.

Other animations that are useful for Silverlight control templates are ColorAnimation and ObjectAnimation. ColorAnimation is an alternative to using a DoubleAnimation when all you need to do is change the color of something. Though, if your working with gradient paints, DoubleAnimation is much easier. The ObjectAnimation can be used to change the value of any property. This is useful for various tasks such as changing the visibility of the popup within a ComboBox template. Changing the duration property of any of these animations will provide animated transitions from one visual to another as the control changes state.

Other things to notice in the above style is that the ‘Normal’ state is included even though it doesn’t contain any animations. There is a difference between including an empty VisualState, and not including the VisualState at all. In this case, we need to include the ‘Normal’ state to allow the button to return to normal when the mouse leaves. Also, it doesn’t matter if you include the visual state groups before or after the content of the grid. This just depends on your personal preference.

If you need any advice with creating control templates for any of the controls in our Silverlight Elements pack, then let us know and we’ll be there to help.

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.

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.